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.
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@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Stat } from "@krizaka/ui/stat";Exemples
Up
A rise, with its period.
Revenue
€4,812
+12 %vs last month
import { Stat } from "@krizaka/ui/stat";
export default function StatUp() {
return <Stat label="Revenue" value="€4,812" hint="vs last month" trend="up" trendLabel="+12 %" />;
}Down
A fall, said in words next to the arrow.
Revenue
€4,812
−4 %vs last month
import { Stat } from "@krizaka/ui/stat";
export default function StatDown() {
return <Stat label="Revenue" value="€4,812" hint="vs last month" trend="down" trendLabel="−4 %" />;
}Flat
No change.
Revenue
€4,812
0 %vs last month
import { Stat } from "@krizaka/ui/stat";
export default function StatFlat() {
return <Stat label="Revenue" value="€4,812" hint="vs last month" trend="flat" trendLabel="0 %" />;
}Plain
Label and value only.
Revenue
€4,812
import { Stat } from "@krizaka/ui/stat";
export default function StatPlain() {
return <Stat label="Revenue" value="€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
import { Stat } from "@krizaka/ui/stat";
// A row of stats, as a dashboard shows them.
export default function StatRow() {
return (
<div className="grid grid-cols-3 gap-8 rounded-xl border border-border-default bg-surface-1 p-6">
<Stat label="Views" value="12.4k" trend="up" trendLabel="+8 %" hint="7 days" />
<Stat label="Supporters" value="318" trend="up" trendLabel="+21" hint="7 days" />
<Stat label="Payouts" value="€902" trend="down" trendLabel="−3 %" hint="7 days" />
</div>
);
}Props
| 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. |
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. |
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. - 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 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub