@pond-ts/charts 0.48.0 → 0.49.0

package/dist/BoxPlot.js

@@ -1,8 +1,9 @@
 import { useContext, useEffect, useMemo } from 'react';
 import { ValueSeries } from 'pond-ts';
 import { boxFromTimeSeries, boxFromValueSeries } from './data.js';
-import { boxExtent, boxIndexAtTime, drawBox, isFiniteBox, } from './box.js';
+import { boxAt, boxExtent, boxIndexAtTime, drawBox, isFiniteBox, } from './box.js';
 import { ContainerContext, LayersContext, } from './context.js';
+import { legendLabelFor, useLegendItems, } from './swatch.js';
 import { useSlotKey } from './use-slot-key.js';
 /** Whisker collapse floor (px) — a too-thin box still draws a 1px mark. */
 const MIN_BOX_WIDTH_PX = 1;
@@ -37,7 +38,7 @@ const MIN_BOX_WIDTH_PX = 1;
  * </Layers>
  * ```
  */
-export function BoxPlot({ series, lower, q1, median, q3, upper, as: semantic, axis, gap = 0, shape = 'whisker', showMedian = true, offset = 0, capWidth, index = 0, }) {
+export function BoxPlot({ series, lower, q1, median, q3, upper, as: semantic, axis, gap = 0, shape = 'whisker', showMedian = true, offset = 0, capWidth, id, legend, index = 0, }) {
     const container = useContext(ContainerContext);
     if (container === null) {
         throw new Error('<BoxPlot> must be rendered inside a <ChartContainer>');
@@ -60,6 +61,16 @@ export function BoxPlot({ series, lower, q1, median, q3, upper, as: semantic, ax
     const qLabel = useMemo(() => {
         return (col, role) => semantic !== undefined ? `${semantic} ${role}` : (col ?? role);
     }, [semantic]);
+    // The series identity for selection/legend: the `as` role, else the range
+    // columns as a span (matches the legend row's label).
+    const label = semantic ?? `${lower}–${upper}`;
+    // Current selection / hover narrowed to this layer's box key (its `x`), or
+    // `null` — matched by the series `id`, so a change re-registers the layer and
+    // the canvas repaints the outline. A no-`id` layer never matches.
+    const sel = container.selected;
+    const hov = container.hovered;
+    const selectedKey = id !== undefined && sel !== null && sel.id === id ? sel.key : null;
+    const hoveredKey = id !== undefined && hov !== null && hov.id === id ? hov.key : null;
     const entry = useMemo(() => ({
         layer: {
             yExtent: () => boxExtent(bx),
@@ -116,7 +127,22 @@ export function BoxPlot({ series, lower, q1, median, q3, upper, as: semantic, ax
                     lines,
                 };
             },
-            draw: (ctx, xScale, yScale) => drawBox(ctx, bx, xScale, yScale, style, gap, MIN_BOX_WIDTH_PX, shape, showMedian, offset, capWidth),
+            // Selection hit-test (opt-in via `id`, like Bar/Scatter): the first box
+            // whose bounding rect contains the click. A box is a discrete interval
+            // mark, so this is rect-containment (`boxAt`) — not the continuous
+            // nearest-point threshold. `key` is the box's `x`; `value` its `upper`.
+            ...(id === undefined
+                ? {}
+                : {
+                    hitTest: (px, py, xScale, yScale) => {
+                        const hit = boxAt(bx, px, py, xScale, yScale, gap, MIN_BOX_WIDTH_PX, offset);
+                        if (hit === null)
+                            return null;
+                        const [, begin, value] = hit;
+                        return { id, key: begin, value, color: style.whisker, label };
+                    },
+                }),
+            draw: (ctx, xScale, yScale) => drawBox(ctx, bx, xScale, yScale, style, gap, MIN_BOX_WIDTH_PX, shape, showMedian, offset, capWidth, selectedKey, hoveredKey),
         },
         axisId: axis,
         index,
@@ -136,6 +162,10 @@ export function BoxPlot({ series, lower, q1, median, q3, upper, as: semantic, ax
         showMedian,
         offset,
         capWidth,
+        id,
+        label,
+        selectedKey,
+        hoveredKey,
         axis,
         index,
     ]);
@@ -146,6 +176,15 @@ export function BoxPlot({ series, lower, q1, median, q3, upper, as: semantic, ax
     useEffect(() => {
         layers.registerLayer(slot, entry);
     }, [layers, slot, entry]);
+    // Advertise selectability (only when an `id` was given) — powers the
+    // container's "wired but nothing selectable" dev-warn, like Bar/Scatter.
+    const { registerSelectable, unregisterSelectable } = container;
+    useEffect(() => {
+        if (id === undefined)
+            return;
+        registerSelectable(slot);
+        return () => unregisterSelectable(slot);
+    }, [registerSelectable, unregisterSelectable, slot, id]);
     // Also a tracker source: the container fans in the box quantiles at the cursor
     // for the (outside-the-chart) readout.
     const { registerTrackerSource, unregisterTrackerSource } = container;
@@ -153,6 +192,24 @@ export function BoxPlot({ series, lower, q1, median, q3, upper, as: semantic, ax
     useEffect(() => {
         registerTrackerSource(slot, entry.layer);
     }, [registerTrackerSource, slot, entry.layer]);
+    // And a legend row: the series identity (`as`, else the range columns as a
+    // span) + the resolved whisker style, so a `<Legend>` swatch can never drift.
+    const legendRows = useMemo(() => {
+        const name = legendLabelFor(legend, semantic ?? `${lower}–${upper}`);
+        return name === null
+            ? null
+            : [
+                {
+                    label: name,
+                    swatch: {
+                        kind: 'box',
+                        whisker: style.whisker,
+                        whiskerWidth: style.whiskerWidth,
+                    },
+                },
+            ];
+    }, [legend, semantic, lower, upper, style]);
+    useLegendItems(container, slot, index, legendRows);
     return null;
 }
 /** Append a tracker sample for a quantile, skipping a non-finite value. */

package/dist/Candlestick.d.ts

@@ -56,6 +56,13 @@ export interface CandlestickProps<S extends SeriesSchema> {
      * for a compact legend; the full quote is opt-in for a dense hover readout.
      */
     showOHLC?: boolean;
+    /**
+     * This layer's `<Legend>` row: `false` ⇒ no row (opt out), a string ⇒ the
+     * row's display name. **Omitted ⇒ a row named by the layer's readout
+     * identity** (`as` ?? the `close` column). The swatch is the resolved
+     * up/down candle pair.
+     */
+    legend?: boolean | string;
     /**
      * @internal Declaration position among the `<Layers>` children, injected by
      * `Layers` so z-order follows JSX order. Do not set.
@@ -89,5 +96,5 @@ export interface CandlestickProps<S extends SeriesSchema> {
  * </Layers>
  * ```
  */
-export declare function Candlestick<S extends SeriesSchema>({ series, open, high, low, close, as: semantic, axis, variant, colorBy, gap, showOHLC, index, }: CandlestickProps<S>): null;
+export declare function Candlestick<S extends SeriesSchema>({ series, open, high, low, close, as: semantic, axis, variant, colorBy, gap, showOHLC, legend, index, }: CandlestickProps<S>): null;
 //# sourceMappingURL=Candlestick.d.ts.map

package/dist/Candlestick.js

@@ -2,6 +2,7 @@ import { useContext, useEffect, useMemo } from 'react';
 import { ohlcFromTimeSeries } from './data.js';
 import { drawCandles, isFiniteOhlc, ohlcExtent, ohlcIndexAtTime, resolveCandleStyle, } from './ohlc.js';
 import { ContainerContext, LayersContext, } from './context.js';
+import { legendLabelFor, useLegendItems, } from './swatch.js';
 import { useSlotKey } from './use-slot-key.js';
 /**
  * A first-class OHLC **candlestick** draw layer — the financial sibling of
@@ -30,7 +31,7 @@ import { useSlotKey } from './use-slot-key.js';
  * </Layers>
  * ```
  */
-export function Candlestick({ series, open = 'open', high = 'high', low = 'low', close = 'close', as: semantic, axis, variant = 'candle', colorBy = 'direction', gap = 0, showOHLC = false, index = 0, }) {
+export function Candlestick({ series, open = 'open', high = 'high', low = 'low', close = 'close', as: semantic, axis, variant = 'candle', colorBy = 'direction', gap = 0, showOHLC = false, legend, index = 0, }) {
     const container = useContext(ContainerContext);
     if (container === null) {
         throw new Error('<Candlestick> must be rendered inside a <ChartContainer>');
@@ -70,11 +71,15 @@ export function Candlestick({ series, open = 'open', high = 'high', low = 'low',
                 }
                 // Opt-in full quote: four value pills (body colour for open/close, wick
                 // colour for the high/low extremes). Each is a value-only axis pill.
+                // With a semantic `as`, each reads under the series name + role
+                // (`SPY high`) — BoxPlot's qLabel convention, so two quoted series
+                // don't merge readout keys on the bare role words (F-charts-8 §3).
+                const role = (r) => semantic !== undefined ? `${semantic} ${r}` : r;
                 const samples = [
-                    { x: at, value: ohlc.high[i], color: wick, label: 'high' },
-                    { x: at, value: ohlc.open[i], color: body, label: 'open' },
-                    { x: at, value: ohlc.close[i], color: body, label: 'close' },
-                    { x: at, value: ohlc.low[i], color: wick, label: 'low' },
+                    { x: at, value: ohlc.high[i], color: wick, label: role('high') },
+                    { x: at, value: ohlc.open[i], color: body, label: role('open') },
+                    { x: at, value: ohlc.close[i], color: body, label: role('close') },
+                    { x: at, value: ohlc.low[i], color: wick, label: role('low') },
                 ];
                 return samples;
             },
@@ -82,7 +87,18 @@ export function Candlestick({ series, open = 'open', high = 'high', low = 'low',
         },
         axisId: axis,
         index,
-    }), [ohlc, style, label, variant, colorBy, gap, showOHLC, axis, index]);
+    }), [
+        ohlc,
+        style,
+        label,
+        semantic,
+        variant,
+        colorBy,
+        gap,
+        showOHLC,
+        axis,
+        index,
+    ]);
     // Stable per-instance slot (see useSlotKey): keeps this candle layer's
     // z-position + identity across prop updates; the injected index drives the sort.
     const slot = useSlotKey();
@@ -97,6 +113,24 @@ export function Candlestick({ series, open = 'open', high = 'high', low = 'low',
     useEffect(() => {
         registerTrackerSource(slot, entry.layer);
     }, [registerTrackerSource, slot, entry.layer]);
+    // And a legend row: the series identity + the resolved up/down pair, so a
+    // `<Legend>` swatch can never drift from the drawn candles.
+    const legendRows = useMemo(() => {
+        const name = legendLabelFor(legend, label);
+        return name === null
+            ? null
+            : [
+                {
+                    label: name,
+                    swatch: {
+                        kind: 'candle',
+                        up: style.rising.body,
+                        down: style.falling.body,
+                    },
+                },
+            ];
+    }, [legend, label, style]);
+    useLegendItems(container, slot, index, legendRows);
     return null;
 }
 //# sourceMappingURL=Candlestick.js.map

package/dist/ChartContainer.d.ts

@@ -300,21 +300,31 @@ export interface ChartContainerProps {
      */
     timeFormat?: AxisFormat;
     /**
-     * The **cursor / marker readout** format — the crosshair time pill, marker
+     * The **cursor / marker readout** format — the crosshair x pill, marker
      * axis indicators, and annotation auto-labels — **independent of the tick
-     * labels**, so it does **not** disqualify the `dateStyle` ladder.
-     * **Omitted ⇒ a grain-aware default**: the readout formats at the axis's own
-     * granularity, so a day-or-coarser axis reads a **date** (never a
-     * time-of-day) and a sub-day axis reads date + clock — a daily bar at a
-     * foreign-tz midnight no longer renders as `02 AM`.
+     * labels** on both axis kinds: it does **not** disqualify the `dateStyle`
+     * ladder (time), and it never moves the tick labels (value). It beats an
+     * explicit `<XAxis format>` for the **readout only** — pill precedence is
+     * `cursorFormat → axis format → container` — so terse ticks can pair with a
+     * precise readout (`+2.0σ` labels, `+1.83σ` pill).
      *
-     * A d3 time-specifier **string** formats uniformly at every zoom; a
-     * **function** `(epochMs, { grain, defaultText }) => string` receives the
-     * axis's resolved coarse {@link TimeGrain} and the grain-aware default text,
-     * so it can branch on the zoom level and pass `defaultText` through for
-     * grains it doesn't override (no re-deriving the grain from the range). See
-     * {@link CursorFormat}. This is the independent readout channel;
-     * {@link timeFormat} owns the labels.
+     * **Omitted ⇒ the axis's own formatter.** On a time axis that default is
+     * grain-aware: the readout formats at the axis's granularity, so a
+     * day-or-coarser axis reads a **date** (never a time-of-day) and a sub-day
+     * axis reads date + clock — a daily bar at a foreign-tz midnight no longer
+     * renders as `02 AM`. On a value axis it is the tick formatter
+     * ({@link timeFormat}-shaped, else the d3 default).
+     *
+     * A d3 specifier **string** formats uniformly (time specifier on a time
+     * axis, number specifier on a value axis); a **function**
+     * `(value, { grain, defaultText }) => string` receives the axis's resolved
+     * coarse {@link TimeGrain} (`undefined` on a value axis) and the default
+     * readout text, so it can branch on the zoom level and pass `defaultText`
+     * through for grains it doesn't override (no re-deriving the grain from the
+     * range). See {@link CursorFormat}. This is the independent readout channel;
+     * {@link timeFormat} owns the labels. (A category axis reads names, and a
+     * `transform`ed axis's pill speaks its derived unit — neither consults
+     * `cursorFormat`.)
      */
     cursorFormat?: CursorFormat;
     /** Visual theme for all rows; defaults to {@link defaultTheme}. */

package/dist/ChartContainer.js

@@ -151,6 +151,20 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         });
     }, []);
     const annotations = useMemo(() => Array.from(annotationMap.values()), [annotationMap]);
+    // Legend rows register here (label + resolved swatch per layer, see
+    // useLegendItem) so a `<Legend>` anywhere in the container can enumerate
+    // every layer across rows. Same per-instance-slot discipline as the sources.
+    const [legendItems, setLegendItems] = useState(() => new Map());
+    const registerLegendItem = useCallback((key, item) => setLegendItems((m) => new Map(m).set(key, item)), []);
+    const unregisterLegendItem = useCallback((key) => {
+        setLegendItems((m) => {
+            if (!m.has(key))
+                return m;
+            const next = new Map(m);
+            next.delete(key);
+            return next;
+        });
+    }, []);
     // The shared x scale's kind, **inferred from the registered layers**: a
     // ValueSeries row plots on a value axis, a TimeSeries on time. A container
     // has one shared x (the synced cursor's whole point), so the rows must agree
@@ -243,8 +257,8 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
             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).');
+                    'nothing is selectable. Give a <BarChart>/<ScatterChart>/<BoxPlot> an ' +
+                    '`id` to make it interactive (an `id` gates selection + hover).');
             }
         }
         else {
@@ -309,13 +323,19 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
     // (t0/t1); otherwise the auto-fit extent (→ [0, 1] before any layer registers,
     // the two-pass settle). This is what the scale + cursor + axis read.
     const [d0, d1] = explicitDomain !== undefined ? [t0, t1] : (autoExtent ?? [0, 1]);
-    // The shared x scale + the formatter for its ticks / cursor readout, built
-    // together so each branch keeps its concrete scale type (no casts): a value
-    // axis is a `scaleLinear` formatted by `resolveAxisFormat`, time is a
-    // `scaleTime` formatted by d3's multi-scale `resolveTimeFormat`. `formatTime`
-    // 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 shared x scale + its two formatting channels, built together so each
+    // branch keeps its concrete scale type (no casts): a value axis is a
+    // `scaleLinear` formatted by `resolveAxisFormat`, time is a `scaleTime`
+    // formatted by d3's multi-scale `resolveTimeFormat`.
+    //
+    // - `formatTime` is the **label** channel — what `<XAxis>` ticks fall back to
+    //   — shaped by `timeFormat` only, never `cursorFormat` (so a readout format
+    //   can't move the tick labels). (The name predates the value axis — on a
+    //   value axis it formats the value, not a time.)
+    // - `formatReadout` is the **readout** channel — the crosshair pill, marker
+    //   indicators, and annotation auto-labels — defined only when `cursorFormat`
+    //   is set; consumers read `formatReadout ?? <their label formatter>`, which
+    //   is how "the readout matches the axis" stays the default.
     // 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,
@@ -342,35 +362,52 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
     const xTickCount = resolvedKind === 'time'
         ? Math.max(2, Math.floor(plotWidth / TRADING_TICK_PX))
         : TIME_TICK_COUNT;
-    const { xScale, formatTime } = useMemo(() => {
+    const { xScale, formatTime, formatReadout } = useMemo(() => {
         if (resolvedKind === 'category') {
             // Ordinal column-domain axis: a band scale over the category slots. The
             // domain is **always** `[0, n]` (one unit slot per category) — NOT the
             // resolved `[d0, d1]`: a category axis ignores an explicit `range` (its
             // slots are absolute `0..n`, matching `categoryStack`), so an out-of-`[0,n]`
             // range can't silently offset the labels from the bars. The pixel mapping
-            // stays linear; the formatter is the category-name lookup.
+            // stays linear; the formatter is the category-name lookup. A category
+            // reads by **name** — `cursorFormat` has nothing to format, so the
+            // readout channel stays unset.
             const cats = categories ?? [];
             const s = scaleBand(cats).domain([0, cats.length]).range([0, plotWidth]);
-            return { xScale: s, formatTime: (v) => s.label(v) };
-        }
-        if (resolvedKind === 'value') {
-            const s = scaleLinear().domain([d0, d1]).range([0, plotWidth]);
             return {
                 xScale: s,
-                formatTime: resolveAxisFormat(s, xTickCount, timeFormat),
+                formatTime: (v) => s.label(v),
+                formatReadout: undefined,
             };
         }
-        // The cursor / marker / annotation **readout** formatter. `cursorFormat`
-        // wins (the independent readout channel — it never disqualifies the date
-        // style); else a container `timeFormat` (back-compat: shapes the readout
-        // too, and already opts labels out of the ladder); else the scale's
-        // **grain-aware** default (a day-or-coarser axis reads a date, not a
-        // time-of-day — the F-charts-7 `02 AM` fix), never d3's multi-scale default.
+        if (resolvedKind === 'value') {
+            const s = scaleLinear().domain([d0, d1]).range([0, plotWidth]);
+            const labels = resolveAxisFormat(s, xTickCount, timeFormat);
+            // The value-axis readout channel: a `cursorFormat` **string** is a d3
+            // *number* specifier here (resolved through the linear scale, exactly as
+            // a tick format would be); a **function** gets `grain: undefined` (no
+            // time grain to hand over) and the label formatter's text as its
+            // pass-through default.
+            const readout = typeof cursorFormat === 'function'
+                ? (v) => cursorFormat(v, { grain: undefined, defaultText: labels(v) })
+                : cursorFormat !== undefined
+                    ? resolveAxisFormat(s, xTickCount, cursorFormat)
+                    : undefined;
+            return { xScale: s, formatTime: labels, formatReadout: readout };
+        }
+        // Time axis, label channel: a container `timeFormat` when set (it owns the
+        // labels and opts them out of the ladder); else the scale's **grain-aware**
+        // default (a day-or-coarser axis reads a date, not a time-of-day — the
+        // F-charts-7 `02 AM` fix), never d3's multi-scale default.
+        const timeLabels = (s) => timeFormat !== undefined
+            ? resolveTimeFormat(s, xTickCount, timeFormat)
+            : s.readoutFormat(xTickCount);
+        // Time axis, readout channel — only when `cursorFormat` is set (otherwise
+        // the readout falls back to the label channel at the consumer). A
+        // **function** gets the axis's resolved coarse grain and the grain-aware
+        // default text per instant, so it can branch on zoom and pass the default
+        // through. A **string** formats uniformly (d3 time specifier).
         const timeReadout = (s) => {
-            // A `cursorFormat` **function** gets the axis's resolved coarse grain and
-            // the grain-aware default text per instant, so it can branch on zoom and
-            // pass the default through. A **string** formats uniformly (d3 specifier).
             if (typeof cursorFormat === 'function') {
                 const grain = s.grain(xTickCount);
                 const def = s.readoutFormat(xTickCount);
@@ -379,11 +416,7 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
             if (cursorFormat !== undefined) {
                 return resolveTimeFormat(s, xTickCount, cursorFormat);
             }
-            // No cursorFormat: a container timeFormat still shapes the readout
-            // (back-compat); else the scale's grain-aware default.
-            return timeFormat !== undefined
-                ? resolveTimeFormat(s, xTickCount, timeFormat)
-                : s.readoutFormat(xTickCount);
+            return undefined;
         };
         if (xDiscontinuities !== undefined) {
             // Trading-time axis: closed-market gaps collapse, time proportional within
@@ -393,7 +426,11 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
             const s = scaleTradingTime(xDiscontinuities)
                 .domain([d0, d1])
                 .range([0, plotWidth]);
-            return { xScale: s, formatTime: timeReadout(s) };
+            return {
+                xScale: s,
+                formatTime: timeLabels(s),
+                formatReadout: timeReadout(s),
+            };
         }
         // Plain continuous time axis: the same trading-time scale over the
         // gap-free identity provider, so it runs the same logical tick ladder
@@ -404,7 +441,11 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         const s = scaleTradingTime(identityProvider())
             .domain([d0, d1])
             .range([0, plotWidth]);
-        return { xScale: s, formatTime: timeReadout(s) };
+        return {
+            xScale: s,
+            formatTime: timeLabels(s),
+            formatReadout: timeReadout(s),
+        };
     }, [
         resolvedKind,
         categories,
@@ -527,6 +568,7 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         onHoverAnnotation,
         onEditAnnotation,
         formatTime,
+        formatReadout,
         xFormatCustom: timeFormat !== undefined,
         xTickCount,
         registerTrackerSource,
@@ -535,6 +577,10 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         unregisterSelectable,
         registerAnnotation,
         unregisterAnnotation,
+        registerLegendItem,
+        unregisterLegendItem,
+        legendItems,
+        rowOrder: rowKeys,
         annotations,
         labelLanes,
         xScale,
@@ -584,6 +630,7 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         onHoverAnnotation,
         onEditAnnotation,
         formatTime,
+        formatReadout,
         timeFormat,
         xTickCount,
         registerTrackerSource,
@@ -592,6 +639,10 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
         unregisterSelectable,
         registerAnnotation,
         unregisterAnnotation,
+        registerLegendItem,
+        unregisterLegendItem,
+        legendItems,
+        rowKeys,
         annotations,
         labelLanes,
         xScale,
@@ -610,6 +661,9 @@ export function ChartContainer({ range, width, rowGap = 0, showAxis = true, trac
                         display: 'flex',
                         flexDirection: 'column',
                         gap: `${rowGap}px`,
+                        // The positioned ancestor for overlay chrome (`<Legend>`): the
+                        // card anchors to the rows block, never the axis strip below.
+                        position: 'relative',
                     }, children: children }), showAxis && _jsx(TimeAxis, {})] }) }));
 }
 //# sourceMappingURL=ChartContainer.js.map

package/dist/ChartRow.js

@@ -3,6 +3,7 @@ import { Children, cloneElement, isValidElement, useCallback, useContext, useEff
 import { scaleLinear } from 'd3-scale';
 import { resolveYDomain } from './domain.js';
 import { resolveAxisFormat } from './format.js';
+import { resolveYTickCount } from './yticks.js';
 import { placeAxisSlots } from './slots.js';
 import { useSlotKey } from './use-slot-key.js';
 import { YAxis } from './YAxis.js';
@@ -45,6 +46,7 @@ function axisSpecEqual(a, b) {
         a.pad === b.pad &&
         a.labelPlacement === b.labelPlacement &&
         a.index === b.index &&
+        a.tickCount === b.tickCount &&
         Object.is(a.format, b.format) &&
         numberArraysEqual(a.tickValues, b.tickValues));
 }
@@ -175,6 +177,7 @@ export function ChartRow({ height, cursor, children }) {
                 labelPlacement: 'rotated',
                 format: undefined,
                 tickValues: undefined,
+                tickCount: undefined,
                 index: 0,
             },
         ], [realAxes]);
@@ -233,17 +236,31 @@ export function ChartRow({ height, cursor, children }) {
         }
         return map;
     }, [effectiveAxes, layerList, height, defaultAxisId, topHeader]);
+    // Resolved auto-tick count per axis — explicit `<YAxis tickCount>` else
+    // height-derived (see resolveYTickCount). The single source the `<YAxis>`
+    // labels, the readout formatter (below), and the `Layers` gridlines all read,
+    // so label / readout / gridline stay on one `ticks(count)`.
+    const tickCounts = useMemo(() => {
+        const map = new Map();
+        for (const ax of effectiveAxes) {
+            map.set(ax.id, resolveYTickCount(height, ax.tickCount));
+        }
+        return map;
+    }, [effectiveAxes, height]);
     // A value formatter per axis (its `format` resolved against its scale) — shared
     // by the axis tick labels and the cursor readout so a value reads the same.
+    // Calibrated to the axis's resolved tick count (density), like the labels.
     const formats = useMemo(() => {
         const map = new Map();
         for (const ax of effectiveAxes) {
             const sc = yScales.get(ax.id);
-            if (sc)
-                map.set(ax.id, resolveAxisFormat(sc, AXIS_TICK_COUNT, ax.format));
+            if (sc) {
+                const count = tickCounts.get(ax.id) ?? AXIS_TICK_COUNT;
+                map.set(ax.id, resolveAxisFormat(sc, count, ax.format));
+            }
         }
         return map;
-    }, [effectiveAxes, yScales]);
+    }, [effectiveAxes, yScales, tickCounts]);
     // Explicit tick values per axis (axes that set `<YAxis ticks>`) — so Layers
     // draws the row's gridlines at the same positions the axis labels, instead of
     // d3's auto-picked ticks.
@@ -271,6 +288,7 @@ export function ChartRow({ height, cursor, children }) {
         yScales,
         formats,
         tickValues,
+        tickCounts,
         axisSides,
         defaultAxisId,
         axisSlots,
@@ -287,6 +305,7 @@ export function ChartRow({ height, cursor, children }) {
         yScales,
         formats,
         tickValues,
+        tickCounts,
         axisSides,
         defaultAxisId,
         axisSlots,