A trading book in Svelte

<script>
  import { createGrid, registerUnitSystem, defineUnit, createUnitType } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import createLatticeAction from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/svelte.esm.min.js';

  const lattice = createLatticeAction({ createGrid });

  // A money unit family: the pound, with k£ and M£ on the auto ladder.
  registerUnitSystem('gbp', [
    defineUnit('£',  1,   ['gbp']),
    defineUnit('k£', 1e3, [], { prefix: 'k' }),
    defineUnit('M£', 1e6, [], { prefix: 'M' }),
  ]);
  const money     = createUnitType({ system: 'gbp', unit: '£', placement: 'prefix', decimals: 2 });
  const moneyAuto = createUnitType({ system: 'gbp', unit: '£', placement: 'prefix', display: 'auto' });

  const config = {
    rowKey: 'id',
    highlightOnChange: { duration: 500 },
    dataTypes: { money, moneyAuto },
    toolPanel: { side: 'left', panels: ['columns', 'filters', 'statistics'], exportName: 'book' },
    columns: [
      { field: 'instrument', title: 'Instrument', layout: { pin: 'start', width: 120 } },
      { field: 'desk', title: 'Desk', filter: { type: 'set' }, layout: { width: 110 } },
      { field: 'notional', title: 'Notional', type: 'moneyAuto', total: 'sum', layout: { width: 130 } },
      { field: 'price', title: 'Price', type: 'money', layout: { width: 120 } },
      { field: 'spread', title: 'Spread', type: 'number', format: { decimals: 1, suffix: ' bp' }, total: 'median', layout: { width: 120 } },
      { field: 'pnl', title: 'P&L', type: 'money', total: 'sum', layout: { width: 130 } },
      // Shadow and running columns, maintained by the grid.
      { id: 'moved', title: 'Change', type: 'number', shadow: { of: 'price', kind: 'delta' }, format: { decimals: 4, signed: true }, layout: { width: 120 } },
      { id: 'rank', title: 'Rank', type: 'number', shadow: { of: 'pnl', kind: 'rank' }, layout: { width: 90 } },
      { id: 'climb', title: 'Moved', type: 'number', shadow: { of: 'pnl', kind: 'rankChange' }, format: { signed: true }, layout: { width: 110 } },
      { id: 'share', title: 'Share %', type: 'number', shadow: { of: 'notional', kind: 'shareOfTotal' }, format: { style: 'percent', decimals: 1 }, layout: { width: 110 } },
      { id: 'cum', title: 'Cum. P&L', type: 'money', running: { of: 'pnl', kind: 'total' }, layout: { width: 140 } },
    ],
    formatting: {
      pnl: [
        { id: 'pnl-neg', when: { op: 'lt', value: 0 }, style: { color: '#a4262c' } },
        { id: 'pnl-top', when: { op: 'topPercent', value: 10 }, style: { background: '#e8f4ed' } },
      ],
      spread: [{ id: 'spread-out', when: { op: 'outlier' }, style: { background: '#fbeceb' } }],
    },
    state: { sort: [{ col: 'climb', dir: 'desc' }] },
    rows,  // trading book records
    // onGrid hands over the live grid the moment it is created. A quote feed:
    // a mean-reverting walk keeps price near where it opened rather than
    // drifting off in one direction, so Price, P&L and the shadow columns
    // that read them move on the page.
    onGrid: (grid) => {
      setInterval(() => {
        if (document.hidden) return;
        const update = [];
        for (let n = 0; n < 40; n++) {
          const row = rows[Math.floor(Math.random() * rows.length)];
          if (!row) continue;
          const drift = (row.open - row.price) * 0.06;
          const shock = row.price * (Math.random() - 0.5) * 0.01;
          const next = Math.round((row.price + drift + shock) * 1e4) / 1e4;
          row.price = next;
          row.pnl = Math.round((next / row.open - 1) * row.notional);
          update.push({ id: row.id, price: next, pnl: row.pnl });
        }
        grid.rows.queue({ update });
      }, 120);
    },
  };
</script>

<svelte:head>
  <link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">
</svelte:head>

<div use:lattice={config} style="height: 520px"></div>