@pond-ts/charts 0.50.0 → 0.52.0

package/dist/Layers.js

@@ -6,7 +6,7 @@ import { cursorParts, bandRect, regionSpan } from './tracker.js';
 import { resolveSelection } from './select.js';
 import { panRange, zoomRange, panRangeTrading, zoomRangeTrading, } from './viewport.js';
 import { flagChipStyle, flagChipX, axisPillX, axisPillStyle } from './chip.js';
-import { ContainerContext, LayersContext, RowContext, } from './context.js';
+import { ContainerContext, CursorContext, LayersContext, RowContext, } from './context.js';
 /** Fallback **y**-gridline tick count, used only before the row publishes its
  *  resolved `tickCounts` (pre-registration). Normally the gridlines read the
  *  default axis's resolved count from `row.tickCounts` — the same value the
@@ -69,6 +69,9 @@ export function Layers({ children }) {
     if (container === null) {
         throw new Error('<Layers> must be rendered inside a <ChartContainer>');
     }
+    // Per-move cursor state (own context, so this overlay re-renders on hover
+    // without re-identifying the container frame — [PND-HOVCTX]).
+    const cursor = useContext(CursorContext);
     const row = useContext(RowContext);
     if (row === null) {
         throw new Error('<Layers> must be rendered inside a <ChartRow>');
@@ -204,11 +207,40 @@ export function Layers({ children }) {
                 drawDividers(ctx, thinPixels(bx, MIN_DIVIDER_PX), h, dividerColor);
             }
         }
-        for (const entry of layers) {
-            const yScale = yScales.get(entry.axisId ?? defaultAxisId);
-            if (yScale === undefined)
-                continue;
-            entry.layer.draw(ctx, xScale, yScale);
+        // Draw the layers. When a draw-stats consumer is subscribed
+        // (`reportDrawStats` defined), time each layer and collect its reported
+        // {@link LayerDrawStats}; otherwise the plain loop with zero timing
+        // overhead. Fires one {@link DrawStatsFrame} per repaint of THIS row.
+        const report = container.reportDrawStats;
+        if (report === undefined) {
+            for (const entry of layers) {
+                const yScale = yScales.get(entry.axisId ?? defaultAxisId);
+                if (yScale === undefined)
+                    continue;
+                entry.layer.draw(ctx, xScale, yScale);
+            }
+        }
+        else {
+            const infos = [];
+            let totalDrawMs = 0;
+            for (const entry of layers) {
+                const yScale = yScales.get(entry.axisId ?? defaultAxisId);
+                if (yScale === undefined)
+                    continue;
+                const t0 = performance.now();
+                const stats = entry.layer.draw(ctx, xScale, yScale);
+                const drawMs = performance.now() - t0;
+                totalDrawMs += drawMs;
+                infos.push({
+                    as: entry.layer.as,
+                    index: entry.index,
+                    drawMs,
+                    sourceCount: stats?.sourceCount,
+                    drawnCount: stats?.drawnCount,
+                    decimated: stats?.decimated,
+                });
+            }
+            report({ rowKey: row.rowKey, layers: infos, totalDrawMs });
         }
     }, [
         layers,
@@ -222,7 +254,13 @@ export function Layers({ children }) {
         gridColor,
         gridDash,
         container.discontinuities,
+        // Identity-stable across cursor moves (memoized tuple in ChartContainer;
+        // e2e `hover sweep never repaints the data canvas` pins this). A fresh
+        // array per frame rebuild here would re-fire the Canvas draw effect —
+        // a full replot per mousemove.
         container.timeRange,
+        container.reportDrawStats,
+        row.rowKey,
     ]);
     // Interaction overlay: the cursor marks live on a DOM/SVG overlay above the
     // data, so hovering never repaints the data canvas (whose `draw` doesn't depend
@@ -230,7 +268,8 @@ export function Layers({ children }) {
     // pointer is over — syncs the cursor across every row for free. cursorX is a
     // *pixel*, so it stays put while a live window slides; the time + values under
     // it derive from the current xScale.
-    const { cursorX, cursorTime: showCursorTime, formatTime } = container;
+    const { cursorTime: showCursorTime, formatTime } = container;
+    const { cursorX } = cursor;
     // Cursor mode: the row's override, else the container default. One mode per
     // row (the synced vertical line is shared across rows); each layer renders the
     // mode in its own way. `parts` decomposes it into {line, dots, chip}.
@@ -392,7 +431,7 @@ export function Layers({ children }) {
         if (c.cursor === 'region' &&
             c.onRegionSelect &&
             (c.xKind === 'time' || c.xKind === 'value')) {
-            const needsShift = c.regionSelectModifier === 'shift' && c.panZoom;
+            const needsShift = c.regionSelectModifier === 'shift' && c.panEnabled;
             if (!needsShift || e.shiftKey) {
                 const px = Math.max(0, Math.min(c.plotWidth, e.clientX - e.currentTarget.getBoundingClientRect().left));
                 regionAnchorRef.current = +c.xScale.invert(px);
@@ -408,7 +447,7 @@ export function Layers({ children }) {
             }
             // Modifier required but not held → fall through to pan.
         }
-        if (!c.panZoom || c.xKind === 'category')
+        if (!c.panEnabled || c.xKind === 'category')
             return;
         const r = c.timeRange;
         // Arm a potential pan: record the anchor, but DON'T capture the pointer or
@@ -663,7 +702,7 @@ export function Layers({ children }) {
             return;
         const onWheel = (e) => {
             const c = containerRef.current;
-            if (!c.panZoom || c.xKind === 'category')
+            if (!c.zoomEnabled || c.xKind === 'category')
                 return;
             e.preventDefault();
             const rect = el.getBoundingClientRect();
@@ -724,14 +763,14 @@ export function Layers({ children }) {
     const reticle = (() => {
         if (parts.chip !== 'axis' || !cursorInBounds)
             return null;
-        const hoveredRow = container.cursorRowKey === row.rowKey;
-        const cy = container.cursorY;
+        const hoveredRow = cursor.cursorRowKey === row.rowKey;
+        const cy = cursor.cursorY;
         if (container.crosshairSnap) {
             if (trackerSamples.length === 0)
                 return null;
             const pick = hoveredRow && cy !== null
                 ? trackerSamples.reduce((a, b) => Math.abs(b.py - cy) < Math.abs(a.py - cy) ? b : a)
-                : container.cursorRowKey === null
+                : cursor.cursorRowKey === null
                     ? trackerSamples[0]
                     : null;
             return pick
@@ -824,7 +863,7 @@ export function Layers({ children }) {
                     ? `inset 0 0 0 1px ${guideColor}`
                     : undefined,
                 // Let pan/zoom own touch gestures (no native scroll) when enabled.
-                touchAction: container.panZoom ? 'none' : 'auto',
+                touchAction: container.panEnabled || container.zoomEnabled ? 'none' : 'auto',
             }, onPointerMove: handlePointerMove, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, onPointerLeave: handlePointerLeave, onClick: handleClick, children: [_jsx(Canvas, { width: plotWidth, height: row.height, draw: draw }), guideXs.length > 0 && (_jsx("svg", { width: plotWidth, height: row.height, style: {
                         position: 'absolute',
                         top: 0,

package/dist/Legend.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
-import { ContainerContext, RowContext } from './context.js';
+import { ContainerContext, CursorContext, RowContext } from './context.js';
 import { buildChartLegend } from './useChartLegend.js';
 import { defaultTheme } from './theme.js';
 /** One 20×12 swatch glyph, drawn from the layer's resolved style. */
@@ -83,6 +83,7 @@ function placementStyle(placement, leftGutter, rightGutter) {
  */
 export function Legend({ placement = 'top-right', items, onRowClick, onRowHover, theme: themeProp, }) {
     const container = useContext(ContainerContext);
+    const cursor = useContext(CursorContext);
     if (container === null && items === undefined) {
         throw new Error('<Legend> must be inside a <ChartContainer> (or be given explicit `items`)');
     }
@@ -99,7 +100,9 @@ export function Legend({ placement = 'top-right', items, onRowClick, onRowHover,
     // The shared headless core (also `useChartLegend`'s) — rows + the id-gated
     // hover/select verbs — so the built-in card and a custom-rendered legend
     // can never disagree. `null` in standalone `items` mode (no chart to sync).
-    const legend = container !== null ? buildChartLegend(container, row?.rowKey) : null;
+    const legend = container !== null
+        ? buildChartLegend(container, cursor, row?.rowKey)
+        : null;
     // The card renders a flat item list — `rows` is grouped by chart row, so
     // flatten it (a scoped legend has one group anyway).
     const entries = items ?? legend.rows.flatMap((r) => r.items);

package/dist/LineChart.js

@@ -50,6 +50,7 @@ export function LineChart({ series, column, as: semantic, axis, curve, gaps = DE
     }, [sessionBreaks, container.discontinuities, cs]);
     const entry = useMemo(() => ({
         layer: {
+            as: semantic,
             yExtent: () => yExtent(cs),
             // The container infers the shared x scale's kind + auto-fit domain from
             // its layers: a ValueSeries plots on a value axis, a TimeSeries on time.

package/dist/ScatterChart.d.ts

@@ -1,6 +1,7 @@
 import { ValueSeries } from 'pond-ts';
 import type { SeriesSchema, TimeSeries, ValueSeriesSchema } from 'pond-ts';
 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
@@ -85,6 +86,16 @@ export interface ScatterChartProps<S extends SeriesSchema = SeriesSchema, VS ext
      * together, so a nudged point still selects.
      */
     offset?: number;
+    /**
+     * Collapse dense, **uniform** marks to one representative per pixel cell —
+     * lossless at that density, so a scatter of 100k+ points stays interactive.
+     * **Default `true`.** It engages only when the marks are a fixed size + colour
+     * (no data-driven `radius`/`color`), the fill is opaque, and the visible points
+     * are denser than the pixel grid; otherwise every point draws. Interaction
+     * (hover / click / tracker) always reads the source points. `decimate={false}`
+     * draws every mark; `{ threshold }` tunes the samples-per-pixel trigger.
+     */
+    decimate?: DecimateOption;
     /**
      * This layer's `<Legend>` row: `false` ⇒ no row (opt out), a string ⇒ the
      * row's display name. **Omitted ⇒ a row named by the layer's readout
@@ -126,5 +137,5 @@ export interface ScatterChartProps<S extends SeriesSchema = SeriesSchema, VS ext
  * </Layers>
  * ```
  */
-export declare function ScatterChart<S extends SeriesSchema = SeriesSchema, VS extends ValueSeriesSchema = ValueSeriesSchema>({ series, column, as: semantic, id, axis, radius, color, label, offset, legend, index, }: ScatterChartProps<S, VS>): null;
+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;
 //# sourceMappingURL=ScatterChart.d.ts.map

package/dist/ScatterChart.js

@@ -34,7 +34,7 @@ import { useSlotKey } from './use-slot-key.js';
  * </Layers>
  * ```
  */
-export function ScatterChart({ series, column, as: semantic, id, axis, radius, color, label, offset = 0, legend, index = 0, }) {
+export function ScatterChart({ series, column, as: semantic, id, axis, radius, color, label, offset = 0, decimate = true, legend, index = 0, }) {
     const container = useContext(ContainerContext);
     if (container === null) {
         throw new Error('<ScatterChart> must be rendered inside a <ChartContainer>');
@@ -95,6 +95,7 @@ export function ScatterChart({ series, column, as: semantic, id, axis, radius, c
     const keyAt = useMemo(() => (i) => cs.x[i], [cs]);
     const entry = useMemo(() => ({
         layer: {
+            as: semantic,
             yExtent: () => scatterExtent(cs),
             // The container infers the shared x scale's kind + auto-fit domain from
             // its layers: a ValueSeries scatters on a value axis, a TimeSeries on time.
@@ -130,7 +131,7 @@ export function ScatterChart({ series, column, as: semantic, id, axis, radius, c
                 : {
                     hitTest: (px, py, xScale, yScale) => hitTestScatter(cs, px, py, xScale, yScale, encoding, keyAt, id, seriesLabel, offset),
                 }),
-            draw: (ctx, xScale, yScale) => drawScatter(ctx, cs, xScale, yScale, style, encoding, keyAt, labelAt, font, container.selected, id, offset),
+            draw: (ctx, xScale, yScale) => drawScatter(ctx, cs, xScale, yScale, style, encoding, keyAt, labelAt, font, container.selected, id, offset, decimate),
         },
         axisId: axis,
         index,
@@ -147,6 +148,7 @@ export function ScatterChart({ series, column, as: semantic, id, axis, radius, c
         font,
         container.selected,
         offset,
+        decimate,
         axis,
         index,
     ]);

package/dist/XAxis.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useContext } from 'react';
 import { scaleLinear } from 'd3-scale';
 import { derivedTicks } from './derivedTicks.js';
-import { ContainerContext } from './context.js';
+import { ContainerContext, CursorContext } from './context.js';
 import { axisPillStyle } from './chip.js';
 import { resolveAxisFormat, resolveTimeFormat, } from './format.js';
 /** Tick strip height (mark + value label) in CSS px. */
@@ -60,6 +60,7 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
     if (container === null) {
         throw new Error('<XAxis> must be rendered inside a <ChartContainer>');
     }
+    const cursor = useContext(CursorContext);
     // `xTickCount` is the container's shared x-side count — the same value the x
     // gridlines and `formatTime` use, so labels and grid stay on the same instants
     // (width-derived on a trading-time axis).
@@ -68,7 +69,7 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
     // cursor is live in-bounds, pin the hovered time to this axis (covering the
     // tick behind it), matching the on-axis y value pills the rows draw. Gated on
     // the container default, so a per-row `cursor` override doesn't reach here.
-    const cursorX = container.cursorX;
+    const cursorX = cursor.cursorX;
     const showCursorTag = container.cursor === 'crosshair' &&
         cursorX !== null &&
         cursorX >= 0 &&

package/dist/affine.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 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
+ * 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 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
+ * log/pow/sqrt axis) is rejected — the caller falls back to the exact d3-scale
+ * path — while a genuinely affine scale (including a gap-free trading axis) is
+ * accepted and reproduced to floating-point precision. The verification is what
+ * keeps the fast path a pure optimization: it never draws a non-affine scale as
+ * a straight line.
+ */
+import type { Scale } from './line.js';
+/** Coefficients of an affine pixel map `px = k·value + b`. */
+export interface Affine {
+    readonly k: number;
+    readonly b: 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.
+ *
+ * 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.
+ */
+export declare function affineOf(scale: Scale): Affine | null;
+//# sourceMappingURL=affine.d.ts.map

package/dist/affine.js

@@ -0,0 +1,77 @@
+/**
+ * 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
+ * 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 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
+ * log/pow/sqrt axis) is rejected — the caller falls back to the exact d3-scale
+ * path — while a genuinely affine scale (including a gap-free trading axis) is
+ * accepted and reproduced to floating-point precision. The verification is what
+ * keeps the fast path a pure optimization: it never draws a non-affine scale as
+ * a straight line.
+ */
+/**
+ * Irregular interior sample fractions for the affinity probe. Deliberately not
+ * `[0.25, 0.5, 0.75]` — a piecewise-linear scale (trading time) can have
+ * breakpoints that a symmetric, round-fraction probe set slips between; the
+ * jittered spread makes a false "affine" verdict on a real-gap scale
+ * astronomically unlikely (and the e2e visual-regression layer is the backstop,
+ * the same net that guards M4).
+ */
+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.
+ */
+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.
+ *
+ * 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.
+ */
+export function affineOf(scale) {
+    const s = scale;
+    const d = s.domain?.();
+    const r = s.range?.();
+    if (d === undefined || r === undefined || d.length < 2 || r.length < 2) {
+        return null;
+    }
+    const lo = +d[0];
+    const hi = +d[d.length - 1];
+    if (!Number.isFinite(lo) || !Number.isFinite(hi) || lo === hi)
+        return null;
+    const pLo = scale(lo);
+    const pHi = scale(hi);
+    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) {
+            return null;
+        }
+    }
+    return { k, b };
+}
+//# sourceMappingURL=affine.js.map

package/dist/area.d.ts

@@ -1,9 +1,27 @@
 import { type CurveFactory } from 'd3-shape';
 import type { ChartSeries } from './data.js';
-import type { Scale } from './line.js';
+import { type Scale } from './line.js';
 import type { AreaStyle } from './theme.js';
+import type { LayerDrawStats } from './context.js';
 import { type GapMode } from './gaps.js';
 import { type DecimateOption } from './decimate.js';
+import { type Affine } from './affine.js';
+export declare function columnFiniteExtent(y: Float64Array, length: number): readonly [number, number] | null;
+/**
+ * Fill the area between an affine-mapped value polyline and a constant baseline
+ * pixel — the [PND-AFFINE] fast path for {@link drawArea}'s fill, the counterpart
+ * to {@link strokeAffinePolyline} for its outline. Emits one **independent closed
+ * polygon per finite run** (matching `d3.area`'s `.defined(Number.isFinite)`
+ * segmentation for a linear curve + constant `y0`): per run `[a, b)`,
+ * `moveTo(top_a)` → `lineTo(top…)` along the value edge → `lineTo(x_{b-1}, base)`
+ * → `lineTo(x_a, base)` → `closePath`. That is the same filled region `d3.area`
+ * draws — its flat backward baseline edge only adds collinear interior vertices,
+ * which don't change the fill — without the per-point `scale()` / d3-shape
+ * closures. A signed value edge crossing the baseline stays one polygon (no NaN),
+ * filled correctly on both sides. The caller brackets `beginPath`/`fill`;
+ * `xs`/`ys` are aligned index-for-index.
+ */
+export declare function fillAffineArea(ctx: CanvasRenderingContext2D, xs: Float64Array, ys: Float64Array, baselinePx: number, ax: Affine, ay: Affine): void;
 /**
  * The `[min, max]` vertical extent an area occupies — the finite values of
  * `cs.y` widened to include `baseline`, since the fill spans from each value to
@@ -51,5 +69,5 @@ export declare function areaExtent(cs: ChartSeries, baseline: number | undefined
  * bracketed by `save`/`restore` so they don't leak into later layers. Gap edges
  * are collected by one O(N) walk ({@link collectGapEdges}).
  */
-export declare function drawArea(ctx: CanvasRenderingContext2D, cs: ChartSeries, xScale: Scale, yScale: Scale, style: AreaStyle, baselineValue: number, curve?: CurveFactory, gaps?: GapMode, gapConnectorOpacity?: number, decimate?: DecimateOption): void;
+export declare function drawArea(ctx: CanvasRenderingContext2D, cs: ChartSeries, xScale: Scale, yScale: Scale, style: AreaStyle, baselineValue: number, curve?: CurveFactory, gaps?: GapMode, gapConnectorOpacity?: number, decimate?: DecimateOption): LayerDrawStats;
 //# sourceMappingURL=area.d.ts.map