Production floor
State Timeline <smart-state-timeline>
StateTimeline displays the state history of one or more machines as coloured segments on a time axis, one row per machine.
<smart-state-timeline> · 11 properties, 3 methods, 2 events · source/modules/smart.statetimeline.js
Usage in Angular
The Angular wrapper is StateTimelineComponent from StateTimelineModule: 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 { StateTimelineModule, StateTimelineComponent } from 'smart-industrial/angular/statetimeline';
<smart-state-timeline #stateTimeline [timeSpan]="42"
(onSelectionChange)="onSelectionChange($event)"></smart-state-timeline>
@ViewChild('stateTimeline', { read: StateTimelineComponent }) stateTimeline!: StateTimelineComponent;
// methods are called on the component reference; this one returns a Promise
const result = await this.stateTimeline.summary('value');
Properties
| Input | Type, default | Description |
|---|---|---|
[rows] | array | Sets or gets the rows, one per machine: { id, label, segments }, each segment { state, from, to, reason } with times in milliseconds since the epoch. A segment without to is open: it runs until the next segment in time, or to the end of the window. Segments may come in any order and are drawn and counted in time order; where two overlap, the one later in the array (the one pushed later) wins its interval and the earlier keeps what is left on either side, so no instant is counted twice and the time in each state never adds up to more than the window. A segment with no length is dropped. An item that is not usable - null, not an object, a segment with no state, a from that is not a time or a to before it - is skipped with one console warning per array. Assign a new array to update the component. |
[segments] | array | Sets or gets the segments of a single machine, drawn as one row named by label, when there are no rows. The id of that row is 'row', whatever the label: pass 'row' to summary(), segmentAt() and push() to reach it. The segments are normalised as in rows. |
[states] | array | Sets or gets the vocabulary: { id, label, color }, or just an id (a string or a number), where color is ok, warning, critical, accent, neutral, off or any CSS colour. A state the vocabulary does not name is drawn neutral with its id as its label. Empty is the floor's vocabulary: running, idle, ready, starved, blocked, stopped, fault, changeover, maintenance, off. Each of those has a look of its own, in the floor's vocabulary and in a vocabulary that names it without a colour: running a muted grey-green (the normal state is not a saturated green: colour is for what is wrong), idle a hatched light grey (not to be read as a gap), ready hollow, stopped a heavy slate, starved amber, blocked yellow with dark stripes, fault red, changeover blue, maintenance purple with light stripes, off a dashed outline. Each is a CSS variable (--smart-timeline-running, --smart-timeline-running-color and so on) a page can restyle. An item with no id is skipped with one console warning. |
[timeSpan] | number | Sets or gets the width of the window in milliseconds, from 1000 (a second) to 315576000000 (ten years). A value that is not a positive number (NaN, Infinity, 0, negative) is ignored for the default 28800000 (8 h), and one outside the range is held at its end, each with one console warning. Over two months the axis is labelled with dates and years. |
[end] | number? | Sets or gets the right edge of the window in milliseconds since the epoch. Null follows the record: the latest end of a segment, or now while a segment is open. A value that is not a time (NaN, Infinity) is ignored with one console warning, and the axis follows the record. |
[selected] | object? | Sets or gets the selected segment as { row, from }, or null. |
[label] | string | Sets or gets the name of the line or area, part of the accessible name and the name of the single row drawn from segments. |
[showLegend] | boolean | Sets or gets whether the vocabulary is listed under the rows with its colours. |
[showSummary] | boolean | Sets or gets whether each row carries the time in each state over the window, as percentages, under its name. |
[showTimeAxis] | boolean | Sets or gets whether the time axis is drawn above the rows. |
[showReasons] | boolean | Sets or gets whether a segment's reason is written into it when it is wide enough to hold the words. |
Methods
| Method | Description |
|---|---|
summary(rowId: any): Promise<any> | Returns the time in each state of a row over the window, longest first: [{ state, milliseconds, percent }]. It counts the record as drawn, overlaps resolved, so the milliseconds never add up to more than the window.rowId string The row's id. |
segmentAt(rowId: any, time: any): Promise<any> | Returns the segment of a row under a time, as it was given, or null. Where segments overlap it is the one drawn there - the later one.rowId string The row's id.time number Milliseconds since the epoch. |
push(rowId: string, segment: any): void | Appends a segment to the record of a row. An open segment of the row that started before the new one is closed at the new one's start. A segment that arrives late - starting before the open one - is slotted in where it happened and the open one stays ongoing; one that overlaps the record wins its interval. Intended for a data feed, with one call per state change. A row that does not exist is added. Something that is not a segment is refused with a console warning.rowId string The row's id.segment object The segment: { state, from, to, reason }. |
Events
The data of an event is in event.detail. The state timeline sets selected when the operator clicks or focuses a segment and then raises selectionChange. segmentClick reports a segment clicked or activated with Enter or Space.
| Output | Description and detail |
|---|---|
(onSelectionChange) | This event is triggered when another segment is selected by a click or by receiving the keyboard focus. Setting selected from script marks the segment and does not raise it.row string The row's id.segment object The segment as it was given; for a cell of several short segments, the first of them.state string The segment's state.from number When the segment began, in milliseconds since the epoch.to number When it ended, or the end of the window for an open segment.count number How many segments the cell stands for: 1, or more for a cell of segments too short to draw one by one.segments array Every segment under the cell, as given. |
(onSegmentClick) | This event is triggered when a segment is clicked, or Enter or Space is pressed on it.row string The row's id.segment object The segment as it was given; for a cell of several short segments, the first of them.state string The segment's state.from number When the segment began, in milliseconds since the epoch.to number When it ended, or the end of the window for an open segment.count number How many segments the cell stands for: 1, or more for a cell of segments too short to draw one by one.segments array Every segment under the cell, as given. |
CSS variables
The component declares 31 CSS variables; the CSS page shows how to set them.
--smart-timeline-row-height --smart-timeline-label-width --smart-timeline-gap --smart-timeline-ok --smart-timeline-warning --smart-timeline-critical --smart-timeline-accent --smart-timeline-neutral --smart-timeline-off --smart-timeline-running --smart-timeline-running-color --smart-timeline-idle --smart-timeline-idle-color --smart-timeline-ready --smart-timeline-ready-line --smart-timeline-ready-color --smart-timeline-stopped --smart-timeline-stopped-color --smart-timeline-starved --smart-timeline-starved-color --smart-timeline-blocked --smart-timeline-blocked-color --smart-timeline-fault --smart-timeline-fault-color --smart-timeline-changeover --smart-timeline-changeover-color --smart-timeline-maintenance --smart-timeline-maintenance-color --smart-timeline-off-line --smart-timeline-track --smart-timeline-color