@pond-ts/charts 0.53.1 → 0.55.0

package/dist/LineChart.d.ts

@@ -1,23 +1,10 @@
 import { ValueSeries } from 'pond-ts';
 import type { SeriesSchema, TimeSeries, ValueSeriesSchema } from 'pond-ts';
+import type { NumericColumn, ValueNumericColumn } from './column-names.js';
 import type { DecimateOption } from './decimate.js';
 import { type Curve } from './curve.js';
 import { type GapMode } from './gaps.js';
-export interface LineChartProps<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
-    /**
-     * The source series. A `TimeSeries` plots against the time axis; a
-     * `ValueSeries` (`series.byValue('cumDist')`) against its value axis — the
-     * container infers which from the data, no axis-type prop. Either way the key
-     * / axis column supplies x and `column` supplies y.
-     *
-     * **Live charts:** `series.byValue(…)` mints a *fresh* projection each call, so
-     * passing `series={s.byValue('dist')}` inline re-registers this layer every
-     * render — on a frequently re-rendering (e.g. scrub-driven) chart, memoize the
-     * projection (`useMemo`) so the layer isn't rebuilt each frame.
-     */
-    series: TimeSeries<S> | ValueSeries<VS>;
-    /** Name of the numeric value column to plot. */
-    column: string;
+export interface LineChartCommon<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
     /**
      * The series' semantic identifier — what the data _is_ / how it should read
      * (e.g. `heartrate`, `power`, or a role name like `foam`). The theme maps it
@@ -88,11 +75,38 @@ export interface LineChartProps<S extends SeriesSchema = SeriesSchema, VS extend
      */
     index?: number;
 }
+/**
+ * LineChart's source + column props, a **union over the series kind** so the
+ * column names are checked against the schema that was actually passed
+ * ([PND-CHARTAPI]). A single member carrying `NumericColumn<S> |
+ * ValueNumericColumn<VS>` would silently widen to `string`: only one of the
+ * two generics is ever inferred, and the other falls back (measured in
+ * `spikes/charts-type-seam/`). Loosely-typed series still accept any name.
+ */
+type LineChartSource<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> = {
+    /**
+     * The source series. **Live charts:** `series.byValue(…)` mints a
+     * *fresh* projection each call, so an inline `series={s.byValue('d')}`
+     * re-registers this layer every render — on a frequently re-rendering
+     * (e.g. scrub-driven) chart, memoize the projection (`useMemo`) so the
+     * layer isn't rebuilt each frame.
+     */
+    series: TimeSeries<S>;
+    column: NumericColumn<S>;
+    readout?: NumericColumn<S>;
+} | {
+    series: ValueSeries<VS>;
+    column: ValueNumericColumn<VS>;
+    readout?: ValueNumericColumn<VS>;
+};
+/** `<LineChart>`'s props: the shared knobs plus one series-kind source shape. */
+export type LineChartProps<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> = LineChartCommon<S, VS> & LineChartSource<S, VS>;
 /**
  * A line draw layer. Reads `column` from `series` into a {@link ChartSeries}
  * (columnar, gaps as NaN), registers itself into the enclosing {@link Layers}
  * (scaling against its `axis`), and renders nothing to the DOM — the row draws
  * it. The line breaks at gaps rather than spanning them.
  */
-export declare function LineChart<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema>({ series, column, as: semantic, axis, curve, gaps, sessionBreaks, decimate, legend, index, }: LineChartProps<S, VS>): null;
+export declare function LineChart<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema>({ series, column, readout, as: semantic, axis, curve, gaps, sessionBreaks, decimate, legend, index, }: LineChartProps<S, VS>): null;
+export {};
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/LineChart.js

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useMemo } from 'react';
 import { ValueSeries } from 'pond-ts';
-import { fromTimeSeries, fromValueSeries } from './data.js';
+import { assertNumericColumn, fromTimeSeries, fromValueSeries, } from './data.js';
 import { drawLine, yExtent } from './line.js';
 import { resolveCurve } from './curve.js';
 import { DEFAULT_GAP_MODE, DEFAULT_GAP_CONNECTOR_OPACITY, } from './gaps.js';
@@ -16,7 +16,7 @@ const NO_BREAKS = [];
  * (scaling against its `axis`), and renders nothing to the DOM — the row draws
  * it. The line breaks at gaps rather than spanning them.
  */
-export function LineChart({ series, column, as: semantic, axis, curve, gaps = DEFAULT_GAP_MODE, sessionBreaks = false, decimate = true, legend, index = 0, }) {
+export function LineChart({ series, column, readout, as: semantic, axis, curve, gaps = DEFAULT_GAP_MODE, sessionBreaks = false, decimate = true, legend, index = 0, }) {
     const container = useContext(ContainerContext);
     if (container === null) {
         throw new Error('<LineChart> must be rendered inside a <ChartContainer>');
@@ -28,6 +28,22 @@ export function LineChart({ series, column, as: semantic, axis, curve, gaps = DE
     const cs = useMemo(() => series instanceof ValueSeries
         ? fromValueSeries(series, column)
         : fromTimeSeries(series, column), [series, column]);
+    // Readout column values for a value-axis series (the time path reads it off
+    // the event in `sampleAt`). Built once per (series, readout) so the tracker
+    // can report a source value the line doesn't plot — see LineChartProps.readout.
+    //
+    // The time path buffers nothing (it has an event, not an index), so it
+    // validates the name here instead: otherwise a mistyped `readout` throws on a
+    // value axis but silently yields no readout on a time axis, and the same typo
+    // fails two different ways. Both now throw the reader's errors.
+    const readoutY = useMemo(() => {
+        if (readout === undefined)
+            return undefined;
+        if (series instanceof ValueSeries)
+            return fromValueSeries(series, readout).y;
+        assertNumericColumn(series, readout);
+        return undefined;
+    }, [series, readout]);
     // Styling: semantic identifier → theme style. The single styling channel.
     const { line } = container.theme;
     const style = (semantic !== undefined ? line[semantic] : undefined) ?? line.default;
@@ -68,8 +84,19 @@ export function LineChart({ series, column, as: semantic, axis, curve, gaps = DE
                     if (i < 0)
                         return [];
                     const v = cs.y[i];
+                    const rv = readoutY?.[i];
                     return Number.isFinite(v)
-                        ? [{ x: cs.x[i], value: v, color: style.color, label }]
+                        ? [
+                            {
+                                x: cs.x[i],
+                                value: v,
+                                color: style.color,
+                                label,
+                                ...(rv !== undefined && Number.isFinite(rv)
+                                    ? { readout: rv }
+                                    : {}),
+                            },
+                        ]
                         : [];
                 }
                 const e = series.nearest(x);
@@ -78,9 +105,21 @@ export function LineChart({ series, column, as: semantic, axis, curve, gaps = DE
                 // get() wants a literal key; column is a runtime string. Cast the
                 // *event* (not the method — that would detach `this`) to a
                 // string-keyed get; runtime-safe read + guard.
-                const v = e.get(column);
+                const ev = e;
+                const v = ev.get(column);
+                const rv = readout !== undefined ? ev.get(readout) : undefined;
                 return typeof v === 'number' && Number.isFinite(v)
-                    ? [{ x: e.begin(), value: v, color: style.color, label }]
+                    ? [
+                        {
+                            x: e.begin(),
+                            value: v,
+                            color: style.color,
+                            label,
+                            ...(typeof rv === 'number' && Number.isFinite(rv)
+                                ? { readout: rv }
+                                : {}),
+                        },
+                    ]
                     : [];
             },
             draw: (ctx, xScale, yScale) => drawLine(ctx, cs, xScale, yScale, style, curveFactory, gaps, gapConnectorOpacity, sessionBreakInstants, decimate),
@@ -91,6 +130,8 @@ export function LineChart({ series, column, as: semantic, axis, curve, gaps = DE
         cs,
         series,
         column,
+        readout,
+        readoutY,
         style,
         label,
         curveFactory,

package/dist/ListTable.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @internal The shared row-table shell behind {@link BarList} / {@link BoxList}.
+ *
+ * Renders a real `<table>` — the point of the list family is table semantics
+ * (label cells that can be links, aligned data cells, a `colSpan` detail row
+ * for the expander, screen-reader-legible rows), which a canvas plot can't
+ * carry and which hand-rolled flex rows re-implement badly (per-row cell
+ * alignment is exactly what table layout solves). The glyph cell takes
+ * `width: 100%` so it absorbs the free width; every text cell shrinks to fit.
+ *
+ * Not exported from the package: the public surface is the two sisters, so the
+ * shared shell can evolve without a compatibility contract.
+ */
+import { type ReactNode } from 'react';
+import type { ListCellSpec, ListRow } from './list.js';
+import type { ChartTheme } from './theme.js';
+export interface ListTableProps<R extends ListRow> {
+    /** Rows in display order (the caller sorts). */
+    readonly rows: readonly R[];
+    /** Which sister is rendering — stamped as `data-list` for styling/tests. */
+    readonly kind: 'bar' | 'box';
+    /** The glyph cell's content for one row (the bar / box lines). */
+    readonly renderGlyphs: (row: R) => ReactNode;
+    readonly before?: readonly ListCellSpec<R>[] | undefined;
+    readonly after?: readonly ListCellSpec<R>[] | undefined;
+    readonly renderExpanded?: ((row: R) => ReactNode) | undefined;
+    readonly defaultExpanded?: readonly string[] | undefined;
+    readonly onExpandToggle?: ((key: string, expanded: boolean) => void) | undefined;
+    readonly selected?: string | null | undefined;
+    readonly onRowClick?: ((row: R) => void) | undefined;
+    readonly divided?: boolean | undefined;
+    /** Draw the vertical **baseline rule** at the scale origin (the glyph
+     *  cell's left edge) — the shared reference the eye aligns rows against. */
+    readonly baseline?: boolean | undefined;
+    /**
+     * Reference markers, **pre-resolved to track fractions** by the caller (the
+     * shell knows pixels, not the scale): each draws a dotted vertical rule
+     * through every row's glyph area, plus a label strip above the list when
+     * any carries a `label`. A `null` fraction (out-of-scale gap) is skipped.
+     */
+    readonly markers?: ReadonlyArray<{
+        readonly frac: number | null;
+        readonly label?: string;
+    }> | undefined;
+    readonly theme: ChartTheme;
+}
+/** The shared text ink: the band-label tone when the theme has one (stronger
+ *  than tick labels — these cells are primary content), else the tick ink. */
+export declare function listInk(theme: ChartTheme): string;
+export declare function ListTable<R extends ListRow>({ rows, kind, renderGlyphs, before, after, renderExpanded, defaultExpanded, onExpandToggle, selected, onRowClick, divided, baseline, markers, theme, }: ListTableProps<R>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListTable.d.ts.map

package/dist/ListTable.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @internal The shared row-table shell behind {@link BarList} / {@link BoxList}.
+ *
+ * Renders a real `<table>` — the point of the list family is table semantics
+ * (label cells that can be links, aligned data cells, a `colSpan` detail row
+ * for the expander, screen-reader-legible rows), which a canvas plot can't
+ * carry and which hand-rolled flex rows re-implement badly (per-row cell
+ * alignment is exactly what table layout solves). The glyph cell takes
+ * `width: 100%` so it absorbs the free width; every text cell shrinks to fit.
+ *
+ * Not exported from the package: the public surface is the two sisters, so the
+ * shared shell can evolve without a compatibility contract.
+ */
+import { Fragment, useState } from 'react';
+/** The turquoise the selected-row edge falls back to when the theme has no
+ *  annotation register — the same built-in the annotation layer uses. */
+const FALLBACK_ACCENT = '#0d9488';
+/** The shared text ink: the band-label tone when the theme has one (stronger
+ *  than tick labels — these cells are primary content), else the tick ink. */
+export function listInk(theme) {
+    return theme.axis.band?.label ?? theme.axis.label;
+}
+export function ListTable({ rows, kind, renderGlyphs, before = [], after = [], renderExpanded, defaultExpanded, onExpandToggle, selected, onRowClick, divided = true, baseline = false, markers = [], theme, }) {
+    // Uncontrolled expansion, keyed on row identity so it survives a re-sort.
+    const [expanded, setExpanded] = useState(() => new Set(defaultExpanded ?? []));
+    const [hovered, setHovered] = useState(null);
+    const interactive = onRowClick !== undefined;
+    const toggle = (key) => {
+        const open = !expanded.has(key);
+        setExpanded((prev) => {
+            const next = new Set(prev);
+            if (open)
+                next.add(key);
+            else
+                next.delete(key);
+            return next;
+        });
+        onExpandToggle?.(key, open);
+    };
+    const ink = listInk(theme);
+    const accent = theme.annotation?.color ?? FALLBACK_ACCENT;
+    const divider = divided ? `1px solid ${theme.axis.grid}` : undefined;
+    // Label + before + glyph + after (+ expander) — the detail row spans them all.
+    const span = 2 + before.length + after.length + (renderExpanded ? 1 : 0);
+    const textCell = (align) => ({
+        padding: '6px 12px',
+        whiteSpace: 'nowrap',
+        textAlign: align ?? 'left',
+        verticalAlign: 'middle',
+    });
+    // The glyph cell's shared horizontal geometry — the label strip must use
+    // the SAME left/right padding (and baseline border) as the data rows, or
+    // its percentages would resolve against a different content width and the
+    // labels would sit off their rules.
+    const glyphCellStyle = (vertical) => ({
+        width: '100%',
+        padding: baseline ? `${vertical} 8px ${vertical} 5px` : `${vertical} 8px`,
+        verticalAlign: 'middle',
+        borderLeft: baseline ? `1px solid ${theme.axis.grid}` : undefined,
+    });
+    const drawnMarkers = markers.filter((m) => m.frac !== null);
+    return (_jsx("table", { "data-list": kind, style: {
+            width: '100%',
+            borderCollapse: 'collapse',
+            font: `${theme.font.size}px/${1.5} ${theme.font.family}`,
+            color: ink,
+            background: theme.background,
+        }, children: _jsxs("tbody", { children: [drawnMarkers.some((m) => m.label !== undefined) && (
+                // The marker label strip: one synthetic row above the data, its
+                // glyph cell sharing the data rows' horizontal geometry so each
+                // label centres exactly on its rule below.
+                _jsxs("tr", { "data-list-marker-labels": "", children: [_jsx("td", { style: textCell() }), before.map((cell) => (_jsx("td", { style: textCell(cell.align) }, cell.key))), _jsx("td", { style: glyphCellStyle('0px'), children: _jsx("div", { style: {
+                                    position: 'relative',
+                                    height: theme.font.size + 6,
+                                }, children: drawnMarkers.map((m, mi) => m.label !== undefined && (_jsx("span", { "data-list-marker-label": "", style: {
+                                        position: 'absolute',
+                                        left: `${m.frac * 100}%`,
+                                        bottom: 0,
+                                        transform: 'translateX(-50%)',
+                                        whiteSpace: 'nowrap',
+                                        color: accent,
+                                    }, children: m.label }, mi))) }) }), after.map((cell) => (_jsx("td", { style: textCell(cell.align) }, cell.key))), renderExpanded !== undefined && _jsx("td", {})] })), rows.map((row, i) => {
+                    const isSelected = selected != null && selected === row.key;
+                    const isOpen = renderExpanded !== undefined && expanded.has(row.key);
+                    return (_jsxs(Fragment, { children: [_jsxs("tr", { "data-list-row": row.key, ...(isSelected ? { 'data-selected': '' } : {}), onClick: onRowClick === undefined ? undefined : () => onRowClick(row), 
+                                // A clickable row is keyboard-reachable too: focusable, and
+                                // Enter / Space activate it (Space's default scroll is eaten).
+                                tabIndex: interactive ? 0 : undefined, onKeyDown: onRowClick === undefined
+                                    ? undefined
+                                    : (e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            onRowClick(row);
+                                        }
+                                    }, onPointerEnter: interactive ? () => setHovered(row.key) : undefined, onPointerLeave: interactive ? () => setHovered(null) : undefined, style: {
+                                    borderTop: i > 0 ? divider : undefined,
+                                    cursor: interactive ? 'pointer' : undefined,
+                                    background: interactive && hovered === row.key
+                                        ? (theme.legend?.border ?? theme.axis.grid)
+                                        : undefined,
+                                    // The selection accent: an inset edge in the annotation
+                                    // register (a *user's* mark, so it takes the marks colour,
+                                    // not a data hue) — reads on any ground, moves no layout.
+                                    boxShadow: isSelected ? `inset 3px 0 0 ${accent}` : undefined,
+                                }, children: [_jsx("td", { "data-list-cell": "label", style: textCell(), children: row.label ?? row.key }), before.map((cell) => (_jsx("td", { "data-list-cell": cell.key, style: textCell(cell.align), children: cell.render(row) }, cell.key))), _jsx("td", { "data-list-cell": "glyphs", 
+                                        // 100% absorbs the table's free width; every text cell
+                                        // shrinks to its content, staying aligned down the list.
+                                        // The baseline rule marks the scale origin: left padding
+                                        // narrows to a 5px breath so the glyphs start just off the
+                                        // rule, and border-collapse joins the rows' rules into one
+                                        // continuous vertical — the same thin `axis.grid` ink as
+                                        // the row dividers, so the two read as one quiet grid.
+                                        style: glyphCellStyle('6px'), children: _jsxs("div", { style: { position: 'relative' }, children: [renderGlyphs(row), drawnMarkers.map((m, mi) => (
+                                                // One dotted segment per row, bleeding through the
+                                                // row's vertical padding (+ divider) so adjacent rows'
+                                                // segments join into one continuous rule. Annotation
+                                                // register — a reference is a user's mark, not data.
+                                                _jsx("div", { "data-list-marker": "", style: {
+                                                        position: 'absolute',
+                                                        top: -7,
+                                                        bottom: -7,
+                                                        left: `calc(${m.frac * 100}% - 0.5px)`,
+                                                        width: 0,
+                                                        borderLeft: `1px dotted ${accent}`,
+                                                        pointerEvents: 'none',
+                                                    } }, mi)))] }) }), after.map((cell) => (_jsx("td", { "data-list-cell": cell.key, style: textCell(cell.align), children: cell.render(row) }, cell.key))), renderExpanded !== undefined && (_jsx("td", { style: { padding: '0 4px', verticalAlign: 'middle' }, children: _jsx("button", { type: "button", "data-list-expander": "", "aria-expanded": isOpen, "aria-label": isOpen ? 'Collapse row' : 'Expand row', onClick: (e) => {
+                                                // The chevron toggles; it must not double as a row click.
+                                                e.stopPropagation();
+                                                toggle(row.key);
+                                            }, style: {
+                                                background: 'none',
+                                                border: 'none',
+                                                cursor: 'pointer',
+                                                color: theme.axis.label,
+                                                font: 'inherit',
+                                                padding: '2px 6px',
+                                                transform: isOpen ? 'rotate(90deg)' : undefined,
+                                                transition: 'transform 120ms',
+                                            }, children: "\u25B8" }) }))] }), isOpen && (_jsx("tr", { "data-list-detail": row.key, children: _jsx("td", { colSpan: span, style: { padding: '2px 12px 12px' }, children: renderExpanded(row) }) }))] }, row.key));
+                })] }) }));
+}
+//# sourceMappingURL=ListTable.js.map

package/dist/ScatterChart.d.ts

@@ -1,24 +1,9 @@
 import { ValueSeries } from 'pond-ts';
 import type { SeriesSchema, TimeSeries, ValueSeriesSchema } from 'pond-ts';
+import type { NumericColumn, ValueNumericColumn } from './column-names.js';
 import { type ColorEncoding, type RadiusEncoding } from './encoding.js';
 import type { DecimateOption } from './decimate.js';
-export interface ScatterChartProps<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
-    /**
-     * The source series. A `TimeSeries` scatters against the time axis; a
-     * `ValueSeries` (`series.byValue('cumDist')`, or `ValueSeries.fromColumns`
-     * for natively value-keyed data — IV marks keyed by strike) against its
-     * value axis — the container infers which from the data, no axis-type prop
-     * (mirrors `<LineChart>`). Either way the key / axis column supplies each
-     * point's x and `column` supplies y.
-     *
-     * **Live charts:** `series.byValue(…)` mints a *fresh* projection each call,
-     * so passing `series={s.byValue('dist')}` inline re-registers this layer
-     * every render — memoize the projection (`useMemo`) on a frequently
-     * re-rendering chart.
-     */
-    series: TimeSeries<S> | ValueSeries<VS>;
-    /** Name of the numeric value column — each point's y. */
-    column: string;
+export interface ScatterChartCommon<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> {
     /**
      * The scatter's semantic identifier — what the marks _are_ / how they should
      * read. The theme maps it to a {@link ScatterStyle} (`theme.scatter[as] ??
@@ -109,6 +94,30 @@ export interface ScatterChartProps<S extends SeriesSchema = SeriesSchema, VS ext
      */
     index?: number;
 }
+/**
+ * ScatterChart's source + column props, a **union over the series kind** so the
+ * column names are checked against the schema that was actually passed
+ * ([PND-CHARTAPI]). A single member carrying `NumericColumn<S> |
+ * ValueNumericColumn<VS>` would silently widen to `string`: only one of the
+ * two generics is ever inferred, and the other falls back (measured in
+ * `spikes/charts-type-seam/`). Loosely-typed series still accept any name.
+ */
+type ScatterChartSource<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> = {
+    /**
+     * The source series. **Live charts:** `series.byValue(…)` mints a
+     * *fresh* projection each call, so an inline `series={s.byValue('d')}`
+     * re-registers this layer every render — on a frequently re-rendering
+     * (e.g. scrub-driven) chart, memoize the projection (`useMemo`) so the
+     * layer isn't rebuilt each frame.
+     */
+    series: TimeSeries<S>;
+    column: NumericColumn<S>;
+} | {
+    series: ValueSeries<VS>;
+    column: ValueNumericColumn<VS>;
+};
+/** `<ScatterChart>`'s props: the shared knobs plus one series-kind source shape. */
+export type ScatterChartProps<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema> = ScatterChartCommon<S, VS> & ScatterChartSource<S, VS>;
 /**
  * A scatter draw layer: one mark per finite point at `(x, column-value)`
  * — x from the series' key / axis column (time or value axis) —
@@ -138,4 +147,5 @@ export interface ScatterChartProps<S extends SeriesSchema = SeriesSchema, VS ext
  * ```
  */
 export declare function ScatterChart<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema>({ series, column, as: semantic, id, axis, radius, color, label, offset, decimate, legend, index, }: ScatterChartProps<S, VS>): null;
+export {};
 //# sourceMappingURL=ScatterChart.d.ts.map

package/dist/YAxis.js

@@ -72,14 +72,25 @@ export function YAxis({ id, side = 'left', label, min, max, format, ticks, tickC
     // a cursor value read identically. `count` calibrates the default formatter's
     // precision to the tick density, exactly as the axis is.
     const fmt = yScale ? resolveAxisFormat(yScale, count, format) : String;
+    // A **horizontal categorical** layer on this axis supplies its category
+    // names ([PND-HCAT]); with no explicit `ticks`, label one per unit slot at
+    // its centre (`i + 0.5`) instead of the scale's numeric ticks — a slot index
+    // is not a number anyone wants to read. Explicit `ticks` still win, and a
+    // non-categorical row is unaffected (no layer answers, so this is `null`).
+    const layerCategories = row.layers
+        .filter((e) => (e.axisId ?? row.defaultAxisId) === id)
+        .map((e) => e.layer.binCategories?.() ?? null)
+        .find((c) => c !== null) ?? null;
     // Explicit `{ at, label }` ticks render verbatim (each label at its `at`),
     // overriding the auto-picked d3 ticks; otherwise label the scale's ticks via `fmt`.
     const tickList = ticks
         ? ticks.map((t) => ({ value: t.at, label: t.label }))
-        : (yScale ? yScale.ticks(count) : []).map((t) => ({
-            value: t,
-            label: fmt(t),
-        }));
+        : layerCategories !== null
+            ? layerCategories.map((label, i) => ({ value: i + 0.5, label }))
+            : (yScale ? yScale.ticks(count) : []).map((t) => ({
+                value: t,
+                label: fmt(t),
+            }));
     // The row reserves a slot per axis column (the widest in that column across
     // rows). Size the box to the slot and align this axis's own (narrower)
     // content toward the plot — left axes flush right, right axes flush left — so

package/dist/affine.d.ts

@@ -2,13 +2,25 @@
  * Affine-scale fast path (charts perf, [PND-AFFINE]). A chart's continuous
  * scales — `scaleLinear` (value axis, every y axis), `scaleTime`, and the
  * **gap-free** `scaleTradingTime(identityProvider())` (the default continuous
- * time axis) — map data→pixels by a single `px = k·v + b`. The per-point draw
- * loops in `drawLine` / `drawArea` can then multiply-add inline over the typed
+ * time axis) — map data→pixels affinely. The per-point draw loops in
+ * `drawLine` / `drawArea` can then evaluate the map inline over the typed
  * arrays instead of paying a d3-scale closure call (deinterpolate → interpolate)
  * per point — the ~37% of stroke-bound frame self-time the 2026-07 external
  * bench profile attributed to `scale()` (see
  * `docs/notes/charts-bench-vs-scichart-suite-2026-07.md`, finding 1).
  *
+ * The map is stored and evaluated in the **rebased** form
+ * `px = (v − v0)·k + p0` (v0 = the domain's low endpoint, p0 = scale(v0)) —
+ * the same association d3's own deinterpolate → interpolate uses — never
+ * expanded to `k·v + b`. The expanded form is catastrophically ill-conditioned
+ * on epoch-millisecond domains: with t ≈ 1.8e12 and a deeply zoomed window,
+ * `k·t` and `b` are huge near-cancelling terms whose rounding (½ ULP of `k·t`)
+ * survives the cancellation — ~0.16 px reconstruction error at a 1 ms window,
+ * ~24 px at 1 µs (measured). Under the expanded form the interior probe below
+ * caught that drift and *rejected* the scale, so deep-zoomed frames silently
+ * lost the fast path; the rebased form evaluates to ≲1e-9 px of the exact
+ * d3 path at every zoom depth, so the fast path stays engaged.
+ *
  * The affine coefficients are recovered from the scale's own domain/range
  * endpoints, then **verified affine** by probing interior points: a scale that
  * deviates (a `scaleTradingTime` with *collapsed* gaps, or a future
@@ -19,23 +31,32 @@
  * a straight line.
  */
 import type { Scale } from './line.js';
-/** Coefficients of an affine pixel map `px = k·value + b`. */
+/**
+ * Coefficients of an affine pixel map in rebased form:
+ * `px = (value − v0)·k + p0`. `v0` is the domain's low endpoint and `p0` its
+ * pixel image, so the multiply sees the O(span) offset `value − v0` (exact for
+ * in-domain values, by Sterbenz cancellation) rather than an O(1e12) absolute
+ * epoch value — see the module comment for why the expanded `k·value + b`
+ * form must not be reintroduced.
+ */
 export interface Affine {
     readonly k: number;
-    readonly b: number;
+    readonly v0: number;
+    readonly p0: number;
 }
 /**
- * The affine coefficients `{ k, b }` with `scale(v) === k·v + b` for all `v`, or
- * `null` when the scale is not affine over its domain (a real-gap
- * `scaleTradingTime`, a non-linear axis) or exposes no numeric domain/range (a
- * bare `(v) => v` test stub, a `scaleBand` category axis). `null` ⇒ the caller
- * keeps the d3-scale path.
+ * The affine coefficients `{ k, v0, p0 }` with `scale(v) === (v − v0)·k + p0`
+ * for all `v`, or `null` when the scale is not affine over its domain (a
+ * real-gap `scaleTradingTime`, a non-linear axis) or exposes no numeric
+ * domain/range (a bare `(v) => v` test stub, a `scaleBand` category axis).
+ * `null` ⇒ the caller keeps the d3-scale path.
  *
- * Recovered from the domain/range endpoints (`k` from the two extremes, `b`
- * pinning the low end), then verified at {@link PROBE_FRACTIONS}. Every probe
- * must map finite and within {@link PROBE_EPSILON} of the reconstruction — so a
- * scale that returns non-numbers for an interior value (a `scaleBand`) or bends
- * away from the endpoint line (trading gaps, log) is rejected.
+ * Recovered from the domain/range endpoints (`k` from the two extremes, the
+ * `(v0, p0)` base pinning the low end), then verified at
+ * {@link PROBE_FRACTIONS}. Every probe must map finite and within
+ * {@link PROBE_EPSILON} of the reconstruction — so a scale that returns
+ * non-numbers for an interior value (a `scaleBand`) or bends away from the
+ * endpoint line (trading gaps, log) is rejected.
  */
 export declare function affineOf(scale: Scale): Affine | null;
 //# sourceMappingURL=affine.d.ts.map

package/dist/affine.js

@@ -2,13 +2,25 @@
  * Affine-scale fast path (charts perf, [PND-AFFINE]). A chart's continuous
  * scales — `scaleLinear` (value axis, every y axis), `scaleTime`, and the
  * **gap-free** `scaleTradingTime(identityProvider())` (the default continuous
- * time axis) — map data→pixels by a single `px = k·v + b`. The per-point draw
- * loops in `drawLine` / `drawArea` can then multiply-add inline over the typed
+ * time axis) — map data→pixels affinely. The per-point draw loops in
+ * `drawLine` / `drawArea` can then evaluate the map inline over the typed
  * arrays instead of paying a d3-scale closure call (deinterpolate → interpolate)
  * per point — the ~37% of stroke-bound frame self-time the 2026-07 external
  * bench profile attributed to `scale()` (see
  * `docs/notes/charts-bench-vs-scichart-suite-2026-07.md`, finding 1).
  *
+ * The map is stored and evaluated in the **rebased** form
+ * `px = (v − v0)·k + p0` (v0 = the domain's low endpoint, p0 = scale(v0)) —
+ * the same association d3's own deinterpolate → interpolate uses — never
+ * expanded to `k·v + b`. The expanded form is catastrophically ill-conditioned
+ * on epoch-millisecond domains: with t ≈ 1.8e12 and a deeply zoomed window,
+ * `k·t` and `b` are huge near-cancelling terms whose rounding (½ ULP of `k·t`)
+ * survives the cancellation — ~0.16 px reconstruction error at a 1 ms window,
+ * ~24 px at 1 µs (measured). Under the expanded form the interior probe below
+ * caught that drift and *rejected* the scale, so deep-zoomed frames silently
+ * lost the fast path; the rebased form evaluates to ≲1e-9 px of the exact
+ * d3 path at every zoom depth, so the fast path stays engaged.
+ *
  * The affine coefficients are recovered from the scale's own domain/range
  * endpoints, then **verified affine** by probing interior points: a scale that
  * deviates (a `scaleTradingTime` with *collapsed* gaps, or a future
@@ -30,22 +42,25 @@ const PROBE_FRACTIONS = [0.1213, 0.2857, 0.4391, 0.6137, 0.7649, 0.8831];
 /**
  * Pixel tolerance for the affinity probe. Far below a sub-pixel (so a real
  * non-affine deviation — a collapsed trading gap or a log curve is many pixels)
- * yet far above the float-reconstruction noise of `k·v + b` on wide domains
- * (~1e-9 px), so an exactly-affine scale is never rejected.
+ * yet far above the float-reconstruction noise of the rebased
+ * `(v − v0)·k + p0` against d3's own evaluation (≲1e-9 px at any domain
+ * magnitude or zoom depth — both sides subtract the domain origin before
+ * multiplying), so an exactly-affine scale is never rejected.
  */
 const PROBE_EPSILON = 1e-3;
 /**
- * The affine coefficients `{ k, b }` with `scale(v) === k·v + b` for all `v`, or
- * `null` when the scale is not affine over its domain (a real-gap
- * `scaleTradingTime`, a non-linear axis) or exposes no numeric domain/range (a
- * bare `(v) => v` test stub, a `scaleBand` category axis). `null` ⇒ the caller
- * keeps the d3-scale path.
+ * The affine coefficients `{ k, v0, p0 }` with `scale(v) === (v − v0)·k + p0`
+ * for all `v`, or `null` when the scale is not affine over its domain (a
+ * real-gap `scaleTradingTime`, a non-linear axis) or exposes no numeric
+ * domain/range (a bare `(v) => v` test stub, a `scaleBand` category axis).
+ * `null` ⇒ the caller keeps the d3-scale path.
  *
- * Recovered from the domain/range endpoints (`k` from the two extremes, `b`
- * pinning the low end), then verified at {@link PROBE_FRACTIONS}. Every probe
- * must map finite and within {@link PROBE_EPSILON} of the reconstruction — so a
- * scale that returns non-numbers for an interior value (a `scaleBand`) or bends
- * away from the endpoint line (trading gaps, log) is rejected.
+ * Recovered from the domain/range endpoints (`k` from the two extremes, the
+ * `(v0, p0)` base pinning the low end), then verified at
+ * {@link PROBE_FRACTIONS}. Every probe must map finite and within
+ * {@link PROBE_EPSILON} of the reconstruction — so a scale that returns
+ * non-numbers for an interior value (a `scaleBand`) or bends away from the
+ * endpoint line (trading gaps, log) is rejected.
  */
 export function affineOf(scale) {
     const s = scale;
@@ -63,15 +78,17 @@ export function affineOf(scale) {
     if (!Number.isFinite(pLo) || !Number.isFinite(pHi))
         return null;
     const k = (pHi - pLo) / (hi - lo);
-    const b = pLo - k * lo;
     const span = hi - lo;
     for (const t of PROBE_FRACTIONS) {
         const v = lo + t * span;
         const p = scale(v);
-        if (!Number.isFinite(p) || Math.abs(p - (k * v + b)) > PROBE_EPSILON) {
+        // Probe the exact rebased expression the draw loops evaluate, so what is
+        // verified is what runs.
+        if (!Number.isFinite(p) ||
+            Math.abs(p - ((v - lo) * k + pLo)) > PROBE_EPSILON) {
             return null;
         }
     }
-    return { k, b };
+    return { k, v0: lo, p0: pLo };
 }
 //# sourceMappingURL=affine.js.map

package/dist/area.js

@@ -65,8 +65,8 @@ export function fillAffineArea(ctx, xs, ys, baselinePx, ax, ay) {
     for (let j = 0; j <= n; j += 1) {
         const finite = j < n && Number.isFinite(ys[j]);
         if (finite) {
-            const px = ax.k * xs[j] + ax.b;
-            const py = ay.k * ys[j] + ay.b;
+            const px = (xs[j] - ax.v0) * ax.k + ax.p0;
+            const py = (ys[j] - ay.v0) * ay.k + ay.p0;
             if (runStart < 0) {
                 runStart = j;
                 ctx.moveTo(px, py);
@@ -78,8 +78,8 @@ export function fillAffineArea(ctx, xs, ys, baselinePx, ax, ay) {
         else if (runStart >= 0) {
             // Close the run: drop to the baseline under the last point, run flat back
             // to the first point's x, close. (j-1 is the run's last finite index.)
-            ctx.lineTo(ax.k * xs[j - 1] + ax.b, baselinePx);
-            ctx.lineTo(ax.k * xs[runStart] + ax.b, baselinePx);
+            ctx.lineTo((xs[j - 1] - ax.v0) * ax.k + ax.p0, baselinePx);
+            ctx.lineTo((xs[runStart] - ax.v0) * ax.k + ax.p0, baselinePx);
             ctx.closePath();
             runStart = -1;
         }