An SPC study: control, range, capability

import * as ng from '@angular/core';
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid, createStat } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, 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 */];



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template:
    '<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:12px">' +
    '<div id="cpk"></div>' +
    '<div id="mean"></div>' +
    '<div id="count"></div>' +
    '</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>' +
    '<lattice-grid [config]="grid" style="display:block;height:320px;margin-top:14px"></lattice-grid>',
})
export class AppComponent implements AfterViewInit {
  @ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;

  grid = {
    rowKey: 'id',
    toolPanel: { side: 'left', panels: ['columns', 'statistics'] },
    columns: columns,
    rows: rows,
  };

  ngAfterViewInit() {
    const grid = this.gridRef.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' });
  }
}

bootstrapApplication(AppComponent);