An SPC study: control, range, capability: JavaScript Data Grid Demo

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">
<script src="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.js"></script>

<div id="tiles" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px"></div>
<div id="control" style="height: 220px; margin-top: 14px"></div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px">
  <div id="mr" style="height: 200px"></div>
  <div id="cap" style="height: 200px"></div>
</div>
<div id="grid" style="height: 320px; margin-top: 14px"></div>

<script type="module">
  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';

  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    toolPanel: { side: 'left', panels: ['columns', 'statistics'] },
    columns: [
      { field: 'n', title: '#', type: 'number', layout: { width: 80 } },
      // The spec declares the tolerance; capability and the control limits read it.
      { field: 'bore', title: 'Bore', type: 'millimetres', spec: { lower: 9.95, upper: 10.05, target: 10 } },
    ],
    rows,  // one process over time, drifting up after the thirtieth reading
  });

  // Three figures read from the live grid: Cpk against the tolerance, the
  // mean bore, and the count. baseline fixes the control limits on the first
  // thirty readings, so the later drift breaks a rule.
  LatticeGrid.createStat({ grid, container: document.getElementById('tiles').appendChild(document.createElement('div')), title: 'Cpk',
    value: (g) => g.statistics.capability('bore', { rules: 'nelson', baseline: 30 })?.cpk,
    goodWhen: 'up', baseline: 1.33, decimals: 2, footer: '1.33 is the usual floor' });
  LatticeGrid.createStat({ grid, container: document.getElementById('tiles').appendChild(document.createElement('div')), title: 'Mean bore', of: 'bore', fn: 'avg' });
  LatticeGrid.createStat({ grid, container: document.getElementById('tiles').appendChild(document.createElement('div')), title: 'Readings', fn: 'count', footer: 'the first 30 set the limits' });

  // Control, moving range and capability, all from the one declared tolerance.
  createChart({ grid, container: document.getElementById('control'), type: 'control', y: 'bore', baseline: 30, rules: 'nelson',
    title: 'Control chart, limits fixed on the first 30 readings' });
  createChart({ grid, container: document.getElementById('mr'), type: 'movingRange', y: 'bore', title: 'Moving range' });
  createChart({ grid, container: document.getElementById('cap'), type: 'capability', y: 'bore', title: 'Capability against the tolerance' });
</script>