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.

JavaScript TypeScript Angular React Vue Blazor

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

Usage in Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.comparisonchart.js';

<smart-comparison-chart ref="comparisonChart" :orientation="'vertical'"></smart-comparison-chart>

// methods are called on the element the ref holds
comparisonChart.value.push({});

// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-comparison-chart :items.prop="items"></smart-comparison-chart>

Properties

Binding	Type, default	Description
`:items` 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` 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` 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` 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` 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` 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` max	number?	Sets or retrieves the top of the scale. Empty takes a round number above the largest value and the limit.
`: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.
`:limit-label` limitLabel	string	Sets or retrieves the name written at the limit line. Empty writes the limit's value.
`:unit` unit	string	Sets or retrieves the unit written after every value and the total.
`:precision-digits` 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.
`:show-values` showValues	boolean true	Sets or retrieves whether each bar's value is written at its end.
`:max-slices` maxSlices	number 6	Sets or retrieves how many slices a donut draws before it folds the smallest items into one "other" slice.
`:label` 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