demo D281

Flag the readings that do not fit in ESM

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 ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.

The configuration

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

<div id="grid" style="height: 440px"></div>

<script type="module">
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.esm.min.js';

  const grid = createGrid(document.getElementById('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. Signed, so a spike and a
      // dip read apart; the flag marks the ones that sit too far from the rest.
      { 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
  });
</script>