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.

Stylesheet

The component is styled by source/styles/default/smart.statetimeline.css, which is included in smart.industrial-elements.css. It uses the theme's CSS variables and the Industrial tokens (--smart-industrial-*) described in the Themes and Styling guide, so it follows the theme applied to the page.

CSS variables

The component declares 31 CSS variables of its own, on the component itself. Set them in a rule that selects the component, loaded after the component's stylesheet: smart-state-timeline, or a class or an id on it. A value set on a container does not reach the component, because the component's own declaration replaces the inherited one.

smart-state-timeline {
    --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: ...;
}

/* one instance */
#stateTimeline {
    --smart-timeline-row-height: ...;
}

One variable is written inline by the component's script, and an inline value replaces any stylesheet rule:

• --smart-timeline-color is written on each segment from the color of a custom entry in states.

Set it through the property rather than in CSS.

Themes

Two ISA-101 themes ship with the package: smart.industrial.css and smart.industrial-dark.css. Load one after the base theme and set theme="industrial" or theme="industrial-dark" on the body element. The demo page switches between the three.

<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.default.css" />
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial-elements.css" />
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial.css" />

<body theme="industrial">