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 Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.anomalyheatmap.js';

<smart-anomaly-heatmap ref="anomalyHeatmap" :time-span="42"
    @selectionChange="onEvent"></smart-anomaly-heatmap>

// methods are called on the element the ref holds
anomalyHeatmap.value.push({});

// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-anomaly-heatmap :series.prop="series"></smart-anomaly-heatmap>

Properties

BindingType, 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.
:time-span
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.
:max-clock-skew
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.
:show-values
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.
:show-legend
showLegend		boolean
true		Determines whether the legend of bands is shown under the grid.
:show-time-axis
showTimeAxis		boolean
true		Determines whether the time labels are shown along the top.
:precision-digits
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: object): booleanAdds 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): numberReturns 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): stringReturns 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.

EventDescription and detail
@selectionChangeThis 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.
@cellClickThis 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