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 Angular

The Angular wrapper is ComparisonChartComponent from ComparisonChartModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.

import { ComparisonChartModule, ComparisonChartComponent } from 'smart-industrial/angular/comparisonchart';

<smart-comparison-chart #comparisonChart [orientation]="'vertical'"></smart-comparison-chart>

@ViewChild('comparisonChart', { read: ComparisonChartComponent }) comparisonChart!: ComparisonChartComponent;
// methods are called on the component reference
this.comparisonChart.push({});

Properties

Input	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.
[limitLabel] 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.
[precisionDigits] 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] showValues	boolean true	Sets or retrieves whether each bar's value is written at its end.
[maxSlices] 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: any): 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(): Promise<any> and describeSync(): 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