Trends and signals

Comparison Chart <smart-comparison-chart>

ComparisonChart puts like values side by side - energy per line, output per shift, downtime per cause, the share of each product in a day - and answers which is the biggest, and by how much.

<smart-comparison-chart> · 14 properties, 3 methods, 0 events · source/modules/smart.comparisonchart.js

Usage in React

The React wrapper is the ComparisonChart component: every property is a prop, every event a prop named on<Event> that receives the CustomEvent, and the methods are called on the element through a ref.

import { ComparisonChart } from 'smart-industrial/react/comparisonchart';

const ref = useRef<ComparisonChart>(null);

<ComparisonChart ref={ref} orientation={'vertical'} />

// methods are called on the wrapper the ref holds, which calls the element
ref.current?.push({});

Properties

Prop	Type, default	Description
items	array	Sets or retrieves the items, as [{ field, label, value, unit, color }]. field is the key push() and Connect.stream() fill; label is what the bar is called; unit and color override the chart's for one item. An item without a value is listed as unknown rather than drawn as zero. Assign a new array to update the component.
kind	ComparisonChartKind bars	Sets or retrieves how the items are drawn: as bars, or as a donut of shares of one whole with the total in the hole. A value below zero has no share of a whole, so while any value is negative the items are drawn as bars, no shares are given in the table, and the total line says so.
orientation	ComparisonChartOrientation horizontal	Sets or retrieves which way the bars run. Horizontal reads long names without tilting them; vertical suits a few items and a Pareto chart's running share.
sort	ComparisonChartSort none	Sets or retrieves the order of the bars: as listed, largest first or smallest first. An item without a value goes last either way.
pareto	boolean false	Sets or retrieves whether the chart is a Pareto chart: largest first, with the running share of the total - a line over upright bars, a figure beside sideways ones - so the few items that make up most of the whole stand out. With a value below zero there is no running share, and the line or figure is left out.
min	number 0	Sets or retrieves the bottom of the scale. A value below it is not clipped: the scale extends down to a round number under the smallest value, and a negative bar runs from zero the other way.
max	number?	Sets or retrieves the top of the scale. Empty takes a round number above the largest value and the limit.
limit	number?	Sets or retrieves a value the bars are held against - a budget, a target - drawn as a dashed line. A bar past it takes the warning colour and its row in the table says so. Empty for none.
limitLabel	string	Sets or retrieves the name written at the limit line. Empty writes the limit's value.
unit	string	Sets or retrieves the unit written after every value and the total.
precisionDigits	number?	Sets or retrieves the digits after the point. Empty chooses once for the whole chart, so the readouts do not jitter between updates: none when every value is whole or the largest is 100 or more, one otherwise.
showValues	boolean true	Sets or retrieves whether each bar's value is written at its end.
maxSlices	number 6	Sets or retrieves how many slices a donut draws before it folds the smallest items into one "other" slice.
label	string	Sets or retrieves the heading of the chart. It is also the caption of the table a screen reader reads.

Methods

Method	Description
push(record: object): void	Takes a record of values by field and shows them: chart.push({ line2: 421 }). It is what Connect.stream() calls with one record per interval, so each bar can follow its own tag. Fields the chart has no item for are ignored; an item the record does not name keeps its value. record object { field: value, ... }
clear(): void	Empties every value and keeps the items.
describe(): string	Returns what the chart shows as one sentence: how many items, the highest and its value, the total and how many are past the limit. It is the accessible name of the chart.

Types

type ComparisonChartKind

'bars' | 'donut'

type ComparisonChartOrientation

'horizontal' | 'vertical'

type ComparisonChartSort

'none' | 'descending' | 'ascending'

CSS variables

The component declares 3 CSS variables; the CSS page shows how to set them.

--smart-comparison-chart-height --smart-comparison-chart-grid-color --smart-comparison-chart-mono