StatTile

Usage

import { StatTile } from "@kanzo-tech/ui";

<StatTile label="Gold on the board" value={1284} delta={{ value: 4.2, unit: "%", label: "vs last month" }} />

It is in the root barrel, not on /analytics. A tile takes a number, so making it cost DuckDB-WASM would be absurd — that split is the engine rule, the same one behind Table and DataTableRoot. When the number should come from a query instead of a prop, the connected half is ChartStat.

The value

A numeric value is compacted the way a dashboard reads: 1,284 stays itself, 12,400,000 becomes 12.4M. The threshold is ten thousand, so a four-digit count is never abbreviated into ambiguity.

Pass a string when the figure carries a unit or a precision the tile should not touch — "284 ms", "98.2%". prefix is for currency and symbols that belong to a numeric value: prefix="$" with value={4_200_000} reads $4.2M.

Delta

The delta shows its magnitude; the sign picks the colour, and goodWhenUp says which direction deserves which. Two more failed runs is red, two more connections is green, and both are +2 — the component cannot infer that from the number, which is why the flag exists.

unit sits against the magnitude and before the label, because "+8.2 vs last week" and "+8.2% vs last week" are different claims. Use "pp" for a change in a percentage: a coverage figure going from 99.6% to 98.2% moved 1.4 points, not 1.4 percent.

Trend

trend takes about a dozen points and draws them as a sparkline with its last value marked. It is deliberately unlabelled and unaxised — the shape is the message, and a reader who needs the values needs a chart, not a tile. Fewer than two points draws nothing.

Composing your own

StatTile is a closed form on purpose. When the tile you need is a different one — a status tint, a whole-card link, an icon disc — build it from Card rather than bending this.

API Reference

StatTile

label is sentence case with no trailing colon.

StatTileDelta

StatTileProps is exported, so a wrapper can take the same props without restating them.