KPI stat
A key figure with its change against the previous period and a sparkline of the period, on the kit's Stat.
Web only — React, from @krizaka/charts/card. Beta: its API may still change in a minor version.
Why it is here. Orazaka's dashboard head: jobs, success rate, time to a result, spend (#253).
When to use
- The head of a dashboard: jobs, success rate, time to a result, spend.
- Anywhere a figure needs its direction and its shape at a glance.
When not to use
- A chart the reader will explore.Use instead: Line chart
- A value against a limit.Use instead: Gauge
Installation
Install
npm install @krizaka/chartsImport
import { KpiStat } from "@krizaka/charts/card";Examples
A dashboard row
Four figures in a StatGrid, with sparklines and trends.
Jobs
195
+24% vs previous periodlast 8 days
Jobs
Sparkline, 8 (1 – 8). Jobs: from 12 to 41, lowest 9 (3), highest 41 (8), up 242%.
| Category | Jobs |
|---|---|
| 1 | 12 |
| 2 | 18 |
| 3 | 9 |
| 4 | 22 |
| 5 | 31 |
| 6 | 27 |
| 7 | 35 |
| 8 | 41 |
Success rate
94%
+3% vs previous periodcompleted / all
Median time
3.2 min
-24% vs previous periodto a result
Median time
Sparkline, 8 (1 – 8). Median time: from 4.2 min to 3.2 min, lowest 3.2 min (8), highest 5.1 min (3), down 24%.
| Category | Median time |
|---|---|
| 1 | 4.2 min |
| 2 | 4.6 min |
| 3 | 5.1 min |
| 4 | 4.4 min |
| 5 | 3.9 min |
| 6 | 3.7 min |
| 7 | 3.5 min |
| 8 | 3.2 min |
Credits spent
1,240
+13% vs previous periodthis period
One figure
A rise in latency is bad: good=down.
Time to a result
48 sec
+55% vs previous periodmedian, last 7 days
Time to a result
Sparkline, 7 (1 – 7). Time to a result: from 31 sec to 48 sec, lowest 29 sec (2), highest 48 sec (7), up 55%.
| Category | Time to a result |
|---|---|
| 1 | 31 sec |
| 2 | 29 sec |
| 3 | 35 sec |
| 4 | 38 sec |
| 5 | 41 sec |
| 6 | 44 sec |
| 7 | 48 sec |
Props
A key figure, its change against the previous period and the shape of the period.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | — | What the figure is (“Jobs”). |
valuerequired | number | — | The figure for the period. |
brand | BrandId | — | The brand whose palette the charts use. Without it, a chart follows a .brand-<id> ancestor, else Krizaka. Set it
when the app loads a brand stylesheet on :root (@krizaka/tokens/brands/orazaka.css). |
categories | readonly unknown[] | — | The labels of data (dates), for the sparkline's summary and table. |
color | SeriesColor | — | The sparkline's colour. Default: the brand's. |
data | readonly (number | null)[] | — | The shape of the period, oldest first (null for a gap). Without it, no sparkline. |
format | ValueFormat | — | How it is written. Default "number". |
good | "up" | "down" | up | Which direction is good news. Default "up"; "down" for latency, failures, spend. |
hint | ReactNode | — | A line under the value: the period, the comparison. |
labels | ChartLabelsInput | — | The words, translated: the buttons, the states, the written summary. |
locale | Locale | — | The locale of every figure and date ("fr-FR"). Default "en-US". |
previous | number | — | The same figure for the previous period: the trend is computed from it. |
trendLabel | ReactNode | — | Your own words for the change instead of “+12 % vs previous period”. |
variant | "area" | "line" | "bar" | area | bar for discrete counts (jobs per day), area (default) or line. |
Accessibility
- The change is written (
+24 % vs previous period), never colour or arrow alone. - The sparkline has its own accessible summary; the figure is read as text.
Best practices
- Pass
previousand the trend is computed and written in words; the arrow is only decoration. - Use
good=downfor latency, failures and spend: the arrow's colour says whether the change is good news. - Put several in a
StatGridof the kit: they wrap with the width.
Related components
Generated from the code of @krizaka/ui 3.19.0: its meta.ts, its examples and its types.Edit this documentation on GitHub