Metric Tile
One headline number with its unit, change and trend.
Requests
1.28MUp 12%
<MetricTile
label="Requests"
value="1.28M"
delta={{ value: "12%", direction: "up" }}
sparkline={<Sparkline aria-label="Requests, last 10 hours" data={requests} formatPoint={hour} />}
/>Props
delta
sentiment
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/metric-tile.jsonThe CLI writes components/ikada/metric-tile.tsx and merges the ikada theme into your CSS. It also installs the components it is built from: Skeleton. Or take it from the package: import { MetricTile } from "@sproutboat/ikada";
Usage
import { MetricTile } from "@/components/ikada/metric-tile";
<MetricTile
label="Requests"
value="1.28M"
delta={{ value: "12%", direction: "up" }}
sparkline={<Sparkline aria-label="Requests, last 10 hours" data={requests} formatPoint={hour} />}
/>Examples
Requests
1.28MUp 12%
14.8 req/s average<MetricTile
label="Requests"
value="1.28M"
delta={{ value: "12%", direction: "up" }}
hint="14.8 req/s average"
sparkline={<Sparkline aria-label="Requests, last 10 hours" height={28} data={[8, 11, 9, 14, 13, 17, 16, 21, 19, 24]} formatPoint={(i) => `${14 + i}:00`} />}
/>Error rate
0.21%Down 0.3 pt
Latency
184ms p50Up 9%
<MetricTile
label="Error rate"
value="0.21"
unit="%"
delta={{ value: "0.3 pt", direction: "down", sentiment: "good" }}
/>
<MetricTile
label="Latency"
value="184"
unit="ms p50"
delta={{ value: "9%", direction: "up", sentiment: "bad" }}
/>Requests
1.28M
Requests
1,28 Mio.
<MetricTile label="Requests" amount={1284000} />
<MetricTile label="Requests" amount={1284000} locale="de" />Requests
Loading
<MetricTile label="Requests" loading />Requests
—
No requests since the last deploy<MetricTile label="Requests" noData emptyText="No requests since the last deploy" />Props
| Prop | Type | Description |
|---|---|---|
| labelrequired | string | What the number measures, above it. |
| value | string | Already formatted: "0.21". For a plain count prefer `amount`. |
| amount | number | A count, formatted compactly in `locale` ("1.28M", "860K"). Wins over `value`. |
| locale | string | Number-formatting locale; defaults to the `LocaleProvider` value, else `en`. |
| unit | string | "M", "%", "ms p50". |
| delta | MetricDelta | Change against the previous period, shown as an arrow and a value. |
| hint | ReactNode | A line under the value: "14.8 req/s average". |
| sparkline | ReactNode | A `<Sparkline />` from `@sproutboat/ikada/charts`, flush to the tile's bottom edge, its line ending in line with the tile's text. |
| loading | boolean | Draws a skeleton in place of the value. Default `false`. |
| noData | boolean | Nothing to show for this range: an em dash and `emptyText`. Default `false`. |
| emptyText | string | Shown when there is no value. Default "No data for this range". |
Also takes every prop of Omit<ComponentProps<"div">, "children">.
Source: src/components/metric-tile.tsx