@umriss-ui/charts 0.8.1 → 0.9.0

package/docs/llms-full.md

@@ -1,6 +1,6 @@
-# @umriss-ui/charts 0.8.1
+# @umriss-ui/charts 0.9.0
 
-> React canvas chart library for data-dense dashboards - line, area, bar, scatter, control and Pareto charts. Few chart kinds, drawn well, fast.
+> React canvas chart library for data-dense dashboards - line, area, bar, box plot, scatter, control and Pareto charts. Few chart kinds, drawn well, fast.
 
 Install with `pnpm add @umriss-ui/charts`. This text is generated from the package's demo (https://romanhaendler.github.io/umriss-ui/charts/): every page with its import line, its examples - the source exactly as it runs, with the package name where the demo imports its own source - its props tables generated from the code, and what it deliberately does not do. The pages index stands in https://romanhaendler.github.io/umriss-ui/charts/llms.txt.
 
@@ -877,14 +877,11 @@ import { SERVICES, SUCCESS_BY_HOUR, type SuccessCell } from "./operations";
 const BATTERY = batteryDay("v2");
 const STATES = vehicleDay("v2");
 
-const timeOfDay = (v: number) =>
-  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
-
 export default function BandsLimitsAndCells() {
   return (
     <div className="side-by-side">
       <Chart data={BATTERY} height={280} ariaLabel="An e-van's battery against its reserve, above its states" encoding="marks">
-        <XAxis accessor={(d: BatteryPoint) => d.t} tickFormat={timeOfDay} label="Time" tickCount={4} />
+        <XAxis accessor={(d: BatteryPoint) => d.t} time label="Time" tickCount={4} />
         <YAxis accessor={(d: BatteryPoint) => d.charge ?? 0} domain={[-40, 100]} ticks={[0, 20, 40, 60, 80, 100]} label="%" />
         <YAxis id="lane" position="right" accessor={() => 0} domain={[0, 5]} ticks={[0.45]} tickFormat={() => "FP 377 K"} />
         <LimitBand from={10} to={20} severity="warning" label="Reserve" />
@@ -1216,7 +1213,7 @@ It imports `operations.ts` from beside itself; the file stands once, under "File
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `domain` | `"nice" \| "data" \| readonly [number, number]` | — | `"nice"` widens the data's extent to ticks, `"data"` keeps it, a pair is fixed - the one a zoom passes back. |
+| `domain` | `"nice" \| "data" \| readonly [number, number]` | — | `"nice"` widens the data's extent to ticks - to named `ticks` where there are any, on a time axis to whole units of a step of hours or longer -, `"data"` keeps it, a pair is fixed - the one a zoom passes back. |
 | `position` | `"bottom" \| "top"` | — | Which edge the axis stands at. A second x axis on the opposite edge is how a series counts in a unit of its own. |
 | `time` | `boolean` | — | The values are instants (milliseconds since the epoch): ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant. `calendar` implies it. |
 | `calendar` | `readonly WorkingInterval[]` | — | Working calendar: the intervals in which time counts. With it the axis stands in working time - nights and weekends are out, and every removed span gets a break mark. The scale stays affine; the mapping happens in materialisation (ADR-0001). |
@@ -1720,6 +1717,448 @@ It imports `logistics.ts` from beside itself; the file stands once, under "Files
 
 What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0032-what-umriss-is-not.md).
 
+### BoxPlot
+
+A distribution per position (a box plot, box-and-whisker): quartiles, median and whiskers, per service, per group or per hour. Reach for it to compare spreads, not single values.
+
+```ts
+import { BoxPlot } from "@umriss-ui/charts";
+```
+
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/boxplot/
+
+Every number is the caller's: `median`, the two quartiles and where each whisker ends. The library computes none of them and names no quartile method or whisker rule, so a box aggregated in a database draws as well as one computed in the browser.
+
+A box stands on the numeric x axis as a bar does: a group is a position a `tickFormat` names, and a time axis carries a box per hour (ADR-0002). A missing median is a gap - no box is drawn there.
+
+#### Examples
+
+##### One box per service
+
+Five numbers per row, computed wherever the caller likes. Services are positions 0, 1, 2 on the numeric x axis; `tickFormat` names them.
+
+```tsx
+import { BoxPlot, Chart, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+
+interface ResponseTime {
+  service: string;
+  low: number;
+  q1: number;
+  median: number;
+  q3: number;
+  high: number;
+}
+
+/* Milliseconds per request over the last hour, aggregated by the database. */
+const RESPONSE_TIMES: ResponseTime[] = [
+  { service: "Checkout", low: 112, q1: 138, median: 149, q3: 161, high: 195 },
+  { service: "Billing", low: 85, q1: 121, median: 140, q3: 173, high: 238 },
+  { service: "Search", low: 140, q1: 152, median: 158, q3: 165, high: 181 },
+];
+
+export default function Minimal() {
+  return (
+    <Chart data={RESPONSE_TIMES} height={260} ariaLabel="Response time per service over the last hour">
+      <XAxis accessor={(_: ResponseTime, i) => i} ticks={[0, 1, 2]} tickFormat={(v) => RESPONSE_TIMES[v]?.service ?? ""} />
+      <YAxis accessor={(d: ResponseTime) => d.median} tickFormat={(v) => `${v} ms`} />
+      <BoxPlot
+        name="Response time"
+        median={(d: ResponseTime) => d.median}
+        lowerQuartile={(d: ResponseTime) => d.q1}
+        upperQuartile={(d: ResponseTime) => d.q3}
+        lowerWhisker={(d: ResponseTime) => d.low}
+        upperWhisker={(d: ResponseTime) => d.high}
+      />
+      <Tooltip />
+    </Chart>
+  );
+}
+```
+
+##### A box per hour on a time axis
+
+Checkout's median latency, every five minutes, gathered into one box per hour. The quartiles and the whisker rule are the caller's - here the last value within 1.5 IQR - and the library draws what it is given.
+
+```tsx
+import { BoxPlot, Chart, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { metrics } from "./operations";
+
+const HOUR = 3_600_000;
+
+interface HourBox {
+  hour: number;
+  low: number;
+  q1: number;
+  median: number;
+  q3: number;
+  high: number;
+}
+
+/** The value at share p of the sorted values, between neighbours. */
+function quantile(sorted: readonly number[], p: number): number {
+  const at = (sorted.length - 1) * p;
+  const lo = Math.floor(at);
+  return (sorted[lo] as number) + ((sorted[Math.ceil(at)] as number) - (sorted[lo] as number)) * (at - lo);
+}
+
+function hourBoxes(): HourBox[] {
+  const byHour = new Map<number, number[]>();
+  for (const point of metrics("checkout")) {
+    const hour = Math.floor(point.t / HOUR) * HOUR;
+    byHour.set(hour, [...(byHour.get(hour) ?? []), point.p50]);
+  }
+  return [...byHour].map(([hour, values]) => {
+    const sorted = values.sort((a, b) => a - b);
+    const q1 = quantile(sorted, 0.25);
+    const q3 = quantile(sorted, 0.75);
+    const reach = 1.5 * (q3 - q1);
+    const inside = sorted.filter((v) => v >= q1 - reach && v <= q3 + reach);
+    return { hour, low: inside[0] as number, q1, median: quantile(sorted, 0.5), q3, high: inside[inside.length - 1] as number };
+  });
+}
+
+const BOXES = hourBoxes();
+
+export default function OverTime() {
+  return (
+    <Chart data={BOXES} height={280} ariaLabel="Checkout median latency per hour today">
+      <XAxis accessor={(d: HourBox) => d.hour} time />
+      <YAxis accessor={(d: HourBox) => d.median} tickFormat={(v) => `${v} ms`} />
+      <BoxPlot
+        name="Checkout p50"
+        median={(d: HourBox) => d.median}
+        lowerQuartile={(d: HourBox) => d.q1}
+        upperQuartile={(d: HourBox) => d.q3}
+        lowerWhisker={(d: HourBox) => d.low}
+        upperWhisker={(d: HourBox) => d.high}
+      />
+      <Tooltip />
+    </Chart>
+  );
+}
+```
+
+It imports `operations.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+##### With outliers
+
+`outliers` returns the values beyond the whiskers, a list per box. They are drawn with their box and read in its tooltip, the first five written out; one more than three IQR beyond its box is a ring.
+
+```tsx
+import { BoxPlot, Chart, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+
+interface ResponseTime {
+  service: string;
+  low: number;
+  q1: number;
+  median: number;
+  q3: number;
+  high: number;
+  outliers: number[];
+}
+
+/* Milliseconds per request over the last hour. The whiskers end at the last
+   value within 1.5 IQR; the database returned everything beyond as outliers. */
+const RESPONSE_TIMES: ResponseTime[] = [
+  { service: "Checkout", low: 112, q1: 138, median: 149, q3: 161, high: 195, outliers: [224, 98] },
+  { service: "Billing", low: 85, q1: 121, median: 140, q3: 173, high: 238, outliers: [281, 395] },
+  { service: "Search", low: 140, q1: 152, median: 158, q3: 165, high: 181, outliers: [189, 214, 104] },
+  { service: "Images", low: 99, q1: 126, median: 137, q3: 150, high: 186, outliers: [193, 198, 204, 210, 222, 235, 259, 71] },
+];
+
+export default function WithOutliers() {
+  return (
+    <Chart data={RESPONSE_TIMES} height={300} ariaLabel="Response time per service over the last hour, with outliers">
+      <XAxis accessor={(_: ResponseTime, i) => i} ticks={[0, 1, 2, 3]} tickFormat={(v) => RESPONSE_TIMES[v]?.service ?? ""} />
+      <YAxis accessor={(d: ResponseTime) => d.median} tickFormat={(v) => `${v} ms`} />
+      <BoxPlot
+        name="Response time"
+        median={(d: ResponseTime) => d.median}
+        lowerQuartile={(d: ResponseTime) => d.q1}
+        upperQuartile={(d: ResponseTime) => d.q3}
+        lowerWhisker={(d: ResponseTime) => d.low}
+        upperWhisker={(d: ResponseTime) => d.high}
+        outliers={(d: ResponseTime) => d.outliers}
+      />
+      <Tooltip />
+    </Chart>
+  );
+}
+```
+
+##### Mean and notches: do two medians differ?
+
+Where two boxes' notches do not overlap, their medians differ. The bounds are yours - here the usual median ± 1.57 · IQR / √n. `mean` draws a small ×: beside the median it shows a skew. `count` is read, not drawn.
+
+```tsx
+import { BoxPlot, Chart, DataTable, Legend, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+
+interface Batch {
+  supplier: string;
+  low: number;
+  q1: number;
+  median: number;
+  q3: number;
+  high: number;
+  mean: number;
+  n: number;
+}
+
+/* Breaking strength of tiles, in newtons, per clay supplier. */
+const BATCHES: Batch[] = [
+  { supplier: "Hollen", low: 1310, q1: 1395, median: 1430, q3: 1468, high: 1540, mean: 1431, n: 120 },
+  { supplier: "Marsk", low: 1290, q1: 1380, median: 1418, q3: 1462, high: 1555, mean: 1426, n: 64 },
+  { supplier: "Velde", low: 1240, q1: 1322, median: 1352, q3: 1398, high: 1490, mean: 1371, n: 96 },
+];
+
+const notch = (d: Batch) => (1.57 * (d.q3 - d.q1)) / Math.sqrt(d.n);
+
+export default function MeanAndNotches() {
+  return (
+    <Chart data={BATCHES} height={300} ariaLabel="Breaking strength per clay supplier, with mean and notches">
+      <XAxis accessor={(_: Batch, i) => i} ticks={[0, 1, 2]} tickFormat={(v) => BATCHES[v]?.supplier ?? ""} />
+      <YAxis accessor={(d: Batch) => d.median} tickFormat={(v) => `${v} N`} />
+      <BoxPlot
+        name="Breaking strength"
+        median={(d: Batch) => d.median}
+        lowerQuartile={(d: Batch) => d.q1}
+        upperQuartile={(d: Batch) => d.q3}
+        lowerWhisker={(d: Batch) => d.low}
+        upperWhisker={(d: Batch) => d.high}
+        mean={(d: Batch) => d.mean}
+        notchLower={(d: Batch) => d.median - notch(d)}
+        notchUpper={(d: Batch) => d.median + notch(d)}
+        count={(d: Batch) => d.n}
+        format={(v) => `${Math.round(v)} N`}
+        boxWidth={0.5}
+      />
+      <Legend />
+      <Tooltip />
+      <DataTable />
+    </Chart>
+  );
+}
+```
+
+##### Before and after, side by side
+
+Box series on one x axis stand beside each other, as bars do. `hidden` is your state and `onToggle` hands you the clicked entry; a hidden series leaves the drawing and the y extent.
+
+```tsx
+import { useState } from "react";
+import { BoxPlot, Chart, Legend, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+
+interface Spread {
+  service: number;
+  low: number;
+  q1: number;
+  median: number;
+  q3: number;
+  high: number;
+}
+
+const SERVICES = ["Checkout", "Billing", "Search", "Images"];
+
+/* Milliseconds per request, the week before and the week after the release. */
+const BEFORE: Spread[] = [
+  { service: 0, low: 112, q1: 138, median: 149, q3: 161, high: 195 },
+  { service: 1, low: 85, q1: 121, median: 140, q3: 173, high: 238 },
+  { service: 2, low: 140, q1: 152, median: 158, q3: 165, high: 181 },
+  { service: 3, low: 99, q1: 126, median: 137, q3: 150, high: 186 },
+];
+const AFTER: Spread[] = [
+  { service: 0, low: 118, q1: 135, median: 143, q3: 152, high: 176 },
+  { service: 1, low: 101, q1: 119, median: 128, q3: 139, high: 164 },
+  { service: 2, low: 142, q1: 151, median: 157, q3: 164, high: 179 },
+  { service: 3, low: 103, q1: 124, median: 135, q3: 146, high: 172 },
+];
+
+export default function Grouped() {
+  const [hidden, setHidden] = useState<readonly string[]>([]);
+  const toggle = (name: string) => setHidden((h) => (h.includes(name) ? h.filter((n) => n !== name) : [...h, name]));
+  return (
+    <Chart data={BEFORE} height={280} ariaLabel="Response time per service before and after the release">
+      <XAxis accessor={(d: Spread) => d.service} ticks={[0, 1, 2, 3]} tickFormat={(v) => SERVICES[v] ?? ""} />
+      <YAxis accessor={(d: Spread) => d.median} tickFormat={(v) => `${v} ms`} />
+      {[
+        { name: "Before", data: BEFORE },
+        { name: "After", data: AFTER },
+      ].map((one) => (
+        <BoxPlot
+          key={one.name}
+          name={one.name}
+          data={one.data}
+          hidden={hidden.includes(one.name)}
+          median={(d: Spread) => d.median}
+          lowerQuartile={(d: Spread) => d.q1}
+          upperQuartile={(d: Spread) => d.q3}
+          lowerWhisker={(d: Spread) => d.low}
+          upperWhisker={(d: Spread) => d.high}
+        />
+      ))}
+      <Legend onToggle={toggle} />
+      <Tooltip />
+    </Chart>
+  );
+}
+```
+
+##### Against the objective
+
+A `LimitLine` shows what was promised. Whether a box breaks it is your judgement, not the library's: this week's whiskers reach past the objective in every region, so its series carries `tone="alarm"`.
+
+```tsx
+import { BoxPlot, Chart, Legend, LimitLine, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+
+interface Spread {
+  region: number;
+  low: number;
+  q1: number;
+  median: number;
+  q3: number;
+  high: number;
+}
+
+const REGIONS = ["Europe", "Americas", "Asia"];
+
+/* Checkout's 95th percentile per five minutes, in ms, per region and week. */
+const LAST_WEEK: Spread[] = [
+  { region: 0, low: 182, q1: 204, median: 216, q3: 229, high: 262 },
+  { region: 1, low: 191, q1: 213, median: 226, q3: 240, high: 276 },
+  { region: 2, low: 176, q1: 199, median: 211, q3: 224, high: 258 },
+];
+const THIS_WEEK: Spread[] = [
+  { region: 0, low: 196, q1: 231, median: 249, q3: 268, high: 318 },
+  { region: 1, low: 205, q1: 242, median: 262, q3: 283, high: 339 },
+  { region: 2, low: 190, q1: 226, median: 244, q3: 263, high: 311 },
+];
+
+export default function AgainstTheObjective() {
+  return (
+    <Chart data={LAST_WEEK} height={280} ariaLabel="Checkout 95th percentile per region and week against its objective">
+      <XAxis accessor={(d: Spread) => d.region} ticks={[0, 1, 2]} tickFormat={(v) => REGIONS[v] ?? ""} />
+      <YAxis accessor={(d: Spread) => d.median} tickFormat={(v) => `${v} ms`} />
+      <BoxPlot
+        name="Last week"
+        median={(d: Spread) => d.median}
+        lowerQuartile={(d: Spread) => d.q1}
+        upperQuartile={(d: Spread) => d.q3}
+        lowerWhisker={(d: Spread) => d.low}
+        upperWhisker={(d: Spread) => d.high}
+      />
+      <BoxPlot
+        name="This week"
+        data={THIS_WEEK}
+        tone="alarm"
+        median={(d: Spread) => d.median}
+        lowerQuartile={(d: Spread) => d.q1}
+        upperQuartile={(d: Spread) => d.q3}
+        lowerWhisker={(d: Spread) => d.low}
+        upperWhisker={(d: Spread) => d.high}
+      />
+      <LimitLine value={300} severity="alarm" label="Objective" />
+      <Legend />
+      <Tooltip />
+    </Chart>
+  );
+}
+```
+
+##### A box per shift, its medians as a line
+
+The tiles measured in each of six shifts, one box each, and a `Line` through the medians to read the drift. The tooltip reads box and line together; `DataTable` lists every number as text.
+
+```tsx
+import { BoxPlot, Chart, DataTable, Legend, Line, Tooltip, XAxis, YAxis } from "@umriss-ui/charts";
+import { plant } from "./plant";
+
+const SHIFTS = ["Mon early", "Mon late", "Tue early", "Tue late", "Wed early", "Wed late"];
+
+interface ShiftBox {
+  shift: number;
+  low: number;
+  q1: number;
+  median: number;
+  q3: number;
+  high: number;
+}
+
+/** The value at share p of the sorted values, between neighbours. */
+function quantile(sorted: readonly number[], p: number): number {
+  const at = (sorted.length - 1) * p;
+  const lo = Math.floor(at);
+  return (sorted[lo] as number) + ((sorted[Math.ceil(at)] as number) - (sorted[lo] as number)) * (at - lo);
+}
+
+/* One shift per seed; the whiskers end at the last length within 1.5 IQR. */
+const BOXES: ShiftBox[] = SHIFTS.map((_, shift) => {
+  const sorted = plant(shift + 1).samples.map((s) => s.length).sort((a, b) => a - b);
+  const q1 = quantile(sorted, 0.25);
+  const q3 = quantile(sorted, 0.75);
+  const reach = 1.5 * (q3 - q1);
+  const inside = sorted.filter((v) => v >= q1 - reach && v <= q3 + reach);
+  return { shift, low: inside[0] as number, q1, median: quantile(sorted, 0.5), q3, high: inside[inside.length - 1] as number };
+});
+
+const mm = (v: number) => `${v.toFixed(2)} mm`;
+
+export default function Detailed() {
+  return (
+    <Chart data={BOXES} height={320} ariaLabel="Tile length per shift, with the medians as a line">
+      <XAxis accessor={(d: ShiftBox) => d.shift} ticks={SHIFTS.map((_, i) => i)} tickFormat={(v) => SHIFTS[v] ?? ""} label="Shift" />
+      <YAxis accessor={(d: ShiftBox) => d.median} tickFormat={mm} />
+      <BoxPlot
+        name="Tile length"
+        median={(d: ShiftBox) => d.median}
+        lowerQuartile={(d: ShiftBox) => d.q1}
+        upperQuartile={(d: ShiftBox) => d.q3}
+        lowerWhisker={(d: ShiftBox) => d.low}
+        upperWhisker={(d: ShiftBox) => d.high}
+        boxWidth={0.5}
+      />
+      <Line accessor={(d: ShiftBox) => d.median} name="Median" markers="always" />
+      <Legend />
+      <Tooltip />
+      <DataTable />
+    </Chart>
+  );
+}
+```
+
+It imports `plant.ts` from beside itself; the file stands once, under "Files the examples show" at the end.
+
+#### API
+
+##### `BoxPlotProps<T>`
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `median` (required) | `Accessor<T>` | — | The line across the box; null/undefined/NaN/±Infinity means a gap - no box is drawn there, whatever the other numbers say (R-2.5). |
+| `lowerQuartile` (required) | `Accessor<T>` | — | The box's lower edge. |
+| `upperQuartile` (required) | `Accessor<T>` | — | The box's upper edge. |
+| `lowerWhisker` (required) | `Accessor<T>` | — | Where the lower whisker ends - the caller's rule, not the minimum. |
+| `upperWhisker` (required) | `Accessor<T>` | — | Where the upper whisker ends - the caller's rule, not the maximum. |
+| `outliers` | `ListAccessor<T>` | — | The values beyond the whiskers, per box: an array, empty or missing where there are none. Drawn with their box in its colour - one beyond three IQR of the box's own quartiles as a ring -, read in its tooltip and table row, never hit on their own (ADR-0040). |
+| `mean` | `Accessor<T>` | — | The mean, drawn as a small ×: beside the median it shows a skew. |
+| `notchLower` | `Accessor<T>` | — | The notch's lower bound - usually of a confidence interval of the median. Both bounds or neither: one alone warns in DEV and is not drawn. |
+| `notchUpper` | `Accessor<T>` | — | The notch's upper bound; see `notchLower`. |
+| `count` | `Accessor<T>` | — | How many values stand behind the box; read in the tooltip and the table, not drawn. |
+| `xAxisId` | `string` | — | Binding to an x axis (R-4.12). |
+| `yAxisId` | `string` | — | Binding to a y axis (R-4.12). |
+| `data` | `readonly T[]` | — | Series-own data; overrides the container data (R-2.4). |
+| `name` | `string` | — | The name in legend and tooltip. Without one the series is called "Series n" and a warning stands in DEV. |
+| `hidden` | `boolean` | — | Not drawn, not hit and not counted for its axes' extent. Its legend entry stays, drawn back. Controlled, typically from `Legend onToggle`. |
+| `format` | `(value: number) => string` | — | Every number of the box as the tooltip and the table write it; without one the y axis' `tickFormat`, then the default. |
+| `color` | `string` | — | Any CSS colour value; without one the palette --uc-series-N. |
+| `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it. `color` beats it. Set by the caller: a box out of its specification is the caller's judgement, not the library's. |
+| `boxWidth` | `number` | — | Width as a fraction of the step, as a bar's: boxes and bars on one x axis share this fraction and stand side by side. |
+
+#### Known limits
+
+- No horizontal boxes, no violin or jittered points, no box width by count: a density is smoothing, a jitter a picture that does not repeat.
+
+What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0032-what-umriss-is-not.md).
+
 ### Scatter
 
 Single readings as points, joined by nothing (a scatter plot, dots). Reach for it for samples, checks and events - anything that is not a course.
@@ -1835,13 +2274,10 @@ import { VEHICLE_STATES, vehicleDay, type StatePoint } from "./logistics";
 
 const DAY = vehicleDay("v1");
 
-const timeOfDay = (v: number) =>
-  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
-
 export default function OneVehicle() {
   return (
     <Chart data={DAY} height={150} ariaLabel="States of van FP 214 K through the day">
-      <XAxis accessor={(d: StatePoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <XAxis accessor={(d: StatePoint) => d.t} time label="Time" />
       {/* Without a lane the band fills its y axis; one tick names it. */}
       <YAxis accessor={() => 0} domain={[0, 1]} ticks={[0.5]} tickFormat={() => "FP 214 K"} grid={false} />
       <StateBand accessor={(d: StatePoint) => d.state} states={VEHICLE_STATES} name="FP 214 K" />
@@ -1865,13 +2301,10 @@ import { VEHICLE_STATES, batteryDay, vehicleDay, type BatteryPoint, type StatePo
 const BATTERY = batteryDay("v2");
 const STATES = vehicleDay("v2");
 
-const timeOfDay = (v: number) =>
-  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
-
 export default function UnderACourse() {
   return (
     <Chart data={BATTERY} height={320} ariaLabel="An e-van's charge above what it was doing">
-      <XAxis accessor={(d: BatteryPoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <XAxis accessor={(d: BatteryPoint) => d.t} time label="Time" />
       <YAxis accessor={(d: BatteryPoint) => d.charge ?? 0} domain={[-40, 100]} ticks={[0, 25, 50, 75, 100]} label="Charge %" />
       {/* The lane: the bottom unit of five, the rest is room for the course. */}
       <YAxis id="lane" position="right" accessor={() => 0} domain={[0, 5]} ticks={[0.4]} tickFormat={() => "State"} />
@@ -1896,13 +2329,10 @@ import { VEHICLES, VEHICLE_STATES, vehicleDay, type StatePoint } from "./logisti
 
 const FLEET = VEHICLES.map((vehicle) => ({ vehicle, day: vehicleDay(vehicle.id) }));
 
-const timeOfDay = (v: number) =>
-  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
-
 export default function OneLaneEach() {
   return (
     <Chart data={FLEET[0]!.day} height={300} ariaLabel="The states of all eight vehicles through the day">
-      <XAxis accessor={(d: StatePoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <XAxis accessor={(d: StatePoint) => d.t} time label="Time" />
       {/* Lane 0 lies at the bottom, so the first vehicle takes the top lane. */}
       <YAxis
         accessor={() => 0}
@@ -2119,9 +2549,6 @@ import { VEHICLES, VEHICLE_STATES, batteryDay, vehicleDay, type BatteryPoint, ty
 const NORTH = VEHICLES.filter((vehicle) => vehicle.depot === "north");
 const BATTERY = batteryDay("v2");
 
-const timeOfDay = (v: number) =>
-  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
-
 /* The lanes: one domain unit per vehicle, the rest is room for the course.
    Lane 0 lies at the bottom, so the list runs from the bottom up. */
 const LANES = [...NORTH].reverse().map((vehicle) => ({ vehicle, day: vehicleDay(vehicle.id) }));
@@ -2129,7 +2556,7 @@ const LANES = [...NORTH].reverse().map((vehicle) => ({ vehicle, day: vehicleDay(
 export default function LimitsAndState() {
   return (
     <Chart data={BATTERY} height={340} ariaLabel="An e-van's charge against its limits, above the states of the North depot's vehicles">
-      <XAxis accessor={(d: BatteryPoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <XAxis accessor={(d: BatteryPoint) => d.t} time label="Time" />
       <YAxis accessor={(d: BatteryPoint) => d.charge ?? 0} domain={[-100, 100]} ticks={[0, 20, 40, 60, 80, 100]} label="Charge %" />
       <YAxis
         id="lanes"
@@ -2547,7 +2974,7 @@ const month = (row: LedgerRow) => Number(row.month.slice(5)) - 1;
 function Marketing({ placement }: { placement?: "bottom" }) {
   return (
     <Chart data={MARKETING} height={220} ariaLabel={`Marketing's budget and forecast, legend ${placement ?? "above"}`}>
-      <XAxis accessor={month} tickFormat={(v) => MONTH_NAMES[v] ?? ""} tickCount={4} />
+      <XAxis accessor={month} ticks={MONTH_NAMES.map((_, i) => i)} tickFormat={(v) => MONTH_NAMES[v] ?? ""} />
       <YAxis accessor={(d: LedgerRow) => d.forecast} label="€" />
       <Line accessor={(d: LedgerRow) => d.budget} name="Budget" />
       <Line accessor={(d: LedgerRow) => d.forecast} name="Forecast" />
@@ -3597,6 +4024,9 @@ interface MaterializedSeries {
         carry does not belong in the shared type with a comment (ADR-0011). null
         for every kind that does not use it. */
     w: Float64Array | null;
+    /** A box's further numbers beside its median in y; null for every other
+        kind (ADR-0011). */
+    box: BoxChannels | null;
     length: number;
 }
 ```
@@ -3670,7 +4100,7 @@ interface SeriesBase<T = unknown> {
 ### `SeriesConfig`
 
 ```ts
-type SeriesConfig<T = unknown> = LineSeriesConfig<T> | AreaSeriesConfig<T> | BarSeriesConfig<T> | ScatterSeriesConfig<T> | StateSeriesConfig<T> | MatrixSeriesConfig<T>;
+type SeriesConfig<T = unknown> = LineSeriesConfig<T> | AreaSeriesConfig<T> | BarSeriesConfig<T> | BoxSeriesConfig<T> | ScatterSeriesConfig<T> | StateSeriesConfig<T> | MatrixSeriesConfig<T>;
 ```
 
 ### `SeriesKind`
@@ -3717,6 +4147,12 @@ interface TooltipPoint<T = unknown> {
         to: number;
         label: string;
     };
+    /** Only for a box: its further numbers; yValue is its median. Fields of
+        their own for the reason `value` has one (ADR-0011). */
+    box?: BoxNumbers & Partial<BoxExtras> & {
+        /** As the caller gave them; only where the series has `outliers`. */
+        outliers?: readonly number[];
+    };
 }
 ```
 
@@ -3790,6 +4226,75 @@ interface DataTableGroup {
 }
 ```
 
+### `BoxSeriesConfig`
+
+```ts
+/** A box plot (CONTEXT.md: Box). The base accessor is the median; the four
+    further numbers are the caller's, computed by whatever method the caller
+    chose - the library draws them and computes none. */
+interface BoxSeriesConfig<T = unknown> extends SeriesBase<T> {
+    kind: "box";
+    lowerQuartile: Accessor<T>;
+    upperQuartile: Accessor<T>;
+    lowerWhisker: Accessor<T>;
+    upperWhisker: Accessor<T>;
+    /** The values beyond the whiskers, per box (ADR-0040). */
+    outliers?: ListAccessor<T>;
+    mean?: Accessor<T>;
+    /** Both bounds or neither (CONTEXT.md: Notch). */
+    notchLower?: Accessor<T>;
+    notchUpper?: Accessor<T>;
+    /** How many values stand behind the box; no y value. */
+    count?: Accessor<T>;
+    /** Width as a fraction of the step; boxes and bars on one x axis share it. */
+    boxWidth: number;
+}
+```
+
+### `BoxChannels`
+
+```ts
+/** The named channels of a box: one number per point, NaN where the median
+    is a gap; and its outliers (ADR-0040). */
+interface BoxChannels extends BoxNumbers<Float64Array> {
+    /** Every box's outliers, flat, box after box; null without `outliers`. */
+    outliers: Float64Array | null;
+    /** Where each box's outliers begin, and one past the last: box i's stand
+        from outlierOffsets[i] to outlierOffsets[i + 1]. null without
+        `outliers`. */
+    outlierOffsets: Uint32Array | null;
+    /** The optional numbers, each null where not given. */
+    mean: Float64Array | null;
+    notchLower: Float64Array | null;
+    notchUpper: Float64Array | null;
+    count: Float64Array | null;
+}
+```
+
+### `BoxNumbers`
+
+```ts
+/** A box's further numbers beside its median, by name. */
+interface BoxNumbers<V = number> {
+    lowerQuartile: V;
+    upperQuartile: V;
+    lowerWhisker: V;
+    upperWhisker: V;
+}
+```
+
+### `BoxExtras`
+
+```ts
+/** The optional numbers of a box (box-plot 04), by name. */
+interface BoxExtras<V = number> {
+    mean: V;
+    notchLower: V;
+    notchUpper: V;
+    count: V;
+}
+```
+
 ## Files the examples show
 
 The demos' shared data, which some examples import from beside themselves. Copied with the example, it runs.
@@ -3807,7 +4312,10 @@ The demos' shared data, which some examples import from beside themselves. Copie
  *   where the month is closed (January and February), the forecast for every
  *   month; Marketing overspends, IT runs under;
  * - `INVOICES` - incoming invoices with their lines (quantity, unit price,
- *   discount, VAT rate), and `APPROVALS`, who signed which, or has yet to.
+ *   discount, VAT rate), and `APPROVALS`, who signed which, or has yet to;
+ * - `TEAMS` - the teams of each cost centre with their headcount, full-time
+ *   equivalents and monthly staff cost, and `BUSINESS_LINES`, which cost
+ *   centres each of the three business lines holds.
  *
  * Amounts in euros. "Now" is Tuesday, 17 March 2026. Plain data and small pure
  * functions, no imports: copy the file beside an example and it runs.
@@ -3959,6 +4467,58 @@ export const APPROVALS: readonly Approval[] = [
   { invoice: "INV-26-0226", step: "finance", approver: "Martina Vogel", decision: "approved", at: on(3, 2) },
   { invoice: "INV-26-0221", step: "cost centre", approver: "Anika Sørensen", decision: "rejected", at: on(2, 24), comment: "Not ordered - the review was cancelled in January." },
 ];
+
+export interface Team {
+  /** The cost centre the team books to. */
+  costCentre: string;
+  name: string;
+  /** People employed, whatever their hours. */
+  headcount: number;
+  /** Full-time equivalents: contracted hours over 40 a week. */
+  fte: number;
+  /** Staff cost of a month, in thousand euros. */
+  monthlyCost: number;
+}
+
+/** Every team, on 17 March: 102 people, 91.5 full-time equivalents. */
+export const TEAMS: readonly Team[] = [
+  { costCentre: "CC-1100", name: "Field sales North", headcount: 9, fte: 8.6, monthlyCost: 61.2 },
+  { costCentre: "CC-1100", name: "Field sales South", headcount: 8, fte: 7.5, monthlyCost: 53.9 },
+  { costCentre: "CC-1100", name: "Inside sales", headcount: 6, fte: 5.2, monthlyCost: 29.8 },
+  { costCentre: "CC-1100", name: "Key accounts", headcount: 4, fte: 4.0, monthlyCost: 33.6 },
+  { costCentre: "CC-1200", name: "Brand", headcount: 3, fte: 2.8, monthlyCost: 19.4 },
+  { costCentre: "CC-1200", name: "Online marketing", headcount: 4, fte: 3.5, monthlyCost: 24.1 },
+  { costCentre: "CC-1200", name: "Trade fairs", headcount: 2, fte: 1.5, monthlyCost: 10.2 },
+  { costCentre: "CC-3100", name: "Service desk", headcount: 7, fte: 5.9, monthlyCost: 31.3 },
+  { costCentre: "CC-3100", name: "Returns", headcount: 3, fte: 2.5, monthlyCost: 12.6 },
+  { costCentre: "CC-2100", name: "Seating", headcount: 6, fte: 5.8, monthlyCost: 43.5 },
+  { costCentre: "CC-2100", name: "Desks", headcount: 7, fte: 6.5, monthlyCost: 48.1 },
+  { costCentre: "CC-2100", name: "Storage", headcount: 5, fte: 4.6, monthlyCost: 33.9 },
+  { costCentre: "CC-2100", name: "Test lab", headcount: 3, fte: 2.5, monthlyCost: 16.8 },
+  { costCentre: "CC-2200", name: "Industrial design", headcount: 4, fte: 3.6, monthlyCost: 27.2 },
+  { costCentre: "CC-2200", name: "Colour and material", headcount: 2, fte: 1.8, monthlyCost: 12.9 },
+  { costCentre: "CC-4100", name: "Accounting", headcount: 5, fte: 4.4, monthlyCost: 27.5 },
+  { costCentre: "CC-4100", name: "Controlling", headcount: 3, fte: 3.0, monthlyCost: 21.3 },
+  { costCentre: "CC-4200", name: "Recruiting", headcount: 2, fte: 1.8, monthlyCost: 12.4 },
+  { costCentre: "CC-4200", name: "Payroll", headcount: 2, fte: 1.5, monthlyCost: 9.6 },
+  { costCentre: "CC-4300", name: "Workplace", headcount: 4, fte: 3.8, monthlyCost: 24.2 },
+  { costCentre: "CC-4300", name: "Applications", headcount: 5, fte: 4.5, monthlyCost: 34.8 },
+  { costCentre: "CC-4400", name: "Buildings", headcount: 3, fte: 3.0, monthlyCost: 16.9 },
+  { costCentre: "CC-4400", name: "Canteen", headcount: 5, fte: 3.2, monthlyCost: 14.7 },
+];
+
+export interface BusinessLine {
+  name: string;
+  /** Its cost centres, in the order a report lists them. */
+  costCentres: readonly string[];
+}
+
+/** How the company reports: three business lines over the nine cost centres. */
+export const BUSINESS_LINES: readonly BusinessLine[] = [
+  { name: "Commercial", costCentres: ["CC-1100", "CC-1200", "CC-3100"] },
+  { name: "Product", costCentres: ["CC-2100", "CC-2200"] },
+  { name: "Corporate services", costCentres: ["CC-4100", "CC-4200", "CC-4300", "CC-4400"] },
+];
 ```
 
 ### `logistics.ts`
@@ -4495,7 +5055,7 @@ export interface AlertType {
 
 export const ALERT_TYPES: readonly AlertType[] = [
   { id: "checkout-latency", label: "Checkout · p95 latency above 300 ms", priority: "high" },
-  { id: "checkout-errors", label: "Checkout · error rate above 2 %", priority: "high" },
+  { id: "checkout-errors", label: "Checkout · error rate above 2\u00a0%", priority: "high" },
   { id: "webhooks-queue", label: "Webhooks · queue older than 5 min", priority: "medium" },
   { id: "search-latency", label: "Search · p95 latency above 250 ms", priority: "medium" },
   { id: "images-disk", label: "Image service · disk 85 % full", priority: "low" },