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.
Accessibility Attributes
The AnomalyHeatmap is a grid of coloured cells. Because colour is not available to a screen reader, every cell states in text what its colour means: the series, the interval, the score to the component's precision and the band, for example "Reactor temperature, 10:15, score 0.83, warning". The grid is exposed as a WAI-ARIA grid with rows, row headers, column headers and cells, and has one tab stop regardless of the number of cells. Below the first threshold the cells differ only in the intensity of a neutral colour, so the score is spoken even where it is not printed.
The following ARIA attributes are used inside the AnomalyHeatmap:
- role="group" - set on the container.
- role="grid" - set on the grid, with an aria-label naming the heatmap, its series and its intervals - "Anomaly heatmap. Area 2, 12 series, 96 intervals of 15 min" - and aria-rowcount / aria-colcount.
- role="row" - set on the header row and on each series row, with aria-rowindex.
- role="columnheader" - set on the corner cell and on each interval's header cell, which carries the interval's time as its aria-label whether or not the label is printed (only every few columns are, so the axis stays legible).
- role="rowheader" - set on each series' label cell.
- role="gridcell" - set on each cell, with an aria-label of "series, time, score and band", aria-selected, and a roving tabindex. A cell nothing landed in says "no score".
- role="list" - set on the legend, named "Legend", whose items say where each band begins in text - "warning from 0.70" - beside its swatch.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the AnomalyHeatmap:
| Key | Action |
|---|---|
| Tab | Moves into the grid, landing on the cell that holds the tab stop, and out again. The grid is one stop however many cells it has. |
| Arrow keys | Move between cells: left and right along a series, up and down between series. Focus selects the cell and raises selectionChange. |
| Home / End | Move to the first / last cell of the row; with Ctrl, to the first / last cell of the grid. |
| Page Up / Page Down | Move ten cells back or forward. |
| Enter or Space | Activates the focused cell, raising cellClick - the same event a click raises. |
Selection and activation are separate events, so an application can show the details of a cell as the operator moves and open the related trend only on request.
Localization
All strings the AnomalyHeatmap exposes to assistive technology come from its messages property, so they can be provided in the user's language. Set locale to select a language and add a language through messages. Assigning messages replaces the whole object, so include the existing languages when adding one: el.messages = Object.assign({}, el.messages, { de: pack }); If the built-in en pack is dropped, switching back to English shows raw message keys.
The AnomalyHeatmap uses the following message keys:
- gridLabel, cellLabel, score, noScore, severitySuffix
- severityAdvisory, severityWarning, severityCritical
- timeHeader, seriesHeader, legendLabel, legendBelow, legendFrom, noSeries, minutes, hours
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. Series labels come from the series property and are not localized by the component.
Additional information on WAI-ARIA for the SMART Framework can be found here.