Model outputs

Anomaly Heatmap <smart-anomaly-heatmap>

AnomalyHeatmap displays anomaly scores as a heatmap with one row per tag or asset and one column per time interval.

<smart-anomaly-heatmap> · 13 properties, 4 methods, 2 events · source/modules/smart.anomalyheatmap.js

Usage in React

The React wrapper is the AnomalyHeatmap component: every property is a prop, every event a prop named on<Event> that receives the CustomEvent, and the methods are called on the element through a ref.

import { AnomalyHeatmap } from 'smart-industrial/react/anomalyheatmap';

const ref = useRef<AnomalyHeatmap>(null);

<AnomalyHeatmap ref={ref} timeSpan={42}
    onSelectionChange={(event: CustomEvent) => console.log(event.detail)} />

// methods are called on the wrapper the ref holds, which calls the element
ref.current?.push({});

Properties

Prop	Type, default	Description
series	array	Sets or retrieves the rows as [{ id, label }] or as plain ids. The id is the value a sample carries in its series field. Assign a new array to update the component.
data	array	Sets or retrieves the samples as [{ series, timestamp, score }], where score is between 0 and 1. A cell shows the highest score of the samples in its interval; a sample without a series or a score is dropped. Assigning the property replaces the samples; push adds to them.
timeSpan	number 86400000	Sets or retrieves the width of the time axis, in milliseconds. A day by default.
bucket	number 900000	Sets or retrieves one column's width in time, in milliseconds. Fifteen minutes by default. The column count is timeSpan divided by bucket.
end	number?	Sets or retrieves the right edge of the time axis as a timestamp; the columns cover the time span up to it. null follows the data: the axis ends at the end of the interval that contains the newest sample, or at the current time when there are no samples, aligned to an interval boundary.
maxClockSkew	number? 300000	Sets or retrieves how far ahead of this computer's clock, in milliseconds, a pushed sample may be stamped. A sample stamped later than that and more than one interval after the newest sample held is ignored: push returns false and a warning is written to the console once per series. Without it, one sample from a device whose clock is a year out - or seconds read as milliseconds - moved the axis to that time and dropped every real sample off it. A feed that runs ahead of the clock one interval at a time, such as a simulation or a replay, is still followed. null takes every timestamp as given. Samples assigned through data are taken as given.
thresholds	object {"advisory":0.5,"warning":0.7,"critic…	Sets or retrieves the start of each band as { advisory, warning, critical }. A score below the advisory threshold is drawn in a neutral colour whose intensity follows the score; from each threshold up, a cell takes the alarm colour of its band.
selected	object?	Sets or retrieves the selected cell, as { series, timestamp }, or null. Focusing or clicking a cell selects it.
showValues	boolean false	Determines whether each cell prints its score. Off by default: at the default cell size the number does not fit, and the colour and the label carry it.
showLegend	boolean true	Determines whether the legend of bands is shown under the grid.
showTimeAxis	boolean true	Determines whether the time labels are shown along the top.
precisionDigits	number 2	Sets or retrieves the decimals scores are shown with.
label	string	Sets or retrieves a name for the heatmap, spoken as part of the grid's label.

Methods

Method	Description
push(sample: object): boolean	Adds one sample and redraws the cell it lands in; the grid is rebuilt only when the axis moves on to a new interval, so a unit of fifty series over a day takes a sample in a few milliseconds. A sample without a timestamp is stamped with the current time. Returns false when the sample has no series or no score, or is stamped too far ahead of the clock (see maxClockSkew). sample object { series, timestamp, score }
scoreAt(series: string, time: number): number	Returns the worst score in the bucket that holds a time, for a series, or NaN when nothing landed there. series string The series id. time number A timestamp.
severityOf(score: number): string	Returns the band a score falls in: advisory, warning, critical, or normal below the first threshold. score number A score, 0 to 1.
hotspots(severity?: string): any[]	Returns the cells at or above a severity, highest score first, as [{ series, timestamp, score, severity }]. severity string advisory, warning or critical. advisory when omitted.

Events

The data of an event is in event.detail. The anomaly heatmap sets selected when the operator clicks or focuses a cell and then raises selectionChange. cellClick reports a cell activated by a click, Enter or Space.

Event	Description and detail
onSelectionChange selectionChange	This event is triggered when a cell is selected, by focus or by a click. series string The series id. timestamp number The start of the cell's interval. score number The cell's score, or NaN when it has none. severity string The cell's band: normal, advisory, warning or critical.
onCellClick cellClick	This event is triggered when a cell is activated, clicked, or Enter or Space pressed on it. A host opens the trend behind the cell here, or asks the operator whether the model was right. series string The series id. timestamp number The start of the cell's interval. score number The cell's score, or NaN when it has none. severity string The cell's band: normal, advisory, warning or critical.

CSS variables

The component declares 5 CSS variables; the CSS page shows how to set them.

--smart-heatmap-cell-size --smart-heatmap-row-height --smart-heatmap-series-width --smart-heatmap-gap --smart-heatmap-wash-color