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.

JavaScriptTypeScriptAngularReactVueBlazor

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

Usage in Angular

The Angular wrapper is AnomalyHeatmapComponent from AnomalyHeatmapModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.

import { AnomalyHeatmapModule, AnomalyHeatmapComponent } from 'smart-industrial/angular/anomalyheatmap';

<smart-anomaly-heatmap #anomalyHeatmap [timeSpan]="42"
    (onSelectionChange)="onSelectionChange($event)"></smart-anomaly-heatmap>

@ViewChild('anomalyHeatmap', { read: AnomalyHeatmapComponent }) anomalyHeatmap!: AnomalyHeatmapComponent;
// methods are called on the component reference; this one returns a Promise
const result = await this.anomalyHeatmap.push({});

Properties

InputType, defaultDescription
[series]
series		arraySets 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]
data		arraySets 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]
timeSpan		number
86400000		Sets or retrieves the width of the time axis, in milliseconds. A day by default.
[bucket]
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]
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]
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]
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]
selected		object?Sets or retrieves the selected cell, as { series, timestamp }, or null. Focusing or clicking a cell selects it.
[showValues]
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]
showLegend		boolean
true		Determines whether the legend of bands is shown under the grid.
[showTimeAxis]
showTimeAxis		boolean
true		Determines whether the time labels are shown along the top.
[precisionDigits]
precisionDigits		number
2		Sets or retrieves the decimals scores are shown with.
[label]
label		stringSets or retrieves a name for the heatmap, spoken as part of the grid's label.

Methods

MethodDescription
push(sample: any): Promise<any>
and pushSync(sample: any): 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: any, time: any): Promise<any>
and scoreAtSync(series: any, time: any): 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: any): Promise<any>
and severityOfSync(score: any): 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?: any): Promise<any>
and hotspotsSync(severity?: any): 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.

OutputDescription 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