@pond-ts/charts 0.62.0 → 0.64.0

package/dist/Layers.js

@@ -207,7 +207,7 @@ export function Layers({ children }) {
     }), [row.registerLayer, row.unregisterLayer]);
     const background = container.theme.background;
     const { grid: gridColor, gridDash } = container.theme.axis;
-    const { layers, yScales, formats, defaultAxisId, tickValues, tickCounts, axisSides, } = row;
+    const { layers, yScales, baseYScales, formats, defaultAxisId, tickValues, tickCounts, axisSides, axisOffsets, axisColors, } = row;
     // x geometry is shared and lives on the container (uniform across rows), and
     // so is the x tick count — vertical gridlines must sit under the `<XAxis>`
     // labels, which pass the same `xTickCount` to the same scale.
@@ -346,21 +346,23 @@ export function Layers({ children }) {
         const report = container.reportDrawStats;
         if (report === undefined) {
             for (const entry of layers) {
-                const yScale = yScales.get(entry.axisId ?? defaultAxisId);
+                const axisId = entry.axisId ?? defaultAxisId;
+                const yScale = yScales.get(axisId);
                 if (yScale === undefined)
                     continue;
-                entry.layer.draw(ctx, xScale, yScale);
+                entry.layer.draw(ctx, xScale, yScale, baseYScales.get(axisId));
             }
         }
         else {
             const infos = [];
             let totalDrawMs = 0;
             for (const entry of layers) {
-                const yScale = yScales.get(entry.axisId ?? defaultAxisId);
+                const axisId = entry.axisId ?? defaultAxisId;
+                const yScale = yScales.get(axisId);
                 if (yScale === undefined)
                     continue;
                 const t0 = performance.now();
-                const stats = entry.layer.draw(ctx, xScale, yScale);
+                const stats = entry.layer.draw(ctx, xScale, yScale, baseYScales.get(axisId));
                 const drawMs = performance.now() - t0;
                 totalDrawMs += drawMs;
                 infos.push({
@@ -377,6 +379,7 @@ export function Layers({ children }) {
     }, [
         layers,
         yScales,
+        baseYScales,
         xScale,
         xTickCount,
         defaultAxisId,
@@ -516,14 +519,20 @@ export function Layers({ children }) {
             // The chip uses this layer's axis formatter, so a readout value reads
             // exactly as the axis labels it.
             const fmt = formats.get(axisId) ?? String;
-            // Which gutter the crosshair value pill hugs (the axis's own side).
+            // Where the crosshair value pill lands, and in what ink: this axis's own
+            // side, its offset out into that gutter (so the pill sits on the axis that
+            // measured the value, not the innermost one), and its `<YAxis color>`.
             const side = axisSides.get(axisId) ?? 'left';
+            const axisOffset = axisOffsets.get(axisId) ?? 0;
+            const axisColor = axisColors.get(axisId);
             for (const s of entry.layer.sampleAt(cursorTime)) {
                 out.push({
                     px: xScale(s.x),
                     py: yScale(s.value),
                     axisId,
                     side,
+                    axisOffset,
+                    axisColor,
                     formatted: fmt(s.value),
                     color: s.color,
                     label: s.label,
@@ -538,6 +547,8 @@ export function Layers({ children }) {
         yScales,
         formats,
         axisSides,
+        axisOffsets,
+        axisColors,
         xScale,
         defaultAxisId,
     ]);
@@ -1124,7 +1135,7 @@ export function Layers({ children }) {
         // canvas repaints only on a mark transition — not every move (the move just
         // slides the SVG cursor). A row with no selectable layer (line/area/band)
         // resolves to null → a no-op. Uses the raw pointer, not the snapped x.
-        const hit = resolveSelection(r.layers, rawX, py, c.xScale, (axisId) => r.yScales.get(axisId ?? r.defaultAxisId));
+        const hit = resolveSelection(r.layers, rawX, py, c.xScale, (axisId) => r.yScales.get(axisId ?? r.defaultAxisId), 'hover', (axisId) => r.baseYScales.get(axisId ?? r.defaultAxisId));
         // The resting BLOCK preview (a mounted <MultiSelector>): hover lights
         // every mark in the snap block under the pointer — exactly the set a
         // drag begun and released here would select, from exactly the sweep's
@@ -1384,7 +1395,7 @@ export function Layers({ children }) {
         // 'select', not 'hover': a click must be able to resolve to NO mark —
         // that null is the deselect signal (the empty commit) — so layers whose
         // hover target is generous (a bar's full-height slot) narrow it here.
-        const hit = resolveSelection(r.layers, e.clientX - rect.left, e.clientY - rect.top, c.xScale, (axisId) => r.yScales.get(axisId ?? r.defaultAxisId), 'select');
+        const hit = resolveSelection(r.layers, e.clientX - rect.left, e.clientY - rect.top, c.xScale, (axisId) => r.yScales.get(axisId ?? r.defaultAxisId), 'select', (axisId) => r.baseYScales.get(axisId ?? r.defaultAxisId));
         const modifiers = {
             additive: e.metaKey || e.ctrlKey,
             ctrlKey: e.ctrlKey,
@@ -1539,6 +1550,10 @@ export function Layers({ children }) {
             py: cursor.cursorY,
             formatted: fmt(ys.invert(cursor.cursorY)),
             side: axisSides.get(defaultAxisId) ?? 'left',
+            // The free reticle reads the row's *default* axis, so its pill belongs on
+            // that axis — at its offset, in its ink — like a snapped sample's.
+            axisOffset: axisOffsets.get(defaultAxisId) ?? 0,
+            axisColor: axisColors.get(defaultAxisId),
         };
     }, [
         wantsPointer,
@@ -1548,6 +1563,8 @@ export function Layers({ children }) {
         yScales,
         formats,
         axisSides,
+        axisOffsets,
+        axisColors,
         defaultAxisId,
     ]);
     // The in-plot cursor time, readout-formatted — the `showTime` presets' chip

package/dist/XAxis.d.ts

@@ -133,6 +133,12 @@ export interface XAxisProps {
  * numbers, with no axis-type prop here; the kind follows the data.
  *
  * `<TimeAxis>` is the time-flavoured preset (`<XAxis />`).
+ *
+ * **Gestures.** With `<ChartContainer axisPanZoom="x">` (or `"xy"`) the strip is a
+ * second handle on the canvas gesture: it **pans on drag** and **zooms on
+ * wheel**, with double-click returning to the declared `range`. Same maths as the
+ * plot's own drag, including `bounds` / `minDuration` and the trading calendar.
+ * A category axis has no continuous domain and stays inert.
  */
 export declare function XAxis({ format, label, side, height, ticks: customTicks, transform, color, align, dateStyle, onMouseEvent, }?: XAxisProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/XAxis.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useContext } from 'react';
+import { Fragment, useContext, useRef } from 'react';
 import { scaleLinear } from 'd3-scale';
 import { derivedTicks } from './derivedTicks.js';
 import { ContainerContext, CursorContext, } from './context.js';
@@ -8,6 +8,8 @@ import { xAxisCursorEntries } from './cursors.js';
 import { axisPillStyle } from './chip.js';
 import { resolveAxisFormat, resolveTimeFormat, } from './format.js';
 import { axisMouseProps, axisPointerPx, } from './axis-events.js';
+import { useAxisGestures } from './use-axis-gestures.js';
+import { panRange, panRangeTrading, zoomRange, zoomRangeTrading, } from './viewport.js';
 /** Tick strip height (mark + value label) in CSS px. */
 const TICK_STRIP = 22;
 /** Extra height reserved for an axis `label` line. */
@@ -157,6 +159,12 @@ export function thinCategoryLabels(ticks, slot, plotWidth, fontSize, fontFamily)
  * numbers, with no axis-type prop here; the kind follows the data.
  *
  * `<TimeAxis>` is the time-flavoured preset (`<XAxis />`).
+ *
+ * **Gestures.** With `<ChartContainer axisPanZoom="x">` (or `"xy"`) the strip is a
+ * second handle on the canvas gesture: it **pans on drag** and **zooms on
+ * wheel**, with double-click returning to the declared `range`. Same maths as the
+ * plot's own drag, including `bounds` / `minDuration` and the trading calendar.
+ * A category axis has no continuous domain and stays inert.
  */
 export function XAxis({ format, label, side = 'bottom', height, ticks: customTicks, transform, color, align = 'center', dateStyle = 'flat', onMouseEvent, } = {}) {
     const container = useContext(ContainerContext);
@@ -417,14 +425,84 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
     // scale — no gutter arithmetic. The label reads the same channel a cursor
     // pill does: the band scale's category name on a category axis (a d3 number
     // format can't name one), this axis's readout format everywhere else.
+    // The view the current pan started from — see `onDragStart`.
+    const panStartRef = useRef(null);
+    // Drag pans and wheel zooms the shared x view, double-click returns to the
+    // declared range. Enabled by the container's own `panZoom` zoom-x degree of
+    // freedom — a chart that never opted in captures nothing here.
+    //
+    // A **category** axis has no continuous domain to zoom, exactly as for the
+    // plot's gesture (`Layers`' wheel makes the same exclusion), so the strip
+    // stays inert there rather than snapping between slots.
+    const gestures = useAxisGestures({
+        axis: 'x',
+        // Gated on `<ChartContainer axisPanZoom>` — the axis opt-in — and NOT on the
+        // plot's `panZoom`: inheriting that would hand every already-interactive
+        // chart gestures its author never asked for. Once opted in the strip is the
+        // canvas gesture (drag pans, wheel zooms). A category axis has no continuous
+        // domain for either.
+        drag: container.axisPanZoomX && xKind !== 'category' ? 'pan' : 'none',
+        wheel: container.axisPanZoomX && xKind !== 'category',
+        // Snapshot the view at press: the pan is re-derived from it on every move
+        // (the plot's own approach), so a long drag can't accumulate rounding, and
+        // `roundRange`'s ms snap can't ratchet the span.
+        onDragStart: () => {
+            panStartRef.current = [container.timeRange[0], container.timeRange[1]];
+        },
+        onPan: (totalDeltaPx) => {
+            const start = panStartRef.current;
+            if (start === null)
+                return;
+            // Dragging right moves the view EARLIER — the content follows the pointer,
+            // the sign the plot's drag uses.
+            if (container.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 = plotWidth > 0 ? -totalDeltaPx / plotWidth : 0;
+                container.applyRange(panRangeTrading(start, fraction, container.discontinuities));
+                return;
+            }
+            const span = start[1] - start[0];
+            const dt = plotWidth > 0 ? -totalDeltaPx * (span / plotWidth) : 0;
+            container.applyRange(panRange(start, dt, { log: container.xIsLog, snap: xKind === 'time' }));
+        },
+        onZoom: (factor, pivotPx) => {
+            const pivot = +xScale.invert(pivotPx);
+            // The same two-branch zoom the plot uses, so an axis drag and a plot
+            // wheel move the view by identical maths — including `minDuration` as the
+            // zoom-in floor and, on a trading axis, a floor in *trading* ms.
+            // `applyRange` then applies `bounds` for both.
+            container.applyRange(container.discontinuities
+                ? zoomRangeTrading(container.timeRange, pivot, factor, container.discontinuities, container.minDuration)
+                : zoomRange(container.timeRange, pivot, factor, container.minDuration, {
+                    log: container.xIsLog,
+                    snap: xKind === 'time',
+                }));
+        },
+        onReset: () => container.applyRange(container.seedRange),
+    });
     const mouse = axisMouseProps(onMouseEvent, 'x', undefined, (event) => {
+        // A zoom drag ends with a trailing `click` on the strip, which would report
+        // as "clicked the axis at the value I released on" — a value the user never
+        // aimed at. Swallow exactly that one report; every other event still flows.
+        if (event.type === 'click' && gestures.consumeDrag())
+            return null;
         const value = +xScale.invert(axisPointerPx(event, 'x', [0, plotWidth]));
         return {
             value,
             label: xKind === 'category' ? fmt(value) : readoutFmt(value),
         };
     });
-    return (_jsxs("div", { "data-axis": "x", ...mouse, style: {
+    return (_jsxs("div", { "data-axis": "x", ref: gestures.ref, ...gestures.props, ...mouse, 
+        // Both spreads carry an `onDoubleClick` — the gesture's reset and the
+        // consumer's report — and a spread silently keeps the last one. Compose
+        // them, reporting *before* the reset so the payload describes the view the
+        // user actually double-clicked in.
+        onDoubleClick: (e) => {
+            mouse.onDoubleClick?.(e);
+            gestures.props.onDoubleClick?.();
+        }, style: {
+            ...gestures.style,
             position: 'relative',
             marginLeft: `${leftGutter}px`,
             width: `${plotWidth}px`,
@@ -514,7 +592,7 @@ export function XAxis({ format, label, side = 'bottom', height, ticks: customTic
                             fontWeight: 600,
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',
-                        }, children: b.label }, b.start));
+                        }, children: b.showLabel ? b.label : '' }, b.start));
                 }) })), label !== undefined && (_jsx("div", { style: {
                     position: 'absolute',
                     left: 0,

package/dist/YAxis.d.ts

@@ -195,7 +195,14 @@ export interface YAxisProps {
      * overriding the theme's `axis.label` / `axis.title.color`. The multi-axis
      * convention of colouring each y axis to match its series (`color`
      * matching the layer's) — busy, but standard. Omit for the theme's axis
-     * colours. Presentation-only: it never re-registers the axis.
+     * colours.
+     *
+     * **Also worn by the axis-edge chrome that lands on this axis** — a
+     * `<CrosshairCursor>`'s value pill takes it when the reticle reads a series
+     * scaled here, so with several axes the pill says *which* scale the number is
+     * on (the ChartIQ price-tag convention). That is why it rides on the
+     * registered spec: the pill is drawn by the row's cursor overlay, not by this
+     * component, so a colour it never registered could not reach it.
      */
     color?: string;
     /**
@@ -209,8 +216,83 @@ export interface YAxisProps {
      * menu, down/up, move, enter, leave — so switch on `event.type`. Nothing is
      * attached when the prop is omitted, so the move events cost nothing unless
      * you ask for them. A `hide`den axis draws no gutter and so fires nothing.
+     *
+     * A gutter that also zooms (see the component docs) still reports every event
+     * here, minus the trailing `click` a zoom drag would otherwise synthesize.
      */
     onMouseEvent?: AxisMouseHandler;
+    /**
+     * A gutter gesture scaled this axis — **the "auto vs manual" hand-off.**
+     * Fires with the `[min, max]` **bounds** the gesture arrived at, and with
+     * `null` when the axis is released back to auto-fit (double-click).
+     *
+     * Named for bounds rather than the domain because that is what it reports: with
+     * a `pad` set, the visible domain is these bounds *plus* the padding, and it is
+     * the bounds you hand back as `min`/`max`.
+     *
+     * The common shape this exists for: an auto-fitting y axis on a chart whose x
+     * is panned and zoomed. The moment the user scrolls or drags the y gutter they
+     * have overridden the fit, and a UI usually wants to *say* so — show the
+     * resulting min/max, mark the scale "manual", and offer a toggle back to auto
+     * (which is the same thing double-clicking the gutter does).
+     *
+     * ```tsx
+     * const [scale, setScale] = useState<[number, number] | null>(null); // null = auto
+     * <YAxis
+     *   id="price"
+     *   {...(scale ? { min: scale[0], max: scale[1] } : {})}
+     *   onBoundsChange={setScale}
+     * />
+     * ```
+     *
+     * **Providing it makes the axis controlled**, exactly as `onTimeRangeChange`
+     * does for the x view: the gesture then only *reports*, and what the axis draws
+     * is whatever `min`/`max` you feed back. Omit it and the axis holds the zoom
+     * itself (an internal per-axis transform) — which is the standalone behaviour,
+     * and why a chart with no scale UI needs no wiring at all.
+     *
+     * The reported pair is in data units, ready to hand straight back as
+     * `min`/`max`.
+     *
+     * **`scale="symlog"` is approximate on this path, by construction.**
+     * {@link linearWindow} is a fraction of the *domain*, so bounds fed back
+     * re-derive the knee and reshape the curve — the grabbed pixel cannot be held
+     * on a curve that moves with the bounds. (It is the same fact that makes
+     * `linearWindow` deliberately *not* recompute under a 2-D gesture.) The zoom is
+     * still monotone and well-behaved; if you need the pixel held exactly on a
+     * symlog axis, leave this callback off and let the axis hold the zoom itself,
+     * where the knee stays anchored to the resolved domain. With an active plot-level y zoom (`panZoom="panZoomY"`/`"panZoomXY"`)
+     * the two **compose**: the bounds are the axis's own, and the plot transform
+     * still narrows what is drawn on top of them. On a `log` axis it stays positive (the zoom is done in log
+     * space), so it is always a domain the axis can actually draw.
+     */
+    onBoundsChange?: (bounds: readonly [number, number] | null) => void;
+    /**
+     * Pin the zoom to the value-**0** gridline instead of the pointer, and drop
+     * drag-to-pan entirely — for a bar chart, whose baseline must never move.
+     * A bar rests on `0` (or, straddling positive and negative, has `0`
+     * *somewhere inside* the visible range) — panning or zooming about an
+     * arbitrary pointer position would slide that baseline around the plot,
+     * which reads as the data moving under gestures that never touched it (see
+     * `resolveBarBaseline`, and [PND-XBASE] for the still-open x-axis
+     * counterpart of this exact failure mode). `zeroAnchored` sidesteps it:
+     * every wheel notch scales the axis around wherever `0` currently renders,
+     * so the baseline holds however far in or out you scroll — whether it sits
+     * at the plot floor (all-positive bars) or in the middle (bars that
+     * straddle zero).
+     *
+     * One qualification: the pivot is clamped into the axis's own pixel range,
+     * so if `0` has been scrolled off the plot entirely the zoom pivots about
+     * the nearer edge instead and the baseline does creep. For a bar chart that
+     * is benign — the clamp lands on the same floor `resolveBarBaseline`
+     * already resolves against — but it is a creep, not a guarantee.
+     *
+     * Still gated by the container's own `axisPanZoom` opt-in (`'y'` / `'xy'`)
+     * — this only changes *what* the gesture does once enabled, not whether
+     * it's enabled. Double-click still resets to the declared/auto-fit view.
+     * Default `false`.
+     */
+    zeroAnchored?: boolean;
     /**
      * @internal Declaration position among the row's children, injected by
      * `ChartRow` so the first-declared axis stays the default. Do not set.
@@ -224,6 +306,14 @@ export interface YAxisProps {
  * computes this axis's scale from the charts linked to it; the gutter then draws
  * tick marks + labels from that scale. Charts attach via `<LineChart axis="id">`
  * (default: the first axis).
+ *
+ * **Gestures.** With `<ChartContainer axisPanZoom="y">` (or `"xy"`) the gutter is
+ * grabbable: drag or wheel it to scale **this axis only**
+ * — a sibling axis on the other side, and every other row, hold still — and
+ * double-click to release it back to its fit. That per-axis scaling is what the
+ * plot's vertical gesture deliberately cannot do; see
+ * {@link RowFrame.axisTransforms}. Report it to a scale UI with
+ * {@link YAxisProps.onBoundsChange}.
  */
-export declare function YAxis({ id, side, label, scale, linearWindow, min, max, format, ticks, tickCount, pad, boundaryLabels, width, hide, labelPlacement, color, onMouseEvent, index, }: YAxisProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function YAxis({ id, side, label, scale, linearWindow, min, max, format, ticks, tickCount, pad, boundaryLabels, width, hide, labelPlacement, color, onMouseEvent, onBoundsChange, zeroAnchored, index, }: YAxisProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=YAxis.d.ts.map