Alarms and status

Status Tile `<smart-status-tile>`

StatusTile displays one process value with its label, unit, state and trend direction, for status walls and plant overview screens.

JavaScript TypeScript Angular React Vue Blazor

<smart-status-tile> · 14 properties, 1 methods, 2 events · source/modules/smart.statustile.js

Usage in JavaScript

The component is a custom element: its properties are set on the element, its events are DOM CustomEvents with the data in event.detail, and its methods are called on the element. The properties can also be written as attributes in kebab case (precision-digits="1").

const statusTile = document.querySelector('smart-status-tile');

statusTile.label = 'OEE';
statusTile.addEventListener('stateChange', (event) => console.log(event.detail));

Properties

Property	Type, default	Description
`label`	string	Sets or gets the name of the reading, shown above the value, for example 'OEE', 'Feed pressure' or 'Open alarms'.
`value`	number \| null	Sets or gets the reading. The value is not limited to numbers: 'PASS', 'Running' or a batch identifier are valid readings, and a tile holding text is sized so that the text fits. A reading that failed - NaN or an infinity, as a number or as the text 'NaN' or 'Infinity', or an object when no formatFunction is set - is shown as -- and read out as no reading, never as the words NaN, Infinity or [object Object].
`unit`	string	Sets or gets the engineering unit, shown next to the value and included in the accessible name.
`state`	'neutral' \| 'ok' \| 'advisory' \| 'warning' \| 'critical' \| 'unknown' neutral	Sets or gets the state of the reading. The state is drawn as a marker along the leading edge rather than as a fill across the tile, so that a wall of tiles stays readable and colour is used only where it has a meaning. The static stateFor method derives the state from thresholds. `neutral` `ok` `advisory` `warning` `critical` `unknown`
`trend`	'none' \| 'up' \| 'down' \| 'flat' none	Sets or gets the direction of the reading. The direction is written as a word in addition to the arrow, because an arrow glyph is not read correctly by screen readers. `none` `up` `down` `flat`
`trendValue`	number \| null	Sets or gets the amount by which the reading changed, shown next to the direction with the unit after a space, for example "down 0.06 bar". Optional; an amount that is NaN, an infinity or an object is left out and only the direction is shown.
`trendPolarity`	'neutral' \| 'higherIsBetter' \| 'lowerIsBetter' neutral	Sets or gets which direction is good: a rising yield and a rising scrap rate have the same arrow and opposite meanings. Without this property the tile can show a direction but not judge it. Use neutral for a reading that is neither, such as an ambient temperature. `neutral` `higherIsBetter` `lowerIsBetter`
`target`	number \| null	Sets or gets the target value of the reading, shown next to the trend. A target that is NaN, an infinity or an object is not shown.
`footnote`	string	Sets or gets a short line under the reading, for example the source, the time window or what pressing the tile does.
`precisionDigits`	number	Sets or gets the number of decimal places of a numeric reading. Values outside 0 to 20 are held to that range. Ignored when formatFunction is set and when the value is text.
`formatFunction`	function	Sets or gets a function that takes the raw value and returns the text to display. Smart.Industrial.siFormat can be used directly, so that a tile shows 4.7 kW instead of 4700.
`sparkline`	array	Sets or retrieves recent history for a small chart under the reading, as an array of numbers. The series is scaled before it is drawn; the sparkline shows the shape of the history and the value of the tile shows the magnitude.
`interactive`	boolean false	Determines whether the tile is a button that can be reached with Tab, activated with Enter or Space and is announced as a button. Off by default, so that a tile that does nothing is not a tab stop.
`announceChanges`	boolean false	Determines whether a change of state is announced through the shared live region. Off by default, because a wall of tiles announcing every change would not be usable; enable it for the tiles that carry an alarm.

Methods

Method Description

Method	Description
`static stateFor(value, thresholds)` returns string static: `customElements.get('smart-status-tile').stateFor(…)`	Maps a reading to a state against a set of thresholds, so a screen can classify a value without a tile. Available as a static method and on the element. The thresholds are given as an object with advisory, warning and critical members and an optional direction: 'above' (the default) when a higher reading is worse, or 'below' for readings such as capability indices and yields where a lower reading is worse. The reading must be a finite number or a decimal string: null, an empty or blank string, NaN, an infinity, true or a hex string such as '0x1F' returns 'unknown', as does a missing thresholds object. `value` number The reading to classify. `thresholds` any An object of the form { advisory, warning, critical, direction }. Any threshold that is absent is skipped.

static stateFor(value, thresholds)
returns string
static: customElements.get('smart-status-tile').stateFor(…)

Maps a reading to a state against a set of thresholds, so a screen can classify a value without a tile. Available as a static method and on the element. The thresholds are given as an object with advisory, warning and critical members and an optional direction: 'above' (the default) when a higher reading is worse, or 'below' for readings such as capability indices and yields where a lower reading is worse. The reading must be a finite number or a decimal string: null, an empty or blank string, NaN, an infinity, true or a hex string such as '0x1F' returns 'unknown', as does a missing thresholds object.

value number The reading to classify.
thresholds any An object of the form { advisory, warning, critical, direction }. Any threshold that is absent is skipped.

Events

The data of an event is in event.detail. activate reports a press on the status tile, fires only while interactive is true and changes nothing. stateChange reports a new state from the application.

Event	Description and detail
`activate`	This event is triggered when an interactive tile is pressed with the pointer or with Enter or Space. It is not raised when interactive is off. `label` string The tile's label. `value` any The reading. `state` string The tile's state.
`stateChange`	This event is triggered when the state changes. The event detail contains the new state and the previous state. `state` string The new state. `oldState` string The state before.

Types

`type StatusTileState`

`type StatusTileTrend`

'none' | 'up' | 'down' | 'flat'

`type StatusTileTrendPolarity`

'neutral' | 'higherIsBetter' | 'lowerIsBetter'

CSS variables

The component declares 6 CSS variables; the CSS page shows how to set them.

--smart-status-tile-value-size --smart-status-tile-label-size --smart-status-tile-meta-size --smart-status-tile-marker-width --smart-status-tile-padding --smart-status-tile-state-color