Trends and signals
Trend <smart-trend>
Trend is a historian trend chart for process data.
Accessibility Attributes
The Trend is drawn on a canvas, which is not accessible to a screen reader. Everything drawn on the canvas is therefore also available as text: the header contains the displayed interval and whether the trend is live; the pens panel contains the label, range and value of every pen; and the readout contains the cursor time and the value of every pen at that time, plus the expected value and interval of a model band and the marker under the cursor, named by severity, label and score. The pens panel is a composite widget with one tab stop and arrow key navigation, and the plot itself can be focused, so the cursor, the zoom and the return to live mode are available from the keyboard.
The following ARIA attributes are used inside the Trend:
- role="group" - set on the container, with an aria-label naming the trend, its pens and the interval on screen - "Trend. Area 2, 4 pens, 18 Sept 12:37:56 to 18 Sept 12:52:56, live". It is rewritten whenever the window moves.
- role="application" - set on the plot, with aria-roledescription "interactive plot", an aria-label that says what the keys do there, and tabindex="0" so it can be reached.
- aria-label - set on each pen button, as its label and range, or ".., hidden" when it is off, followed by its value at the cursor or the newest sample and its quality when that is not good - "TT-2108 Reactor outlet, -20.0–150.0 °C, 90.4 °C". The value beside it is real text and updates in place.
- role="group" - set on the pens panel, with an aria-label, so the pen buttons are announced as one named group; and role="list" on the readout, with an aria-label, so the values at the cursor are announced as one named list.
- aria-pressed - set on each pen button, indicating whether that pen is currently drawn.
- tabindex - managed as a roving tab stop across the pen buttons: one is 0, the rest -1.
- aria-disabled - indicates that the chart is disabled.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the Trend:
| Key | Action |
|---|---|
| Tab | Moves into the pens panel, landing on the pen that holds the tab stop, then to the plot, and out again. The panel is one stop however many pens there are. |
| Arrow Up/Down | In the pens panel, moves between the pens. |
| Home / End | Moves to the first / last pen. |
| Enter or Space | In the pens panel, shows or hides the focused pen, raising penVisibilityChange. |
| Arrow Left/Right | On the plot, moves the cursor by one pixel's worth of time; with Shift, by ten. Home and End put it at the window's edges. Raises cursorChange. |
| + / - | On the plot, zooms in or out around the window's centre, leaving live mode. |
| L | On the plot, returns to live. |
| N / P | On the plot, moves the cursor to the next / previous anomaly marker on screen, wrapping, and announces it, its severity, label and score, through the live region. The readout names the marker under the cursor in text. |
| Enter | On the plot, with the cursor on a marker, raises markerClick - the same event a click on the marker raises, so an application can ask the operator whether the model was right without a pointer. |
| Escape | On the plot, clears the cursor. |
Set interactive to false and the plot is a display only: it takes no focus, and the window is moved by the application's own controls through setWindow, pan, zoom and goLive.
Localization
All strings the Trend exposes to assistive technology come from its messages property, so they can be provided in the user's language. Set locale to select a language and add a language through messages. Assigning messages replaces the whole object, so include the existing languages when adding one: el.messages = Object.assign({}, el.messages, { de: pack }); If the built-in en pack is dropped, switching back to English shows raw message keys.
The Trend uses the following message keys:
- chartLabel, chartSummary, liveSuffix, noData, plotLabel
- live, paused, window
- pensLabel, penLabel, penHidden, range, autoRange
- readoutLabel, latest, cursorAt, percentAxis
- expected, confidence, markerAt, markerInterval, markerScore, severityAdvisory, severityWarning, severityCritical
- noReading, qualityUncertain, qualityBad, qualityStale, plotRole
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. Strings that are also exposed as properties default to empty and fall back to the pack, so the default text stays translatable while an explicit property value takes precedence.
Additional information on WAI-ARIA for the SMART Framework can be found here.