@pond-ts/charts 0.57.0 → 0.58.0

package/dist/XAxis.js

@@ -2,7 +2,8 @@ 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, CursorContext } from './context.js';
+import { ContainerContext, CursorContext, } from './context.js';
+import { xAxisCursorEntries } from './cursors.js';
 import { axisPillStyle } from './chip.js';
 import { resolveAxisFormat, resolveTimeFormat, } from './format.js';
 /** Tick strip height (mark + value label) in CSS px. */
@@ -65,16 +66,19 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
     // gridlines and `formatTime` use, so labels and grid stay on the same instants
     // (width-derived on a trading-time axis).
     const { xScale, plotWidth, leftGutter, theme, formatTime, xKind, xTickCount, } = container;
-    // The crosshair's x-time pill: when the container cursor is `'crosshair'` and a
-    // 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.
+    // The cursor's x-axis slot: did the mounted cursor in effect register one
+    // (`renderXAxis` — the crosshair's time pill)? While hovering, that is the
+    // **hovered row's** effective cursor — so a per-row override reaches this
+    // axis, which the old `container.cursor === 'crosshair'` string gate never
+    // let it do (a row-level crosshair had no time pill); with no live pointer
+    // (a controlled `trackerPosition`), any scope's effective cursor keeps its
+    // pill. The slot renders below when the cursor is live in-bounds.
     const cursorX = cursor.cursorX;
-    const showCursorTag = container.cursor === 'crosshair' &&
+    const xSlotEntries = xAxisCursorEntries(container.cursors, cursor.cursorRowKey).filter((e) => e.spec.renderXAxis !== undefined);
+    const showCursorTag = xSlotEntries.length > 0 &&
         cursorX !== null &&
         cursorX >= 0 &&
         cursorX <= plotWidth;
-    const cursorColor = theme.cursor ?? theme.axis.label;
     const annotationColor = theme.annotation?.color ?? '#0d9488';
     // Derived-unit (`transform`) layout: nice ticks in the derived unit at
     // mixed step sizes, admitted where they keep pixel room (see derivedTicks).
@@ -417,20 +421,34 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
                                 [onTop ? 'bottom' : 'top']: `${laneY}px`,
                                 zIndex: 2,
                             }, children: t.text })] }, t.id));
-            }), showCursorTag && (_jsxs(Fragment, { children: [_jsx("div", { style: {
-                            position: 'absolute',
-                            left: `${cursorX}px`,
-                            [onTop ? 'bottom' : 'top']: 0,
-                            width: '1px',
-                            height: `${pillOffset}px`,
-                            background: cursorColor,
-                            zIndex: 3,
-                        } }), _jsx("div", { style: {
-                            ...axisPillStyle(theme, cursorColor),
-                            left: `${cursorX}px`,
-                            transform: 'translateX(-50%)',
-                            [onTop ? 'bottom' : 'top']: `${pillOffset}px`,
-                            zIndex: 3,
-                        }, children: readoutFmt(+xScale.invert(cursorX)) })] }))] }));
+            }), showCursorTag &&
+                (() => {
+                    // The x-axis {@link ResolvedCursorFrame}: no row, no samples — the
+                    // slot draws a pill from the resolved cursor x + the axis's own
+                    // readout-formatted time (this axis's precedence chain, `readoutFmt`),
+                    // placed per the strip's side + tick-label offset.
+                    const f = {
+                        cursorX,
+                        cursorY: null,
+                        rowKey: null,
+                        hoveredRowKey: cursor.cursorRowKey,
+                        samples: [],
+                        flags: [],
+                        pointer: null,
+                        band: null,
+                        bandY: null, // …nor a transposed one: same reason as `rect`
+                        bandLine: false,
+                        bandDragging: false, // no band in the axis strip to edge
+                        rect: null, // …and no 2-D brush: the strip has no y
+                        restingCross: false,
+                        formattedTime: readoutFmt(+xScale.invert(cursorX)),
+                        plotWidth,
+                        rowHeight: 0,
+                        isFirstRow: false,
+                        theme,
+                        xAxis: { onTop, pillOffset },
+                    };
+                    return xSlotEntries.map((e, i) => (_jsx(Fragment, { children: e.spec.renderXAxis(f) }, `cursor-${i}`)));
+                })()] }));
 }
 //# sourceMappingURL=XAxis.js.map

package/dist/area.d.ts

@@ -1,6 +1,6 @@
 import { type CurveFactory } from 'd3-shape';
 import type { ChartSeries } from './data.js';
-import { type Scale } from './line.js';
+import { type Scale, type TraceState } from './line.js';
 import type { AreaStyle } from './theme.js';
 import type { LayerDrawStats } from './context.js';
 import { type GapMode } from './gaps.js';
@@ -70,4 +70,37 @@ export declare function areaExtent(cs: ChartSeries, baseline: number | undefined
  * 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): LayerDrawStats;
+/**
+ * **Is the pointer inside this area?** The filled-region counterpart of
+ * `traceHitIndex` ([PND-TRACESEL]) — returns the nearest sample's index as
+ * click provenance, or `null` when the pointer is outside the fill.
+ *
+ * An area is not a stroke, so the test is not distance-to-path: the pointer is
+ * on the area when it lies **between the trace and the baseline** at that x.
+ * That is the honest reading of "you clicked the area", and it makes the whole
+ * filled shape the target rather than a 1.5px edge — which is the same reason
+ * the list family made the row the target rather than the bar.
+ *
+ * The x cut bisects `xScale(cs.x[i])` for `traceHitIndex`'s reasons (a layer's
+ * `hitTest` gets the forward scale only, and a trading-time scale has no honest
+ * inverse), and the trace's y is **interpolated** between the bracketing
+ * samples so the boundary follows the drawn edge rather than a step. A tolerance
+ * is still added, so the top edge is grabbable from just outside.
+ *
+ * A gap is a hole, not a bridge: either bracketing sample non-finite ⇒ no hit,
+ * matching what `drawArea` actually fills.
+ */
+export declare function areaHitIndex(cs: ChartSeries, baseline: number | undefined, px: number, py: number, xScale: Scale, yScale: Scale, tolerance?: number): number | null;
+/**
+ * The style an area fills with in a given interaction state
+ * ([PND-TRACESEL]) — the {@link AreaStyle} counterpart of `traceStateStyle`.
+ *
+ * The channels differ from a line's because what carries the mark differs: an
+ * area's mark is its **fill**, so state is the fill's strength plus the edge's
+ * weight. A line has only a stroke, so there weight is all there is.
+ *
+ * Alpha comes back separately, as it does for a line, so a muted area keeps its
+ * hue rather than having the fade baked into a colour.
+ */
+export declare function areaStateStyle(style: AreaStyle, state: TraceState): readonly [AreaStyle, number];
 //# sourceMappingURL=area.d.ts.map

package/dist/area.js

@@ -1,5 +1,5 @@
 import { area as d3area, curveLinear } from 'd3-shape';
-import { strokeAffinePolyline } from './line.js';
+import { baselinePxFromScale, 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';
@@ -345,4 +345,91 @@ function buildGradient(ctx, valueExtent, yScale, baselinePx, style) {
     }
     return grad;
 }
+/**
+ * **Is the pointer inside this area?** The filled-region counterpart of
+ * `traceHitIndex` ([PND-TRACESEL]) — returns the nearest sample's index as
+ * click provenance, or `null` when the pointer is outside the fill.
+ *
+ * An area is not a stroke, so the test is not distance-to-path: the pointer is
+ * on the area when it lies **between the trace and the baseline** at that x.
+ * That is the honest reading of "you clicked the area", and it makes the whole
+ * filled shape the target rather than a 1.5px edge — which is the same reason
+ * the list family made the row the target rather than the bar.
+ *
+ * The x cut bisects `xScale(cs.x[i])` for `traceHitIndex`'s reasons (a layer's
+ * `hitTest` gets the forward scale only, and a trading-time scale has no honest
+ * inverse), and the trace's y is **interpolated** between the bracketing
+ * samples so the boundary follows the drawn edge rather than a step. A tolerance
+ * is still added, so the top edge is grabbable from just outside.
+ *
+ * A gap is a hole, not a bridge: either bracketing sample non-finite ⇒ no hit,
+ * matching what `drawArea` actually fills.
+ */
+export function areaHitIndex(cs, baseline, px, py, xScale, yScale, tolerance = TRACE_HIT_PX) {
+    const n = cs.length;
+    if (n === 0)
+        return null;
+    let lo = 0;
+    let hi = n;
+    while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        if (xScale(cs.x[mid]) < px)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    // The bracketing pair around the pointer. At either end of the series the
+    // pair degenerates to one sample, which is correct — the fill stops there.
+    const i = Math.max(0, Math.min(n - 1, lo));
+    const j = Math.max(0, Math.min(n - 1, lo === 0 ? 0 : lo - 1));
+    const yi = cs.y[i];
+    const yj = cs.y[j];
+    if (!Number.isFinite(yi) || !Number.isFinite(yj))
+        return null;
+    const xi = xScale(cs.x[i]);
+    const xj = xScale(cs.x[j]);
+    // Interpolate the edge at the pointer's x, so the boundary is the drawn
+    // slope and not a staircase. Guard the degenerate same-pixel pair.
+    const t = xi === xj ? 0 : (px - xj) / (xi - xj);
+    const edgePx = yScale(yj + (yi - yj) * Math.max(0, Math.min(1, t)));
+    const basePx = baseline === undefined ? baselinePxFromScale(yScale) : yScale(baseline);
+    const top = Math.min(edgePx, basePx) - tolerance;
+    const bottom = Math.max(edgePx, basePx) + tolerance;
+    if (py < top || py > bottom)
+        return null;
+    // Outside the series' own x span there is no fill to be inside of.
+    if (px < xScale(cs.x[0]) - tolerance)
+        return null;
+    if (px > xScale(cs.x[n - 1]) + tolerance)
+        return null;
+    return Math.abs(px - xi) <= Math.abs(px - xj) ? i : j;
+}
+/**
+ * The style an area fills with in a given interaction state
+ * ([PND-TRACESEL]) — the {@link AreaStyle} counterpart of `traceStateStyle`.
+ *
+ * The channels differ from a line's because what carries the mark differs: an
+ * area's mark is its **fill**, so state is the fill's strength plus the edge's
+ * weight. A line has only a stroke, so there weight is all there is.
+ *
+ * Alpha comes back separately, as it does for a line, so a muted area keeps its
+ * hue rather than having the fade baked into a colour.
+ */
+export function areaStateStyle(style, state) {
+    const emphasised = {
+        ...style,
+        width: style.selectedWidth ?? style.width * 2,
+        fillOpacity: style.selectedFillOpacity ?? Math.min(style.fillOpacity * 2, 1),
+    };
+    switch (state) {
+        case 'selected':
+            return [emphasised, 1];
+        case 'hover':
+            return [emphasised, 1];
+        case 'dimmed':
+            return [style, style.dimmedOpacity ?? 0.32];
+        case 'rest':
+            return [style, 1];
+    }
+}
 //# sourceMappingURL=area.js.map

package/dist/bars.d.ts

@@ -1,7 +1,7 @@
 import type { BarSeries, StackedBarSeries } from './data.js';
 import type { Scale } from './line.js';
 import type { BarStyle } from './theme.js';
-import type { LayerDrawStats } from './context.js';
+import type { LayerDrawStats, SpanSelection } from './context.js';
 import { type DecimateOption } from './decimate.js';
 /**
  * Bar growth direction — the histogram orientation. `'vertical'` bars grow **up**
@@ -146,6 +146,21 @@ export interface BarMark {
     readonly key: number;
     readonly mark?: string;
 }
+/**
+ * Stroke a selected mark's outline **inside** its ink rect. Canvas strokes
+ * centre on the path, so a plain `strokeRect(x0, yTop, …)` paints
+ * `lineWidth / 2` *outside* the rect — which, with the default
+ * `outlineWidth: 1.5` against the default `gap: 1`, is enough to bridge the
+ * whole inter-bar gap from both sides: a swept run of selected bars fused
+ * into one unreadable block (you could not count them). Insetting the path by
+ * half the line width keeps every stroked pixel within the bar's own ink, so
+ * adjacent selected marks stay separated by exactly the gap the resting bars
+ * show. A mark too thin to contain its outline (either dimension
+ * `<= lineWidth`) skips the stroke — the highlight fill is already the
+ * signal, and an outline wider than the bar would only smear into the
+ * neighbours this exists to keep distinct.
+ */
+export declare function strokeSelectedOutline(ctx: CanvasRenderingContext2D, x0: number, x1: number, yTop: number, yBottom: number, lineWidth: number): void;
 /**
  * Fill one rectangle per bar in `cs`, each spanning its key's `[begin, end]`
  * (inset by `gapPx`) from the resolved `baseline` to the value.
@@ -198,7 +213,7 @@ export interface BarMark {
  * repaint them one flat colour; per-bar-coloured layers draw every visible bar.
  * Returns {@link LayerDrawStats} for `onDrawStats`.
  */
-export declare function drawBars(ctx: CanvasRenderingContext2D, cs: BarSeries, xScale: Scale, yScale: Scale, style: BarStyle, baseline: number, gapPx: number, seriesId: string | undefined, selection: BarMark | null, hovered: BarMark | null, decimate?: DecimateOption, binFills?: readonly (string | undefined)[], banding?: BandLadder): LayerDrawStats;
+export declare function drawBars(ctx: CanvasRenderingContext2D, cs: BarSeries, xScale: Scale, yScale: Scale, style: BarStyle, baseline: number, gapPx: number, seriesId: string | undefined, selection: readonly BarMark[], hovered: readonly BarMark[], decimate?: DecimateOption, binFills?: readonly (string | undefined)[], banding?: BandLadder, spans?: readonly SpanSelection[]): LayerDrawStats;
 /**
  * The index of the bar whose key span `[begin, end]` contains `time` — the bar
  * **under the cursor** — or `-1` if `time` falls in no bar's span. This is the
@@ -335,6 +350,45 @@ export interface StackStyle {
      * resting and live, only the floor.
      */
     readonly emphasisOpacity?: number;
+    /**
+     * Fill for a segment **not** in a non-empty selection set — the themed
+     * de-emphasis ([PND-MULTISEL], RFC A2.3). Unset ⇒ nothing dims, so this is
+     * opt-in and back-compatible. Unlike {@link highlight}, this **does** apply
+     * over {@link binFills}: dimming is about recession, not identity, so a
+     * zone-coloured bar can recede without its colour changing meaning — the
+     * dimmed value simply replaces it while it is out of the set.
+     */
+    readonly dimmed?: string;
+    /**
+     * Per-group {@link dimmed}, parallel to {@link fills} — the resolved
+     * `theme.bar.default.groupsDimmed` ramp. Set only for a **group-ramped**
+     * stack; `undefined` falls back to the flat {@link dimmed}.
+     *
+     * A stack dimmed to one colour stops being a stack — the segment boundaries
+     * vanish and the receded bins read as solid blocks, which is exactly the
+     * structure a selection wants to keep visible for comparison.
+     */
+    readonly dimmedFills?: readonly string[];
+    /**
+     * Per-group {@link hover}, parallel to {@link fills} — the resolved
+     * `theme.bar.default.groupsHover` ramp. Set only for a **group-ramped**
+     * stack; `undefined` falls back to the flat {@link hover}.
+     *
+     * A single hover colour repaints the pointed-at segment in a hue belonging
+     * to another group, so hovering erases the ramp exactly where the reader is
+     * looking — and block-scoped hover erases the whole bin.
+     */
+    readonly hoverFills?: readonly string[];
+    /**
+     * Whether {@link fills} carry **group identity** (a resolved group ramp)
+     * rather than being one repeated role colour.
+     *
+     * When they do, a selected segment keeps its own fill and the outline plus
+     * the receded neighbours are the cue — the same exclusion {@link binFills}
+     * already gets, and for the same reason: replacing a meaning-carrying colour
+     * with the flat `highlight` destroys the thing the selection is *about*.
+     */
+    readonly groupColored?: boolean;
 }
 /** The narrowed selection / hover identity a stacked segment matches against:
  *  the series `id`, the bin's `begin` (its `key`), and the group (its `label`).
@@ -418,7 +472,7 @@ export declare function segmentRect(ss: StackedBarSeries, b: number, g: number,
  *
  * 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, banding?: BandLadder): void;
+export declare function drawStacks(ctx: CanvasRenderingContext2D, ss: StackedBarSeries, orientation: Orientation, xScale: Scale, yScale: Scale, style: StackStyle, gapPx: number, minSpanPx: number, seriesId: string | undefined, selection: readonly StackMark[], hover: readonly StackMark[], banding?: BandLadder, spans?: readonly SpanSelection[]): 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