the stat-tile view
The headline figures, live beside the grid.
A screen usually needs the few numbers a reader checks first: a total, an average, a count of what is still open. The stat-tile view turns the rows you already have into that row of live figures, and it reads the same filtered rows as the grid beside it, so narrowing the grid retotals every tile at once. No second copy of the data, no figures kept in step by hand.
a viewer, not a second store
The tiles are a view of the same rows.
A row of figures pasted beside a grid usually means numbers computed somewhere else and refreshed on their own clock, right up until they disagree with the table under them. These tiles read the grid's own rows and follow its filters, so the figure at the top of the screen and the rows below it are always the same truth. Point them at a live feed and they move with it.
Your fields, your figures
Each tile names an aggregation and the field it reads: a sum, an average, a minimum, a maximum, a count, a distinct count, or a reducer of your own. Give a tile a filter and it counts only the rows that match, so "open deals" and "revenue" can sit side by side over one set of rows.
One feed can drive it live
The tiles take rows the same way a grid does, so one live source can fill them beside a grid, a board and a chart at once. A figure reticks as data arrives while the reader keeps their place, and one question asked of a feed can move the grid, the chart and the tiles together.
what a tile can say
A figure with the context that reads it.
Formatted the way you show it
A tile shows its figure as a number, an amount of money, a percentage or a compact short form, with the decimals, currency and locale you already use, so the number on the tile reads the way the same number reads in the grid.
A move against a baseline
Give a tile a baseline and it shows the delta beside the figure, so a reader sees not just where a number sits but which way it has gone and by how much.
Good, warn and critical bands
Set two cut points and a direction, or list the bands yourself, and a tile carries a semantic verdict of good, warn or critical. The band is a meaning, kept separate from any accent colour, so it survives a theme change and reads for everyone.
A sparkline of the recent shape
Hand a tile a short series and it draws a sparkline under the figure, so the trend behind the single number is on the same tile without a chart beside it.
Clickable, to drill in
A tile can be a way in as well as a readout: click one and take the reader to the rows behind it, so the headline figure and the detail under it are one gesture apart.
Readable to everyone
Every tile is a labelled figure that takes focus from the keyboard and announces its value, so the row of numbers at the top of the screen is as usable to a screen reader as it is to the eye.
tiles over plain rows
The wiring reads like the row of tiles.
Drop in two script tags, then hand createKPI your rows and the
tiles you want. Each tile names what it counts, how it is formatted, and the line that reads
good. Point it at a live grid instead of an array and the tiles follow that grid's rows.
The stat-tile view is a separate, opt-in module with a global of its own. It changes nothing in the grid core and a page that never shows a tile never loads it.
<!-- the grid and the KPI module, as globals -->
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid/lattice-grid.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid/modules/kpi.min.js"></script>
<script>
var createKPI = LatticeGridKPI.createKPI;
// The tiles read the rows you already have, or a live grid's rows. Each tile
// names what it counts, how it is formatted, and the line that reads good.
var kpis = createKPI(document.querySelector('#kpis'), {
rows: deals,
rowKey: 'id',
columns: 4,
tiles: [
{ id: 'total', label: 'Revenue', aggregation: 'sum', field: 'amount', format: 'currency' },
{ id: 'avg', label: 'Avg deal', aggregation: 'avg', field: 'amount',
format: { type: 'currency', decimals: 0 }, baseline: 5000 }, // delta vs a baseline
{ id: 'open', label: 'Open deals', aggregation: 'count',
filter: function (r) { return r.stage !== 'won'; },
thresholds: { warn: 10, critical: 25, direction: 'lowerIsBetter' } }
],
onTileClick: function (e) { drillInto(e.tile.id); }
});
</script>Build the tiles on localhost, free.
Development on localhost needs no licence key, so you can point the tiles at your rows and see them tick before you decide anything. Licence per domain when you ship.
The KPI API Drive it from one feed Charts from the same rows Documentation