Sparkline
A word-sized trend without axes — in a stat, a table cell or a sentence — drawn on the server when its width is known.
Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Beside a key figure: the last 30 days of a stat.
- In a table, one per row: each model's throughput, each video's views.
Quand ne pas l’utiliser
- When the reader needs the values, the axes or a comparison.À la place : Line chart
- A value against a range.À la place : Gauge
Installation
Installer
npm install @krizaka/chartsImporter
import { Sparkline } from "@krizaka/charts/sparkline";Exemples
In a stat
Thirty days of views beside the figure, coloured by the trend.
Views, last 30 days
2,520
Views, last 30 days
Sparkline, 30 (1 – 30). Views, last 30 days: from 820 to 2,520, lowest 760 (2), highest 2,520 (30), up 207%.
| Category | Views, last 30 days |
|---|---|
| 1 | 820 |
| 2 | 760 |
| 3 | 910 |
| 4 | 880 |
| 5 | 1,020 |
| 6 | 990 |
| 7 | 1,130 |
| 8 | 1,210 |
| 9 | 1,090 |
| 10 | 1,340 |
| 11 | 1,280 |
| 12 | 1,420 |
| 13 | 1,390 |
| 14 | 1,510 |
| 15 | 1,620 |
| 16 | 1,580 |
| 17 | 1,700 |
| 18 | 1,640 |
| 19 | 1,810 |
| 20 | 1,760 |
| 21 | 1,930 |
| 22 | 2,040 |
| 23 | 1,980 |
| 24 | 2,150 |
| 25 | 2,090 |
| 26 | 2,260 |
| 27 | 2,340 |
| 28 | 2,280 |
| 29 | 2,410 |
| 30 | 2,520 |
In a table
One fixed-width sparkline per row, drawn on the server: latency, coloured inverse.
| Chat · Mistral Large | Chat · Mistral Large, p95 latency Sparkline, 12 (1 – 12). Chat · Mistral Large, p95 latency: from 820 ms to 676 ms, lowest 676 ms (12), highest 820 ms (1), down 18%.
| 676 ms | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Image · Flux | Image · Flux, p95 latency Sparkline, 12 (1 – 12). Image · Flux, p95 latency: from 2,400 ms to 2,950 ms, lowest 2,380 ms (2), highest 2,950 ms (12), up 23%.
| 2950 ms | ||||||||||||||||||||||||||
| Speech · Whisper | Speech · Whisper, p95 latency Sparkline, 12 (1 – 12). Speech · Whisper, p95 latency: from 310 ms to 305 ms, lowest 300 ms (5), highest 312 ms (3), down 1.6%.
| 305 ms |
Bars
Discrete counts: jobs per hour.
Jobs per hour, today
Sparkline, 24 (1 – 24). Jobs per hour, today: from 12 to 14, lowest 2 (5), highest 70 (14), up 17%.
| Category | Jobs per hour, today |
|---|---|
| 1 | 12 |
| 2 | 8 |
| 3 | 5 |
| 4 | 3 |
| 5 | 2 |
| 6 | 4 |
| 7 | 9 |
| 8 | 21 |
| 9 | 38 |
| 10 | 52 |
| 11 | 61 |
| 12 | 58 |
| 13 | 64 |
| 14 | 70 |
| 15 | 66 |
| 16 | 59 |
| 17 | 63 |
| 18 | 55 |
| 19 | 47 |
| 20 | 41 |
| 21 | 33 |
| 22 | 26 |
| 23 | 19 |
| 24 | 14 |
Props
The shape of a trend in a few pixels: a stat's last 30 days, a job's throughput.
| Prop | Type | Défaut | Description |
|---|---|---|---|
datarequis | readonly (number | null)[] | — | The values, oldest first (null for a gap). |
titlerequis | string | — | What the chart shows, in a few words: its accessible name, and its heading unless hideTitle. |
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 the values (dates, ISO or Date), for the summary and the table. Default: their positions. |
className | string | — | A class on the figure (layout: margins, grid placement). |
color | SeriesColor | — | A palette slot, a tone or a CSS colour. Default: the trend's tone when trendTone, else slot 1. |
empty | ReactNode | — | What to show when there is nothing to draw (default: the empty label). An EmptyState of
@krizaka /ui fits. |
error | ReactNode | — | The data could not be loaded: true says the default words, a node says yours (a retry button…). |
format | ValueFormat | — | How the values are written in the summary and table. |
height | number | — | The height of the plot in pixels. Default 280 (a sparkline: 32). |
id | string | — | The id of the figure. |
labels | ChartLabelsInput | — | The words, translated: the buttons, the states, the written summary. |
live | boolean | — | Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point. |
loading | boolean | — | The data is on its way: a skeleton of the chart, announced once. |
locale | Locale | — | The locale of every figure and date ("fr-FR"). Default "en-US". |
style | CSSProperties | — | Inline style on the figure (layout only: colours come from the tokens). |
summary | "hidden" | "visible" | — | The written summary: read by screen readers only ("hidden", default), or shown under the chart ("visible"). |
summaryText | string | — | Your own summary instead of the generated one (still read first by screen readers). |
threshold | Threshold | — | A dashed reference line (yesterday's average, a quota). |
trendTone | boolean | "inverse" | — | Colour by the trend: success up, danger down (or the reverse with "inverse": costs, latency). |
variant | "line" | "area" | "bar" | — | line (default), area (line over a wash) or bar (discrete counts: jobs per hour). |
width | number | — | A fixed width in pixels: drawn on the server too. Default: the container's width. |
Accessibilité
- Its title is visually hidden but names it; its summary (first, last, extremes, trend) is read.
- It does not take the focus: it is a picture of the trend, the figures are in the summary and its table.
Bonnes pratiques
- Give it a
widthin a table: it renders on the server, with no placeholder. - Colour by the trend with
trendTone("inverse"when down is good: costs, latency). - Write the current value next to it: the line shows the shape, not the figure.
Composants liés
Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub