An SPC study: control, range, capability

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

<div id="app"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid, createStat } 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/react.esm.min.js';
  import { createChart } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/charts.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, createGrid });

  const 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 } },
  ];

  const rows = [/* one process over time, drifting up after the thirtieth reading */];

  function App() {
    const gridRef = React.useRef(null);

    React.useEffect(() => {
      const grid = gridRef.current.grid;

      // 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.
      createStat({ grid, container: '#cpk', 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' });
      createStat({ grid, container: '#mean', title: 'Mean bore', of: 'bore', fn: 'avg' });
      createStat({ grid, container: '#count', 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: '#control', type: 'control', y: 'bore', baseline: 30, rules: 'nelson',
        title: 'Control chart, limits fixed on the first 30 readings' });
      createChart({ grid, container: '#mr', type: 'movingRange', y: 'bore', title: 'Moving range' });
      createChart({ grid, container: '#cap', type: 'capability', y: 'bore', title: 'Capability against the tolerance' });
    }, []);

    return (
      <>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px' }}>
          <div id="cpk" />
          <div id="mean" />
          <div id="count" />
        </div>
        <div id="control" style={{ height: '220px', marginTop: '14px' }} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginTop: '14px' }}>
          <div id="mr" style={{ height: '200px' }} />
          <div id="cap" style={{ height: '200px' }} />
        </div>
        <LatticeGrid
          ref={gridRef}
          rowKey="id"
          toolPanel={{ side: 'left', panels: ['columns', 'statistics'] }}
          columns={columns}
          rows={rows}
          style={{ height: '320px', marginTop: '14px' }}
        />
      </>
    );
  }

  createRoot(document.getElementById('app')).render(<App />);
</script>