A production line

<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="batch" style="height:320px"></div>
<div id="profile" style="margin-top:16px"></div>

<script>
  const line = LatticeGrid.createGrid(document.getElementById('batch'), {
    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
  });

  // 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.
  LatticeGrid.createGrid(document.getElementById('profile'), {
    autoHeight: true,
    source: { mode: 'derived', from: line, 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 outOfTolerance = LatticeGrid.createGrid(document.getElementById('oot'), {
    autoHeight: true,
    source: { mode: 'derived', from: line, 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' }],
  });

  // Cpk against the column's declared spec, read through a value function.
  const tile = () => document.body.appendChild(document.createElement('div'));
  LatticeGrid.createStat({ grid: line, container: tile(), title: 'Cpk',
    value: (g) => g.statistics.capability('bore')?.cpk, goodWhen: 'up', baseline: 1.33, decimals: 2 });
</script>