@pond-ts/charts 0.40.0 → 0.42.0

package/dist/data.js

@@ -1,3 +1,4 @@
+import { ValueSeries } from 'pond-ts';
 /**
  * Read a numeric column into a `Float64Array`, missing cells as `NaN`.
  *
@@ -170,6 +171,41 @@ export function boxFromTimeSeries(series, columns) {
         length: series.length,
     };
 }
+/**
+ * Build an {@link OhlcSeries} from a pond `TimeSeries` — four numeric price
+ * columns (`open`/`high`/`low`/`close`) plus the candle's horizontal slot.
+ *
+ * **Key-shape aware, like {@link barsFromTimeSeries}.** An **interval /
+ * timeRange**-keyed series (an `aggregate` rollup — weekly / monthly bars) uses
+ * the key's own `[begin, end)` as the slot. A **point**-keyed (`time`) series —
+ * raw daily OHLCV — has `begin === end` (zero width), so the slot is derived from
+ * neighbour spacing (each candle centred on its timestamp, reaching halfway to
+ * each neighbour; see {@link neighbourSpans}). This is the ergonomic win over the
+ * interval-only {@link boxFromTimeSeries}: raw OHLC feeds straight in with no
+ * `aggregate` pass.
+ *
+ * A key with any of the four prices missing reads as a gap (the candle draws
+ * nothing). Detected by `keyColumn().kind === 'time'`.
+ *
+ * @throws RangeError if any price column does not exist.
+ * @throws TypeError if any price column is not a numeric column.
+ */
+export function ohlcFromTimeSeries(series, columns) {
+    const open = readNumericColumn(series, columns.open);
+    const high = readNumericColumn(series, columns.high);
+    const low = readNumericColumn(series, columns.low);
+    const close = readNumericColumn(series, columns.close);
+    const n = series.length;
+    if (series.keyColumn().kind !== 'time') {
+        // Interval / timeRange: the key's own endpoints are the candle slot.
+        const { begin, end } = keyBeginEnd(series);
+        return { x: begin, xEnd: end, open, high, low, close, length: n };
+    }
+    // Point key (begin === end): synthesize the slot from neighbour spacing so raw
+    // daily OHLCV renders as contiguous candles without a pre-key to intervals.
+    const { begin, end } = neighbourSpans(series.keyColumn().begin, n);
+    return { x: begin, xEnd: end, open, high, low, close, length: n };
+}
 /**
  * Per-row begin/end buffers for the key column, each aligned to the logical
  * length (zero-copy views). For an interval / timeRange key these are the key's
@@ -184,6 +220,30 @@ function keyBeginEnd(series) {
     // (point-in-time), which the caller's point-key fallback replaces.
     return { begin: key.begin.subarray(0, n), end: key.end.subarray(0, n) };
 }
+/**
+ * Synthesize per-point `[begin, end]` spans from a monotonic axis buffer by
+ * **neighbour spacing**: each point is centred on its own value and reaches
+ * halfway to each neighbour (a Voronoi cell on the axis). The first / last points
+ * mirror their single adjacent gap so the end cells match their interior width; a
+ * lone point (length 1) keeps zero width (the renderer's `minWidth` floor takes
+ * over). Shared by the point-keyed `TimeSeries` bars, the `ValueSeries` bars, and
+ * the point-keyed OHLC reader. `axis` is a zero-copy key buffer (must not be
+ * mutated) — fresh output buffers are allocated.
+ */
+function neighbourSpans(axis, n) {
+    const begin = new Float64Array(n);
+    const end = new Float64Array(n);
+    for (let i = 0; i < n; i += 1) {
+        const x = axis[i];
+        // Half-gap to the previous neighbour (mirror the next gap at the left edge).
+        const prevGap = i > 0 ? x - axis[i - 1] : i + 1 < n ? axis[i + 1] - x : 0;
+        // Half-gap to the next neighbour (mirror the previous gap at the right edge).
+        const nextGap = i + 1 < n ? axis[i + 1] - x : i > 0 ? x - axis[i - 1] : 0;
+        begin[i] = x - prevGap / 2;
+        end[i] = x + nextGap / 2;
+    }
+    return { begin, end };
+}
 /**
  * Build a {@link BarSeries} from a pond `TimeSeries` — one bar per event, the
  * key's `[begin, end]` as the x-span and `column` as the height.
@@ -215,20 +275,8 @@ export function barsFromTimeSeries(series, column) {
         return { begin, end, y, length: n };
     }
     // Point key (begin === end): synthesize a span from neighbour spacing so the
-    // bars have width. Copy into fresh buffers — the key's begin buffer is shared
-    // (zero-copy) and must not be mutated.
-    const src = series.keyColumn().begin;
-    const begin = new Float64Array(n);
-    const end = new Float64Array(n);
-    for (let i = 0; i < n; i += 1) {
-        const t = src[i];
-        // Half-gap to the previous point (mirror the next gap at the left edge).
-        const prevGap = i > 0 ? t - src[i - 1] : i + 1 < n ? src[i + 1] - t : 0;
-        // Half-gap to the next point (mirror the previous gap at the right edge).
-        const nextGap = i + 1 < n ? src[i + 1] - t : i > 0 ? t - src[i - 1] : 0;
-        begin[i] = t - prevGap / 2;
-        end[i] = t + nextGap / 2;
-    }
+    // bars have width (see neighbourSpans).
+    const { begin, end } = neighbourSpans(series.keyColumn().begin, n);
     return { begin, end, y, length: n };
 }
 /**
@@ -253,20 +301,155 @@ export function barsFromTimeSeries(series, column) {
 export function barsFromValueSeries(series, column) {
     const y = readValueColumn(series, column);
     const n = series.length;
-    // axisValues() is the monotonic key buffer (zero-copy) — must not be mutated,
-    // so synthesise the spans into fresh buffers.
-    const ax = series.axisValues();
+    // axisValues() is the monotonic key buffer (zero-copy); neighbourSpans reads it
+    // and allocates fresh span buffers (never mutates the source).
+    const { begin, end } = neighbourSpans(series.axisValues(), n);
+    return { begin, end, y, length: n };
+}
+/**
+ * The per-bin `[begin, end]` slots for a `TimeSeries`, key-shape aware — the same
+ * rule {@link barsFromTimeSeries} applies: an interval / timeRange key uses its
+ * own endpoints; a point (`time`) key synthesizes a span from neighbour spacing
+ * (see {@link neighbourSpans}). Shared by the stacked readers so a stack draws
+ * true bucket spans over an `aggregate` rollup and contiguous bars over a raw
+ * point series.
+ */
+function seriesSlots(series) {
+    const n = series.length;
+    if (series.keyColumn().kind !== 'time') {
+        return keyBeginEnd(series);
+    }
+    return neighbourSpans(series.keyColumn().begin, n);
+}
+/**
+ * Build a {@link StackedBarSeries} from a **`Map` of grouped series** — one series
+ * per stack group. This is the natural reader for pond's grouped-aggregate output:
+ * `series.partitionBy('host', { groups }).aggregate(Sequence.every('5m'), { n: 'count' }).toMap()`
+ * yields a `Map<host, TimeSeries>`, one interval-keyed series per host. The stack
+ * order (`groups`, bottom → top) is the map's **insertion order** (stable when you
+ * pass `partitionBy`'s `{ groups }` option).
+ *
+ * **Aligned by bucket key, not by index.** Each partition's `aggregate` spans only
+ * *its own* events' range, so the groups generally have **different** grids (host A
+ * might have buckets 0–8, host B buckets 3–9). This reader takes the **union** of
+ * every group's `[begin, end)` slots (ascending) and places each group's `column`
+ * value at the matching `begin`; a bucket a group is missing reads as a gap
+ * (`NaN`, contributing nothing to that stack). So the segments always line up on
+ * the real bucket, never on a positional accident. (Pass `aggregate`'s
+ * `{ range }` option if you want every group padded to one dense grid — the union
+ * is then that grid.) When two groups carry the **same `begin`**, the first
+ * group's `end` sets that slot's width — correct for the uniform-width buckets
+ * `aggregate` / `pivotByGroup` produce (all groups share the grid width), which is
+ * the intended input.
+ *
+ * @throws Error if `groups` is empty.
+ * @throws RangeError / TypeError (via {@link readNumericColumn}) if `column` is
+ *   missing or non-numeric in any member.
+ */
+export function stacksFromGroups(groups, column) {
+    const names = [...groups.keys()];
+    if (names.length === 0) {
+        throw new Error('stacksFromGroups: `groups` map is empty');
+    }
+    const series = [...groups.values()];
+    const G = names.length;
+    // Union of all groups' slots, keyed by begin (each begin → its end).
+    const ends = new Map();
+    const perGroupSlots = series.map((s) => seriesSlots(s));
+    for (let g = 0; g < G; g += 1) {
+        const { begin, end } = perGroupSlots[g];
+        for (let i = 0; i < series[g].length; i += 1) {
+            if (!ends.has(begin[i]))
+                ends.set(begin[i], end[i]);
+        }
+    }
+    const begins = [...ends.keys()].sort((a, b) => a - b);
+    const n = begins.length;
+    const beginArr = new Float64Array(n);
+    const endArr = new Float64Array(n);
+    const slotOf = new Map();
+    for (let i = 0; i < n; i += 1) {
+        beginArr[i] = begins[i];
+        endArr[i] = ends.get(begins[i]);
+        slotOf.set(begins[i], i);
+    }
+    const values = new Float64Array(n * G);
+    values.fill(NaN);
+    for (let g = 0; g < G; g += 1) {
+        const { begin } = perGroupSlots[g];
+        const col = readNumericColumn(series[g], column);
+        for (let i = 0; i < series[g].length; i += 1) {
+            const slot = slotOf.get(begin[i]);
+            if (slot !== undefined)
+                values[slot * G + g] = col[i];
+        }
+    }
+    return { begin: beginArr, end: endArr, groups: names, values, length: n };
+}
+/**
+ * Build a {@link StackedBarSeries} from a **wide** series — one numeric column
+ * per stack group. This is the reader for pond's `pivotByGroup` output (long →
+ * wide reshape: each group value becomes its own column), or any series that is
+ * already wide (e.g. `in` / `out` traffic). `columns` names the segment columns
+ * **bottom → top**; a `ValueSeries` bins on its value axis (neighbour-spaced
+ * slots), a `TimeSeries` on its key (interval spans or neighbour-spaced points).
+ *
+ * @throws RangeError / TypeError if any column is missing or non-numeric.
+ */
+export function stacksFromColumns(series, columns) {
+    const n = series.length;
+    const G = columns.length;
+    const isValue = series instanceof ValueSeries;
+    const { begin, end } = isValue
+        ? neighbourSpans(series.axisValues(), n)
+        : seriesSlots(series);
+    const values = new Float64Array(n * G);
+    for (let g = 0; g < G; g += 1) {
+        const col = isValue
+            ? readValueColumn(series, columns[g])
+            : readNumericColumn(series, columns[g]);
+        for (let i = 0; i < n; i += 1) {
+            values[i * G + g] = col[i];
+        }
+    }
+    return { begin, end, groups: columns, values, length: n };
+}
+/**
+ * Build a {@link StackedBarSeries} from **`byColumn` bin records** — the array of
+ * `{ start, end, …aggregates }` a value-band aggregation returns
+ * (`series.byColumn('power', { width: 20 }, { seconds: { from: 'dt', using: 'sum' } })`).
+ * `columns` names the aggregate field(s) to draw as segments (`['seconds']` for a
+ * plain distribution; several for a stacked value-band histogram).
+ *
+ * By default each bin keeps its real numeric `[start, end]` edges — a true value
+ * axis (power W, risk %). Pass `{ ordinal: true }` for uniform unit slots
+ * (`[i, i+1]`) when the bins are **categories** whose numeric width shouldn't
+ * distort the layout (heart-rate zones); label them with `<YAxis ticks>`.
+ *
+ * A missing / non-finite aggregate reads as a gap (`NaN`).
+ */
+export function stacksFromBins(bins, columns, options = {}) {
+    const n = bins.length;
+    const G = columns.length;
     const begin = new Float64Array(n);
     const end = new Float64Array(n);
+    const values = new Float64Array(n * G);
     for (let i = 0; i < n; i += 1) {
-        const x = ax[i];
-        // Half-gap to the previous neighbour (mirror the next gap at the left edge).
-        const prevGap = i > 0 ? x - ax[i - 1] : i + 1 < n ? ax[i + 1] - x : 0;
-        // Half-gap to the next neighbour (mirror the previous gap at the right edge).
-        const nextGap = i + 1 < n ? ax[i + 1] - x : i > 0 ? x - ax[i - 1] : 0;
-        begin[i] = x - prevGap / 2;
-        end[i] = x + nextGap / 2;
+        const bin = bins[i];
+        if (options.ordinal) {
+            begin[i] = i;
+            end[i] = i + 1;
+        }
+        else {
+            begin[i] = bin.start;
+            end[i] = bin.end;
+        }
+        const fields = bin;
+        for (let g = 0; g < G; g += 1) {
+            const v = fields[columns[g]];
+            values[i * G + g] = typeof v === 'number' && Number.isFinite(v) ? v : NaN;
+        }
     }
-    return { begin, end, y, length: n };
+    return { begin, end, groups: columns, values, length: n };
 }
 //# sourceMappingURL=data.js.map

package/dist/grid.d.ts

@@ -8,4 +8,18 @@
  * data layers that draw next.
  */
 export declare function drawGrid(ctx: CanvasRenderingContext2D, xTicks: readonly number[], yTicks: readonly number[], width: number, height: number, color: string, dash: readonly number[]): void;
+/**
+ * Greedily thin an **ascending** list of pixel positions so no two kept lines
+ * are closer than `minGap` px — keeps the axis from crowding when collapse
+ * points are dense (e.g. a divider at every daily candle). Keeps the first of
+ * each cluster.
+ */
+export declare function thinPixels(xs: readonly number[], minGap: number): number[];
+/**
+ * Stroke **session dividers** — solid vertical lines at each `xs` pixel, spanning
+ * the plot height. Drawn a touch stronger than the dashed gridlines (solid, so a
+ * session/day boundary reads as structural, not just another tick) at the
+ * discontinuity provider's collapse points (see `DiscontinuityProvider.boundaries`).
+ */
+export declare function drawDividers(ctx: CanvasRenderingContext2D, xs: readonly number[], height: number, color: string): void;
 //# sourceMappingURL=grid.d.ts.map

package/dist/grid.js

@@ -26,4 +26,40 @@ export function drawGrid(ctx, xTicks, yTicks, width, height, color, dash) {
     ctx.stroke();
     ctx.restore();
 }
+/**
+ * Greedily thin an **ascending** list of pixel positions so no two kept lines
+ * are closer than `minGap` px — keeps the axis from crowding when collapse
+ * points are dense (e.g. a divider at every daily candle). Keeps the first of
+ * each cluster.
+ */
+export function thinPixels(xs, minGap) {
+    const out = [];
+    for (const x of xs) {
+        if (out.length === 0 || x - out[out.length - 1] >= minGap)
+            out.push(x);
+    }
+    return out;
+}
+/**
+ * Stroke **session dividers** — solid vertical lines at each `xs` pixel, spanning
+ * the plot height. Drawn a touch stronger than the dashed gridlines (solid, so a
+ * session/day boundary reads as structural, not just another tick) at the
+ * discontinuity provider's collapse points (see `DiscontinuityProvider.boundaries`).
+ */
+export function drawDividers(ctx, xs, height, color) {
+    if (xs.length === 0)
+        return;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    for (const x of xs) {
+        const px = Math.round(x) + 0.5;
+        ctx.moveTo(px, 0);
+        ctx.lineTo(px, height);
+    }
+    ctx.stroke();
+    ctx.restore();
+}
 //# sourceMappingURL=grid.js.map

package/dist/index.d.ts

@@ -42,18 +42,24 @@ export { BoxPlot } from './BoxPlot.js';
 export type { BoxPlotProps } from './BoxPlot.js';
 export { BarChart } from './BarChart.js';
 export type { BarChartProps } from './BarChart.js';
+export { Candlestick } from './Candlestick.js';
+export type { CandlestickProps } from './Candlestick.js';
+export type { CandleVariant, ColorBy } from './ohlc.js';
+export { scaleTradingTime } from './tradingTimeScale.js';
+export type { TradingTimeScale, DiscontinuityProvider, } from './tradingTimeScale.js';
 export { Region, Baseline, Marker } from './annotations.js';
 export type { RegionProps, BaselineProps, MarkerProps } from './annotations.js';
 export type { AnnotationKind, CreateSpec } from './context.js';
 export { YAxisIndicator, createLiveValue } from './indicators.js';
 export type { YAxisIndicatorProps, LiveValue } from './indicators.js';
-export { fromTimeSeries, bandFromTimeSeries, boxFromTimeSeries, barsFromTimeSeries, } from './data.js';
-export type { ChartSeries, BandSeries, BoxSeries, BoxColumns, BarSeries, } from './data.js';
+export { fromTimeSeries, bandFromTimeSeries, boxFromTimeSeries, barsFromTimeSeries, ohlcFromTimeSeries, stacksFromGroups, stacksFromColumns, stacksFromBins, } from './data.js';
+export type { ChartSeries, BandSeries, BoxSeries, BoxColumns, BarSeries, OhlcSeries, OhlcColumns, StackedBarSeries, BinRecord, StacksFromBinsOptions, } from './data.js';
+export type { Orientation } from './bars.js';
 export type { RadiusEncoding, ColorEncoding } from './encoding.js';
 export type { Curve } from './curve.js';
 export type { GapMode } from './gaps.js';
 export { defaultTheme, estelaTheme } from './theme.js';
-export type { ChartTheme, LineStyle, BandStyle, AreaStyle, ScatterStyle, BoxStyle, BarStyle, } from './theme.js';
+export type { ChartTheme, LineStyle, BandStyle, AreaStyle, ScatterStyle, BoxStyle, CandleStyle, BarStyle, } from './theme.js';
 export { cssVarTheme } from './css-theme.js';
 export type { ChartThemeOverrides, VarReader } from './css-theme.js';
 export { useChartTheme } from './useChartTheme.js';

package/dist/index.js

@@ -29,13 +29,18 @@ export { AreaChart } from './AreaChart.js';
 export { ScatterChart } from './ScatterChart.js';
 export { BoxPlot } from './BoxPlot.js';
 export { BarChart } from './BarChart.js';
+export { Candlestick } from './Candlestick.js';
+export { scaleTradingTime } from './tradingTimeScale.js';
 // Annotations — user-authored marks in the turquoise register (distinct from the
 // data): a shaded span, a horizontal value line, a vertical x line.
 export { Region, Baseline, Marker } from './annotations.js';
 // Axis indicators — a value pill pinned to an axis edge (the ChartIQ live tag).
 // `createLiveValue` is the high-frequency, isolated-repaint update path.
 export { YAxisIndicator, createLiveValue } from './indicators.js';
-export { fromTimeSeries, bandFromTimeSeries, boxFromTimeSeries, barsFromTimeSeries, } from './data.js';
+export { fromTimeSeries, bandFromTimeSeries, boxFromTimeSeries, barsFromTimeSeries, ohlcFromTimeSeries, 
+// Stacked / histogram readers — assemble a StackedBarSeries from pond's own
+// aggregation output: a Map of grouped series, a wide series, or byColumn bins.
+stacksFromGroups, stacksFromColumns, stacksFromBins, } from './data.js';
 export { defaultTheme, estelaTheme } from './theme.js';
 // CSS-custom-property → ChartTheme bridge: build a theme from a design system's
 // tokens (`cssVarTheme`), and a hook that re-resolves it on a `data-theme`

package/dist/ohlc.d.ts

@@ -0,0 +1,81 @@
+import type { OhlcSeries } from './data.js';
+import type { Scale } from './line.js';
+import type { CandleStyle } from './theme.js';
+/**
+ * How an OHLC mark renders (pjm17971's fork 2 — bundled as one component, like
+ * {@link BoxShape}, not split into a separate `<OHLCBar>`):
+ *
+ * - **`candle`** (default) — a filled `open→close` body with a `high–low` wick.
+ * - **`bar`** — an OHLC tick bar: a `high–low` stem with a left tick at `open`
+ *   and a right tick at `close`, no body.
+ * - **`hollow`** — like `candle`, but a **rising** candle (close > open) draws a
+ *   *hollow* (outlined) body and a **falling / doji** one a filled body.
+ */
+export type CandleVariant = 'candle' | 'bar' | 'hollow';
+/**
+ * What drives a candle's colour:
+ *
+ * - **`direction`** (default, market convention) — `rising` when close > open,
+ *   `falling` when close < open, `neutral` when equal (a doji).
+ * - **`series`** — one colour off the `as` role (the style's `rising` pair),
+ *   *no* green/red. Keeps "colour = series" when a candle sits beside coloured
+ *   lines and the up/down split would read as a second, conflicting encoding.
+ */
+export type ColorBy = 'direction' | 'series';
+/**
+ * The `[min, max]` vertical extent of the **drawn** candles — the lowest `low`
+ * and highest `high` over keys where **all four** prices are finite — or `null`
+ * if none are. Gap keys (any price `NaN`) are excluded, matching what
+ * {@link drawCandles} draws, so they don't drag the y-domain.
+ *
+ * Only `low`/`high` bound the extent: they are the outermost reach of a candle,
+ * so `open`/`close` lie within `[low, high]` for any well-formed OHLC row and
+ * never widen it. (A malformed row where, say, `close > high` would clip — an
+ * upstream data error, not the chart's to paper over.)
+ */
+export declare function ohlcExtent(ohlc: OhlcSeries): [number, number] | null;
+/**
+ * The index of the candle whose slot `[x, xEnd]` contains `time` — the candle
+ * **under the cursor** — or `-1` if `time` is in no slot. Containment (the box
+ * analog {@link boxIndexAtTime}), not nearest-by-`begin` (which flips to the next
+ * candle past a wide one's midpoint). Candles are sorted by `x`; at a shared edge
+ * the left candle wins. A gap candle (some price non-finite) still owns its span
+ * here; the caller drops it on the finiteness check. O(N) over the candles
+ * (view-scale).
+ */
+export declare function ohlcIndexAtTime(ohlc: OhlcSeries, time: number): number;
+/** All four prices finite at `i` — i.e. this candle is drawn. */
+export declare function isFiniteOhlc(ohlc: OhlcSeries, i: number): boolean;
+/**
+ * Resolve the `{ body, wick }` colours for one candle from its `open`/`close`
+ * and the {@link ColorBy} mode. `direction` picks `rising` (close > open) /
+ * `falling` (close < open) / `neutral` (equal — a doji, falling back to `rising`
+ * when the style omits it); `series` always returns `rising` (one colour, no
+ * up/down split). The single source of the colour decision, shared by
+ * {@link drawCandles} and `<Candlestick>`'s tracker readouts so the pill colour
+ * matches the mark.
+ */
+export declare function resolveCandleStyle(style: CandleStyle, open: number, close: number, colorBy: ColorBy): {
+    body: string;
+    wick: string;
+};
+/**
+ * Draw one candle per key of `ohlc`, mapping data→pixels through
+ * `xScale`/`yScale`. The OHLC sibling of {@link drawBox}: each key gets its own
+ * mark over its slot x-span (`barSpanPx`, inset by `gapPx` so adjacent candles
+ * breathe), in the chosen {@link CandleVariant}, coloured per {@link ColorBy}.
+ *
+ * The body extents are derived here (`min`/`max` of open/close) — the consumer
+ * never precomputes them. A doji (open === close) draws a {@link MIN_BODY_HEIGHT_PX}
+ * body so it stays visible. The body is a fraction (`style.bodyWidth`, default
+ * {@link DEFAULT_BODY_WIDTH}) of the slot, centred; the wick / OHLC-bar stem sits
+ * at the slot centre.
+ *
+ * **Gap-aware**: a key with any price non-finite is skipped entirely (no partial
+ * candle) — the same contract as a box / band gap.
+ *
+ * O(N) over the keys, a fixed number of path ops each — no per-key allocation
+ * beyond the `barSpanPx` tuple.
+ */
+export declare function drawCandles(ctx: CanvasRenderingContext2D, ohlc: OhlcSeries, xScale: Scale, yScale: Scale, style: CandleStyle, variant?: CandleVariant, colorBy?: ColorBy, gapPx?: number, minWidthPx?: number): void;
+//# sourceMappingURL=ohlc.d.ts.map

package/dist/ohlc.js

@@ -0,0 +1,153 @@
+import { barSpanPx } from './range.js';
+/** Default body width as a fraction of the candle slot when the style omits one. */
+const DEFAULT_BODY_WIDTH = 0.8;
+/** Minimum body height in px so a doji (open === close) still shows a mark. */
+const MIN_BODY_HEIGHT_PX = 1;
+/**
+ * The `[min, max]` vertical extent of the **drawn** candles — the lowest `low`
+ * and highest `high` over keys where **all four** prices are finite — or `null`
+ * if none are. Gap keys (any price `NaN`) are excluded, matching what
+ * {@link drawCandles} draws, so they don't drag the y-domain.
+ *
+ * Only `low`/`high` bound the extent: they are the outermost reach of a candle,
+ * so `open`/`close` lie within `[low, high]` for any well-formed OHLC row and
+ * never widen it. (A malformed row where, say, `close > high` would clip — an
+ * upstream data error, not the chart's to paper over.)
+ */
+export function ohlcExtent(ohlc) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (let i = 0; i < ohlc.length; i += 1) {
+        if (!isFiniteOhlc(ohlc, i))
+            continue;
+        const lo = ohlc.low[i];
+        const hi = ohlc.high[i];
+        if (lo < min)
+            min = lo;
+        if (hi > max)
+            max = hi;
+    }
+    return min === Infinity ? null : [min, max];
+}
+/**
+ * The index of the candle whose slot `[x, xEnd]` contains `time` — the candle
+ * **under the cursor** — or `-1` if `time` is in no slot. Containment (the box
+ * analog {@link boxIndexAtTime}), not nearest-by-`begin` (which flips to the next
+ * candle past a wide one's midpoint). Candles are sorted by `x`; at a shared edge
+ * the left candle wins. A gap candle (some price non-finite) still owns its span
+ * here; the caller drops it on the finiteness check. O(N) over the candles
+ * (view-scale).
+ */
+export function ohlcIndexAtTime(ohlc, time) {
+    for (let i = 0; i < ohlc.length; i += 1) {
+        if (time >= ohlc.x[i] && time <= ohlc.xEnd[i])
+            return i;
+    }
+    return -1;
+}
+/** All four prices finite at `i` — i.e. this candle is drawn. */
+export function isFiniteOhlc(ohlc, i) {
+    return (Number.isFinite(ohlc.open[i]) &&
+        Number.isFinite(ohlc.high[i]) &&
+        Number.isFinite(ohlc.low[i]) &&
+        Number.isFinite(ohlc.close[i]));
+}
+/**
+ * Resolve the `{ body, wick }` colours for one candle from its `open`/`close`
+ * and the {@link ColorBy} mode. `direction` picks `rising` (close > open) /
+ * `falling` (close < open) / `neutral` (equal — a doji, falling back to `rising`
+ * when the style omits it); `series` always returns `rising` (one colour, no
+ * up/down split). The single source of the colour decision, shared by
+ * {@link drawCandles} and `<Candlestick>`'s tracker readouts so the pill colour
+ * matches the mark.
+ */
+export function resolveCandleStyle(style, open, close, colorBy) {
+    if (colorBy === 'series')
+        return style.rising;
+    if (close > open)
+        return style.rising;
+    if (close < open)
+        return style.falling;
+    return style.neutral ?? style.rising;
+}
+/**
+ * Draw one candle per key of `ohlc`, mapping data→pixels through
+ * `xScale`/`yScale`. The OHLC sibling of {@link drawBox}: each key gets its own
+ * mark over its slot x-span (`barSpanPx`, inset by `gapPx` so adjacent candles
+ * breathe), in the chosen {@link CandleVariant}, coloured per {@link ColorBy}.
+ *
+ * The body extents are derived here (`min`/`max` of open/close) — the consumer
+ * never precomputes them. A doji (open === close) draws a {@link MIN_BODY_HEIGHT_PX}
+ * body so it stays visible. The body is a fraction (`style.bodyWidth`, default
+ * {@link DEFAULT_BODY_WIDTH}) of the slot, centred; the wick / OHLC-bar stem sits
+ * at the slot centre.
+ *
+ * **Gap-aware**: a key with any price non-finite is skipped entirely (no partial
+ * candle) — the same contract as a box / band gap.
+ *
+ * O(N) over the keys, a fixed number of path ops each — no per-key allocation
+ * beyond the `barSpanPx` tuple.
+ */
+export function drawCandles(ctx, ohlc, xScale, yScale, style, variant = 'candle', colorBy = 'direction', gapPx = 0, minWidthPx = 1) {
+    const bodyFraction = style.bodyWidth ?? DEFAULT_BODY_WIDTH;
+    for (let i = 0; i < ohlc.length; i += 1) {
+        if (!isFiniteOhlc(ohlc, i))
+            continue;
+        const open = ohlc.open[i];
+        const close = ohlc.close[i];
+        const [x0, x1] = barSpanPx(ohlc.x[i], ohlc.xEnd[i], xScale, gapPx, minWidthPx);
+        const mid = (x0 + x1) / 2;
+        const bodyHalf = ((x1 - x0) * bodyFraction) / 2;
+        const bx0 = mid - bodyHalf;
+        const bodyW = bodyHalf * 2;
+        const yOpen = yScale(open);
+        const yHigh = yScale(ohlc.high[i]);
+        const yLow = yScale(ohlc.low[i]);
+        const yClose = yScale(close);
+        const { body, wick } = resolveCandleStyle(style, open, close, colorBy);
+        if (variant === 'bar') {
+            // OHLC bar: a high–low stem, a left tick at open, a right tick at close —
+            // all one colour (the `body` role), no filled body.
+            ctx.strokeStyle = body;
+            ctx.lineWidth = style.wickWidth;
+            ctx.beginPath();
+            ctx.moveTo(mid, yHigh); // stem
+            ctx.lineTo(mid, yLow);
+            ctx.moveTo(bx0, yOpen); // open tick (points left)
+            ctx.lineTo(mid, yOpen);
+            ctx.moveTo(mid, yClose); // close tick (points right)
+            ctx.lineTo(mid + bodyHalf, yClose);
+            ctx.stroke();
+            continue;
+        }
+        // candle / hollow: the high–low wick first (so the body overlaps it), then
+        // the open→close body.
+        ctx.strokeStyle = wick;
+        ctx.lineWidth = style.wickWidth;
+        ctx.beginPath();
+        ctx.moveTo(mid, yHigh);
+        ctx.lineTo(mid, yLow);
+        ctx.stroke();
+        // Body extents, with a doji floor so open === close still shows a mark.
+        let top = Math.min(yOpen, yClose);
+        let h = Math.abs(yClose - yOpen);
+        if (h < MIN_BODY_HEIGHT_PX) {
+            top -= (MIN_BODY_HEIGHT_PX - h) / 2;
+            h = MIN_BODY_HEIGHT_PX;
+        }
+        // `hollow`: a rising candle is outlined (hollow), a falling / doji one filled
+        // — the same strict-`>` boundary resolveCandleStyle uses (equality → neutral),
+        // so a doji's fill and its colour agree.
+        const hollow = variant === 'hollow' && close > open;
+        if (hollow) {
+            ctx.strokeStyle = body;
+            ctx.lineWidth = style.wickWidth;
+            ctx.strokeRect(bx0, top, bodyW, h);
+        }
+        else {
+            ctx.fillStyle = body;
+            ctx.fillRect(bx0, top, bodyW, h);
+        }
+    }
+}
+//# sourceMappingURL=ohlc.js.map

package/dist/scatter.d.ts

@@ -44,13 +44,15 @@ export declare function scatterExtent(cs: ChartSeries): [number, number] | null;
  * @param labelAt optional per-point text label; `undefined` ⇒ no labels drawn.
  * @param font    `theme.font` (family + size) for label text.
  * @param selected the container's current selection (or `null`).
- * @param seriesLabel this layer's series identity (`as` ?? column) — the
- *                `label` half of the selection match.
+ * @param seriesId this layer's stable series identity (its `id` prop, or
+ *                `undefined` when the layer isn't selectable) — the series half
+ *                of the selection match. A point lights only when the selection's
+ *                `id` matches, keyed to the sample by its `key`.
  */
 export declare function drawScatter(ctx: CanvasRenderingContext2D, cs: ChartSeries, xScale: Scale, yScale: Scale, style: ScatterStyle, encoding: ResolvedEncoding, keyAt: (i: number) => number, labelAt: ((i: number) => string | undefined) | undefined, font: {
     readonly family: string;
     readonly size: number;
-}, selected: SelectInfo | null, seriesLabel: string): void;
+}, selected: SelectInfo | null, seriesId: string | undefined): void;
 /**
  * Hit-test plot-pixel `(qx, qy)` against the scatter's points — the topmost
  * point whose circle contains the click, or `null`. "Topmost" = the
@@ -59,12 +61,12 @@ export declare function drawScatter(ctx: CanvasRenderingContext2D, cs: ChartSeri
  *
  * A point's hit radius is its drawn radius (data-driven or base) — clicking the
  * visible disc selects it. Distance is compared squared (no `sqrt` in the loop).
- * Returns the point's {@link SelectInfo} with `key = keyAt(i)` (its event
- * `begin`), the encoded fill colour (so the readout swatch matches the mark),
- * and the series `label`.
+ * Returns the point's {@link SelectInfo} with the series `id` (the selection
+ * identity), `key = keyAt(i)` (its event `begin` — click provenance), the encoded
+ * fill colour (so the readout swatch matches the mark), and the display `label`.
  *
  * Pure: takes the same `xScale`/`yScale` the row hands to `draw`, so it
  * unit-tests without a DOM (mirrors the `sampleAt` / `resolveSelection` split).
  */
-export declare function hitTestScatter(cs: ChartSeries, qx: number, qy: number, xScale: Scale, yScale: Scale, encoding: ResolvedEncoding, keyAt: (i: number) => number, seriesLabel: string): SelectInfo | null;
+export declare function hitTestScatter(cs: ChartSeries, qx: number, qy: number, xScale: Scale, yScale: Scale, encoding: ResolvedEncoding, keyAt: (i: number) => number, id: string, seriesLabel: string): SelectInfo | null;
 //# sourceMappingURL=scatter.d.ts.map