@pond-ts/charts 0.41.0 → 0.42.0

package/dist/ChartContainer.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { scaleLinear, scaleTime } from 'd3-scale';
+import { scaleTradingTime, } from './tradingTimeScale.js';
 import { ContainerContext, } from './context.js';
 import { maxSlotWidths, sum } from './slots.js';
 import { computeLabelLanes } from './annotations.js';
@@ -31,7 +32,7 @@ function normalizeRange(range) {
  * {@link TimeAxis} at the bottom, aligned under the plots. Y axes are per-row
  * (`<YAxis>`).
  */
-export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trackerPosition, onTrackerChanged, selected, onSelect, hovered, onHover, panZoom = false, onTimeRangeChange, minDuration = 1, cursor = DEFAULT_CURSOR_MODE, cursorTime = false, crosshairSnap = true, editAnnotations = false, creating = null, onCreate, onSelectAnnotation, onHoverAnnotation, onEditAnnotation, snap = true, timeFormat, theme, children, }) {
+export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trackerPosition, onTrackerChanged, selected, onSelect, hovered, onHover, panZoom = false, onTimeRangeChange, minDuration = 1, cursor = DEFAULT_CURSOR_MODE, cursorTime = false, crosshairSnap = true, editAnnotations = false, creating = null, onCreate, onSelectAnnotation, onHoverAnnotation, onEditAnnotation, snap = true, timeFormat, theme, discontinuities, calendar, spacing, children, }) {
     // The explicit base domain from `range` (a tuple or a TimeRange). `undefined`
     // ⇒ auto-fit (resolved from the layers below). Pan/zoom seeds from it; `seed`
     // is the placeholder while auto-fitting.
@@ -99,6 +100,29 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
             return next;
         });
     }, []);
+    // Selectable-layer registry: an id-bearing Bar/Scatter registers here (keyed
+    // by its slot) so the container knows whether *any* series is selectable. Only
+    // used to power the dev-warn below — selection resolution itself walks the
+    // rows' layers, not this set. Backed by a **ref** (the synchronous source of
+    // truth) mirrored to state: a child layer's register effect runs before this
+    // parent's dev-warn effect in the same commit, so the ref is already settled
+    // there (reading state would lag a render). State only triggers the re-check.
+    const selectableRef = useRef(new Set());
+    const [selectableKeys, setSelectableKeys] = useState(selectableRef.current);
+    const registerSelectable = useCallback((key) => {
+        if (selectableRef.current.has(key))
+            return;
+        selectableRef.current = new Set(selectableRef.current).add(key);
+        setSelectableKeys(selectableRef.current);
+    }, []);
+    const unregisterSelectable = useCallback((key) => {
+        if (!selectableRef.current.has(key))
+            return;
+        const next = new Set(selectableRef.current);
+        next.delete(key);
+        selectableRef.current = next;
+        setSelectableKeys(next);
+    }, []);
     // Annotations register here so the container can do what a mark can't in
     // isolation: draw its guide line across other rows, order regions, serve snap
     // targets. Keyed by per-instance slot key (same discipline as the sources).
@@ -174,6 +198,26 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         if (!controlledSelectionRef.current)
             setInternalSelected(hit);
     }, []);
+    // Dev-warn: selection is wired (`selected` and/or `onSelect`) but no layer
+    // carries an `id`, so nothing is selectable — `id` gates interactivity, so a
+    // consumer who forgot it gets a silent no-op click without this nudge. Fires
+    // once per wired-but-empty transition (guarded by a ref); child layers
+    // register before this parent effect runs, so the set is settled here.
+    const selectionWired = controlledSelection || onSelect !== undefined;
+    const warnedNoSelectableRef = useRef(false);
+    useEffect(() => {
+        if (selectionWired && selectableRef.current.size === 0) {
+            if (!warnedNoSelectableRef.current) {
+                warnedNoSelectableRef.current = true;
+                console.warn('[pond-charts] `selected`/`onSelect` is set but no layer has an `id` — ' +
+                    'nothing is selectable. Give a <BarChart>/<ScatterChart> an `id` to ' +
+                    'make it interactive (an `id` gates selection + hover).');
+            }
+        }
+        else {
+            warnedNoSelectableRef.current = false;
+        }
+    }, [selectionWired, selectableKeys]);
     // Hover-highlight: the transient mark under the pointer (distinct from the
     // committed selection). Controlled (`hovered` prop) or uncontrolled (internal),
     // mirroring selection; `onHover` notifies in both modes. Deduped by key+label
@@ -197,8 +241,8 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         const same = prev === hit ||
             (prev !== null &&
                 hit !== null &&
-                prev.key === hit.key &&
-                prev.label === hit.label);
+                prev.id === hit.id &&
+                prev.key === hit.key);
         if (same)
             return;
         lastHoverRef.current = hit;
@@ -239,6 +283,22 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
     // is the one formatter <TimeAxis> + the cursor readout share, so a tick and
     // the cursor read identically. (The `formatTime` name predates the value axis
     // — on a value axis it formats the value, not a time.)
+    // The trading-time provider only applies to a **time** axis — a value axis is
+    // always a plain `scaleLinear`. Gate it once here so the scale branch AND the
+    // frame (which pan/zoom read) agree: on a value axis the provider is dropped,
+    // so interactions use continuous value math, not trading-time math.
+    // Resolve the trading-time provider: the low-level `discontinuities` prop wins;
+    // otherwise derive it from the high-level `calendar` sugar at the chosen
+    // `spacing`. Memoized on `(calendar, spacing)` so a stable calendar yields a
+    // stable provider (the scale + frame only rebuild when it actually changes) —
+    // pan/zoom read the same provider identity as the low-level path would. Gated
+    // on a time axis so a value-axis chart never calls `calendar.discontinuities`.
+    const calendarProvider = useMemo(() => resolvedKind === 'time' &&
+        discontinuities === undefined &&
+        calendar !== undefined
+        ? calendar.discontinuities(spacing ? { spacing } : undefined)
+        : undefined, [resolvedKind, discontinuities, calendar, spacing]);
+    const xDiscontinuities = resolvedKind === 'time' ? (discontinuities ?? calendarProvider) : undefined;
     const { xScale, formatTime } = useMemo(() => {
         if (resolvedKind === 'value') {
             const s = scaleLinear().domain([d0, d1]).range([0, plotWidth]);
@@ -247,12 +307,23 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
                 formatTime: resolveAxisFormat(s, TIME_TICK_COUNT, timeFormat),
             };
         }
+        if (xDiscontinuities !== undefined) {
+            // Trading-time axis: closed-market gaps collapse, time proportional within
+            // sessions. Same tickFormat surface as scaleTime, so the readout is shared.
+            const s = scaleTradingTime(xDiscontinuities)
+                .domain([d0, d1])
+                .range([0, plotWidth]);
+            return {
+                xScale: s,
+                formatTime: resolveTimeFormat(s, TIME_TICK_COUNT, timeFormat),
+            };
+        }
         const s = scaleTime().domain([d0, d1]).range([0, plotWidth]);
         return {
             xScale: s,
             formatTime: resolveTimeFormat(s, TIME_TICK_COUNT, timeFormat),
         };
-    }, [resolvedKind, d0, d1, plotWidth, timeFormat]);
+    }, [resolvedKind, d0, d1, plotWidth, timeFormat, xDiscontinuities]);
     // The crosshair pixel (see resolveCursorX). A stored hoverX is a *plot* pixel;
     // if plotWidth changes mid-hover (a gutter reserving, or a width change) it's
     // briefly stale until the next pointer move — rare, and the bounds check below
@@ -316,12 +387,15 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         formatTime,
         registerTrackerSource,
         unregisterTrackerSource,
+        registerSelectable,
+        unregisterSelectable,
         registerAnnotation,
         unregisterAnnotation,
         annotations,
         labelLanes,
         xScale,
         xKind: resolvedKind,
+        discontinuities: xDiscontinuities,
         panZoom,
         minDuration,
         applyRange,
@@ -361,12 +435,15 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         formatTime,
         registerTrackerSource,
         unregisterTrackerSource,
+        registerSelectable,
+        unregisterSelectable,
         registerAnnotation,
         unregisterAnnotation,
         annotations,
         labelLanes,
         xScale,
         resolvedKind,
+        xDiscontinuities,
         panZoom,
         minDuration,
         applyRange,

package/dist/Layers.js

@@ -1,14 +1,20 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { Canvas } from './Canvas.js';
-import { drawGrid } from './grid.js';
+import { drawGrid, drawDividers, thinPixels } from './grid.js';
 import { cursorParts } from './tracker.js';
 import { resolveSelection } from './select.js';
-import { panRange, zoomRange } from './viewport.js';
+import { panRange, zoomRange, panRangeTrading, zoomRangeTrading, } from './viewport.js';
 import { flagChipStyle, flagChipX, axisPillX, axisPillStyle } from './chip.js';
 import { ContainerContext, LayersContext, RowContext, } from './context.js';
-/** Gridline tick count — matches the axes (`YAxis`/`TimeAxis`) so they align. */
+/** Gridline tick count. **Must match the axis label counts** (`XAxis`
+ *  `TICK_COUNT`, `ChartContainer` `TIME_TICK_COUNT`, `YAxis`) — the grid, the
+ *  session dividers, and the axis labels are all derived from `ticks(count)`, so
+ *  they only line up while the counts agree. Kept at 5 across all four. */
 const GRID_TICKS = 5;
+/** Minimum px between session dividers — thins dense collapse points (e.g. a
+ *  daily chart where every candle is a new session) so the axis never crowds. */
+const MIN_DIVIDER_PX = 40;
 /** Wheel-zoom sensitivity: `factor = exp(deltaY * k)` (one ~100px notch ≈ ±15%). */
 const ZOOM_SENSITIVITY = 0.0015;
 /** Pointer slop (px): a drag must exceed this before it pans, and a click within
@@ -63,11 +69,29 @@ export function Layers({ children }) {
         // Explicit `<YAxis ticks>` drive the gridlines too, so they align with the
         // axis labels; otherwise d3 auto-picks (the default).
         const explicitY = tickValues.get(defaultAxisId);
-        const xTicks = xScale.ticks(GRID_TICKS).map((d) => xScale(d));
+        const xTickVals = xScale.ticks(GRID_TICKS);
+        const xTicks = xTickVals.map((d) => xScale(+d));
         const yTicks = gridY
             ? (explicitY ?? gridY.ticks(GRID_TICKS)).map((t) => gridY(t))
             : [];
         drawGrid(ctx, xTicks, yTicks, w, h, gridColor, gridDash);
+        // Session dividers: solid verticals at the trading calendar's collapse
+        // points (session/day opens), where closed time was removed from the axis.
+        // Draw them at the axis ticks that are collapse points — the same
+        // calendar-coarsened instants the axis labels — so a divider sits under
+        // each date/month/year label, not at every session (which crowds).
+        const disc = container.discontinuities;
+        if (disc?.boundaries) {
+            const [d0, d1] = container.timeRange;
+            // Call as a method (not a detached reference) so a class-based provider
+            // whose `boundaries` reads `this` keeps its receiver.
+            const collapse = new Set(disc.boundaries(d0, d1));
+            const bx = xTickVals
+                .filter((t) => collapse.has(+t))
+                .map((t) => xScale(+t));
+            const dividerColor = container.theme.axis.sessionDivider ?? gridColor;
+            drawDividers(ctx, thinPixels(bx, MIN_DIVIDER_PX), h, dividerColor);
+        }
         for (const entry of layers) {
             const yScale = yScales.get(entry.axisId ?? defaultAxisId);
             if (yScale === undefined)
@@ -83,6 +107,8 @@ export function Layers({ children }) {
         background,
         gridColor,
         gridDash,
+        container.discontinuities,
+        container.timeRange,
     ]);
     // 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
@@ -296,9 +322,17 @@ export function Layers({ children }) {
                     /* ignore (synthetic / already-released pointer) */
                 }
             }
-            const span = drag.startRange[1] - drag.startRange[0];
-            const dt = c.plotWidth > 0 ? -dx * (span / c.plotWidth) : 0;
-            c.applyRange(panRange(drag.startRange, dt));
+            if (c.discontinuities) {
+                // Trading-time axis: pan by an equal amount of *trading* time so the
+                // drag feels uniform across collapsed gaps (a raw-ms shift jumps).
+                const fraction = c.plotWidth > 0 ? -dx / c.plotWidth : 0;
+                c.applyRange(panRangeTrading(drag.startRange, fraction, c.discontinuities));
+            }
+            else {
+                const span = drag.startRange[1] - drag.startRange[0];
+                const dt = c.plotWidth > 0 ? -dx * (span / c.plotWidth) : 0;
+                c.applyRange(panRange(drag.startRange, dt));
+            }
             return; // tracker suppressed during a pan
         }
         const rect = e.currentTarget.getBoundingClientRect();
@@ -451,7 +485,12 @@ export function Layers({ children }) {
             const localX = Math.max(0, Math.min(c.plotWidth, e.clientX - rect.left));
             const pivot = +c.xScale.invert(localX);
             const factor = Math.exp(e.deltaY * ZOOM_SENSITIVITY);
-            c.applyRange(zoomRange(c.timeRange, pivot, factor, c.minDuration));
+            c.applyRange(c.discontinuities
+                ? // minDuration is the zoom-in floor; on a trading-time axis it caps
+                    // the minimum visible *trading* time (ms of open-market time) rather
+                    // than wall-clock ms — the sensible meaning for this axis.
+                    zoomRangeTrading(c.timeRange, pivot, factor, c.discontinuities, c.minDuration)
+                : zoomRange(c.timeRange, pivot, factor, c.minDuration));
         };
         el.addEventListener('wheel', onWheel, { passive: false });
         return () => el.removeEventListener('wheel', onWheel);

package/dist/ScatterChart.d.ts

@@ -15,6 +15,17 @@ export interface ScatterChartProps<S extends SeriesSchema> {
      * exception), not a per-component style override.
      */
     as?: string;
+    /**
+     * The **stable series identity** for selection + hover. **Optional, and it
+     * gates interactivity:** the scatter is selectable/hoverable only when given an
+     * `id` — omit it and the points render + read out but can't be clicked (a click
+     * on them reads as empty space ⇒ deselect). Distinct from `as` (a theme role
+     * that can repeat): `id` must be unique among the selectable layers, and it is
+     * the key the controlled `selected` echo, dedup, and (later) multi-select all
+     * match on — so a selection survives a data update where a sample `key` goes
+     * stale.
+     */
+    id?: string;
     /**
      * Which `<YAxis>` (by its `id`) this scatter scales against — picks the
      * *scale*, where `as` picks the *style*. **Omitted ⇒ the row's default axis.**
@@ -66,8 +77,9 @@ export interface ScatterChartProps<S extends SeriesSchema> {
  * (`sampleAt`), and that sample flows to the container's `onTrackerChanged` —
  * the nearest-point readout. Scatter reuses the shared tracker rather than
  * adding a separate `onNearest` channel, so a scatter reads out exactly like a
- * line. Click selection hit-tests each point's disc (`hitTest`); the selected
- * point (matching both its key and this series' label) gets a highlight ring.
+ * line. Click selection hit-tests each point's disc (`hitTest`) — **opt-in via
+ * `id`**; the selected point (matching the selection's series `id` and the sample
+ * `key`) gets a highlight ring. Without an `id` the scatter is display-only.
  *
  * ```tsx
  * <Layers>
@@ -80,5 +92,5 @@ export interface ScatterChartProps<S extends SeriesSchema> {
  * </Layers>
  * ```
  */
-export declare function ScatterChart<S extends SeriesSchema>({ series, column, as: semantic, axis, radius, color, label, index, }: ScatterChartProps<S>): null;
+export declare function ScatterChart<S extends SeriesSchema>({ series, column, as: semantic, id, axis, radius, color, label, index, }: ScatterChartProps<S>): null;
 //# sourceMappingURL=ScatterChart.d.ts.map

package/dist/ScatterChart.js

@@ -16,8 +16,9 @@ import { useSlotKey } from './use-slot-key.js';
  * (`sampleAt`), and that sample flows to the container's `onTrackerChanged` —
  * the nearest-point readout. Scatter reuses the shared tracker rather than
  * adding a separate `onNearest` channel, so a scatter reads out exactly like a
- * line. Click selection hit-tests each point's disc (`hitTest`); the selected
- * point (matching both its key and this series' label) gets a highlight ring.
+ * line. Click selection hit-tests each point's disc (`hitTest`) — **opt-in via
+ * `id`**; the selected point (matching the selection's series `id` and the sample
+ * `key`) gets a highlight ring. Without an `id` the scatter is display-only.
  *
  * ```tsx
  * <Layers>
@@ -30,7 +31,7 @@ import { useSlotKey } from './use-slot-key.js';
  * </Layers>
  * ```
  */
-export function ScatterChart({ series, column, as: semantic, axis, radius, color, label, index = 0, }) {
+export function ScatterChart({ series, column, as: semantic, id, axis, radius, color, label, index = 0, }) {
     const container = useContext(ContainerContext);
     if (container === null) {
         throw new Error('<ScatterChart> must be rendered inside a <ChartContainer>');
@@ -101,8 +102,15 @@ export function ScatterChart({ series, column, as: semantic, axis, radius, color
                     },
                 ];
             },
-            hitTest: (px, py, xScale, yScale) => hitTestScatter(cs, px, py, xScale, yScale, encoding, keyAt, seriesLabel),
-            draw: (ctx, xScale, yScale) => drawScatter(ctx, cs, xScale, yScale, style, encoding, keyAt, labelAt, font, container.selected, seriesLabel),
+            // `id` gates interactivity: only an id-bearing layer wires a hitTest, so
+            // a no-id scatter is display-only (a click on it resolves to empty space).
+            // Omit the key entirely when there's no id (exactOptionalPropertyTypes).
+            ...(id === undefined
+                ? {}
+                : {
+                    hitTest: (px, py, xScale, yScale) => hitTestScatter(cs, px, py, xScale, yScale, encoding, keyAt, id, seriesLabel),
+                }),
+            draw: (ctx, xScale, yScale) => drawScatter(ctx, cs, xScale, yScale, style, encoding, keyAt, labelAt, font, container.selected, id),
         },
         axisId: axis,
         index,
@@ -112,6 +120,7 @@ export function ScatterChart({ series, column, as: semantic, axis, radius, color
         column,
         style,
         seriesLabel,
+        id,
         encoding,
         keyAt,
         labelAt,
@@ -134,6 +143,15 @@ export function ScatterChart({ series, column, as: semantic, axis, radius, color
     useEffect(() => {
         registerTrackerSource(slot, entry.layer);
     }, [registerTrackerSource, slot, entry.layer]);
+    // Advertise selectability (only when an `id` was given) so the container can
+    // warn if selection is wired but nothing is selectable.
+    const { registerSelectable, unregisterSelectable } = container;
+    useEffect(() => {
+        if (id === undefined)
+            return;
+        registerSelectable(slot);
+        return () => unregisterSelectable(slot);
+    }, [registerSelectable, unregisterSelectable, slot, id]);
     return null;
 }
 //# sourceMappingURL=ScatterChart.js.map

package/dist/bars.d.ts

@@ -1,6 +1,14 @@
-import type { BarSeries } from './data.js';
+import type { BarSeries, StackedBarSeries } from './data.js';
 import type { Scale } from './line.js';
 import type { BarStyle } from './theme.js';
+/**
+ * Bar growth direction — the histogram orientation. `'vertical'` bars grow **up**
+ * from a value baseline, bins on the x axis (the column / time-bucket look);
+ * `'horizontal'` bars grow **right**, bins on the y axis (the band look, e.g.
+ * heart-rate zones). The stacked geometry below transposes on this alone — the
+ * {@link StackedBarSeries} data is identical for both.
+ */
+export type Orientation = 'vertical' | 'horizontal';
 /**
  * The `[min, max]` vertical extent the bars occupy — the finite values of `cs.y`
  * **widened to include `0`**, since a bar spans from its value to the baseline
@@ -49,7 +57,8 @@ export declare function barRect(cs: BarSeries, i: number, xScale: Scale, yScale:
  * (inset by `gapPx`) from the resolved `baseline` to the value.
  *
  * A gap (non-finite value) is skipped — no bar, no zero-height sliver. A bar
- * matching the current `selection` (same `begin` **and** the layer's own `label`)
+ * matching the current `selection` (same sample `key` **and** the layer's own
+ * series `id` — `seriesId`; a no-id layer passes `undefined` and never matches)
  * draws in the style's `highlight` colour **and outlined**, so a click reads back
  * on the canvas; a bar matching `hovered` draws in `highlight` **without** the
  * outline (a lighter "this bar is live" on pointer-over); all others use the flat
@@ -59,12 +68,12 @@ export declare function barRect(cs: BarSeries, i: number, xScale: Scale, yScale:
  * O(N) over the events, one fill (+ optional stroke) per bar, no per-bar
  * allocation beyond the rect tuple.
  */
-export declare function drawBars(ctx: CanvasRenderingContext2D, cs: BarSeries, xScale: Scale, yScale: Scale, style: BarStyle, baseline: number, gapPx: number, label: string, selection: {
+export declare function drawBars(ctx: CanvasRenderingContext2D, cs: BarSeries, xScale: Scale, yScale: Scale, style: BarStyle, baseline: number, gapPx: number, seriesId: string | undefined, selection: {
     key: number;
-    label: string;
+    id: string;
 } | null, hovered: {
     key: number;
-    label: string;
+    id: string;
 } | null): void;
 /**
  * The index of the bar whose key span `[begin, end]` contains `time` — the bar
@@ -93,4 +102,86 @@ export declare function barIndexAtTime(cs: BarSeries, time: number): number;
  * series, so "first match" is unambiguous in practice.
  */
 export declare function barAt(cs: BarSeries, px: number, py: number, xScale: Scale, yScale: Scale, baseline: number, gapPx: number, minWidthPx: number): [index: number, begin: number, value: number] | null;
+/**
+ * A resolved per-group stack style: `fills` aligned index-for-index to
+ * {@link StackedBarSeries.groups} (segment `g` uses `fills[g]`), plus the shared
+ * `opacity` (applied to every resting segment) and `outlineWidth` (the selected
+ * segment's stroke). Assembled by `BarChart` from the theme's `bar` style + the
+ * `colors` override, so the draw layer stays theme-free (unit-testable).
+ *
+ * There is no separate highlight colour: a hovered / selected segment pops by
+ * drawing its **own** `fill` at full opacity (and, when selected, an outline in
+ * that same colour). Colour-agnostic, so it reads correctly whatever palette the
+ * `colors` override supplies.
+ */
+export interface StackStyle {
+    readonly fills: readonly string[];
+    readonly opacity: number;
+    readonly outlineWidth: number;
+}
+/** The narrowed selection / hover identity a stacked segment matches against:
+ *  the series `id`, the bin's `begin` (its `key`), and the group (its `label`). */
+export interface StackMark {
+    readonly id: string;
+    readonly key: number;
+    readonly label: string;
+}
+/**
+ * The `[min, max]` extent of the **value (stacked) axis** — always `[0, maxTotal]`,
+ * where `maxTotal` is the tallest bin's summed finite non-negative segments. `0` is
+ * pulled in so the stack rests on a visible baseline (the bar analog of
+ * {@link barExtent}). An empty / all-gap series returns `[0, 1]` so the axis still
+ * has a usable domain. Feeds the y auto-fit for a vertical histogram, the x
+ * auto-fit for a horizontal one.
+ */
+export declare function stackValueExtent(ss: StackedBarSeries): [number, number];
+/**
+ * The `[min, max]` extent of the **bin axis** — the first bin's `begin` to the
+ * last bin's `end` (the slots are ascending). `null` for an empty series. Feeds
+ * the x auto-fit for a vertical histogram, the y auto-fit for a horizontal one.
+ */
+export declare function stackBinExtent(ss: StackedBarSeries): [number, number] | null;
+/**
+ * The pixel rect `[x0, x1, yTop, yBottom]` (ascending on both axes) of bin `b`'s
+ * segment `g`, stacked so it sits atop `cumBefore` (the summed value of the
+ * segments below it, in value units). `null` for a gap (see below). Transposes on
+ * `orientation`:
+ *
+ * - **vertical** — the bin span is horizontal (`barSpanPx` on `xScale`); the
+ *   segment runs vertically from `yScale(cumBefore)` to `yScale(cumBefore + v)`.
+ * - **horizontal** — the bin span is vertical (`barSpanPx` on `yScale`); the
+ *   segment runs horizontally from `xScale(cumBefore)` to `xScale(cumBefore + v)`.
+ *
+ * `null` for a **gap** — a non-finite, negative, **or zero** value: none of them
+ * draw (a zero segment has no extent), and each contributes nothing to the running
+ * total. `minSpanPx` floors the **bin** span (bar thickness); the value direction
+ * is unfloored. Shared by {@link drawStacks} and {@link stackAt} so the drawn rect
+ * and the hit rect are identical.
+ */
+export declare function segmentRect(ss: StackedBarSeries, b: number, g: number, orientation: Orientation, xScale: Scale, yScale: Scale, cumBefore: number, gapPx: number, minSpanPx: number): [x0: number, x1: number, yTop: number, yBottom: number] | null;
+/**
+ * Fill every segment of every bin in `ss`, stacking each bin's groups from the
+ * value baseline outward (bottom → top vertical, left → right horizontal). A gap
+ * (non-finite / negative) segment is skipped and adds nothing to the running
+ * total, so the segments above it close the space. A segment matching the current
+ * `selection` (same series `id`, bin `key` **and** group `label`) draws in its
+ * group's `highlight` **and** outlined; one matching `hover` draws in `highlight`
+ * without the outline; all others use the flat `fill`. `globalAlpha` carries the
+ * shared opacity and is restored.
+ *
+ * O(N·G) over bins × groups, one fill (+ optional stroke) per drawn segment.
+ */
+export declare function drawStacks(ctx: CanvasRenderingContext2D, ss: StackedBarSeries, orientation: Orientation, xScale: Scale, yScale: Scale, style: StackStyle, gapPx: number, minSpanPx: number, seriesId: string | undefined, selection: StackMark | null, hover: StackMark | null): void;
+/**
+ * Hit-test plot-pixel `(px, py)` against `ss`'s stacked segments — the **first**
+ * segment whose rect contains the point, or `null`. The geometry is
+ * {@link segmentRect}, so the hit rect is exactly the drawn rect. The returned
+ * tuple is `[bin, group, begin, groupName, value]` for the chart to assemble a
+ * `SelectInfo` (it owns the colour). Orientation-agnostic — it reads `(px, py)`,
+ * so a horizontal histogram hit-tests the same way a vertical one does.
+ *
+ * O(N·G) over bins × groups (no spatial index — histogram bin/group counts are
+ * small; click / hover are cheap events).
+ */
+export declare function stackAt(ss: StackedBarSeries, px: number, py: number, orientation: Orientation, xScale: Scale, yScale: Scale, gapPx: number, minSpanPx: number): [bin: number, group: number, begin: number, name: string, value: number] | null;
 //# sourceMappingURL=bars.d.ts.map