A production line

<script>
  import { createGrid, createStat } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/lattice-grid.esm.min.js';
  import createLatticeAction from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/svelte.esm.min.js';

  const lattice = createLatticeAction({ createGrid });

  // The line captured as it is created, so the profile, exceptions and tile can
  // name it.
  let lineGrid;
  let tileEl;

  const lineConfig = {
    rowKey: 'id', toolPanel: { side: 'left', panels: ['filters', 'columns'] },
    columns: [
      { field: 'line', title: 'Line', filter: { type: 'set' } },
      // The spec is the tolerance; the Cpk tile reads it.
      { field: 'bore', title: 'Bore', type: 'millimetres', spec: { lower: 19.96, upper: 20.04, target: 20 } },
      { field: 'temp', title: 'Coolant', type: 'celsius' }, { field: 'cycle', title: 'Cycle', type: 'seconds' },
    ],
    rows,  // measured parts
    // onGrid hands over the live grid the moment it is created. Cpk against the
    // column's declared spec, read through a value function.
    onGrid: (grid) => {
      lineGrid = grid;
      createStat({ grid, container: tileEl, title: 'Cpk',
        value: (g) => g.statistics.capability('bore')?.cpk, goodWhen: 'up', baseline: 1.33, decimals: 2 });
    },
  };

  // profile transposes: one row per column, with count, mean, sd, min, max and
  // outliers as the columns. Every other derived shape emits one row per group.
  // The getter defers the read of the source to when this grid is created.
  const profileConfig = {
    autoHeight: true,
    source: { mode: 'derived', get from() { return lineGrid; }, profile: ['bore', 'temp', 'cycle'], refresh: 'live' },
    columns: [
      { field: 'column', title: 'Measure' }, { field: 'rows', title: 'n', type: 'number' },
      { field: 'mean', title: 'Mean', type: 'number', format: { maximumFractionDigits: 3 } },
      { field: 'stddev', title: 'σ', type: 'number', format: { maximumFractionDigits: 4 } },
      { field: 'outliers', title: 'Outliers', type: 'number' },
    ],
  };

  // where with no groupBy passes real rows through: the parts outside tolerance.
  const outOfToleranceConfig = {
    autoHeight: true,
    source: { mode: 'derived', get from() { return lineGrid; }, follow: 'filtered', refresh: 'live', where: (r) => Math.abs(r.bore - 20) > 0.04 },
    columns: [{ field: 'id', title: 'Part' }, { field: 'line', title: 'Line' }, { field: 'bore', title: 'Bore', type: 'millimetres' }],
  };
</script>

<svelte:head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/lattice-grid.min.css">
</svelte:head>

<div use:lattice={lineConfig} style="height: 320px"></div>
<div use:lattice={profileConfig} style="margin-top: 16px"></div>
<div use:lattice={outOfToleranceConfig} style="margin-top: 16px"></div>
<div bind:this={tileEl} style="margin-top: 16px"></div>