Charts

Sparkline and Gauge

A tiny trend line for tables and stat cards, and a half-circle meter for one measure.

Ant Design: Tiny charts, Gauge

import { Sparkline, Gauge } from '@alea/ui';

Examples

Small trends for stat cards, and a meter for one score.

Visits

9,612

Errors

92Accessibility score

64%Storage used

Sparklines next to the numbers they summarize.

A tiny trend line for tables and stat cards (MUI SparkLineChart, Mantine Sparkline).

Prop	Type	Default	Description
`label`required	`string`	-	What it shows, read by screen readers ("Visits, last 14 days").
`values`required	`number[]`	-	The numbers, oldest first.
`color`	`string`	`'var(--alea-chart-1)'`	Line or bar color. Default the first chart color.
`height`	`number`	`32`	Height in px. Default 32.
`type`	`"area" \| "line" \| "bar"`	`'line'`	line (default), area or bar.
`width`	`number`	`120`	Width in px. Default 120.

A half-circle meter for a single measure: score, load, quota (MUI Gauge, Mantine SemiCircleProgress).

Prop	Type	Default	Description
`label`required	`string`	-	The visible label under the number.
`value`required	`number`	-	The current value.
`max`	`number`	`100`	The top of the scale. Default 100.
`min`	`number`	`0`	The bottom of the scale. Default 0.
`size`	`number`	`200`	Width in px. Default 200.
`thresholds`	`{ upTo: number; tone: "danger" \| "success" \| "warning" \| "accent"; }[]`	-	Colors by range: [{ upTo: 60, tone: 'success' }, ...].
`valueFormat`	`((v: number) => string)`	-	Formats the number in the middle, e.g. v => `${v}%`.

Don't