the stat-tile view
JavaScript KPI Dashboard Tiles for a Data Grid
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.
Bind a tile to a grid over a table too large to hold in the browser and the figure still reads true: a sum, average, minimum, maximum or distinct count computes over every matching row through the same source that answers the grid, not just the page currently loaded, and a tile the source genuinely cannot answer says so rather than guessing from what is on screen. Over a pivoted grid, a sum, average, minimum or maximum tile still totals correctly; a count, a distinct count or a reducer of your own, none of them derivable from a pivot's own shape, reports as unavailable by name instead of a stale figure.
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.
the state of the day
The time where the work is happening.
The person reading an operations screen is in one place and the work is in several, and asking them to convert the hour in their head is how a handover gets missed. A panel can carry a live clock for each place your team works, ticking on the second beside the figures those desks are measured on, so the state of the business and the state of the day read in one row.
Open the clock demo → The health of the rows you are looking at →
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 choose what the movement line prints: the difference, the percentage, or both together, so a reader sees not just where a number sits but which way it has gone and by how much. A rate already expressed as a percentage, such as an unemployment figure, can drop the percentage and show the plain difference on its own.
Tiles grouped into a hierarchy
Give related tiles a dotted id and set tree
on the panel, and they gather under a shared, collapsible heading that carries the worst
state of everything beneath it, so a closed branch still reports a breach. Leave
tree unset and every tile renders flat, whatever its id looks like.
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.
A clock for each place you operate
A tile can be the local time somewhere rather than a figure: the date over the time, ticking on the second, in the zone and the language of the desk it names. Several of them on one panel keep the same beat.
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. See its size next to every other module in the module map.
<!-- the grid and the KPI module, as globals -->
<script src="https://cdn.latticegrid.dev/lattice-grid@1.108.0/lattice-grid.min.js"></script>
<script src="https://cdn.latticegrid.dev/lattice-grid@1.108.0/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 Inside a whole product Documentation
demos
Run it, then change it.
KPI viewer
A row of live tiles beside the grid.
KPI clocks
Time where the work is happening.
KPI tree
The health of the rows you are looking at.
docs
Reference and the rest of the product.
KPI API
The stat-tile module.
Charts
Charts from the same rows.
Dashboards
The section: tiles, charts and the Designer.
Also in the licence
- GridThe data grid with derived grids, statistics and Explain built in.
- GanttDependencies, critical path and resource load.
- KanbanA board over the rows you already have.
- CalendarA schedule view over a date column.
- SchedulerPeople and machines allocated to work.
- FormsForms, the record editor, the app shell, and the context menu, sidebar and toolbar.