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 TypeScript
The package ships its definitions: AnomalyHeatmap is the element type and AnomalyHeatmapProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-anomaly-heatmap') is typed as AnomalyHeatmap.
import { AnomalyHeatmap, AnomalyHeatmapProperties } from 'smart-industrial/source/typescript/smart.industrial';
const anomalyHeatmap = document.querySelector('smart-anomaly-heatmap') as AnomalyHeatmap;
anomalyHeatmap.timeSpan = 42;
anomalyHeatmap.addEventListener('selectionChange', (event: CustomEvent) => console.log(event.detail));
anomalyHeatmap.push({});
Properties
| Property | 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 | Sets or retrieves the width of the time axis, in milliseconds. A day by default. |
bucket | number | 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? | 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 | 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 | 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 | Determines whether the legend of bands is shown under the grid. |
showTimeAxis | boolean | Determines whether the time labels are shown along the top. |
precisionDigits | number | 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 |
|---|---|
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. |
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