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 JavaScript
The component is a custom element: its properties are set on the element, its events are DOM CustomEvents with the data in event.detail, and its methods are called on the element. The properties can also be written as attributes in kebab case (precision-digits="1").
const comparisonChart = document.querySelector('smart-comparison-chart');
comparisonChart.orientation = 'vertical';
comparisonChart.push({});
Properties
| Property | 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 | 'bars' | 'donut' | 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.bars donut |
orientation | 'horizontal' | 'vertical' | 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.horizontal vertical |
sort | 'none' | 'descending' | 'ascending' | Sets or retrieves the order of the bars: as listed, largest first or smallest first. An item without a value goes last either way.none descending ascending |
pareto | boolean | 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 | 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 | Sets or retrieves whether each bar's value is written at its end. |
maxSlices | number | 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) | 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() | Empties every value and keeps the items. |
describe() | 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