@pond-ts/charts 0.71.0 → 0.73.0

package/dist/area.js

@@ -1,9 +1,12 @@
 import { area as d3area, curveLinear } from 'd3-shape';
-import { baselinePxFromScale, plotExtentOf, strokeAffinePolyline, TRACE_HIT_PX, } from './line.js';
+import { baselinePxFromScale, decimatedSessionRuns, plotExtentOf, sessionRuns, strokeAffinePolyline, TRACE_HIT_PX, } from './line.js';
 import { bridgeGaps, collectGapEdges, drawGapBridges, drawGapFades, drawGapSteps, gapUnscalable, withAlpha, DEFAULT_GAP_MODE, DEFAULT_GAP_CONNECTOR_OPACITY, } from './gaps.js';
 import { cullChartSeries } from './culling.js';
 import { decimateM4Cached } from './decimate.js';
 import { affineOf } from './affine.js';
+/** Shared empty boundary list — the no-breaks default (a stable reference, so
+ *  the decimation cache keyed on it keeps hitting). */
+const EMPTY_BOUNDARIES = [];
 /**
  * Per-buffer cache of a column's finite `[min, max]` value extent ([PND-GRADX]).
  * The area fill gradient spans the **full** series' vertical pixel extent (so a
@@ -21,7 +24,7 @@ import { affineOf } from './affine.js';
  * length); a `subarray` view is never the cache key here (the gradient reads the
  * pre-cull full series).
  *
- * NaN (the gap signal) is ignored — matching {@link areaExtent} / `yExtent` — so
+ * NaN (the gap signal) is ignored — matching the layer's `yExtent` — so
  * a coast doesn't drag the span. `null` when nothing is finite (the caller then
  * falls back to a flat fill).
  */
@@ -85,41 +88,6 @@ export function fillAffineArea(ctx, xs, ys, baselinePx, ax, ay) {
         }
     }
 }
-/**
- * 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
- * the baseline (so the baseline must be in-domain or the fill clips). `null` if
- * no value is finite. When `baseline` is `undefined` (`<AreaChart
- * baseline="floor">`) the area rests on the axis's own lower bound (resolved
- * later), so only the values constrain the
- * domain — matching {@link yExtent}.
- *
- * NaN values (the gap signal) are ignored, so a coast doesn't drag the domain.
- */
-export function areaExtent(cs, baseline) {
-    let min = Infinity;
-    let max = -Infinity;
-    for (let i = 0; i < cs.length; i += 1) {
-        const v = cs.y[i];
-        if (Number.isFinite(v)) {
-            if (v < min)
-                min = v;
-            if (v > max)
-                max = v;
-        }
-    }
-    if (min === Infinity)
-        return null;
-    // The fill reaches the baseline, so it must be inside the domain (an
-    // above/below-axis area with baseline 0 has to show the zero line).
-    if (baseline !== undefined) {
-        if (baseline < min)
-            min = baseline;
-        if (baseline > max)
-            max = baseline;
-    }
-    return [min, max];
-}
 /**
  * Fill the area between `cs`'s value line and a horizontal `baseline`, with a
  * vertical gradient (most opaque at the line, fading to transparent at the
@@ -156,7 +124,7 @@ export function areaExtent(cs, baseline) {
  * bracketed by `save`/`restore` so they don't leak into later layers. Gap edges
  * are collected by one O(N) walk ({@link collectGapEdges}).
  */
-export function drawArea(ctx, cs, xScale, yScale, style, baselineValue, curve = curveLinear, gaps = DEFAULT_GAP_MODE, gapConnectorOpacity = DEFAULT_GAP_CONNECTOR_OPACITY, decimate = true, banding) {
+export function drawArea(ctx, cs, xScale, yScale, style, baselineValue, curve = curveLinear, gaps = DEFAULT_GAP_MODE, gapConnectorOpacity = DEFAULT_GAP_CONNECTOR_OPACITY, decimate = true, banding, boundaries = EMPTY_BOUNDARIES) {
     const sourceCount = cs.length; // pre-cull, pre-decimation (for draw stats)
     const baselinePx = yScale(baselineValue);
     // The fill gradient's vertical extent is computed from the **full** series (a
@@ -191,7 +159,7 @@ export function drawArea(ctx, cs, xScale, yScale, style, baselineValue, curve =
     let decimated = false;
     if (decimate !== false && curve === curveLinear) {
         const k = typeof decimate === 'object' ? decimate.threshold : undefined;
-        const r = decimateM4Cached(source, xScale, ctx, k);
+        const r = decimateM4Cached(source, xScale, ctx, k, boundaries);
         cs = r.series;
         decimated = r.decimated;
     }
@@ -207,16 +175,41 @@ export function drawArea(ctx, cs, xScale, yScale, style, baselineValue, curve =
     const scaledY = gapUnscalable(cs.y, cs.length, yScale);
     if (scaledY !== cs.y)
         cs = { ...cs, y: scaledY };
-    // `none` interpolates interior gaps so the fill + outline bridge them; every
-    // other mode keeps NaN so d3 breaks both (the inferred line bridge, if any, is
-    // a separate overlay pass below).
-    const ys = gaps === 'none' ? bridgeGaps(cs.y, cs.length) : cs.y;
+    // Split into independent index runs at each session break, exactly as
+    // `drawLine` does: no boundary inside the data ⇒ one run over the whole series
+    // (the hot path — no slicing, byte-identical to the pre-boundary draw). When
+    // decimated, the breaks are already baked in as `NaN` points at the break
+    // instants, and {@link decimatedSessionRuns} cuts there instead.
+    const runs = decimated
+        ? decimatedSessionRuns(cs.x, cs.y, cs.length, boundaries)
+        : sessionRuns(cs.x, cs.length, boundaries);
+    const singleRun = runs.length === 1;
+    const xsOf = (s, e) => singleRun ? cs.x : cs.x.subarray(s, e);
+    // `none` interpolates interior gaps so the fill + outline bridge them — but
+    // only *within* a run (a session break is not a dropout to interpolate over);
+    // every other mode keeps NaN so d3 breaks both (the inferred line bridge, if
+    // any, is a separate overlay pass below).
+    const ysRuns = runs.map(([s, e]) => {
+        const seg = singleRun ? cs.y : cs.y.subarray(s, e);
+        return gaps === 'none' ? bridgeGaps(seg, e - s) : seg;
+    });
     // [PND-AFFINE] fast path: with a linear curve and both scales affine, draw the
     // fill polygon + outline with inline multiply-add over the typed arrays, past
     // the per-point d3-scale + d3-shape closures (finding 1/2). A smoothing curve
     // or a non-affine (real-gap trading) x scale keeps the exact d3-area path.
     const ax = curve === curveLinear ? affineOf(xScale) : null;
     const ay = ax !== null ? affineOf(yScale) : null;
+    // The d3-area generator for a run (slow path only) — also the source of that
+    // run's outline line. Each run's generator opens its own subpath and closes
+    // its own polygon, so a run boundary is a clean break in the fill: the shade
+    // ends at the close and re-starts at the open.
+    const areaGen = (s) => d3area()
+        .defined((v) => Number.isFinite(v))
+        .x((_, j) => xScale(cs.x[s + j]))
+        .y0(() => baselinePx)
+        .y1((v) => yScale(v))
+        .curve(curve)
+        .context(ctx);
     ctx.save();
     // The fill: a vertical gradient anchored at the baseline pixel, opaque at the
     // line and transparent at the baseline (see buildGradient — handles both the
@@ -225,44 +218,47 @@ export function drawArea(ctx, cs, xScale, yScale, style, baselineValue, curve =
     ctx.fillStyle = fill;
     ctx.globalAlpha = style.fillOpacity;
     ctx.beginPath();
-    // The d3-area generator (slow path only) — also the source of the outline line.
-    let outline = null;
-    if (ax !== null && ay !== null) {
-        fillAffineArea(ctx, cs.x, ys, baselinePx, ax, ay);
-    }
-    else {
-        const gen = d3area()
-            .defined((v) => Number.isFinite(v))
-            .x((_, i) => xScale(cs.x[i]))
-            .y0(() => baselinePx)
-            .y1((v) => yScale(v))
-            .curve(curve)
-            .context(ctx);
-        gen(ys);
-        outline = gen.lineY1();
-    }
+    runs.forEach(([s, e], r) => {
+        if (ax !== null && ay !== null) {
+            fillAffineArea(ctx, xsOf(s, e), ysRuns[r], baselinePx, ax, ay);
+        }
+        else {
+            areaGen(s)(ysRuns[r]);
+        }
+    });
     ctx.fill();
     ctx.restore();
     // The outline on top: the area's top edge as a line (breaks at the same gaps
-    // as the fill), at full opacity over the graded fill. Banded, it strokes with
-    // the same hard-stop gradient the fill used, so the line switches hue exactly
-    // where it crosses a threshold — the whole point of the ladder is that the
-    // reader sees *where* the value sits, and the edge is the value.
+    // and session breaks as the fill), at full opacity over the graded fill.
+    // Banded, it strokes with the same hard-stop gradient the fill used, so the
+    // line switches hue exactly where it crosses a threshold — the whole point of
+    // the ladder is that the reader sees *where* the value sits, and the edge is
+    // the value.
     ctx.save();
     ctx.beginPath();
-    if (outline !== null)
-        outline(ys);
-    else
-        strokeAffinePolyline(ctx, cs.x, ys, ax, ay);
+    runs.forEach(([s, e], r) => {
+        if (ax !== null && ay !== null) {
+            strokeAffinePolyline(ctx, xsOf(s, e), ysRuns[r], ax, ay);
+        }
+        else {
+            areaGen(s).lineY1()(ysRuns[r]);
+        }
+    });
     ctx.strokeStyle = banding !== undefined ? fill : style.color;
     ctx.lineWidth = style.width;
     ctx.stroke();
     ctx.restore();
     // Inferred bridges for the line edge (fill stays broken). `dashed` / `step`
     // are faint dashed connectors (gapConnectorOpacity); only `fade` drops to the
-    // area's own baseline pixel (the fill floor).
+    // area's own baseline pixel (the fill floor). Edges are collected **per run**
+    // so no connector spans a session break.
     if (gaps === 'dashed' || gaps === 'step' || gaps === 'fade') {
-        const edges = collectGapEdges(cs.length, cs.x, (i) => cs.y[i], xScale, (i) => yScale(cs.y[i]));
+        const edges = [];
+        for (const [s, e] of runs) {
+            const runEdges = collectGapEdges(e - s, xsOf(s, e), (i) => cs.y[s + i], xScale, (i) => yScale(cs.y[s + i]));
+            for (const ed of runEdges)
+                edges.push(ed);
+        }
         if (gaps === 'dashed') {
             drawGapBridges(ctx, edges, style.color, style.width, gapConnectorOpacity);
         }

package/dist/bars.d.ts

@@ -17,12 +17,13 @@ export type Orientation = 'vertical' | 'horizontal';
  * and the baseline must be in-domain or the bar clips. `null` if no value is
  * finite.
  *
- * Including `0` is the bar analog of {@link areaExtent} pulling a fixed baseline
- * into the domain: an all-positive series auto-fits to `[0, max]` so the bars
- * rest on a visible floor (the zero line), and a series that straddles zero
- * shows the zero line both above and below it. An explicit `<YAxis min>` still
- * wins — `resolveBarBaseline` rests the bars on that floor instead. NaN values
- * (the gap signal) are ignored, so a sparse bucket doesn't drag the domain.
+ * Including `0` is where a bar differs from an area, whose baseline never
+ * widens the axis: a bar's length is its value, so an all-positive series
+ * auto-fits to `[0, max]` and the bars rest on a visible floor (the zero line),
+ * and a series that straddles zero shows the zero line both above and below
+ * it. An explicit `<YAxis min>` still wins — `resolveBarBaseline` rests the
+ * bars on that floor instead. NaN values (the gap signal) are ignored, so a
+ * sparse bucket doesn't drag the domain.
  */
 export declare function barExtent(cs: BarSeries): [number, number] | null;
 /**

package/dist/bars.js

@@ -8,12 +8,13 @@ import { NO_SPANS, spanMatchesAny } from './span.js';
  * and the baseline must be in-domain or the bar clips. `null` if no value is
  * finite.
  *
- * Including `0` is the bar analog of {@link areaExtent} pulling a fixed baseline
- * into the domain: an all-positive series auto-fits to `[0, max]` so the bars
- * rest on a visible floor (the zero line), and a series that straddles zero
- * shows the zero line both above and below it. An explicit `<YAxis min>` still
- * wins — `resolveBarBaseline` rests the bars on that floor instead. NaN values
- * (the gap signal) are ignored, so a sparse bucket doesn't drag the domain.
+ * Including `0` is where a bar differs from an area, whose baseline never
+ * widens the axis: a bar's length is its value, so an all-positive series
+ * auto-fits to `[0, max]` and the bars rest on a visible floor (the zero line),
+ * and a series that straddles zero shows the zero line both above and below
+ * it. An explicit `<YAxis min>` still wins — `resolveBarBaseline` rests the
+ * bars on that floor instead. NaN values (the gap signal) are ignored, so a
+ * sparse bucket doesn't drag the domain.
  */
 export function barExtent(cs) {
     let min = Infinity;

package/dist/context.d.ts

@@ -716,13 +716,8 @@ export interface RowLayer {
      * when the layer was given no `as`.
      */
     readonly as?: string | undefined;
-    /**
-     * This layer's finite-value `[min, max]`, or `null` if it has none. `scale`
-     * is the kind of the axis the extent is being fitted to, for a layer whose
-     * extent depends on it (an area's zero baseline has no position on a log
-     * axis, so it must not be pulled into one).
-     */
-    yExtent(scale?: YScaleKind): [number, number] | null;
+    /** This layer's finite-value `[min, max]`, or `null` if it has none. */
+    yExtent(): [number, number] | null;
     /**
      * The **kind of x axis** this layer's data lives on — `'time'` for a
      * `TimeSeries`, `'value'` for a `ValueSeries`, `'category'` for a categorical

package/dist/line.d.ts

@@ -82,6 +82,20 @@ export declare function drawLine(ctx: CanvasRenderingContext2D, cs: ChartSeries,
  * negligible next to the row sweep.
  */
 export declare function sessionRuns(x: Float64Array, length: number, boundaries: readonly number[]): Array<[number, number]>;
+/**
+ * {@link sessionRuns} for a **decimated** series. `decimateM4` bakes each
+ * session break in as a `NaN` point at the break instant, with the closing
+ * column's last point and the opening column's first point **both** at that
+ * instant — so `sessionRuns`'s `(x[i-1], x[i]]` cut would hand the close's last
+ * point to the next session. Instead, cut at every non-finite run whose finite
+ * neighbours bracket a boundary (`lastX ≤ b ≤ nextX`), starting the new run at
+ * the run's first `NaN`. The break then sits as a **leading** gap of the next
+ * session: never interior, so `gaps="none"` does not interpolate across it and
+ * no inferred connector (dashed / step / fade) spans it — left in one run it
+ * read as an ordinary dropout and got both. A data gap that straddles a break
+ * is cut the same way, matching the full-resolution path. Pure + O(N).
+ */
+export declare function decimatedSessionRuns(x: Float64Array, y: Float64Array, length: number, boundaries: readonly number[]): Array<[number, number]>;
 /** How near the pointer must come to a trace's path to count as a hit, in px.
  *  Generous on purpose: a 1.5px stroke is not a target anyone can hit, and a
  *  trace has no fat mark to aim at the way a bar does. */

package/dist/line.js

@@ -3,9 +3,6 @@ import { cullChartSeries } from './culling.js';
 import { decimateM4Cached } from './decimate.js';
 import { affineOf } from './affine.js';
 import { bridgeGaps, collectGapEdges, drawGapBridges, drawGapFades, drawGapSteps, gapUnscalable, DEFAULT_GAP_MODE, DEFAULT_GAP_CONNECTOR_OPACITY, } from './gaps.js';
-/** Shared empty boundary list — passed to `sessionRuns` when a decimated series
- *  already carries its session breaks as baked-in `NaN` points. */
-const EMPTY_BOUNDARIES = [];
 /**
  * Stroke one run of `ys` (aligned index-for-index with `xs`) through the affine
  * pixel maps `ax` / `ay` — the [PND-AFFINE] fast path. Replicates d3-shape's
@@ -144,10 +141,12 @@ export function drawLine(ctx, cs, xScale, yScale, style, curve = curveLinear, ga
     // data ⇒ one run over the whole series (the hot path — no slicing, so the draw
     // is byte-identical to the pre-boundary single pass). When the series was
     // decimated, `decimateM4` already baked the session breaks in as `NaN` points
-    // (aligned to the break instants), so re-cutting here with `boundaries` would
-    // mis-attribute the boundary points — pass `[]` and let the baked-in breaks split
-    // the sessions.
-    const runs = sessionRuns(cs.x, cs.length, decimated ? EMPTY_BOUNDARIES : boundaries);
+    // at the break instants, where `sessionRuns` would mis-attribute the boundary
+    // points — {@link decimatedSessionRuns} cuts at those baked gaps instead, so a
+    // break is never interior to a run (no `none` bridge or connector across it).
+    const runs = decimated
+        ? decimatedSessionRuns(cs.x, cs.y, cs.length, boundaries)
+        : sessionRuns(cs.x, cs.length, boundaries);
     const singleRun = runs.length === 1;
     // [PND-AFFINE] fast path: when the curve is linear and **both** scales are
     // affine (every y axis is `scaleLinear`; x is `scaleLinear` / `scaleTime` /
@@ -260,6 +259,47 @@ export function sessionRuns(x, length, boundaries) {
     runs.push([start, length]);
     return runs;
 }
+/**
+ * {@link sessionRuns} for a **decimated** series. `decimateM4` bakes each
+ * session break in as a `NaN` point at the break instant, with the closing
+ * column's last point and the opening column's first point **both** at that
+ * instant — so `sessionRuns`'s `(x[i-1], x[i]]` cut would hand the close's last
+ * point to the next session. Instead, cut at every non-finite run whose finite
+ * neighbours bracket a boundary (`lastX ≤ b ≤ nextX`), starting the new run at
+ * the run's first `NaN`. The break then sits as a **leading** gap of the next
+ * session: never interior, so `gaps="none"` does not interpolate across it and
+ * no inferred connector (dashed / step / fade) spans it — left in one run it
+ * read as an ordinary dropout and got both. A data gap that straddles a break
+ * is cut the same way, matching the full-resolution path. Pure + O(N).
+ */
+export function decimatedSessionRuns(x, y, length, boundaries) {
+    if (boundaries.length === 0 || length === 0)
+        return [[0, length]];
+    const bounds = boundaries.length > 1 ? [...boundaries].sort((a, b) => a - b) : boundaries;
+    const runs = [];
+    let start = 0;
+    let lastFinite = -1;
+    let bi = 0;
+    for (let i = 0; i < length; i += 1) {
+        if (!Number.isFinite(y[i]))
+            continue;
+        if (lastFinite >= 0 && i - lastFinite > 1) {
+            const a = x[lastFinite];
+            const b = x[i];
+            while (bi < bounds.length && bounds[bi] < a)
+                bi += 1;
+            if (bi < bounds.length && bounds[bi] <= b) {
+                runs.push([start, lastFinite + 1]);
+                start = lastFinite + 1;
+                while (bi < bounds.length && bounds[bi] <= b)
+                    bi += 1;
+            }
+        }
+        lastFinite = i;
+    }
+    runs.push([start, length]);
+    return runs;
+}
 /** How near the pointer must come to a trace's path to count as a hit, in px.
  *  Generous on purpose: a 1.5px stroke is not a target anyone can hit, and a
  *  trace has no fat mark to aim at the way a bar does. */

package/dist/tradingTimeScale.d.ts

@@ -130,8 +130,14 @@ export interface TradingTimeScale {
      * formats with the d3 multi-scale default, like {@link tickFormat}; the
      * cursor readout itself uses {@link readoutFormat} (grain-aware), so ticks
      * read terse while the crosshair reads an unambiguous date/clock.
+     *
+     * `drawn` — the subset of {@link ticks}`(count)` actually rendered, when an
+     * axis drops ticks whose labels would collide. Promotions then walk only the
+     * drawn ticks, so a dropped tick's period turn carries to the next drawn one
+     * (drop a stray `Sep 29` session open and the real open beside it reads
+     * `Sep 29`, not `15:30`). Defaults to every tick.
      */
-    flatFormat(count?: number): (value: number) => string;
+    flatFormat(count?: number, drawn?: readonly number[]): (value: number) => string;
     /**
      * The boundary-row label for the **domain start** — the reader's left-edge
      * context (`Jan 01` over an intraday axis, the year over a month axis),

package/dist/tradingTimeScale.js

@@ -209,7 +209,7 @@ export function scaleTradingTime(provider, options = {}) {
         }
         return (value) => labelled.get(value);
     };
-    scale.flatFormat = (count = 10) => {
+    scale.flatFormat = (count = 10, drawn) => {
         // A non-tick instant always uses the d3 multi-scale default — same as
         // tickFormat. (The cursor readout doesn't route through here; it uses
         // readoutFormat, grain-aware.) Without a calendar there are no ladder
@@ -217,7 +217,8 @@ export function scaleTradingTime(provider, options = {}) {
         const defFmt = fmt(count);
         if (!hasCalendar())
             return (value) => defFmt(new Date(value));
-        const { ticks, granularity } = resolved(count);
+        const { ticks: all, granularity } = resolved(count);
+        const ticks = drawn ?? all;
         // Seed the promotion walk from the previous **live** instant before the
         // domain start (clampDown; identity on a continuous axis): a domain that
         // opens exactly on a month's first session then promotes that tick to the

package/dist/x-offset.d.ts

@@ -0,0 +1,20 @@
+import { ValueSeries } from 'pond-ts';
+import type { DurationInput, SeriesSchema, TimeSeries, ValueSeriesSchema } from 'pond-ts';
+/**
+ * A layer's `xOffset`: how far after its key each row is **drawn** —
+ * milliseconds or a duration string (`'1m'`, `'-30s'`). See
+ * `LineChartCommon.xOffset`.
+ */
+export type XOffset = DurationInput;
+/**
+ * The series a layer draws, moved by `xOffset`. Every downstream read — the
+ * drawn x, the auto-fit extent, session breaks, the tracker's nearest row and
+ * dot, the sweep bounds — then sees one consistent axis. The move is pond's
+ * `offsetTime`: one pass over the key, value columns shared.
+ *
+ * `undefined` / `0` return the source unchanged (same reference, so memo deps
+ * downstream stay stable). A value series has no time to move, so a non-zero
+ * offset on one throws.
+ */
+export declare function useXOffset<Sr extends TimeSeries<SeriesSchema> | ValueSeries<ValueSeriesSchema>>(series: Sr, xOffset: XOffset | undefined, layer: string): Sr;
+//# sourceMappingURL=x-offset.d.ts.map

package/dist/x-offset.js

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { ValueSeries } from 'pond-ts';
+/**
+ * The series a layer draws, moved by `xOffset`. Every downstream read — the
+ * drawn x, the auto-fit extent, session breaks, the tracker's nearest row and
+ * dot, the sweep bounds — then sees one consistent axis. The move is pond's
+ * `offsetTime`: one pass over the key, value columns shared.
+ *
+ * `undefined` / `0` return the source unchanged (same reference, so memo deps
+ * downstream stay stable). A value series has no time to move, so a non-zero
+ * offset on one throws.
+ */
+export function useXOffset(series, xOffset, layer) {
+    return useMemo(() => {
+        if (xOffset === undefined || xOffset === 0)
+            return series;
+        if (series instanceof ValueSeries) {
+            throw new TypeError(`<${layer}> xOffset moves a time axis; a ValueSeries has none`);
+        }
+        return series.offsetTime(xOffset);
+    }, [series, xOffset, layer]);
+}
+//# sourceMappingURL=x-offset.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pond-ts/charts",
-  "version": "0.71.0",
+  "version": "0.73.0",
   "private": false,
   "description": "Canvas-rendered, streaming-first React time-series charts for pond-ts: line, area, band, bar, scatter, box, candlestick, with cursors, selection and annotations",
   "keywords": [
@@ -62,8 +62,8 @@
     "perf": "PERF_BENCH=1 playwright test perf.spec.ts --workers=1"
   },
   "peerDependencies": {
-    "@pond-ts/react": "^0.71.0",
-    "pond-ts": "^0.71.0",
+    "@pond-ts/react": "^0.73.0",
+    "pond-ts": "^0.73.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {