Stat
A key figure: a label, a value in tabular digits, a hint and a trend said in words.
Web uniquement — React, depuis @krizaka/ui/stat. Stable : son API ne change qu’à une version majeure.
Pourquoi il est là. Used by Orochia.
Quand l’utiliser
- On a dashboard: revenue, views, supporters.
- In a row of a few figures that compare over the same period.
Quand ne pas l’utiliser
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Stat, StatGrid } from "@krizaka/ui/stat";Exemples
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 | Défaut | Description |
|---|---|---|---|
labelrequis | ReactNode | — | What the figure is ("Revenue"), above it. |
valuerequis | 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 | Défaut | 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. |
Accessibilité
- The arrow is decorative;
trendLabelis read and shown. - Colour is never the only signal of the trend.
Bonnes pratiques
- 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.
Composants liés
Générée depuis le code de @krizaka/ui 3.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub