demo D281

Flag the readings that do not fit in Angular

A column that marks the outliers in a series, scored by a robust measure a single spike cannot skew, with a chip that counts them and filters the grid to exactly those rows

shadow: { kind: 'anomalyFlag' } · anomalySummary

This grid marks the outliers in a series with a column scored by a robust measure a single spike cannot skew, and a chip that counts them and filters the grid to exactly those rows. It surfaces the readings that do not fit and takes you straight to them.

Building…

Loading a live grid…

This is the Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.

The configuration

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:440px"></lattice-grid>',
})
export class AppComponent {
  grid = {
    rowKey: 'id',
    // The toolbar chip counts the flagged rows; click it to filter to them.
    anomalySummary: { label: 'Anomalies' },
    columns: [
      { field: 'day', title: 'Day', type: 'number', layout: { width: 80, pin: 'start' } },
      { field: 'value', title: 'Reading', type: 'number', total: 'median', layout: { flex: 1, min: 120 } },
      // The score is built on the median and MAD, so a single wild reading
      // cannot inflate the spread and hide the others.
      { id: 'score', title: 'Anomaly score', shadow: { of: 'value', kind: 'anomalyScore' }, type: 'number', format: { decimals: 2, signed: true }, layout: { width: 150 } },
      { id: 'flag', title: 'Anomaly', shadow: { of: 'value', kind: 'anomalyFlag' }, layout: { width: 120 } },
    ],
    rows: [/* one row a day: day, value */],
  };
}

bootstrapApplication(AppComponent, {
  providers: [provideLattice({ createGrid })],
});