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 Blazor

The Razor component is <AnomalyHeatmap> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<AnomalyHeatmap @ref="anomalyHeatmap" TimeSpan="42"
    OnSelectionChange="OnSelectionChange" />

@code {
    AnomalyHeatmap anomalyHeatmap;

    void OnSelectionChange(Event ev)
    {
        AnomalyHeatmapSelectionChangeEventDetail detail = ev["Detail"];
    }

    // Task<bool> Push(object sample)
    void Call() => anomalyHeatmap.Push(new { });
}

Properties

Parameter	Type, default	Description
Series series	IEnumerable<object>	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 data	IEnumerable<object>	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 timeSpan	double 86400000	Sets or retrieves the width of the time axis, in milliseconds. A day by default.
Bucket bucket	double 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	double	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	double 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	AnomalyHeatmapThresholds {"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	bool 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	bool true	Determines whether the legend of bands is shown under the grid.
ShowTimeAxis showTimeAxis	bool true	Determines whether the time labels are shown along the top.
PrecisionDigits precisionDigits	int 2	Sets or retrieves the decimals scores are shown with.
Label label	string	Sets or retrieves a name for the heatmap, spoken as part of the grid's label.

Methods

Method	Description
Task<bool> Push(object sample)	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 }
Task<int> ScoreAt(string series, int time)	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.
Task<string> SeverityOf(int score)	Returns the band a score falls in: advisory, warning, critical, or normal below the first threshold. score number A score, 0 to 1.
Task<IEnumerable<object>> Hotspots()	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

Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.

Event	Description and detail
OnSelectionChange selectionChange AnomalyHeatmapSelectionChangeEventDetail	This event is triggered when a cell is selected, by focus or by a click. Series string The series id. Timestamp double The start of the cell's interval. Score double The cell's score, or NaN when it has none. Severity string The cell's band: normal, advisory, warning or critical.
OnCellClick cellClick AnomalyHeatmapCellClickEventDetail	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 double The start of the cell's interval. Score double 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