A production line

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

const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });

const lineColumns = [
  { 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' },
];
const profileColumns = [
  { field: 'column', title: 'Measure' },
  { field: 'rows', title: 'n', type: 'number' },
  { field: 'mean', title: 'Mean', type: 'number', format: { maximumFractionDigits: 3 } },
  { field: 'stddev', title: 'Spread', type: 'number', format: { maximumFractionDigits: 4 } },
  { field: 'outliers', title: 'Outliers', type: 'number' },
];
const ootColumns = [
  { field: 'id', title: 'Part' },
  { field: 'line', title: 'Line' },
  { field: 'bore', title: 'Bore', type: 'millimetres' },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, LatticeGridComponent],
  template:
    '<lattice-grid #line [config]="lineGrid" style="display:block;height:320px"></lattice-grid>' +
    '<div #tiles style="margin:16px 0"></div>' +
    '<lattice-grid *ngIf="profile" [config]="profile" style="display:block;margin-top:16px"></lattice-grid>' +
    '<lattice-grid *ngIf="oot" [config]="oot" style="display:block;margin-top:16px"></lattice-grid>',
})
export class AppComponent implements AfterViewInit {
  @ViewChild('line') lineRef!: LatticeGridComponent;
  @ViewChild('tiles') tilesEl!: ng.ElementRef<HTMLElement>;
  profile: any = null;
  oot: any = null;

  lineGrid = { rowKey: 'id', toolPanel: { side: 'left', panels: ['filters', 'columns'] }, columns: lineColumns, rows: [/* measured parts */] };

  ngAfterViewInit() {
    const line = this.lineRef.grid;
    // 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.
    this.profile = { autoHeight: true, columns: profileColumns, source: { mode: 'derived', from: line, profile: ['bore', 'temp', 'cycle'], refresh: 'live' } };
    // where with no groupBy passes real rows through: the parts outside tolerance.
    this.oot = { autoHeight: true, columns: ootColumns, source: { mode: 'derived', from: line, follow: 'filtered', refresh: 'live', where: (r: any) => Math.abs(r.bore - 20) > 0.04 } };
    // Cpk against the column's declared spec, read through a value function.
    const tile = this.tilesEl.nativeElement.appendChild(document.createElement('div'));
    createStat({ grid: line, container: tile, title: 'Cpk',
      value: (g: any) => g.statistics.capability('bore')?.cpk, goodWhen: 'up', baseline: 1.33, decimals: 2 });
  }
}

bootstrapApplication(AppComponent);