@xeonr/platform-ui 1.9.0 → 1.10.1

package/dist/kit/Charts.js

@@ -1,90 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import { v } from "../theme/tokens.js";
 import { fmtCount } from "./Facet.js";
-// Three charts in raw SVG, themed with the tokens so they sit in the same visual
-// system as everything else. No charting library: the need is "n series over a
-// shared time axis", "a stacked histogram" and "a stacked area", and a dependency for that costs
-// more in bundle size and theming friction than the code it saves.
-const HOUR = 3_600_000;
-const DAY = 24 * HOUR;
-const hhmm = (t) => new Date(t).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", hour12: false });
-const dayMonth = (t) => new Date(t).toLocaleDateString(undefined, { day: "numeric", month: "short" });
-const dayMonthTime = (t) => `${dayMonth(t)} ${hhmm(t)}`;
-const monthYear = (t) => new Date(t).toLocaleDateString(undefined, { month: "short", year: "numeric" });
-/**
- * How an axis end reads for a series covering `span` ms: a few hours read
- * 14:05, a few days 16 Oct 14:00, a few months 16 Oct, anything longer
- * Oct 2026 (CON-73). Every axis was HH:MM before, so twelve monthly points
- * labelled both ends "00:00". Local time, as the charts always were; a series
- * bucketed in some other zone passes `formatTime`.
- */
-export function timeTick(span) {
-    if (span < 20 * HOUR)
-        return hhmm;
-    if (span <= 3 * DAY)
-        return dayMonthTime;
-    if (span <= 180 * DAY)
-        return dayMonth;
-    return monthYear;
-}
-/** How one bucket or sample reads in a tooltip, from the step between them. */
-function timeDetail(step) {
-    if (step >= 28 * DAY)
-        return monthYear;
-    if (step >= DAY)
-        return dayMonth;
-    return dayMonthTime;
-}
-const HistWrap = styled.div `padding: 12px 14px 8px;`;
-const HistSvg = styled.svg `display: block; width: 100%; height: 84px;`;
-const Axis = styled.div `
-  display: flex; justify-content: space-between;
-  color: ${v.faint}; font-size: 11px; margin-top: 4px; font-variant-numeric: tabular-nums;
-`;
-const Note = styled.div `color: ${v.faint}; font-size: 12px; padding: 22px 0; text-align: center;`;
-const TONE_FILL = {
-    brand: v.brand, ok: v.success, warn: v.warning, crit: v.danger, info: v.info, mut: v.faint,
-};
-const Peak = styled.div `
-  color: ${v.faint}; font-size: 11px; margin-bottom: 4px; font-variant-numeric: tabular-nums;
-`;
-/**
- * Histogram: a stacked bar per bucket over time, so the shape of what you are
- * looking at is visible before you read a single row. `tones` maps a part
- * name to its tone (e.g. error → crit) so a spike reads without a legend.
- *
- * `formatValue` says what a number is ("2.4 GB"); given one, the tallest bar's
- * value is shown above the chart as its scale, and each bar's tooltip breaks
- * its total into parts. `formatTime` overrides how the axis and tooltips read
- * a bucket's start, which otherwise follows the span in local time.
- */
-export function Histogram({ buckets, tones = {}, height, label = "Activity over time", empty = "No activity in range", formatValue, formatTime }) {
-    const sorted = useMemo(() => [...buckets].sort((a, b) => a.t - b.t), [buckets]);
-    if (sorted.length === 0)
-        return _jsx(HistWrap, { children: _jsx(Note, { children: empty }) });
-    const totals = sorted.map((b) => b.parts.reduce((s, p) => s + p.value, 0));
-    const max = Math.max(...totals, 1);
-    const w = 100 / sorted.length;
-    const first = sorted[0].t;
-    const last = sorted[sorted.length - 1].t;
-    const tick = formatTime ?? timeTick(last - first);
-    const detail = formatTime ?? timeDetail(sorted.length > 1 ? sorted[1].t - first : 0);
-    const fmt = formatValue ?? fmtCount;
-    const peak = Math.max(...totals, 0);
-    return (_jsxs(HistWrap, { children: [formatValue ? _jsx(Peak, { children: peak > 0 ? `${formatValue(peak)} peak` : "\u00a0" }) : null, _jsx(HistSvg, { viewBox: "0 0 100 40", preserveAspectRatio: "none", role: "img", "aria-label": label, style: height ? { height } : undefined, children: sorted.map((b, i) => {
-                    let y = 40;
-                    const parts = formatValue && b.parts.length > 1
-                        ? ` (${b.parts.map((p) => `${p.name} ${formatValue(p.value)}`).join(", ")})`
-                        : "";
-                    return (_jsxs("g", { children: [_jsx("title", { children: `${detail(b.t)} — ${fmt(totals[i] ?? 0)}${parts}` }), b.parts.map((p) => {
-                                const h = (p.value / max) * 40;
-                                y -= h;
-                                return _jsx("rect", { x: i * w + w * 0.12, y: y, width: w * 0.76, height: h, fill: TONE_FILL[tones[p.name] ?? "brand"] }, p.name);
-                            })] }, b.t));
-                }) }), _jsxs(Axis, { children: [_jsx("span", { children: tick(first) }), _jsx("span", { children: tick(last) })] })] }));
-}
+import { LegendChips, LegendNote } from "./ChartFrame.js";
+import { CHART_SIZES, TONE_COLOUR, niceTicks, rampToken, spaced, stepLabel, timeDetail, timeTick, timeTicks, useChartSize, } from "./chartScale.js";
+// The time charts in raw SVG, themed with the tokens so they sit in the same
+// visual system as everything else. No charting library: the need is "n series
+// over a shared time axis", lined, stacked or barred, with markers, thresholds,
+// bands and a compare, and a dependency for that costs more in bundle size and
+// theming friction than the code it saves.
+//
+// One plot draws all of them (`TimePlot` below), so a line, a stacked area and
+// a bar chart share the axis rules of board 32, the crosshair, the keyboard,
+// the legend and drag-to-zoom.
+export { timeTick };
 function scaleBytes(n) {
     const units = ["B", "KB", "MB", "GB", "TB", "PB"];
     let val = n;
@@ -95,6 +25,11 @@ function scaleBytes(n) {
     }
     return `${i === 0 || Math.abs(val) >= 100 ? Math.round(val) : Math.abs(val) >= 10 ? val.toFixed(1) : val.toFixed(2)} ${units[i]}`;
 }
+function tickValue(x) {
+    if (Math.abs(x) >= 1000)
+        return fmtCount(Math.round(x));
+    return Number.isInteger(x) ? String(x) : String(Number(x.toPrecision(3)));
+}
 /** Reads a number as its unit. `compact` is the axis form (shorter, whole numbers for percent); the default is the tooltip's. */
 export function formatUnit(value, unit, compact = false) {
     switch (unit) {
@@ -104,168 +39,684 @@ export function formatUnit(value, unit, compact = false) {
         default: return compact ? tickValue(value) : Math.abs(value) >= 100 || Number.isInteger(value) ? fmtCount(Math.round(value)) : value.toFixed(1);
     }
 }
-const Wrap = styled.div `padding: 14px;`;
-const Plot = styled.div `position: relative;`;
-const Svg = styled.svg `display: block; width: 100%; height: 220px; cursor: crosshair; user-select: none;`;
-const Legend = styled.div `display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12px; color: ${v.muted};`;
-// Series colours come from the theme's accent ramp rather than a chart palette.
-const STROKES = [v.brand, v.success, v.warning, v.info, v.danger];
-// A legend entry is a control: clicking isolates or restores a series, which is
-// the only way to read a chart split into a dozen sessions.
-const Key = styled.button `
-  display: inline-flex; align-items: center; gap: 6px;
-  font: inherit; font-size: 12px;
-  color: ${(p) => (p.$off ? v.faint : v.muted)};
-  opacity: ${(p) => (p.$off ? 0.55 : 1)};
-  &::before { content: ""; width: 9px; height: 3px; border-radius: 2px; background: ${(p) => (p.$off ? v.faint : p.$c)}; ${(p) => (p.$dash ? "height: 0; border-top: 2px dashed currentColor; background: none; border-color: " + (p.$off ? v.faint : p.$c) + ";" : "")} }
-  &:hover { color: ${v.text}; }
+/** The change from `was` to `now` as the tooltip writes it: "+72 %", "−9 %", "→" when flat. */
+export function formatDelta(now, was) {
+    if (!Number.isFinite(now) || !Number.isFinite(was))
+        return "";
+    if (was === 0)
+        return now === 0 ? "→" : "new";
+    const pct = ((now - was) / Math.abs(was)) * 100;
+    if (Math.abs(pct) < 1)
+        return "→";
+    return `${pct > 0 ? "+" : "−"}${Math.abs(pct) >= 10 ? Math.round(Math.abs(pct)) : Math.abs(pct).toFixed(1)} %`;
+}
+const syncBus = new Map();
+function publish(key, t, from) {
+    if (!key)
+        return;
+    for (const fn of syncBus.get(key) ?? [])
+        fn(t, from);
+}
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+const Wrap = styled.div `min-width: 0;`;
+const Plot = styled.div `position: relative; min-width: 0;`;
+const PlotSvg = styled.svg `
+  display: block;
+  width: 100%;
+  overflow: visible;
+  cursor: ${(p) => (p.$interactive ? "crosshair" : "default")};
+  user-select: none;
+  touch-action: pan-y;
+  &:focus { outline: none; }
+  &:focus-visible { outline: 2px solid ${v.brand55}; outline-offset: 2px; border-radius: 4px; }
+  text { font-family: ${v.mono}; font-variant-numeric: tabular-nums; }
 `;
-const ChartHint = styled.div `margin-top: 8px; font-size: 11px; color: ${v.faint};`;
+const Note = styled.div `
+  height: ${(p) => p.$h}px; display: grid; place-items: center;
+  color: ${v.faint}; font-size: 12px; text-align: center;
+`;
+const ChartHint = styled.div `margin-top: 4px; font-size: 11px; color: ${v.faint};`;
 const Tip = styled.div `
   position: absolute;
   top: 6px;
-  left: ${(p) => p.$left}%;
-  transform: translateX(${(p) => (p.$flip ? "-100%" : "0")});
-  margin-left: ${(p) => (p.$flip ? "-10px" : "10px")};
   pointer-events: none;
+  min-width: 170px;
+  max-width: 340px;
   background: ${v.surface2};
   border: 1px solid ${v.line2};
-  border-radius: ${v.rCard};
+  border-radius: 8px;
   box-shadow: ${v.elev};
   padding: 7px 9px;
   font-size: 11px;
-  color: ${v.text};
-  white-space: nowrap;
+  color: ${v.muted};
   z-index: ${v.zPop};
-  .t { color: ${v.faint}; margin-bottom: 4px; }
-  .val { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
+  .t { color: ${v.faint}; margin-bottom: 4px; font-family: ${v.mono}; white-space: nowrap; }
+  .more { color: ${v.faint}; margin-top: 2px; }
 `;
 const TipRow = styled.div `
-  display: flex; align-items: center; gap: 6px;
-  &::before { content: ""; width: 8px; height: 3px; border-radius: 2px; background: ${(p) => p.$c}; }
+  display: grid;
+  grid-template-columns: 12px minmax(0, 1fr) auto auto;
+  align-items: center;
+  column-gap: 7px;
+  line-height: 1.7;
+  font-family: ${v.mono};
+  color: ${(p) => (p.$focus ? v.text : v.muted)};
+  .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: ${(p) => (p.$focus || p.$strong ? 600 : 400)}; }
+  .val { color: ${v.text}; font-variant-numeric: tabular-nums; text-align: right; font-weight: ${(p) => (p.$strong ? 600 : 400)}; padding-left: 10px; }
+  .delta { color: ${v.faint}; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
+  .delta.up { color: ${v.chartCrit}; }
+  .delta.down { color: ${v.chartOk}; }
 `;
-const W = 600;
-const H = 200;
-const PAD_L = 58;
-const PAD_B = 18;
-const PAD_T = 8;
-function tickValue(x) {
-    if (Math.abs(x) >= 1000)
-        return fmtCount(Math.round(x));
-    return Number.isInteger(x) ? String(x) : x.toFixed(2);
-}
-/** Splits a series into the unbroken runs of reported samples; a missing one ends the run. */
-function lineRuns(points) {
+const TipSwatch = styled.i `
+  width: 10px; height: ${(p) => (p.$dashed ? 0 : 3)}px; border-radius: 2px;
+  background: ${(p) => (p.$dashed ? "none" : p.$c)};
+  border-top: ${(p) => (p.$dashed ? `2px dashed ${p.$c}` : "0")};
+`;
+const MAX_TIP_ROWS = 12;
+/** Splits aligned values into the unbroken runs of reported samples; a missing one ends the run. */
+function runsOf(xs, ys) {
     const runs = [];
     let run = [];
-    for (const p of points) {
-        if (p.v == null || !Number.isFinite(p.v)) {
+    for (let i = 0; i < xs.length; i++) {
+        const val = ys[i];
+        if (val == null || !Number.isFinite(val)) {
             if (run.length)
                 runs.push(run);
             run = [];
         }
         else
-            run.push({ t: p.t, v: p.v });
+            run.push({ t: xs[i], v: val });
     }
     if (run.length)
         runs.push(run);
     return runs;
 }
-/**
- * LineChart: n series over a shared time axis. Axes to read a value off, a
- * crosshair to compare series at one instant, a legend that mutes lines, and
- * a drag that selects a window (`onZoom`) — the natural gesture once a spike
- * is visible.
- *
- * A point whose `v` is `null`/`undefined` is a sample that was not reported
- * (an agent too old for the metric, a node that was down): the line breaks
- * there rather than dipping to zero, which is a real measurement.
- *
- * `unit` reads the value axis and the crosshair as percent, bytes, bps or
- * count; `formatValue` overrides it ("38 ms"), `area` fills under the lines and
- * `max` pins the top of the axis.
-
- * `formatTime` the time axis, which otherwise follows the span in local time.
- */
-export function LineChart({ series, onZoom, label = "Series", empty = "No samples in range", formatValue, formatTime, unit, area, max }) {
-    const svg = useRef(null);
+const markerColour = (m) => m.colour ?? (m.tone ? TONE_COLOUR[m.tone] : m.kind === "alert" ? v.chartCrit : m.kind === "note" ? v.faint : v.chartDeploy);
+const thresholdWord = (t) => t.label ?? (t.tone === "warn" ? "warn" : t.tone === "ok" ? "ok" : t.tone === "info" ? "target" : "alert");
+function TimePlot(props) {
+    const { series, kind, label, empty, formatValue, formatTime, unit, area, stacked, max, min, log, domain, onZoom, onPoint, onReset, onThresholdDrag, syncKey, legend, legendExtra, total, bandOpacity, neutral, hint, testId, } = props;
+    const size = useChartSize(props.size);
+    const spec = CHART_SIZES[size];
+    const H = props.height ?? spec.height;
+    const axes = spec.yTicks > 0;
+    // A sparkline has no room for annotations: it is the shape, nothing else.
+    const markers = axes ? props.markers : undefined;
+    const thresholds = axes ? props.thresholds : undefined;
+    const bands = axes ? props.bands : undefined;
+    const uid = useId().replace(/:/g, "");
+    const me = useRef(Symbol("chart"));
+    const wrapRef = useRef(null);
+    const svgRef = useRef(null);
+    const [width, setWidth] = useState(600);
     const [hidden, setHidden] = useState(new Set());
-    const [hoverX, setHoverX] = useState(null);
+    const [hover, setHover] = useState(null);
     const [drag, setDrag] = useState(null);
-    const shown = useMemo(() => series.filter((s) => !hidden.has(s.name)), [series, hidden]);
-    // Measured series take the ramp in order; a reference series sits outside it.
+    const down = useRef(null);
+    const dragRule = useRef(null);
+    // The plot is drawn at its real width so its text stays crisp; where there is
+    // no ResizeObserver (a server render, a test DOM) it keeps the default.
+    const hasData = series.some((s) => s.points.length > 0);
+    useLayoutEffect(() => {
+        const el = wrapRef.current;
+        if (!el || typeof ResizeObserver === "undefined")
+            return;
+        const measure = () => { const w = el.getBoundingClientRect().width; if (w > 0)
+            setWidth(Math.max(120, Math.round(w))); };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [hasData]);
+    // Measured series take the ramp in order; a reference, a compare and a
+    // neutral series sit outside it. A compare takes its twin's colour.
     const colours = useMemo(() => {
+        const byName = new Map();
         let n = 0;
-        return series.map((s) => s.tone ? TONE_FILL[s.tone] : s.reference ? v.faint : STROKES[n++ % STROKES.length]);
+        const out = series.map((s) => {
+            if (s.tone)
+                return TONE_COLOUR[s.tone];
+            if (s.colour)
+                return s.colour;
+            if (s.reference || neutral?.(s.name))
+                return v.faint;
+            if (s.compareOf)
+                return "";
+            return rampToken(n++);
+        });
+        series.forEach((s, i) => byName.set(s.name, out[i]));
+        return series.map((s, i) => out[i] || byName.get(s.compareOf ?? "") || v.faint);
+    }, [series, neutral]);
+    const names = series.map((s) => s.name).join("\u0000");
+    // Only names still on the chart count: a new group-by starts with all shown.
+    const muted = useMemo(() => {
+        const present = new Set(names.split("\u0000"));
+        return new Set([...hidden].filter((n) => present.has(n)));
+    }, [hidden, names]);
+    const isShown = (s) => !muted.has(s.name) && !(s.compareOf && muted.has(s.compareOf));
+    // Every series on the union of their timestamps.
+    const aligned = useMemo(() => {
+        const xs = [...new Set(series.flatMap((s) => s.points.map((p) => p.t)))].sort((a, b) => a - b);
+        const index = new Map(xs.map((x, i) => [x, i]));
+        const cols = series.map((s) => {
+            const col = new Array(xs.length).fill(null);
+            for (const p of s.points) {
+                const i = index.get(p.t);
+                if (i !== undefined && p.v != null && Number.isFinite(p.v))
+                    col[i] = p.v;
+            }
+            return col;
+        });
+        let step = Infinity;
+        for (let i = 1; i < xs.length; i++)
+            step = Math.min(step, xs[i] - xs[i - 1]);
+        return { xs, cols, step: Number.isFinite(step) ? step : 60_000 };
     }, [series]);
-    const measured = series.filter((s) => !s.reference).length;
-    const points = shown.flatMap((s) => s.points).filter((p) => p.v != null && Number.isFinite(p.v));
-    const all = series.flatMap((s) => s.points.map((p) => p.t));
-    if (all.length === 0)
-        return _jsx(Wrap, { children: _jsx(Note, { children: empty }) });
-    // The time axis spans every series, so hiding one does not move the x axis
-    // under the reader; only the value axis rescales to what is shown.
-    const tMin = Math.min(...all);
-    const tMax = Math.max(...all);
-    const vMax = max ?? Math.max(...points.map((p) => p.v), 0);
-    const vMin = Math.min(...points.map((p) => p.v), 0);
-    const tSpan = tMax - tMin || 1;
-    const vSpan = vMax - vMin || 1;
-    const x = (t) => PAD_L + ((t - tMin) / tSpan) * (W - PAD_L);
-    const y = (val) => (H - PAD_B) - ((val - vMin) / vSpan) * (H - PAD_B - PAD_T);
-    const frac = (t) => (x(t) - PAD_L) / (W - PAD_L);
-    const timeAt = (fraction) => tMin + fraction * tSpan;
-    const gridValues = [vMin, vMin + vSpan / 2, vMax];
+    const { xs, cols, step } = aligned;
+    // Sync: another chart's crosshair, at the nearest bucket here.
+    useEffect(() => {
+        if (!syncKey)
+            return;
+        const set = syncBus.get(syncKey) ?? new Set();
+        syncBus.set(syncKey, set);
+        const fn = (t, from) => {
+            if (from === me.current)
+                return;
+            if (t === null) {
+                setHover((h) => (h && !h.own ? null : h));
+                return;
+            }
+            let best = -1;
+            for (let i = 0; i < xs.length; i++)
+                if (best < 0 || Math.abs(xs[i] - t) < Math.abs(xs[best] - t))
+                    best = i;
+            if (best >= 0 && Math.abs(xs[best] - t) <= step)
+                setHover({ idx: best, py: null, own: false });
+            else
+                setHover((h) => (h && !h.own ? null : h));
+        };
+        set.add(fn);
+        return () => { set.delete(fn); };
+    }, [syncKey, xs, step]);
+    if (xs.length === 0)
+        return _jsx(Wrap, { ref: wrapRef, "data-testid": testId, children: _jsx(Note, { "$h": H, children: empty }) });
+    const stack = kind === "bars" || !!stacked;
+    const stackable = (s) => stack && !s.reference && !s.overlay && !s.compareOf;
+    // Stacked parts: each part's lower and upper edge at every bucket.
+    const lower = series.map(() => []);
+    const upper = series.map(() => []);
+    const totals = xs.map(() => 0);
+    for (let i = 0; i < xs.length; i++) {
+        let base = 0;
+        series.forEach((s, k) => {
+            if (!stackable(s) || !isShown(s))
+                return;
+            const val = cols[k][i];
+            lower[k][i] = base;
+            if (val == null) {
+                upper[k][i] = kind === "bars" ? null : base;
+                return;
+            }
+            base += val;
+            upper[k][i] = base;
+        });
+        totals[i] = base;
+    }
+    // The value axis fits what is shown, the thresholds and zero.
+    const shownVals = [];
+    series.forEach((s, k) => {
+        if (!isShown(s))
+            return;
+        if (stackable(s))
+            for (const u of upper[k]) {
+                if (u != null)
+                    shownVals.push(u);
+            }
+        else
+            for (const c of cols[k]) {
+                if (c != null)
+                    shownVals.push(c);
+            }
+    });
+    for (const t of thresholds ?? [])
+        if (Number.isFinite(t.value))
+            shownVals.push(t.value * 1.05);
+    let dataMax = shownVals.length ? Math.max(...shownVals) : 1;
+    let dataMin = shownVals.length ? Math.min(...shownVals, 0) : 0;
+    if (min !== undefined)
+        dataMin = min;
+    if (max !== undefined)
+        dataMax = max;
+    let yTicks;
+    let yLo;
+    let yHi;
+    const tickCount = props.height !== undefined && props.height < 120 ? 2 : Math.max(2, spec.yTicks);
+    if (log) {
+        const pos = shownVals.filter((n) => n > 0);
+        const lo = min !== undefined && min > 0 ? min : pos.length ? Math.min(...pos) : 1;
+        const hi = Math.max(dataMax, lo * 10);
+        const a = Math.floor(Math.log10(lo));
+        const b = Math.ceil(Math.log10(hi));
+        yLo = 10 ** a;
+        yHi = 10 ** b;
+        yTicks = [];
+        const every = Math.max(1, Math.ceil((b - a) / Math.max(1, tickCount - 1)));
+        for (let e = a; e <= b; e += every)
+            yTicks.push(10 ** e);
+    }
+    else {
+        const nice = niceTicks(dataMin, dataMax, tickCount);
+        yLo = min ?? nice.min;
+        yHi = max ?? nice.max;
+        if (yHi <= yLo)
+            yHi = yLo + 1;
+        yTicks = nice.ticks.filter((t) => t >= yLo - 1e-9 && t <= yHi + 1e-9);
+    }
     const fmtTip = formatValue ?? (unit ? (n) => formatUnit(n, unit) : tickValue);
-    const fmtV = formatValue ?? (unit ? (n) => formatUnit(n, unit, true) : tickValue);
-    const tick = formatTime ?? timeTick(tMax - tMin);
-    const fractionOf = (clientX) => {
-        const rect = svg.current?.getBoundingClientRect();
-        if (!rect)
+    const fmtAxis = formatValue ?? (unit ? (n) => formatUnit(n, unit, true) : tickValue);
+    const from = domain?.from ?? xs[0];
+    const to = domain?.to ?? (kind === "bars" ? xs[xs.length - 1] + step : xs[xs.length - 1]);
+    const tSpan = Math.max(1, to - from);
+    const yLabels = axes ? yTicks.map((t) => fmtAxis(t)) : [];
+    const padL = axes ? Math.max(28, Math.ceil(Math.max(...yLabels.map((s) => s.length)) * 6.2) + 10) : 0;
+    const padR = axes ? 10 : size === "s" ? 3 : 0;
+    const markerLabels = spec.markerLabels && (markers?.length ?? 0) > 0;
+    const padT = axes ? (markerLabels ? 18 : 8) : 3;
+    const padB = axes ? 20 : 3;
+    const plotW = Math.max(10, width - padL - padR);
+    const plotH = Math.max(10, H - padT - padB);
+    const bottom = padT + plotH;
+    const x = (t) => padL + ((t - from) / tSpan) * plotW;
+    const y = log
+        ? (val) => bottom - ((Math.log10(Math.max(val, yLo)) - Math.log10(yLo)) / (Math.log10(yHi) - Math.log10(yLo))) * plotH
+        : (val) => bottom - ((Math.min(Math.max(val, yLo), yHi) - yLo) / (yHi - yLo)) * plotH;
+    const baseY = y(log ? yLo : Math.max(yLo, Math.min(0, yHi)));
+    const f = (n) => n.toFixed(1);
+    const measured = series.filter((s) => !s.reference && !s.compareOf);
+    const fillSingle = !stack && area && (size === "s" || size === "m" || props.height !== undefined) && measured.length === 1;
+    // Pointer → the nearest bucket.
+    const idxAt = (clientX) => {
+        const rect = svgRef.current?.getBoundingClientRect();
+        if (!rect || rect.width === 0)
+            return null;
+        const px = ((clientX - rect.left) / rect.width) * width;
+        const t = from + ((px - padL) / plotW) * tSpan;
+        let best = 0;
+        for (let i = 1; i < xs.length; i++) {
+            const centre = kind === "bars" ? xs[i] + step / 2 : xs[i];
+            const bestCentre = kind === "bars" ? xs[best] + step / 2 : xs[best];
+            if (Math.abs(centre - t) < Math.abs(bestCentre - t))
+                best = i;
+        }
+        return best;
+    };
+    const fracAt = (clientX) => {
+        const rect = svgRef.current?.getBoundingClientRect();
+        if (!rect || rect.width === 0)
             return null;
-        const plotLeft = rect.left + (PAD_L / W) * rect.width;
-        const plotWidth = rect.width * (1 - PAD_L / W);
-        return Math.min(1, Math.max(0, (clientX - plotLeft) / plotWidth));
+        const px = ((clientX - rect.left) / rect.width) * width;
+        return Math.min(1, Math.max(0, (px - padL) / plotW));
     };
-    // The nearest sample per series to the hovered instant.
-    const hovered = hoverX === null ? null : (() => {
-        const t = timeAt(hoverX);
-        const rows = shown.map((s) => {
-            let best = null;
-            for (const p of s.points)
-                if (!best || Math.abs(p.t - t) < Math.abs(best.t - t))
-                    best = p;
-            return best ? { name: s.name, c: colours[series.indexOf(s)], v: best.v, t: best.t } : null;
-        }).filter((r) => r !== null);
-        return rows.length ? { t, rows } : null;
-    })();
-    const toggle = (name) => setHidden((prev) => {
+    const pyAt = (clientY) => {
+        const rect = svgRef.current?.getBoundingClientRect();
+        if (!rect || rect.height === 0)
+            return null;
+        return ((clientY - rect.top) / rect.height) * H;
+    };
+    /** The series nearest the pointer at a bucket. */
+    const nearest = (idx, py) => {
+        let best = null;
+        let dist = Infinity;
+        series.forEach((s, k) => {
+            if (!isShown(s))
+                return;
+            if (stackable(s)) {
+                const lo = lower[k][idx];
+                const hi = upper[k][idx];
+                if (lo == null || hi == null)
+                    return;
+                if (py !== null && py <= y(lo) && py >= y(hi)) {
+                    best = k;
+                    dist = -1;
+                    return;
+                }
+                const d = py === null ? Infinity : Math.min(Math.abs(py - y(lo)), Math.abs(py - y(hi)));
+                if (d < dist) {
+                    dist = d;
+                    best = k;
+                }
+                return;
+            }
+            const val = cols[k][idx];
+            if (val == null || s.reference)
+                return;
+            const d = py === null ? Infinity : Math.abs(py - y(val));
+            if (dist >= 0 && d < dist) {
+                dist = d;
+                best = k;
+            }
+        });
+        return py === null ? null : best;
+    };
+    const setHoverIdx = (h) => {
+        setHover(h);
+        publish(syncKey, h ? xs[h.idx] : null, me.current);
+    };
+    const pointAt = (idx, py) => {
+        const k = nearest(idx, py);
+        const val = k !== null ? cols[k][idx] : null;
+        return { t: xs[idx], step, series: k !== null ? series[k].name : undefined, value: val ?? undefined };
+    };
+    const onPointerMove = (e) => {
+        if (dragRule.current !== null && onThresholdDrag) {
+            const py = pyAt(e.clientY);
+            if (py === null)
+                return;
+            const clamped = Math.min(bottom, Math.max(padT, py));
+            const val = log
+                ? 10 ** (Math.log10(yLo) + ((bottom - clamped) / plotH) * (Math.log10(yHi) - Math.log10(yLo)))
+                : yLo + ((bottom - clamped) / plotH) * (yHi - yLo);
+            onThresholdDrag(dragRule.current, val);
+            return;
+        }
+        const idx = idxAt(e.clientX);
+        if (idx === null)
+            return;
+        setHoverIdx({ idx, py: pyAt(e.clientY), own: true });
+        if (drag) {
+            const fr = fracAt(e.clientX);
+            if (fr !== null)
+                setDrag({ from: drag.from, to: fr });
+        }
+    };
+    const onPointerDown = (e) => {
+        if (e.button !== 0)
+            return;
+        down.current = { x: e.clientX, y: e.clientY };
+        if (onZoom) {
+            const fr = fracAt(e.clientX);
+            if (fr !== null)
+                setDrag({ from: fr, to: fr });
+        }
+    };
+    const onPointerUp = (e) => {
+        if (dragRule.current !== null) {
+            dragRule.current = null;
+            return;
+        }
+        const start = down.current;
+        down.current = null;
+        if (drag && onZoom && Math.abs(drag.to - drag.from) * plotW > 4) {
+            const a = from + Math.min(drag.from, drag.to) * tSpan;
+            const b = from + Math.max(drag.from, drag.to) * tSpan;
+            setDrag(null);
+            onZoom(new Date(a), new Date(b));
+            return;
+        }
+        setDrag(null);
+        if (onPoint && start && Math.abs(e.clientX - start.x) <= 3) {
+            const idx = idxAt(e.clientX);
+            if (idx !== null)
+                onPoint(pointAt(idx, pyAt(e.clientY)), { clientX: e.clientX, clientY: e.clientY });
+        }
+    };
+    const onContextMenu = (e) => {
+        if (!onPoint)
+            return;
+        e.preventDefault();
+        const idx = idxAt(e.clientX);
+        if (idx !== null)
+            onPoint(pointAt(idx, pyAt(e.clientY)), { clientX: e.clientX, clientY: e.clientY });
+    };
+    const onKey = (e) => {
+        const last = xs.length - 1;
+        const cur = hover?.idx ?? last;
+        let next = cur;
+        if (e.key === "ArrowLeft")
+            next = Math.max(0, cur - 1);
+        else if (e.key === "ArrowRight")
+            next = Math.min(last, cur + 1);
+        else if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = last;
+        else if (e.key === "Escape")
+            next = null;
+        else if (e.key === "Enter" && onPoint && hover) {
+            const rect = svgRef.current?.getBoundingClientRect();
+            onPoint(pointAt(hover.idx, null), { clientX: (rect?.left ?? 0) + (x(xs[hover.idx]) / width) * (rect?.width ?? width), clientY: rect?.top ?? 0 });
+            return;
+        }
+        else
+            return;
+        e.preventDefault();
+        setHoverIdx(next === null ? null : { idx: next, py: null, own: true });
+    };
+    const toggle = (name, solo) => setHidden(() => {
+        const prev = muted;
+        const measuredNames = measured.map((s) => s.name);
+        if (solo) {
+            const soloed = measuredNames.every((n) => n === name ? !prev.has(n) : prev.has(n));
+            return soloed ? new Set() : new Set(measuredNames.filter((n) => n !== name));
+        }
         const next = new Set(prev);
         if (next.has(name))
             next.delete(name);
         else
             next.add(name);
         // Hiding every measured series leaves a chart with no axis to read; treat
-        // the last one as "show all again". References do not count.
-        const off = series.filter((s) => !s.reference && next.has(s.name)).length;
-        return measured > 0 && off === measured ? new Set() : next;
+        // the last one as "show all again". References and compares do not count.
+        const off = measuredNames.filter((n) => next.has(n)).length;
+        return measuredNames.length > 0 && off === measuredNames.length ? new Set() : next;
     });
-    return (_jsxs(Wrap, { children: [_jsxs(Plot, { children: [_jsxs(Svg, { ref: svg, viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "none", role: "img", "aria-label": label, onMouseMove: (e) => { const f = fractionOf(e.clientX); if (f === null)
-                            return; setHoverX(f); setDrag((d) => (d ? { ...d, to: f } : null)); }, onMouseLeave: () => { setHoverX(null); setDrag(null); }, onMouseDown: (e) => { if (!onZoom)
-                            return; const f = fractionOf(e.clientX); if (f !== null)
-                            setDrag({ from: f, to: f }); }, onMouseUp: () => {
-                            if (drag && onZoom)
-                                onZoom(new Date(timeAt(Math.min(drag.from, drag.to))), new Date(timeAt(Math.max(drag.from, drag.to))));
+    // Time ticks, thinned so two labels never touch.
+    const xTickMarks = axes
+        ? timeTicks(from, to, Math.min(spec.xTicks, Math.max(2, Math.floor(plotW / 70))), formatTime)
+        : [];
+    const tipTime = formatTime ?? timeDetail(step);
+    // The hovered bucket's rows: every shown series worst-first (the stacked
+    // charts top-first under a total), a compare read as its twin's delta.
+    const tip = (() => {
+        if (!hover || drag || !hover.own)
+            return null;
+        const idx = hover.idx;
+        const focus = nearest(idx, hover.py);
+        const twins = new Map();
+        series.forEach((s, k) => { if (s.compareOf && isShown(s))
+            twins.set(s.compareOf, k); });
+        const present = new Set(series.map((s) => s.name));
+        const rows = series
+            .map((s, k) => ({ s, k, val: cols[k][idx] ?? null }))
+            .filter((r) => isShown(r.s) && !(r.s.compareOf && present.has(r.s.compareOf)));
+        if (stack)
+            rows.reverse();
+        else
+            rows.sort((a, b) => (a.s.reference ? 1 : 0) - (b.s.reference ? 1 : 0) || (b.val ?? -Infinity) - (a.val ?? -Infinity));
+        if (!rows.length)
+            return null;
+        const shownRows = rows.slice(0, MAX_TIP_ROWS);
+        const left = x(xs[idx] + (kind === "bars" ? step / 2 : 0));
+        const flip = left > width * 0.6;
+        const cmpName = [...twins.values()].map((k) => series[k].name)[0];
+        const vs = cmpName && cmpName.includes(" · ") ? ` · vs ${cmpName.split(" · ").pop()}` : "";
+        return (_jsxs(Tip, { style: flip ? { right: width - left + 12 } : { left: left + 12 }, "data-testid": testId ? `${testId}-tooltip` : undefined, children: [_jsxs("div", { className: "t", children: [tipTime(xs[idx]), step > 0 && xs.length > 1 ? ` · ${stepLabel(step)} bucket` : "", vs] }), total && stack ? (_jsxs(TipRow, { "$strong": true, children: [_jsx("span", {}), _jsx("span", { className: "n", children: "Total" }), _jsx("span", { className: "val", children: fmtTip(totals[idx] ?? 0) }), _jsx("span", {})] })) : null, shownRows.map((r) => {
+                    const twin = twins.get(r.s.name);
+                    const was = twin !== undefined ? cols[twin][idx] : null;
+                    const delta = r.val != null && was != null ? formatDelta(r.val, was) : "";
+                    const dir = delta.startsWith("+") ? "up" : delta.startsWith("−") ? "down" : "";
+                    return (_jsxs(TipRow, { "$focus": focus === r.k && series.length > 1, children: [_jsx(TipSwatch, { "$c": colours[r.k], "$dashed": r.s.reference || r.s.dashed || !!r.s.compareOf }), _jsx("span", { className: "n", children: r.s.name }), _jsx("span", { className: "val", children: r.val == null ? "—" : fmtTip(r.val) }), _jsx("span", { className: `delta ${dir}`, children: delta })] }, r.s.name));
+                }), rows.length > shownRows.length ? _jsxs("div", { className: "more", children: ["+", rows.length - shownRows.length, " more"] }) : null] }));
+    })();
+    // Marker labels at rest (L/XL) skip one that would touch the last kept.
+    const markerX = (markers ?? []).map((m) => x(m.at));
+    const markerKeep = spaced(markerX, 46);
+    const hoverX = hover && !drag ? x(xs[hover.idx] + (kind === "bars" ? step / 2 : 0)) : null;
+    const barW = Math.max(1, (step / tSpan) * plotW);
+    const barInset = barW > 4 ? Math.min(2, barW * 0.12) : 0;
+    const lastValue = (k) => {
+        const c = cols[k];
+        for (let i = c.length - 1; i >= 0; i--)
+            if (c[i] != null)
+                return c[i];
+        return null;
+    };
+    const showLegend = (legend ?? spec.legend) && size !== "s";
+    const legendItems = series.map((s, k) => {
+        const last = lastValue(k);
+        return {
+            key: s.name, name: s.name, colour: colours[k], value: last == null ? undefined : fmtTip(last),
+            dashed: s.reference || s.dashed || !!s.compareOf, faded: !!s.compareOf, off: !isShown(s),
+        };
+    });
+    const thresholdNotes = (thresholds ?? []).filter((t) => Number.isFinite(t.value));
+    return (_jsxs(Wrap, { "data-testid": testId, children: [_jsxs(Plot, { ref: wrapRef, children: [_jsxs(PlotSvg, { ref: svgRef, width: "100%", height: H, viewBox: `0 0 ${width} ${H}`, preserveAspectRatio: "none", role: "img", "aria-label": `${label}. Arrow keys step through the buckets.`, tabIndex: size === "s" ? -1 : 0, "$interactive": size !== "s", onPointerMove: onPointerMove, onPointerDown: onPointerDown, onPointerUp: onPointerUp, onPointerLeave: () => { if (dragRule.current === null) {
+                            setHoverIdx(null);
                             setDrag(null);
-                        }, children: [gridValues.map((g) => (_jsxs("g", { children: [_jsx("line", { x1: PAD_L, x2: W, y1: y(g), y2: y(g), stroke: v.line, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }), _jsx("text", { x: PAD_L - 6, y: y(g) + 3, textAnchor: "end", fontSize: 9, fill: v.faint, children: fmtV(g) })] }, g))), _jsx("text", { x: PAD_L, y: H - 4, fontSize: 9, fill: v.faint, children: tick(tMin) }), _jsx("text", { x: W, y: H - 4, fontSize: 9, fill: v.faint, textAnchor: "end", children: tick(tMax) }), shown.map((s) => {
-                                const i = series.indexOf(s);
-                                const colour = colours[i];
-                                const runs = lineRuns(s.points);
-                                return (_jsxs("g", { children: [area && !s.reference ? runs.filter((r) => r.length > 1).map((r, j) => (_jsx("path", { d: `M ${x(r[0].t)} ${y(0)} ${r.map((p) => `L ${x(p.t)} ${y(p.v)}`).join(" ")} L ${x(r[r.length - 1].t)} ${y(0)} Z`, fill: colour, fillOpacity: 0.14, stroke: "none" }, j))) : null, runs.map((r, j) => r.length > 1
-                                            ? _jsx("path", { d: r.map((p, k) => `${k === 0 ? "M" : "L"} ${x(p.t)} ${y(p.v)}`).join(" "), fill: "none", stroke: colour, strokeWidth: 1.5, vectorEffect: "non-scaling-stroke", ...(s.reference ? { strokeDasharray: "5 4" } : {}) }, j)
+                        } }, onContextMenu: onContextMenu, onDoubleClick: onReset ? (e) => { e.preventDefault(); onReset(); } : undefined, onKeyDown: onKey, onFocus: () => { if (!hover && size !== "s")
+                            setHoverIdx({ idx: xs.length - 1, py: null, own: true }); }, onBlur: () => setHoverIdx(null), children: [bands?.some((b) => b.hatch) ? (_jsx("defs", { children: _jsx("pattern", { id: `hatch-${uid}`, width: "6", height: "6", patternUnits: "userSpaceOnUse", patternTransform: "rotate(45)", children: _jsx("line", { x1: "0", y1: "0", x2: "0", y2: "6", stroke: v.line2, strokeWidth: 2 }) }) })) : null, (bands ?? []).map((b, i) => {
+                                const a = Math.max(padL, x(b.from));
+                                const z = Math.min(padL + plotW, x(b.to));
+                                if (z <= a)
+                                    return null;
+                                return (_jsx("rect", { x: a, y: padT, width: Math.max(1, z - a), height: plotH, fill: b.hatch ? `url(#hatch-${uid})` : b.colour ?? TONE_COLOUR[b.tone ?? "brand"], ...(b.hatch || b.colour ? {} : { opacity: 0.07 }), children: b.label ? _jsx("title", { children: b.label }) : null }, `b${i}`));
+                            }), axes ? yTicks.map((t, i) => (_jsxs("g", { children: [Math.abs(y(t) - bottom) > 0.5 ? _jsx("line", { x1: padL, x2: padL + plotW, y1: f(y(t)), y2: f(y(t)), stroke: v.line, strokeWidth: 1 }) : null, _jsx("text", { x: padL - 6, y: y(t) + 3.5, textAnchor: "end", fontSize: 10, fill: v.faint, children: yLabels[i] })] }, `y${t}`))) : null, axes ? _jsx("line", { x1: padL, x2: padL + plotW, y1: bottom, y2: bottom, stroke: v.line2, strokeWidth: 1 }) : null, xTickMarks.map((tk, i) => {
+                                const px = x(tk.t);
+                                if (px < padL - 1 || px > padL + plotW + 1)
+                                    return null;
+                                const anchor = px - padL < 20 ? "start" : padL + plotW - px < 20 ? "end" : "middle";
+                                return (_jsx("text", { x: px, y: H - 5, fontSize: 10, fill: v.faint, opacity: tk.dim ? 0.6 : 1, textAnchor: anchor, children: tk.label }, `x${i}`));
+                            }), kind === "bars" ? (_jsx("g", { children: series.map((s, k) => {
+                                    if (!stackable(s) || !isShown(s))
+                                        return null;
+                                    return (_jsx("g", { fill: colours[k], children: xs.map((t, i) => {
+                                            const lo = lower[k][i];
+                                            const hi = upper[k][i];
+                                            if (lo == null || hi == null || hi === lo)
+                                                return null;
+                                            const top = y(hi);
+                                            const h = Math.max(0.5, y(lo) - top);
+                                            return _jsx("rect", { x: f(x(t) + barInset), y: f(top), width: f(Math.max(0.5, barW - barInset * 2)), height: f(h), opacity: hover && hover.idx !== i && hover.own ? 0.7 : 1 }, t);
+                                        }) }, s.name));
+                                }) })) : null, stack && kind === "line" ? series.map((s, k) => {
+                                if (!stackable(s) || !isShown(s))
+                                    return null;
+                                const up = upper[k];
+                                const lo = lower[k];
+                                const top = xs.map((t, i) => `${f(x(t))} ${f(y(up[i] ?? 0))}`);
+                                const bot = xs.map((t, i) => `${f(x(t))} ${f(y(lo[i] ?? 0))}`).reverse();
+                                return (_jsxs("g", { children: [_jsx("path", { d: `M ${top.join(" L ")} L ${bot.join(" L ")} Z`, fill: colours[k], fillOpacity: bandOpacity ?? 0.35, stroke: "none" }), _jsx("path", { d: `M ${top.join(" L ")}`, fill: "none", stroke: bandOpacity && bandOpacity > 0.6 ? v.surface : colours[k], strokeWidth: bandOpacity && bandOpacity > 0.6 ? 1.2 : 1.8, strokeLinejoin: "round", strokeLinecap: "round" })] }, s.name));
+                            }) : null, series.map((s, k) => {
+                                if (!isShown(s) || stackable(s))
+                                    return null;
+                                const runs = runsOf(xs, cols[k]);
+                                const colour = colours[k];
+                                const dashed = s.reference || s.dashed || !!s.compareOf;
+                                const xOff = kind === "bars" ? step / 2 : 0;
+                                return (_jsxs("g", { opacity: s.compareOf ? 0.45 : 1, children: [fillSingle && !s.reference && !s.compareOf ? runs.filter((r) => r.length > 1).map((r, j) => (_jsx("path", { d: `M ${f(x(r[0].t + xOff))} ${f(baseY)} ${r.map((p) => `L ${f(x(p.t + xOff))} ${f(y(p.v))}`).join(" ")} L ${f(x(r[r.length - 1].t + xOff))} ${f(baseY)} Z`, fill: colour, fillOpacity: 0.12, stroke: "none" }, `a${j}`))) : null, runs.map((r, j) => r.length > 1
+                                            ? _jsx("path", { d: r.map((p, q) => `${q === 0 ? "M" : "L"} ${f(x(p.t + xOff))} ${f(y(p.v))}`).join(" "), fill: "none", stroke: colour, strokeWidth: size === "s" ? 1.5 : 1.8, strokeLinejoin: "round", strokeLinecap: "round", ...(dashed ? { strokeDasharray: "5 4" } : {}) }, j)
                                             // a lone sample between two gaps has no line to draw; it is a dot
-                                            : _jsx("circle", { cx: x(r[0].t), cy: y(r[0].v), r: 1.8, fill: colour }, j))] }, s.name));
-                            }), drag && Math.abs(drag.to - drag.from) > 0.002 ? (_jsx("rect", { x: PAD_L + Math.min(drag.from, drag.to) * (W - PAD_L), width: Math.abs(drag.to - drag.from) * (W - PAD_L), y: PAD_T, height: H - PAD_B - PAD_T, fill: v.brand12, stroke: v.brand55, strokeWidth: 1, vectorEffect: "non-scaling-stroke" })) : null, hoverX !== null && !drag ? (_jsx("line", { x1: PAD_L + hoverX * (W - PAD_L), x2: PAD_L + hoverX * (W - PAD_L), y1: PAD_T, y2: H - PAD_B, stroke: v.line2, strokeWidth: 1, vectorEffect: "non-scaling-stroke" })) : null, hovered && !drag ? hovered.rows.map((r) => (r.v == null ? null : _jsx("circle", { cx: x(r.t), cy: y(r.v), r: 2.5, fill: r.c }, r.name))) : null] }), hovered && !drag ? (_jsxs(Tip, { "$left": frac(hovered.t) * 100, "$flip": frac(hovered.t) > 0.6, children: [_jsx("div", { className: "t", children: new Date(hovered.t).toLocaleString() }), hovered.rows.map((r) => _jsxs(TipRow, { "$c": r.c, children: [r.name, _jsx("span", { className: "val", children: r.v == null ? "—" : fmtTip(r.v) })] }, r.name))] })) : null] }), _jsx(Legend, { children: series.map((s, i) => (_jsx(Key, { type: "button", "$c": colours[i], "$dash": s.reference, "$off": hidden.has(s.name), onClick: () => toggle(s.name), title: hidden.has(s.name) ? "Show this series" : "Hide this series", children: s.name }, s.name))) }), onZoom ? _jsx(ChartHint, { children: "Drag across the chart to zoom into a window." }) : null] }));
+                                            : _jsx("circle", { cx: f(x(r[0].t + xOff)), cy: f(y(r[0].v)), r: 1.8, fill: colour }, j)), size === "s" && !s.compareOf && !s.reference && runs.length ? (() => {
+                                            const lastRun = runs[runs.length - 1];
+                                            const p = lastRun[lastRun.length - 1];
+                                            return _jsx("circle", { cx: f(x(p.t + xOff)), cy: f(y(p.v)), r: 2.2, fill: colour });
+                                        })() : null] }, s.name));
+                            }), (thresholds ?? []).map((t, i) => {
+                                if (!Number.isFinite(t.value))
+                                    return null;
+                                const ty = y(t.value);
+                                const colour = TONE_COLOUR[t.tone ?? "crit"];
+                                // Two rules close together: the lower one's label goes under its line.
+                                const crowded = (thresholds ?? []).some((o, j) => j !== i && Number.isFinite(o.value) && y(o.value) < ty && ty - y(o.value) < 13);
+                                const labelY = crowded ? ty + 11 : ty - 4;
+                                return (_jsxs("g", { children: [_jsx("line", { x1: padL, x2: padL + plotW, y1: f(ty), y2: f(ty), stroke: colour, strokeWidth: 1, strokeDasharray: "4 3" }), axes ? (_jsx("text", { x: padL + plotW - 2, y: labelY, textAnchor: "end", fontSize: 10, fill: colour, children: `${thresholdWord(t)} · ${fmtAxis(t.value)}` })) : null, onThresholdDrag ? (_jsx("rect", { x: padL, y: ty - 5, width: plotW, height: 10, fill: "transparent", style: { cursor: "ns-resize" }, role: "slider", tabIndex: 0, "aria-label": `${thresholdWord(t)} threshold`, "aria-valuenow": t.value, "aria-valuetext": fmtTip(t.value), "data-testid": testId ? `${testId}-drag-${thresholdWord(t)}` : undefined, onPointerDown: (e) => { e.stopPropagation(); dragRule.current = i; (e.currentTarget.ownerSVGElement ?? e.currentTarget).setPointerCapture?.(e.pointerId); }, onKeyDown: (e) => {
+                                                if (e.key !== "ArrowUp" && e.key !== "ArrowDown")
+                                                    return;
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                const d = Math.abs(t.value) > 0 ? Math.abs(t.value) * 0.05 : 0.01;
+                                                onThresholdDrag(i, t.value + (e.key === "ArrowUp" ? d : -d));
+                                            } })) : null] }, `t${i}`));
+                            }), (markers ?? []).map((m, i) => {
+                                const mx = markerX[i];
+                                if (mx < padL - 0.5 || mx > padL + plotW + 0.5)
+                                    return null;
+                                const colour = markerColour(m);
+                                const near = hoverX !== null && Math.abs(hoverX - mx) < 8;
+                                const labelled = (markerLabels && markerKeep[i]) || near;
+                                return (_jsxs("g", { "data-marker": m.kind ?? "deploy", children: [_jsx("title", { children: m.label }), _jsx("line", { x1: f(mx), x2: f(mx), y1: padT, y2: bottom, stroke: colour, strokeWidth: 1, strokeDasharray: "2 3", opacity: 0.8 }), m.kind === "alert"
+                                            ? _jsx("rect", { x: mx - 1, y: bottom - 6, width: 2, height: 7, fill: colour })
+                                            : m.kind === "note"
+                                                ? _jsx("circle", { cx: mx, cy: bottom, r: 2.6, fill: colour })
+                                                : _jsx("polygon", { points: `${f(mx)},${f(bottom - 6)} ${f(mx - 4.5)},${f(bottom + 1.5)} ${f(mx + 4.5)},${f(bottom + 1.5)}`, fill: colour }), labelled && axes ? (_jsx("text", { x: mx, y: padT - 5, textAnchor: mx > padL + plotW - 30 ? "end" : mx < padL + 30 ? "start" : "middle", fontSize: 10, fill: colour, children: m.label })) : null] }, `m${i}`));
+                            }), drag && Math.abs(drag.to - drag.from) * plotW > 1 ? (_jsx("rect", { x: padL + Math.min(drag.from, drag.to) * plotW, width: Math.abs(drag.to - drag.from) * plotW, y: padT, height: plotH, fill: v.brand12, stroke: v.brand55, strokeWidth: 1 })) : null, hoverX !== null && size !== "s" ? (_jsx("line", { x1: f(hoverX), x2: f(hoverX), y1: padT, y2: bottom, stroke: v.line2, strokeWidth: 1, strokeDasharray: hover?.own ? undefined : "3 3" })) : null, hover && !drag && kind === "line" && size !== "s" ? series.map((s, k) => {
+                                if (!isShown(s))
+                                    return null;
+                                const val = stackable(s) ? upper[k][hover.idx] : cols[k][hover.idx];
+                                if (val == null)
+                                    return null;
+                                return _jsx("circle", { cx: f(x(xs[hover.idx])), cy: f(y(val)), r: 3, fill: colours[k], stroke: v.surface, strokeWidth: 1.5, opacity: s.compareOf ? 0.6 : 1 }, `h${k}`);
+                            }) : null] }), tip] }), showLegend && (series.length > 1 || thresholdNotes.length > 0 || legendExtra || legend) ? (_jsx(LegendChips, { items: legendItems, onToggle: toggle, notes: _jsxs(_Fragment, { children: [thresholdNotes.length ? (_jsx(LegendNote, { colour: TONE_COLOUR[thresholdNotes[0].tone ?? "crit"], dashed: true, children: thresholdNotes.map((t) => `${thresholdWord(t)} ${fmtTip(t.value)}`).join(" · ") })) : null, legendExtra] }) })) : null, hint !== undefined ? hint : onZoom && size !== "s" && size !== "m" ? _jsx(ChartHint, { children: "Drag across the chart to zoom into a window." }) : null] }));
+}
+/**
+ * LineChart: n series over a shared time axis — the default timeseries, up to
+ * eight lines before the legend collapses.
+ *
+ * The axes follow board 32: 3–5 nice value ticks in the unit, the bottom line
+ * the only solid rule, hairlines above it, no vertical grid; 5–7 time ticks on
+ * a round step with a date only at a midnight crossing. Lines are 1.8 px and
+ * round-joined, with no dots at rest; a point whose `v` is `null`/`undefined`
+ * was not reported and breaks the line rather than dipping to zero.
+ *
+ * Hovering (or ← → once focused) draws a crosshair with a dot per series and
+ * one tooltip listing every series worst-first with its value and, for a
+ * series with a `compareOf` twin, the delta. The legend's chips carry each
+ * series' last value: click mutes, shift-click solos. Drag selects a window
+ * (`onZoom`); a click is a point (`onPoint`).
+ *
+ * `markers` (deploys, alert transitions, notes), `thresholds` (dashed, labelled
+ * at the right end) and `bands` (a firing window, a hatched "not in yet") are
+ * first-class. `size` sets the height and what shows; inside a `ChartFrame` it
+ * follows the frame's.
+ */
+export function LineChart({ label = "Series", empty = "No samples in range", ...rest }) {
+    return _jsx(TimePlot, { kind: "line", label: label, empty: empty, ...rest });
+}
+/**
+ * BarChart: counts per bucket, stacked by part (status class, error type) over
+ * time. Each series is a part, stacked in series order; a series with
+ * `overlay` is drawn as a line over the stack (a shifted volume), and a
+ * `compareOf` twin is a dashed line too. Everything else — axes, markers,
+ * thresholds, the tooltip, the legend — is LineChart's.
+ */
+export function BarChart({ label = "Counts over time", empty = "No activity in range", ...rest }) {
+    return _jsx(TimePlot, { kind: "bars", label: label, empty: empty, total: true, ...rest });
+}
+/**
+ * Histogram: a stacked bar per bucket over time — BarChart's time-bucketed
+ * form, taking buckets of parts rather than series. `tones` maps a part name
+ * to its tone (e.g. error → crit) so a spike reads without a legend; untoned
+ * parts take the ramp.
+ *
+ * `formatValue` says what a number is ("2.4 GB") on the axis and in the
+ * tooltip, which breaks each bar's total into parts. `formatTime` overrides
+ * how the axis and tooltips read a bucket's start, which otherwise follows the
+ * span in local time.
+ */
+export function Histogram({ buckets, tones = {}, height, size, label = "Activity over time", empty = "No activity in range", formatValue, formatTime, onZoom, markers }) {
+    const series = useMemo(() => {
+        const order = [];
+        for (const b of buckets)
+            for (const p of b.parts)
+                if (!order.includes(p.name))
+                    order.push(p.name);
+        return order.map((name) => ({
+            name,
+            tone: tones[name],
+            points: buckets.map((b) => ({ t: b.t, v: b.parts.find((p) => p.name === name)?.value ?? 0 })),
+        }));
+    }, [buckets, tones]);
+    return (_jsx(TimePlot, { kind: "bars", series: series, label: label, empty: empty, total: true, formatValue: formatValue ?? fmtCount, formatTime: formatTime, height: height, size: size, onZoom: onZoom, markers: markers, legend: series.length > 1 && (height === undefined || height >= 120) }));
 }
 /**
  * Lines the series up on the union of their timestamps. A series with no point
@@ -285,116 +736,24 @@ export function stackSeries(series) {
         return { t, values, total: values.reduce((a, b) => a + b, 0) };
     });
 }
-// Categorical hues in series order: a band keeps its colour wherever the
-// series sits in a list, and a series named "Other" is the neutral one.
-const BANDS = [v.cat1, v.cat2, v.cat3, v.cat4, v.cat5, v.cat6, v.cat7, v.cat8];
-const bandColour = (name, i) => (name === "Other" ? v.faint : BANDS[i % BANDS.length]);
-const AreaPlot = styled.svg `
-  display: block; width: 100%; height: ${(p) => p.$h}px; cursor: crosshair; user-select: none;
-  &:focus-visible { outline: 2px solid ${v.ring}; outline-offset: 2px; }
-`;
-const AreaTip = styled.div `
-  position: absolute; top: 6px; min-width: 190px; pointer-events: none;
-  background: ${v.surface2}; border: 1px solid ${v.line2}; border-radius: ${v.rCard}; box-shadow: ${v.elev};
-  padding: 7px 9px; font-size: 11px; color: ${v.muted}; z-index: ${v.zPop};
-  .t { color: ${v.faint}; margin-bottom: 4px; }
-`;
-const AreaTipRow = styled.div `
-  display: flex; align-items: center; gap: 6px; line-height: 1.7;
-  ${(p) => (p.$c ? `&::before { content: ""; width: 8px; height: 3px; border-radius: 2px; background: ${p.$c}; }` : "")}
-  .val { margin-left: auto; padding-left: 12px; color: ${v.text}; font-variant-numeric: tabular-nums; font-weight: ${(p) => (p.$strong ? 600 : 400)}; }
-`;
-const AreaLegend = styled.ul `
-  display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 8px 0 0; padding: 0 0 0 44px;
-  font-size: 12px; color: ${v.muted};
-  li { display: inline-flex; align-items: center; gap: 6px; }
-  i { width: 10px; height: 10px; border-radius: 2px; }
-`;
-const AREA_M = { l: 44, r: 12, t: 10, b: 24 };
-/** The smallest of 1, 2, 2.5, 5 × 10ⁿ that is at least `raw`. */
-function niceStep(raw) {
-    if (!(raw > 0))
-        return 1;
-    const mag = 10 ** Math.floor(Math.log10(raw));
-    for (const m of [1, 2, 2.5, 5, 10])
-        if (m * mag >= raw)
-            return m * mag;
-    return 10 * mag;
-}
+const isOther = (name) => name === "Other";
 /**
  * StackedAreaChart: n series stacked over a shared time axis, so the whole and
  * each part's share of it read together (the cells in conformance by domain,
- * requests by route). Series are ChartSeries as LineChart takes them, lined up
- * on the union of their timestamps (`stackSeries`); bands take the categorical
- * hues in order and the legend names them (a series called "Other" is the
- * neutral one; fold a long tail into it rather than drawing a ninth hue).
+ * requests by version). Series are lined up on the union of their timestamps
+ * (`stackSeries`), holding a series' last value; bands take the ramp in order
+ * and the legend names them (a series called "Other" is the neutral one; fold
+ * a long tail into it rather than drawing a ninth hue).
  *
  * Hovering, or the arrow keys once it has focus, reads every band and the total
- * at one instant. `max` caps the value axis (100 for percentages); otherwise
- * it fits the tallest stack. `formatValue` and `formatTime` read as in
- * LineChart. Show the values in a table too: the chart is not the only way in.
+ * at one instant. `max` caps the value axis (100 for percentages). Show the
+ * values in a table too: the chart is not the only way in.
  */
-export function StackedAreaChart({ series, max, height = 300, label = "Stacked series", empty = "No samples in range", formatValue, formatTime }) {
-    const ref = useRef(null);
-    const [width, setWidth] = useState(600);
-    const [at, setAt] = useState(null);
-    const moments = useMemo(() => stackSeries(series), [series]);
-    const drawn = moments.length > 0;
-    // The plot is drawn at its real width so its text stays crisp; where there is no
-    // ResizeObserver (a server render, a test DOM) it keeps the default.
-    useEffect(() => {
-        const el = ref.current;
-        if (!el || typeof ResizeObserver === "undefined")
-            return;
-        const ro = new ResizeObserver(() => setWidth(Math.max(280, el.getBoundingClientRect().width)));
-        ro.observe(el);
-        return () => ro.disconnect();
-    }, [drawn]);
-    if (!drawn)
-        return _jsx(Wrap, { children: _jsx(Note, { children: empty }) });
-    const t0 = moments[0].t;
-    const t1 = moments[moments.length - 1].t;
-    const span = Math.max(1, t1 - t0);
-    const tallest = Math.max(...moments.map((m) => m.total), 0);
-    const step = niceStep((Math.max(tallest * 1.1, 1)) / 4);
-    const top = Math.min(max ?? Infinity, Math.ceil((Math.max(tallest * 1.1, 1)) / step) * step);
-    const gridValues = [];
-    for (let g = 0; g <= top + 1e-9; g += step)
-        gridValues.push(Math.round(g * 100) / 100);
-    if (gridValues[gridValues.length - 1] !== top)
-        gridValues.push(top);
-    const innerW = width - AREA_M.l - AREA_M.r;
-    const x = (t) => AREA_M.l + ((t - t0) / span) * innerW;
-    const y = (val) => height - AREA_M.b - (Math.min(val, top) / top) * (height - AREA_M.t - AREA_M.b);
-    const cum = moments.map((m) => m.values.reduce((acc, val) => [...acc, (acc[acc.length - 1] ?? 0) + val], []));
-    const area = (i) => {
-        const upper = moments.map((m, k) => `${x(m.t)},${y(cum[k][i])}`);
-        const lower = moments.map((m, k) => `${x(m.t)},${y(i === 0 ? 0 : cum[k][i - 1])}`).reverse();
-        return `M${upper.join("L")}L${lower.join("L")}Z`;
-    };
-    const fmtV = formatValue ?? tickValue;
-    const tick = formatTime ?? timeTick(span);
-    const detail = formatTime ?? ((t) => new Date(t).toLocaleString());
-    const nearest = (t) => {
-        let best = 0;
-        for (let i = 1; i < moments.length; i++)
-            if (Math.abs(moments[i].t - t) < Math.abs(moments[best].t - t))
-                best = i;
-        return best;
-    };
-    const fromPointer = (clientX) => {
-        const rect = ref.current?.getBoundingClientRect();
-        if (rect)
-            setAt(nearest(t0 + ((clientX - rect.left - AREA_M.l) / Math.max(1, innerW)) * span));
-    };
-    const onKey = (e) => {
-        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
-            return;
-        e.preventDefault();
-        setAt((cur) => Math.min(moments.length - 1, Math.max(0, (cur ?? moments.length - 1) + (e.key === "ArrowRight" ? 1 : -1))));
-    };
-    const xTicks = Array.from({ length: 5 }, (_, k) => t0 + (span * k) / 4);
-    const m = at === null ? null : moments[Math.min(at, moments.length - 1)];
-    return (_jsxs(Wrap, { children: [_jsxs(Plot, { children: [_jsxs(AreaPlot, { ref: ref, "$h": height, viewBox: `0 0 ${width} ${height}`, role: "img", tabIndex: 0, "aria-label": `${label}. Arrow keys step through the points.`, onPointerMove: (e) => fromPointer(e.clientX), onPointerLeave: () => setAt(null), onKeyDown: onKey, onFocus: () => setAt((cur) => cur ?? moments.length - 1), onBlur: () => setAt(null), children: [gridValues.map((g) => (_jsxs("g", { children: [_jsx("line", { x1: AREA_M.l, x2: width - AREA_M.r, y1: y(g), y2: y(g), stroke: v.line, strokeWidth: 1 }), _jsx("text", { x: AREA_M.l - 8, y: y(g), textAnchor: "end", dominantBaseline: "middle", fontSize: 11, fill: v.faint, children: fmtV(g) })] }, g))), xTicks.map((tk, k) => (_jsx("text", { x: x(tk), y: height - 6, fontSize: 11, fill: v.faint, textAnchor: k === 0 ? "start" : k === xTicks.length - 1 ? "end" : "middle", children: tick(tk) }, tk))), series.map((s, i) => (_jsx("path", { d: area(i), fill: bandColour(s.name, i), fillOpacity: m ? 0.92 : 0.85, stroke: v.surface, strokeWidth: 1.5, strokeLinejoin: "round" }, s.name))), m ? (_jsxs("g", { children: [_jsx("line", { x1: x(m.t), x2: x(m.t), y1: AREA_M.t, y2: height - AREA_M.b, stroke: v.text, strokeOpacity: 0.5, strokeWidth: 1 }), _jsx("circle", { cx: x(m.t), cy: y(m.total), r: 4, fill: v.text, stroke: v.surface, strokeWidth: 2 })] })) : null] }), m ? (_jsxs(AreaTip, { style: x(m.t) > width / 2 ? { right: width - x(m.t) + 12 } : { left: x(m.t) + 12 }, children: [_jsx("div", { className: "t", children: detail(m.t) }), _jsxs(AreaTipRow, { "$strong": true, children: ["Total", _jsx("span", { className: "val", children: fmtV(m.total) })] }), [...series.keys()].reverse().map((i) => (_jsxs(AreaTipRow, { "$c": bandColour(series[i].name, i), children: [series[i].name, _jsx("span", { className: "val", children: fmtV(m.values[i]) })] }, series[i].name)))] })) : null] }), series.length > 1 ? (_jsx(AreaLegend, { "aria-label": "Series", children: series.map((s, i) => _jsxs("li", { children: [_jsx("i", { style: { background: bandColour(s.name, i) } }), s.name] }, s.name)) })) : null] }));
+export function StackedAreaChart({ series, max, height, size, label = "Stacked series", empty = "No samples in range", formatValue, formatTime, markers, onZoom }) {
+    const lines = useMemo(() => {
+        const moments = stackSeries(series);
+        return series.map((s, i) => ({ name: s.name, points: moments.map((m) => ({ t: m.t, v: m.values[i] })) }));
+    }, [series]);
+    return (_jsx(TimePlot, { kind: "line", stacked: true, total: true, series: lines, max: max, height: height, size: size ?? (height === undefined ? "l" : undefined), label: label, empty: empty, formatValue: formatValue, formatTime: formatTime, bandOpacity: 0.85, neutral: isOther, markers: markers, onZoom: onZoom, legend: series.length > 1 }));
 }
 //# sourceMappingURL=Charts.js.map