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 Blazor

The Razor component is <ComparisonChart> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<ComparisonChart @ref="comparisonChart" Orientation="vertical" />

@code {
    ComparisonChart comparisonChart;

    // void Push(object record)
    void Call() => comparisonChart.Push(new { });
}

Properties

Parameter	Type, default	Description
`Items` items	IEnumerable<object>	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	bool 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	int 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	int	Sets or retrieves the top of the scale. Empty takes a round number above the largest value and the limit.
`Limit` limit	int	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	int	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	bool true	Sets or retrieves whether each bar's value is written at its end.
`MaxSlices` maxSlices	int 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
`void Push(object 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, ... }
`void Clear()`	Empties every value and keeps the items.
`Task<string> 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

`enum ComparisonChartKind`

ComparisonChartKind.Bars "bars" ComparisonChartKind.Donut "donut"

`enum ComparisonChartOrientation`

ComparisonChartOrientation.Horizontal "horizontal" ComparisonChartOrientation.Vertical "vertical"

`enum ComparisonChartSort`

ComparisonChartSort.None "none" ComparisonChartSort.Descending "descending" ComparisonChartSort.Ascending "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