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 Angular

The Angular wrapper is StatusTileComponent from StatusTileModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.

import { StatusTileModule, StatusTileComponent } from 'smart-industrial/angular/statustile';

<smart-status-tile #statusTile [label]="'OEE'"
    (onStateChange)="onStateChange($event)"></smart-status-tile>

@ViewChild('statusTile', { read: StatusTileComponent }) statusTile!: StatusTileComponent;

Properties

Input	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.
`[trendValue]` 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]` 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.
`[precisionDigits]` 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]` 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.
`[announceChanges]` 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: any, thresholds: any): Promise<any>` and `stateForSync(value: any, 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: any, thresholds: any): Promise<any>
and stateForSync(value: any, 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.

Output	Description and detail
`(onActivate)` 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.
`(onStateChange)` 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