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 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.statustile.js';

<smart-status-tile ref="statusTile" :label="'OEE'"
    @stateChange="onEvent"></smart-status-tile>



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

Properties

Binding	Type, default	Description
`:label` label	string	Sets or gets the name of the reading, shown above the value, for example 'OEE', 'Feed pressure' or 'Open alarms'.
`:value` 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` unit	string	Sets or gets the engineering unit, shown next to the value and included in the accessible name.
`:state` state	StatusTileState 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.
`:trend` trend	StatusTileTrend 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.
`:trend-value` 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.
`:trend-polarity` trendPolarity	StatusTileTrendPolarity 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.
`:target` 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` footnote	string	Sets or gets a short line under the reading, for example the source, the time window or what pressing the tile does.
`:precision-digits` 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.
`:format-function` 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` 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` 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.
`:announce-changes` 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
`stateFor(value: number, thresholds: any): string` static: `customElements.get('smart-status-tile').stateFor(…)`; the wrapper's method of this name calls the element and fails	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.

stateFor(value: number, thresholds: any): string
static: customElements.get('smart-status-tile').stateFor(…); the wrapper's method of this name calls the element and fails

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