portal-mojo 0.2.12 → 0.2.13

package/docs/charts.md

@@ -69,6 +69,55 @@ Legend entries toggle series; hover shows the crosshair index tooltip;
 ticks are "nice"-rounded; container width is measured (no viewBox
 smearing).
 
+Sparse histories can opt into numeric X positions without changing categorical
+callers:
+
+```tsx
+<SeriesChart
+    labels={['10:01', '10:02', '10:03', '10:12', '10:13']}
+    xValues={[60, 120, 180, 720, 780]}
+    xDomain={[0, 900]}
+    maxGap={180}
+    datasets={[{ label: 'CPU', data: [12, 24, null, 40, 32] }]}
+    minValue={0} maxValue={100}
+    ariaLabel="Kiosk CPU history"
+    valueFormatter={(value) => `${value}%`}
+    onInspect={(index) => { /* selected original sample index, or null */ }}
+/>
+```
+
+- `Dataset.data` accepts `(number | null | undefined)[]`. Null, undefined,
+  `NaN`, and infinities are unavailable: no zero substitution, connecting
+  line, area fill across the gap, bar, or inspection dot. Tooltips say
+  **Unavailable**; incomplete stacked totals do too. A one-point run always
+  has a dot, even above 40 labels or with routine `showDots={false}`.
+- `xValues?: number[]` aligns with the original labels/data indices. Supply
+  ordered timestamps (seconds or milliseconds both work); labels are display
+  strings only. Numeric spacing uses actual values. A missing/nonfinite X
+  breaks the run and cannot be inspected. Reversed X movement breaks the run.
+  With no `xValues`, the existing evenly spaced category centers remain.
+- `xDomain?: [number, number]` fixes the visible window, including empty time
+  before/after the samples. Out-of-window samples are omitted from drawing,
+  inspection, and automatic Y scaling. Omit it to fit the finite X values;
+  a single distinct X is centered. Invalid/reversed domains fall back to fit.
+- `maxGap?: number` breaks line/area runs when the distance between consecutive
+  numeric X values exceeds the limit, in the **same units** as `xValues`.
+  It does not synthesize timestamps or missing buckets. Omit it for no extra
+  distance threshold. Negative/nonfinite limits are ignored.
+- `minValue` and `maxValue` set exact finite Y bounds; omitted ends are
+  automatically scaled. Geometry is clipped at the plot bounds. A reversed
+  pair falls back to automatic bounds. Percentage callers can use `0`/`100`.
+- `ariaLabel` names the focusable SVG. Left/Right inspect adjacent original
+  samples; Home/End inspect the first/last visible timestamp; Escape and blur
+  clear inspection. A live accessible readout announces the label and each
+  visible series value. Pointer movement and touch use that same index and
+  `onInspect(index: number | null)` callback. Touch selection stays after lift;
+  pointer cancellation clears it. Changing series, values, labels, X positions,
+  or domain clears inspection; equivalent new arrays do not.
+
+`npm run verify:series-chart` mounts the real component to cover these
+contracts alongside categorical stacked/grouped bars and container resize.
+
 ## MetricsChart (the django-mojo metrics widget)
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "portal-mojo",
-    "version": "0.2.12",
+    "version": "0.2.13",
     "description": "React portal toolkit for django-mojo — typed client + params store, mission-control UI, dependency-free SVG charts, admin section bundles.",
     "type": "module",
     "license": "Apache-2.0",

package/src/charts/SeriesChart.tsx

@@ -3,13 +3,14 @@
 // (stacked:'auto' → true for bar), grouped opt-out, legend, gridlines,
 // nice Y ticks, thinned X labels, and Chart.js-style "index mode"
 // crosshair tooltips (snap to nearest column, ghost dots, multi-row card).
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 export type ChartType = 'line' | 'bar' | 'area';
 
 export interface Dataset {
     label: string;
-    data: number[];
+    /** Null, undefined and nonfinite numbers are missing samples, never zero. */
+    data: (number | null | undefined)[];
     color?: string;
 }
 
@@ -30,6 +31,18 @@ export interface SeriesChartProps {
     smoothing?: number; // 0 = straight segments
     showDots?: boolean;
     emptyText?: string;
+    /** Numeric positions (e.g. epoch seconds), aligned with labels and data. */
+    xValues?: number[];
+    /** Visible numeric X window, in the same units as xValues. */
+    xDomain?: [number, number];
+    /** Split line/area runs when consecutive numeric X values exceed this gap. */
+    maxGap?: number;
+    /** Exact Y bounds; omitted bounds are computed from visible data. */
+    minValue?: number;
+    maxValue?: number;
+    ariaLabel?: string;
+    /** Shared pointer/touch/keyboard inspection; null means inspection ended. */
+    onInspect?: (index: number | null) => void;
 }
 
 export const CHART_PALETTE = [
@@ -38,6 +51,7 @@ export const CHART_PALETTE = [
 ];
 
 const PAD = { top: 10, right: 14, bottom: 26, left: 48 };
+const isFiniteNumber = (v: unknown): v is number => typeof v === 'number' && Number.isFinite(v);
 
 function niceNum(range: number, round: boolean): number {
     const exp = Math.floor(Math.log10(range || 1));
@@ -53,6 +67,9 @@ function niceScale(min: number, max: number, ticks: number) {
     if (max === min) max = min + 1;
     const range = niceNum(max - min, false);
     const step = niceNum(range / Math.max(1, ticks - 1), true);
+    // Extreme but finite feeds must not turn tick generation into an endless
+    // loop or emit nonfinite SVG coordinates.
+    if (!Number.isFinite(step) || step <= 0) return { min, max, step: max / 2 - min / 2 || 1 };
     return {
         min: Math.floor(min / step) * step,
         max: Math.ceil(max / step) * step,
@@ -90,7 +107,7 @@ export function SeriesChart({
     datasets: datasetsProp,
     chartType = 'line',
     stacked = 'auto',
-    height = 260,
+    height: heightProp = 260,
     showLegend = true,
     showGrid = true,
     gridLines = 5,
@@ -100,7 +117,15 @@ export function SeriesChart({
     smoothing = 0.3,
     showDots = true,
     emptyText = 'No data for this range',
+    xValues,
+    xDomain,
+    maxGap,
+    minValue,
+    maxValue,
+    ariaLabel = 'Series chart',
+    onInspect,
 }: SeriesChartProps) {
+    const height = isFiniteNumber(heightProp) && heightProp > 0 ? heightProp : 260;
     // Malformed feed data must degrade to the empty state, not take down the
     // route (a live-backend shape drift did exactly that once) — warn + empty,
     // per the unknown-value rule.
@@ -115,6 +140,9 @@ export function SeriesChart({
     const [width, setWidth] = useState(600);
     const [hover, setHover] = useState<number | null>(null);
     const [visible, setVisible] = useState<Set<string>>(() => new Set());
+    const id = useId();
+    const tipRef = useRef<HTMLDivElement>(null);
+    const [tipWidth, setTipWidth] = useState(180);
 
     // Measure the container — real pixel geometry keeps text unscaled
     // (a viewBox + preserveAspectRatio="none" would smear the labels).
@@ -123,7 +151,7 @@ export function SeriesChart({
         if (!node) return;
         const ro = new ResizeObserver(([entry]) => {
             const w = entry?.contentRect.width ?? 0;
-            if (w > 0) setWidth(w);
+            if (isFiniteNumber(w) && w > 0) setWidth(w);
         });
         ro.observe(node);
         return () => ro.disconnect();
@@ -139,6 +167,38 @@ export function SeriesChart({
 
     const plotW = Math.max(40, width - PAD.left - PAD.right);
     const plotH = Math.max(40, height - PAD.top - PAD.bottom);
+    const n = labels.length;
+    const colW = n > 0 ? plotW / n : plotW;
+    const xPositions = useMemo(() => {
+        if (!xValues) return labels.map((_, i) => PAD.left + colW * (i + 0.5));
+        const values = xValues.slice(0, n).filter(isFiniteNumber);
+        let min = values.reduce((a, b) => Math.min(a, b), Infinity);
+        let max = values.reduce((a, b) => Math.max(a, b), -Infinity);
+        if (xDomain && isFiniteNumber(xDomain[0]) && isFiniteNumber(xDomain[1]) && xDomain[1] > xDomain[0]) {
+            [min, max] = xDomain;
+        }
+        return labels.map((_, i) => {
+            const x = xValues[i];
+            if (!isFiniteNumber(x) || x < min || x > max) return null;
+            // Half-scaled differences also work for finite domains spanning
+            // more than Number.MAX_VALUE, without overflowing the subtraction.
+            const fraction = max === min ? 0.5 : (x / 2 - min / 2) / (max / 2 - min / 2);
+            return Number.isFinite(fraction) ? PAD.left + fraction * plotW : null;
+        });
+    }, [labels, xValues, xDomain, n, colW, plotW]);
+    const inspectable = xPositions.flatMap((x, i) => x == null ? [] : [i]);
+    const active = hover != null && xPositions[hover] != null ? hover : null;
+    const lastInspection = useRef<number | null | undefined>(undefined);
+    // Compare content, not array identity: callers often construct props during
+    // render, including renders caused by onInspect itself.
+    const inspectionKey = JSON.stringify([seriesKey, labels, xValues, xDomain, datasets.map((ds) => ds.data)]);
+    useEffect(() => { setHover(null); }, [inspectionKey]);
+    useEffect(() => {
+        if (onInspect && lastInspection.current !== active) {
+            lastInspection.current = active;
+            onInspect(active);
+        }
+    }, [active, onInspect]);
 
     const scale = useMemo(() => {
         let max = 0;
@@ -148,7 +208,8 @@ export function SeriesChart({
                 let pos = 0;
                 let neg = 0;
                 for (const ds of shown) {
-                    const v = ds.data[i] ?? 0;
+                    const v = ds.data[i];
+                    if (xPositions[i] == null || !isFiniteNumber(v)) continue;
                     if (v >= 0) pos += v; else neg += v;
                 }
                 max = Math.max(max, pos);
@@ -156,28 +217,47 @@ export function SeriesChart({
             }
         } else {
             for (const ds of shown) {
-                for (const v of ds.data) {
-                    max = Math.max(max, v ?? 0);
-                    min = Math.min(min, v ?? 0);
+                for (let i = 0; i < n; i++) {
+                    const v = ds.data[i];
+                    if (xPositions[i] == null || !isFiniteNumber(v)) continue;
+                    max = Math.max(max, v);
+                    min = Math.min(min, v);
                 }
             }
         }
-        return niceScale(min, max, gridLines);
-    }, [labels.length, shown, isStacked, gridLines]);
+        if (!Number.isFinite(min)) min = -Number.MAX_VALUE;
+        if (!Number.isFinite(max)) max = Number.MAX_VALUE;
+        const count = isFiniteNumber(gridLines) ? Math.max(2, Math.min(100, Math.floor(gridLines))) : 5;
+        const nice = niceScale(min, max, count);
+        let lo = isFiniteNumber(minValue) ? minValue : nice.min;
+        let hi = isFiniteNumber(maxValue) ? maxValue : nice.max;
+        if (hi <= lo) {
+            if (isFiniteNumber(minValue) && !isFiniteNumber(maxValue)) hi = lo + Math.max(1, Math.abs(lo) * 0.1);
+            else if (isFiniteNumber(maxValue) && !isFiniteNumber(minValue)) lo = hi - Math.max(1, Math.abs(hi) * 0.1);
+            else { lo = nice.min; hi = nice.max; }
+        }
+        const boundedStep = niceNum((hi / 2 - lo / 2) / (count - 1), true) * 2;
+        return { min: lo, max: hi, step: minValue != null || maxValue != null ? boundedStep : nice.step };
+    }, [n, shown, isStacked, gridLines, xPositions, minValue, maxValue]);
 
     const yOf = useCallback(
-        (v: number) => PAD.top + plotH - ((v - scale.min) / (scale.max - scale.min || 1)) * plotH,
-        [plotH, scale],
+        (v: number) => {
+            const y = PAD.top + plotH - ((v / 2 - scale.min / 2) / (scale.max / 2 - scale.min / 2 || 1)) * plotH;
+            return Number.isFinite(y) ? y : v > scale.max ? -plotH : plotH + height;
+        },
+        [plotH, scale, height],
     );
 
-    const n = labels.length;
-    const colW = n > 0 ? plotW / n : plotW;
-    // Line/area sample at column centers; bars fill the column.
-    const xCenter = useCallback((i: number) => PAD.left + colW * (i + 0.5), [colW]);
+    const xCenter = (i: number) => xPositions[i]!;
 
     const ticks = useMemo(() => {
         const out: number[] = [];
-        for (let v = scale.min; v <= scale.max + scale.step / 2; v += scale.step) out.push(v);
+        for (let i = 0; i < 200; i++) {
+            const v = scale.min + i * scale.step;
+            if (!isFiniteNumber(v) || v > scale.max) break;
+            if (out.at(-1) !== v) out.push(v);
+        }
+        if (out.at(-1) !== scale.max) out.push(scale.max);
         return out;
     }, [scale]);
 
@@ -186,14 +266,37 @@ export function SeriesChart({
 
     const colorOf = (ds: Dataset, i: number) => ds.color ?? CHART_PALETTE[i % CHART_PALETTE.length]!;
 
-    const onMove = (e: React.MouseEvent<SVGRectElement>) => {
+    const onMove = (e: React.PointerEvent<SVGRectElement>) => {
         const rect = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const idx = Math.min(n - 1, Math.max(0, Math.floor(x / (colW || 1))));
-        setHover(idx);
+        const x = PAD.left + (e.clientX - rect.left) * (plotW / (rect.width || plotW));
+        let nearest: number | null = null;
+        for (const i of inspectable) {
+            if (nearest == null || Math.abs(xCenter(i) - x) < Math.abs(xCenter(nearest) - x)) nearest = i;
+        }
+        setHover(nearest);
+    };
+
+    const onKeyDown = (e: React.KeyboardEvent<SVGSVGElement>) => {
+        const current = active == null ? -1 : inspectable.indexOf(active);
+        let next: number | null;
+        if (e.key === 'Home') next = inspectable[0] ?? null;
+        else if (e.key === 'End') next = inspectable.at(-1) ?? null;
+        else if (e.key === 'ArrowRight') next = inspectable[Math.min(inspectable.length - 1, current + 1)] ?? null;
+        else if (e.key === 'ArrowLeft') next = inspectable[Math.max(0, current - 1)] ?? null;
+        else if (e.key === 'Escape') next = null;
+        else return;
+        e.preventDefault();
+        setHover(next);
     };
 
-    const hasData = n > 0 && datasets.length > 0;
+    const formatSample = (v: unknown) => isFiniteNumber(v) ? fmt(v) : 'Unavailable';
+    const readout = active == null ? '' : `${labels[active]}. ${shown.map((ds) => `${ds.label}: ${formatSample(ds.data[active])}`).join('; ')}`;
+    useLayoutEffect(() => {
+        const measured = tipRef.current?.getBoundingClientRect().width;
+        if (measured && Number.isFinite(measured)) setTipWidth(measured);
+    }, [readout, width]);
+
+    const hasData = n > 0 && datasets.length > 0 && inspectable.length > 0;
 
     return (
         <div className="chart-wrap" ref={wrapRef}>
@@ -203,8 +306,10 @@ export function SeriesChart({
                         const off = visible.has(ds.label);
                         return (
                             <button
+                                type="button"
                                 key={ds.label}
                                 className={`legend-item${off ? ' legend-off' : ''}`}
+                                aria-pressed={!off}
                                 onClick={() => setVisible((prev) => {
                                     const next = new Set(prev);
                                     if (next.has(ds.label)) next.delete(ds.label); else next.add(ds.label);
@@ -224,7 +329,14 @@ export function SeriesChart({
                 <div className="chart-empty" style={{ height }}>{emptyText}</div>
             ) : (
                 <div className="chart-svg-area" style={{ height }}>
-                    <svg width={width} height={height} className="series-svg" role="img">
+                    <svg width={width} height={height} className="series-svg" role="img"
+                        tabIndex={0} aria-label={ariaLabel} aria-describedby={`${id}-help ${id}-value`}
+                        onKeyDown={onKeyDown} onBlur={() => setHover(null)}>
+                        <defs>
+                            <clipPath id={`${id}-plot`}>
+                                <rect x={PAD.left - 4} y={PAD.top} width={plotW + 8} height={plotH} />
+                            </clipPath>
+                        </defs>
                         {/* gridlines + Y ticks */}
                         {showGrid && ticks.map((t) => (
                             <line
@@ -242,30 +354,38 @@ export function SeriesChart({
 
                         {/* bars */}
                         {chartType === 'bar' && labels.map((_, i) => {
-                            const inner = colW * 0.72;
+                            if (xPositions[i] == null) return null;
+                            const previous = xPositions[i - 1];
+                            const next = xPositions[i + 1];
+                            const slot = xValues ? Math.min(colW,
+                                previous == null ? colW : Math.abs(xCenter(i) - previous),
+                                next == null ? colW : Math.abs(next - xCenter(i))) : colW;
+                            const inner = slot * 0.72;
                             const groupN = Math.max(1, shown.length);
                             let posAcc = 0;
                             let negAcc = 0;
                             return (
-                                <g key={`bar${i}`}>
+                                <g key={`bar${i}`} clipPath={`url(#${id}-plot)`}>
                                     {shown.map((ds, di) => {
-                                        const v = ds.data[i] ?? 0;
+                                        const v = ds.data[i];
+                                        if (!isFiniteNumber(v)) return null;
                                         const color = colorOf(ds, datasets.indexOf(ds));
                                         let x: number;
                                         let w: number;
                                         let y: number;
                                         let h: number;
                                         if (isStacked) {
-                                            x = PAD.left + colW * i + (colW - inner) / 2;
+                                            x = xCenter(i) - inner / 2;
                                             w = inner;
                                             const base = v >= 0 ? posAcc : negAcc;
                                             const top = base + v;
+                                            if (!Number.isFinite(top)) return null;
                                             y = yOf(Math.max(base, top));
                                             h = Math.abs(yOf(top) - yOf(base));
                                             if (v >= 0) posAcc = top; else negAcc = top;
                                         } else {
                                             w = inner / groupN;
-                                            x = PAD.left + colW * i + (colW - inner) / 2 + w * di;
+                                            x = xCenter(i) - inner / 2 + w * di;
                                             const zero = yOf(Math.max(0, scale.min));
                                             y = Math.min(zero, yOf(v));
                                             h = Math.abs(yOf(v) - zero);
@@ -276,7 +396,7 @@ export function SeriesChart({
                                                 x={x} y={y}
                                                 width={Math.max(1, w - 1)} height={Math.max(0, h)}
                                                 fill={color}
-                                                className={`bar${hover === i ? ' bar-hot' : ''}`}
+                                                className={`bar${active === i ? ' bar-hot' : ''}`}
                                             />
                                         );
                                     })}
@@ -287,41 +407,62 @@ export function SeriesChart({
                         {/* area fills + lines */}
                         {chartType !== 'bar' && shown.map((ds) => {
                             const color = colorOf(ds, datasets.indexOf(ds));
-                            const pts = ds.data.slice(0, n).map((v, i) => [xCenter(i), yOf(v ?? 0)] as [number, number]);
-                            if (!pts.length) return null;
-                            const path = smoothPath(pts, smoothing);
+                            const runs: { point: [number, number]; index: number }[][] = [];
+                            let run: (typeof runs)[number] = [];
+                            for (let i = 0; i < n; i++) {
+                                const value = ds.data[i];
+                                const previous = run.at(-1);
+                                const gap = xValues && previous ? xValues[i]! - xValues[previous.index]! : 0;
+                                if (xPositions[i] == null || !isFiniteNumber(value)) {
+                                    run = [];
+                                    continue;
+                                }
+                                if (previous && (gap < 0 || (isFiniteNumber(maxGap) && maxGap >= 0 && gap > maxGap))) run = [];
+                                if (!run.length) runs.push(run);
+                                run.push({ point: [xCenter(i), yOf(value)], index: i });
+                            }
                             const zeroY = yOf(Math.max(0, scale.min));
                             return (
-                                <g key={ds.label}>
-                                    {chartType === 'area' && (
-                                        <path
-                                            d={`${path}L${pts[pts.length - 1]![0]},${zeroY}L${pts[0]![0]},${zeroY}Z`}
-                                            fill={color}
-                                            opacity={0.16}
-                                        />
-                                    )}
-                                    <path d={path} fill="none" stroke={color} strokeWidth={2} className="series-line" />
-                                    {showDots && n <= 40 && pts.map(([x, y], i) => (
-                                        <circle key={i} cx={x} cy={y} r={hover === i ? 4 : 2.5} fill={color} className="series-dot" />
-                                    ))}
+                                <g key={ds.label} clipPath={`url(#${id}-plot)`}>
+                                    {runs.map((segment) => {
+                                        const pts = segment.map((p) => p.point);
+                                        const path = smoothPath(pts, isFiniteNumber(smoothing) ? smoothing : 0);
+                                        return (
+                                            <g key={segment[0]!.index}>
+                                                {chartType === 'area' && pts.length > 1 && (
+                                                    <path
+                                                        d={`${path}L${pts[pts.length - 1]![0]},${zeroY}L${pts[0]![0]},${zeroY}Z`}
+                                                        fill={color}
+                                                        opacity={0.16}
+                                                    />
+                                                )}
+                                                {pts.length > 1 && <path d={path} fill="none" stroke={color} strokeWidth={2} className="series-line" />}
+                                                {(pts.length === 1 || (showDots && n <= 40)) && segment.map(({ point: [x, y], index }) => (
+                                                    <circle key={index} cx={x} cy={y} r={active === index ? 4 : 2.5} fill={color} className="series-dot" />
+                                                ))}
+                                            </g>
+                                        );
+                                    })}
                                 </g>
                             );
                         })}
 
                         {/* crosshair */}
-                        {hover != null && (
+                        {active != null && (
                             <line
-                                x1={xCenter(hover)} x2={xCenter(hover)}
+                                x1={xCenter(active)} x2={xCenter(active)}
                                 y1={PAD.top} y2={PAD.top + plotH}
                                 className="crosshair"
                             />
                         )}
-                        {hover != null && chartType !== 'bar' && shown.map((ds) => {
+                        {active != null && chartType !== 'bar' && shown.map((ds) => {
+                            const value = ds.data[active];
+                            if (!isFiniteNumber(value) || value < scale.min || value > scale.max) return null;
                             const color = colorOf(ds, datasets.indexOf(ds));
                             return (
                                 <circle
                                     key={`h${ds.label}`}
-                                    cx={xCenter(hover)} cy={yOf(ds.data[hover] ?? 0)}
+                                    cx={xCenter(active)} cy={yOf(value)} className="series-inspect-dot"
                                     r={4} fill={color} stroke="var(--surface)" strokeWidth={1.5}
                                 />
                             );
@@ -329,7 +470,7 @@ export function SeriesChart({
 
                         {/* X labels */}
                         {showXLabels && labels.map((label, i) => (
-                            i % labelStride === 0 ? (
+                            i % labelStride === 0 && xPositions[i] != null ? (
                                 <text key={`xl${i}`} x={xCenter(i)} y={height - 8} className="axis-label" textAnchor="middle">
                                     {label}
                                 </text>
@@ -340,37 +481,46 @@ export function SeriesChart({
                         <rect
                             x={PAD.left} y={PAD.top} width={plotW} height={plotH}
                             fill="transparent"
-                            onMouseMove={onMove}
-                            onMouseLeave={() => setHover(null)}
+                            style={{ touchAction: 'pan-y' }}
+                            onPointerMove={onMove}
+                            onPointerDown={onMove}
+                            onPointerLeave={(e) => { if (e.pointerType !== 'touch') setHover(null); }}
+                            onPointerCancel={() => setHover(null)}
                         />
                     </svg>
 
-                    {hover != null && (
+                    {active != null && (
                         <div
-                            className="chart-tip"
+                            className="chart-tip" ref={tipRef} aria-hidden="true"
                             style={{
-                                left: Math.min(Math.max(xCenter(hover), 90), width - 90),
+                                left: Math.max(8, Math.min(xCenter(active) - tipWidth / 2, width - tipWidth - 8)),
                                 top: PAD.top,
+                                transform: 'none', maxWidth: 'calc(100% - 16px)', minWidth: 0,
+                                width: 'max-content', boxSizing: 'border-box', overflowWrap: 'anywhere',
                             }}
                         >
-                            <div className="chart-tip-head">{labels[hover]}</div>
+                            <div className="chart-tip-head">{labels[active]}</div>
                             {shown.map((ds) => (
                                 <div key={ds.label} className="chart-tip-row">
                                     <span className="legend-swatch" style={{ background: colorOf(ds, datasets.indexOf(ds)) }} />
                                     <span className="chart-tip-label">{ds.label}</span>
-                                    <span className="chart-tip-val">{fmt(ds.data[hover] ?? 0)}</span>
+                                    <span className="chart-tip-val">{formatSample(ds.data[active])}</span>
                                 </div>
                             ))}
                             {isStacked && shown.length > 1 && (
                                 <div className="chart-tip-row chart-tip-total">
                                     <span className="chart-tip-label">Total</span>
                                     <span className="chart-tip-val">
-                                        {fmt(shown.reduce((sum, ds) => sum + (ds.data[hover!] ?? 0), 0))}
+                                        {shown.every((ds) => isFiniteNumber(ds.data[active]))
+                                            ? formatSample(shown.reduce((sum, ds) => sum + (ds.data[active] as number), 0))
+                                            : 'Unavailable'}
                                     </span>
                                 </div>
                             )}
                         </div>
                     )}
+                    <span id={`${id}-help`} className="chart-accessible">Use Left and Right arrows to inspect samples, Home or End for the first or last, and Escape to clear.</span>
+                    <span id={`${id}-value`} className="chart-accessible" role="status" aria-live="polite" aria-atomic="true">{readout}</span>
                 </div>
             )}
         </div>

package/src/styles/core.css

@@ -459,6 +459,8 @@ button { font: inherit; color: inherit; }
 .legend-swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }
 .chart-svg-area { position: relative; }
 .series-svg { display: block; overflow: visible; }
+.series-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
+.chart-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 .grid-line { stroke: var(--line); stroke-width: 1; }
 .grid-zero { stroke: var(--mute); stroke-opacity: 0.5; }
 .axis-label { fill: var(--mute); font-size: 10.5px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }