Stat
A key figure: a label, a value in tabular digits, a hint and a trend said in words.
Web only — React, from @krizaka/ui/stat. Stable: its API only changes in a major version.
Why it is here. Used by Orochia.
When to use
- On a dashboard: revenue, views, supporters.
- In a row of a few figures that compare over the same period.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { Stat, StatGrid } from "@krizaka/ui/stat";Examples
Up
A rise, with its period.
Revenue
€4,812
+12 %vs last month
Down
A fall, said in words next to the arrow.
Revenue
€4,812
−4 %vs last month
Flat
No change.
Revenue
€4,812
0 %vs last month
Plain
Label and value only.
Revenue
€4,812
Row
A row of stats, as a dashboard shows them.
Views
12.4k
+8 %7 days
Supporters
318
+217 days
Payouts
€902
−3 %7 days
Grid
StatGrid: figures that wrap, hairlines between them, a meter under one (or a Sparkline of @krizaka/charts in chart).
Gross volume
$21,045
+15 %vs September
Creator earnings
$17,888
+16 %net of fees
Open reports
7
−3since yesterday
Storage
1.74 TB
of 2 TB
Props
Stat
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | ReactNode | — | What the figure is ("Revenue"), above it. |
valuerequired | ReactNode | — | The figure, formatted by the app, in tabular digits. |
chart | ReactNode | — | Under the figure: a Sparkline of
@krizaka /charts (its own accessible summary), a Meter. |
hint | ReactNode | — | A line under the value: the period, the comparison. |
trend | StatTrend | — | The direction of the change; its arrow is decorative. |
trendLabel | ReactNode | — | The change, in words, as read and shown (e.g. "+12 % vs last week") — the arrow alone says nothing. |
StatGrid
A row of key figures that wraps with the width: a dashboard's head. The stats are its children.
| Prop | Type | Default | Description |
|---|---|---|---|
divided | boolean | — | Hairlines between the stats (default) or space only. |
minWidth | number | 11 | The narrowest a stat may be before the row wraps, in rem. Default 11. |
Accessibility
- The arrow is decorative;
trendLabelis read and shown. - Colour is never the only signal of the trend.
Best practices
- Format the value in the app (currency, compact numbers) with
@krizaka/intl. - Put a
Sparklineof @krizaka/charts (or aMeter) inchart: the figure first, its shape under it. - Say the change in
trendLabel(“+12 %”) and the period inhint: the arrow alone says nothing.
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub