developer guide
KPI Tiles Above a JavaScript Data Grid
A tile puts one figure above the rows and keeps it in step with them: bands that colour it good or bad, an icon, the record behind the maximum rather than just the maximum, and a scope that reads either the filtered view or the whole dataset.
Developer guide › Statistics and capability › KPI Tiles Above a JavaScript Data Grid
Statistic tiles
A headline figure over a grid, with the change since a baseline, a tone from thresholds, and the interval underneath.
A tile that follows the grid
import { createStat } from '@toclocoinc/lattice-grid';
createStat({
grid,
container: tile,
title: 'Total capacity',
// A leading icon beside the title and value. Same three forms as a menu
// item: a sprite name, a character/emoji, or your own markup.
icon: '<i class="fa-light fa-gauge-high"></i>',
value: { of: 'capacity', fn: 'sum' },
baseline: (g) => lastMonth,
bands: { good: 5000, warn: 3000, direction: 'up' },
interval: (v, g) => g.statistics.interval('capacity'),
});
icon is optional and lays out to the side without disturbing the change indicator,
threshold bands or confidence interval; omit it for the plain tile. It uses the same
icon contract as a menu item - a sprite name, a single character or
emoji, or author-supplied markup such as a Font Awesome glyph or an
<img>.
bands and goodWhen judge different things.
goodWhen says whether a rise is good news, and colours the change indicator.
bands judge the value itself. They are separate because a Cpk of 0.9 is bad news
whether it rose or fell to get there.
The tile follows the grid by default. Filter the grid and the figure
updates. scope chooses filtered, all or selected rows; live: false
detaches it and leaves refresh() to you.
value also takes show, which reports a field from the row holding
an extreme rather than the extreme itself: { of: 'sales', fn: 'max', show: 'rep' }
is the name of the best rep. It needs min or max, because no
single row holds an average.