Chaining, three levels deep

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="tiles" style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px"></div>
<div id="book" style="height:320px"></div>
<div style="display:flex;gap:16px;margin-top:16px">
  <div id="byRep" style="flex:1"></div>
  <div id="top3" style="flex:1"></div>
  <div id="profile" style="flex:1"></div>
</div>

<script>
  const USD = { style: 'currency', currency: 'USD', maximumFractionDigits: 0 };

  // Level 0 - the book. A plain grid, filterable, over the sales rows.
  const book = LatticeGrid.createGrid(document.getElementById('book'), {
    rowKey: 'id',
    toolPanel: { side: 'left', panels: ['filters', 'columns'] },
    columns: [
      { field: 'rep', title: 'Rep' },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'amount', title: 'Deal', type: 'number', format: USD, total: 'sum' },
    ],
    rows,  // e.g. [{ id: 'S0', rep: 'Ana Bright', region: 'EMEA', amount: 2140 }, …]
  });

  // Level 1 - revenue per rep, DERIVED from the book and following its filter.
  // No rows and no rowKey: the group value is the identity. refresh: 'live'
  // re-derives on the next frame when the book is filtered.
  const byRep = LatticeGrid.createGrid(document.getElementById('byRep'), {
    autoHeight: true,
    source: { mode: 'derived', from: book, follow: 'filtered', refresh: 'live', groupBy: 'rep',
      select: { revenue: { of: 'amount', fn: 'sum' }, deals: { fn: 'count' } },
      sort: [{ col: 'revenue', dir: 'desc' }] },
    columns: [
      { field: 'rep', title: 'Rep' },
      { field: 'revenue', title: 'Revenue', type: 'number', format: USD },
      { field: 'deals', title: 'Deals', type: 'number' },
    ],
  });

  // Level 2 - derived from byRep, not from the book. The chain composes.
  const top3 = LatticeGrid.createGrid(document.getElementById('top3'), {
    autoHeight: true,
    source: { mode: 'derived', from: byRep, refresh: 'live', sort: [{ col: 'revenue', dir: 'desc' }], limit: 3 },
    columns: [
      { field: 'rep', title: 'Rep' },
      { field: 'revenue', title: 'Revenue', type: 'number', format: USD },
    ],
  });

  // Level 2 - the profile transpose: one row of stats over byRep's revenues.
  const profile = LatticeGrid.createGrid(document.getElementById('profile'), {
    autoHeight: true,
    source: { mode: 'derived', from: byRep, profile: ['revenue'], refresh: 'live' },
    columns: [
      { field: 'column', title: 'Measure' },
      { field: 'mean', title: 'Mean', type: 'number', format: { maximumFractionDigits: 0 } },
      { field: 'stddev', title: 'σ', type: 'number', format: { maximumFractionDigits: 0 } },
      { field: 'min', title: 'Weakest', type: 'number', format: { maximumFractionDigits: 0 } },
      { field: 'max', title: 'Strongest', type: 'number', format: { maximumFractionDigits: 0 } },
    ],
  });

  // A tile is one reduced figure over a grid. These read byRep (level 1). The
  // concentration is a Gini coefficient, a ratio, so it renders 0.34 rather than
  // borrowing the currency format; show: 'rep' turns max into an argmax.
  const tile = () => { const d = document.createElement('div'); document.getElementById('tiles').append(d); return d; };
  LatticeGrid.createStat({ grid: byRep, container: tile(), title: 'Revenue concentration', of: 'revenue', fn: 'gini', goodWhen: 'down', footer: '0 = even, 1 = one rep has it all' });
  LatticeGrid.createStat({ grid: byRep, container: tile(), title: 'Best rep', of: 'revenue', fn: 'max', show: 'rep' });
  LatticeGrid.createStat({ grid: byRep, container: tile(), title: 'Weakest rep', of: 'revenue', fn: 'min', show: 'rep' });
  LatticeGrid.createStat({ grid: byRep, container: tile(), title: 'Spread across reps', of: 'revenue', fn: 'stddev' });
  LatticeGrid.createStat({ grid: byRep, container: tile(), title: 'Reps selling', fn: 'count' });
</script>