Charts

Scatter, Radar and Heatmap

How two measures relate, several measures at once, and intensity in a grid.

Ant Design: Scatter, Radar, Heatmap (Ant Charts)

import { ScatterChart, RadarChart, Heatmap } from '@alea/ui';

Examples

Point size can carry a third measure.

Session length and pages

Several measures at once: two profiles compared.

Skills

Activity by day and hour; arrows read each cell.

Deploys by day and hour

8101214161820MonTueWedThuFriSatSun

How two measures relate; sizes make it a bubble chart (MUI ScatterChart, Mantine BubbleChart).

Prop	Type	Default	Description
`series`required	`{ label: string; color?: string \| undefined; points: { x: number; y: number; label?: string \| undefined; size?: number \| undefined; }[]; }[]`	-	Groups of points: label, color and the points with x, y (and an optional label and size).
`description`	`ReactNode`	-	One sentence on what the chart shows; read before it.
`height`	`number`	`280`	Plot height in px. Default 280.
`showTable`	`boolean`	`true`	Shows the "view as table" toggle. Default true.
`title`	`ReactNode`	-	The title shown above it and read by screen readers.
`xFormat`	`((v: number) => string)`	-	Formats x values.
`xLabel`	`string`	`'x'`	Name of the x measure (axis, tooltip, table).
`yFormat`	`((v: number) => string)`	-	Formats y values.
`yLabel`	`string`	`'y'`	Name of the y measure.

Several measures at once, one shape per series: skills, scores, profiles (Mantine RadarChart).

Prop	Type	Default	Description
`axis`required	`string`	-	The key in each row that names the axis ("skill").
`data`required	`ChartRow[]`	-	One row per axis: the axis name in `axis`, a value per series key.
`series`required	`Series[]`	-	The series to draw: key in each row, label for the legend, optional color.
`description`	`ReactNode`	-	One sentence on what the chart shows; read before it.
`max`	`number`	-	The top of the scale. Default the largest value.
`showTable`	`boolean`	`true`	Shows the "view as table" toggle. Default true.
`size`	`number`	`280`	Width and height in px. Default 280.
`title`	`ReactNode`	-	The title shown above it and read by screen readers.

Intensity in a grid: activity by day and hour, contributions, correlations (Mantine Heatmap, MUI X heatmap).

Prop	Type	Default	Description
`columns`required	`string[]`	-	Column labels.
`rows`required	`{ label: string; values: number[]; }[]`	-	Rows of cells: [row label, ...values].
`description`	`ReactNode`	-	One sentence on what the chart shows; read before it.
`showTable`	`boolean`	`true`	Shows the "view as table" toggle. Default true.
`title`	`ReactNode`	-	The title shown above it and read by screen readers.
`valueFormat`	`((v: number) => string)`	-	Formats values in the axis, tooltip and table, e.g. v => `${v}k`.

Use scatter for correlation, radar for profiles, heatmap for patterns over time.
Write the takeaway in description.

Don't