A trading book

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.min.css">
<style>
  #grid > div { height: 540px; }
</style>
<div id="grid"></div>

<script type="module">
  import * as Vue from 'https://esm.sh/vue@3';
  import { createGrid, registerUnitSystem, defineUnit, createUnitType } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/vue.esm.min.js';

  const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });

  // A money unit family of your own, registered once at startup. Notional reads
  // in whichever unit fits, so a large book shows k£ and M£ rather than a wall
  // of digits.
  registerUnitSystem('gbp', [
    defineUnit('£', 1, ['gbp', 'pound', 'pounds']),
    defineUnit('k£', 1e3, [], { prefix: 'k' }),
    defineUnit('M£', 1e6, [], { prefix: 'M' }),
  ]);

  Vue.createApp({
    components: { LatticeGrid },
    data() {
      return {
        config: {
          rowKey: 'id',
          // A brief flash on any cell that changes, so a written price is seen landing.
          highlightOnChange: { duration: 500 },
          dataTypes: {
            money: createUnitType({ system: 'gbp', unit: '£', placement: 'prefix', decimals: 2 }),
            moneyAuto: createUnitType({ system: 'gbp', unit: '£', placement: 'prefix', display: 'auto' }),
          },
          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 columns read another column and report on it: the tick since
            // the last price, the rank by P&L, how far that rank has moved, and
            // each row's share of the total notional.
            { 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 } },
            // A running total down the P&L column.
            { 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,  // one row per instrument: instrument, desk, notional, price, open, spread, pnl
        },
      };
    },
    mounted() {
      // A price walk, so the delta, rank and running total are seen moving.
      // Point your own feed at grid.rows.apply the same way.
      const grid = this.$refs.grid.grid();
      this.timer = setInterval(() => {
        if (document.hidden) return;
        const update = [];
        for (let n = 0; n < 40; n++) {
          const row = rows[Math.floor(Math.random() * rows.length)];
          const next = Math.round((row.price + (row.open - row.price) * 0.06 + row.price * (Math.random() - 0.5) * 0.01) * 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.apply({ update });
      }, 200);
    },
    unmounted() {
      clearInterval(this.timer);
    },
    template: '<lattice-grid ref="grid" v-bind="config" />',
  }).mount('#grid');
</script>