basalt-ui 1.14.0 → 1.16.0

package/dist/charts/kinds/Heatmap.js

@@ -1,15 +1,13 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Group } from "@visx/group";
-import { memo, useMemo } from "react";
+import { memo, useMemo, useState } from "react";
 import {
-  ChartTooltip,
+  ChartTooltipFloat,
   TooltipBody,
   TooltipHeader,
-  TooltipRow,
-  useTooltipStyles
+  TooltipRow
 } from "../primitives/ChartTooltip.js";
-import { ChartPending } from "../primitives/ChartPending.js";
-import { useChartTooltip } from "../hooks/useChartTooltip.js";
+import { ChartFrame } from "../primitives/ChartFrame.js";
 import { VX, alpha } from "../../tokens/index.js";
 function firstSeen(data, get) {
   const seen = /* @__PURE__ */ new Set();
@@ -31,10 +29,26 @@ const PAD_TOP = 8;
 const LEGEND_H = 8;
 const LEGEND_LABEL_H = 16;
 function HeatmapInner(props) {
+  const { chartId, height, aspectRatio, fill, ariaLabel, isPending } = props;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      series: [],
+      chartId,
+      legend: false,
+      ...height !== void 0 && { height },
+      ...aspectRatio !== void 0 && { aspectRatio },
+      ...fill !== void 0 && { fill },
+      ...ariaLabel !== void 0 && { ariaLabel },
+      ...isPending !== void 0 && { isPending },
+      children: (plot) => /* @__PURE__ */ jsx(HeatmapPlot, { ...props, plot })
+    }
+  );
+}
+function HeatmapPlot(props) {
   const {
     data,
-    width,
-    height,
+    plot,
     chartId,
     getRow,
     getCol,
@@ -49,11 +63,10 @@ function HeatmapInner(props) {
     rowLabel = (r) => r,
     colLabel = (c) => c,
     renderTooltip,
-    legend,
-    isPending
+    legend
   } = props;
-  const tooltipStyles = useTooltipStyles();
-  const { tip, show, hide, tooltipRef } = useChartTooltip();
+  const { width, height } = plot;
+  const [tip, setTip] = useState(null);
   const rows = useMemo(() => rowsProp ?? firstSeen(data, getRow), [rowsProp, data, getRow]);
   const cols = useMemo(() => colsProp ?? firstSeen(data, getCol), [colsProp, data, getCol]);
   const { lookup, max } = useMemo(() => {
@@ -66,20 +79,23 @@ function HeatmapInner(props) {
     }
     return { lookup: map, max: m };
   }, [data, getRow, getCol, getValue]);
-  if (isPending) return /* @__PURE__ */ jsx(ChartPending, { width, height });
   const legendH = legend ? LEGEND_H + LEGEND_LABEL_H : 0;
   const gridW = Math.max(0, width - PAD_LEFT);
   const gridH = Math.max(0, height - PAD_TOP - PAD_BOTTOM - legendH);
   const cellW = cols.length > 0 ? gridW / cols.length : 0;
   const cellH = rows.length > 0 ? gridH / rows.length : 0;
   const legendGradientId = `${chartId}-heat-legend`;
+  const show = (row, col, value, event) => {
+    setTip({ row, col, value, anchor: { x: event.clientX, y: event.clientY } });
+  };
+  const hide = () => setTip(null);
   return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ jsxs("svg", { width, height, children: [
       /* @__PURE__ */ jsx(Group, { left: PAD_LEFT, top: PAD_TOP, children: rows.flatMap(
         (row, ri) => cols.map((col, ci) => {
           const value = lookup.get(cellKey(row, col));
           const has = value !== void 0;
-          const fill = has ? alpha(color, intensity(value, max)) : alpha(VX.neutral, 0.04);
+          const cellFill = has ? alpha(color, intensity(value, max)) : alpha(VX.neutral, 0.04);
           return /* @__PURE__ */ jsx(
             "rect",
             {
@@ -88,9 +104,9 @@ function HeatmapInner(props) {
               width: Math.max(0, cellW - cellGap),
               height: Math.max(0, cellH - cellGap),
               rx: cellRadius,
-              fill,
+              fill: cellFill,
               style: { cursor: has ? "pointer" : "default" },
-              onPointerMove: (e) => has && show({ row, col, value }, e),
+              onPointerMove: (e) => has && show(row, col, value, e),
               onPointerLeave: hide,
               onPointerCancel: hide
             },
@@ -156,8 +172,8 @@ function HeatmapInner(props) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx(ChartTooltip, { tip, tooltipRef, styles: tooltipStyles, children: tip !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(TooltipHeader, { date: rowLabel(tip.data.row), label: colLabel(tip.data.col) }),
+    tip !== null && /* @__PURE__ */ jsxs(ChartTooltipFloat, { anchor: tip.anchor, children: [
+      /* @__PURE__ */ jsx(TooltipHeader, { date: rowLabel(tip.row), label: colLabel(tip.col) }),
       /* @__PURE__ */ jsxs(TooltipBody, { children: [
         /* @__PURE__ */ jsx(
           TooltipRow,
@@ -165,12 +181,12 @@ function HeatmapInner(props) {
             color: alpha(color, 0.9),
             shape: "bar",
             label: "Value",
-            value: formatValue(tip.data.value)
+            value: formatValue(tip.value)
           }
         ),
-        renderTooltip?.(tip.data)
+        renderTooltip?.(tip)
       ] })
-    ] }) })
+    ] })
   ] });
 }
 const Heatmap = memo(HeatmapInner);

package/dist/charts/kinds/MultiLine.d.ts

@@ -1,66 +1,58 @@
-import type { ReactNode } from 'react';
+import type { CartesianTooltipConfig, AxisConfig } from '../primitives/CartesianChart.js';
+import type { XZoneSpec } from '../primitives/XZoneRects.js';
 import type { ZoneSpec } from '../primitives/ZoneRects.js';
 import type { ChartLegendConfig, ChartSeries } from '../series.js';
 export type MultiLineProps<T> = {
     data: T[];
-    /** Fixed height in pixels, forwarded to the internal `ChartFrame`. Default 240. */
+    /** Fixed height in pixels, forwarded to `CartesianChart`. Default 240. */
     height?: number;
     chartId: string;
     /** Extracts the x-axis category (date string) from a data point. */
     getX: (d: T) => string;
-    /** 1+ line series sharing one y-axis — the single source of truth for color, dash, legend, and
-     * tooltip rows. */
+    /** 1+ line series sharing the y-axis(es) — the single source of truth for color, dash, legend,
+     * and tooltip rows. A series opts into the right axis with `axis: 'right'`. */
     series: ChartSeries<T>[];
-    /** Fixed y-domain (e.g. [-2.5, 2.5]) or 'auto' to compute from all series. */
-    yDomain: [number, number] | 'auto';
-    /** When 'auto': upper bound is at least this value. */
-    yAutoMaxFloor?: number;
-    /** When 'auto': lower bound is at most this value. Default 0. Pass `Infinity` to disable the
-     * forced zero baseline — the lower bound then pads DOWN from the raw data minimum instead. */
-    yAutoMinCeil?: number;
-    /** When 'auto': padding multiplier applied away from the domain. Default 1.1. The lower bound
-     * always pads DOWN from `min(dataMin, yAutoMinCeil)` (never up, which would clip data) — see
-     * {@link padAutoLower}. */
-    yAutoPad?: number;
-    /** Horizontal value-range overlays (target zones), rendered behind the lines on the left scale. */
+    /** Left y-axis. Collapses the old `yDomain` / `yAutoMaxFloor` / `yAutoMinCeil` / `yAutoPad` /
+     * `numTicksY` / `formatYTick` prop soup into one object. */
+    y?: AxisConfig<T>;
+    /** Right y-axis. Passing it is what makes the chart dual-axis — the margin widens by
+     * measurement, and `axis: 'right'` series read against it. */
+    y2?: AxisConfig<T>;
+    /** Horizontal value-range overlays (target zones), rendered behind the lines. */
     zones?: ZoneSpec[];
+    /** Vertical x-range overlays (time windows), rendered behind the lines. Bounds are `getX`
+     * domain keys. */
+    xZones?: XZoneSpec[];
     /** Horizontal reference lines. Solid by default; set dashed: true for a dashed line. */
     refLines?: {
         value: number;
         color: string;
         dashed?: boolean;
     }[];
-    numTicksX?: number;
-    numTicksY?: number;
-    /** Tooltip + (per-series) value formatter. */
-    formatValue: (v: number) => string;
-    /** Y-axis tick label formatter. Falls back to the scale's default. */
-    formatYTick?: (v: number) => string;
-    /** Label shown at the right of the tooltip header (e.g. status badge). */
-    tooltipLabel?: (d: T) => {
-        text: string;
-        color: string;
-    } | null;
-    /** Extra tooltip rows rendered after the per-series rows. */
-    renderExtraTooltipRows?: (d: T) => ReactNode;
+    /** Exact number of x ticks. Default: as many as fit. */
+    xTicks?: number;
+    /** Tooltip config — `label` for a right-aligned header badge, `extraRows` for rows appended
+     * after the derived per-series rows. `false` disables the tooltip entirely. */
+    tooltip?: CartesianTooltipConfig<T> | false;
     /** Marker glyph for per-point markers. Default 'circle'. */
     markerShape?: 'circle' | 'star';
-    /** Legend config forwarded to `ChartFrame`; `false` disables the legend (sparkline escape).
+    /** Legend config forwarded to `CartesianChart`; `false` disables the legend (sparkline escape).
      * Default `{ placement: 'bottom' }`. */
     legend?: ChartLegendConfig | false;
-    /** Accessible text alternative, forwarded to `ChartFrame` as `aria-label` (+ `role="img"`). */
+    /** Accessible text alternative, forwarded to `CartesianChart` as `aria-label` (+ `role="img"`). */
     ariaLabel?: string;
-    /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc for the three-state rationale. */
+    /** Forwarded to `CartesianChart` — see `ChartPending`'s JSDoc for the three-state rationale. */
     isPending?: boolean;
 };
 /**
- * N series sharing one y-axis, with optional zones/reference lines, per-point markers
+ * N series sharing one or two y-axes, with optional zones/reference lines, per-point markers
  * (PR stars / status dots), a dashed companion line per series, legend-hover dimming, and a
  * shared-cursor tooltip. Generalizes the multi-line argo charts (e1RM trend, relative
  * progression, training load, fitness trends).
  *
- * Composes `ChartFrame` for measuring + the derived legend — `series` is the single array that
- * drives the plotted lines, the legend, and the tooltip rows.
+ * Composes `CartesianChart` for measuring, scales, grid, axes, cursor, and tooltip — this kind
+ * draws ONLY the marks (lines + per-point markers). `series` is the single array that drives the
+ * plotted lines, the legend, and the tooltip rows.
  *
  * X-axis is built from the full `data` array so the calendar is preserved even when a series
  * has nulls; each series line skips null points (creating visual gaps).

package/dist/charts/kinds/MultiLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiLine.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/MultiLine.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAatC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAGvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAK/D,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;uBACmB;IACnB,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB,8EAA8E;IAC9E,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;kGAC8F;IAC9F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;+BAE2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mGAAmG;IACnG,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAA;IAClB,wFAAwF;IACxF,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8CAA8C;IAC9C,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,sEAAsE;IACtE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC/D,6DAA6D;IAC7D,sBAAsB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,CAAA;IAC5C,4DAA4D;IAC5D,WAAW,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC/B;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAgBD;;;;;;;;;;;GAWG;AACH,iBAAS,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,+BAiClD;AAkPD;;;GAGG;AACH,eAAO,MAAM,SAAS,EAA2B,OAAO,cAAc,CAAA"}
+{"version":3,"file":"MultiLine.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/MultiLine.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,UAAU,EAAe,MAAM,8BAA8B,CAAA;AAEnG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAEvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/D,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;IACtB;mFAC+E;IAC/E,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IACxB;gEAC4D;IAC5D,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;IACjB;kEAC8D;IAC9D,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;IAClB,iFAAiF;IACjF,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAA;IAClB;sBACkB;IAClB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAA;IACpB,wFAAwF;IACxF,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;IAC/D,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;mFAC+E;IAC/E,OAAO,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAA;IAC3C,4DAA4D;IAC5D,WAAW,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC/B;4CACwC;IACxC,MAAM,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAA;IAClC,mGAAmG;IACnG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gGAAgG;IAChG,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AA4BD;;;;;;;;;;;;GAYG;AACH,iBAAS,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,+BAgDlD;AAqHD;;;GAGG;AACH,eAAO,MAAM,SAAS,EAA2B,OAAO,cAAc,CAAA"}

package/dist/charts/kinds/MultiLine.js

@@ -1,27 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { curveMonotoneX } from "@visx/curve";
-import { GridRows } from "@visx/grid";
-import { Group } from "@visx/group";
-import { scaleLinear, scalePoint } from "@visx/scale";
 import { LinePath } from "@visx/shape";
-import { memo, useMemo, useState } from "react";
-import { AxisBottomDate, AxisLeftNumeric } from "../primitives/Axes.js";
-import {
-  ChartTooltip,
-  TooltipBody,
-  TooltipHeader,
-  TooltipRow,
-  useTooltipStyles
-} from "../primitives/ChartTooltip.js";
-import { ChartFrame, resolveLegend } from "../primitives/ChartFrame.js";
-import { Crosshair, SeriesDot } from "../primitives/Crosshair.js";
-import { HoverOverlay } from "../primitives/HoverOverlay.js";
-import { ZoneRects } from "../primitives/ZoneRects.js";
-import { useHoverSync } from "../hooks/useHoverSync.js";
-import { deriveTooltipRows, LINE_OVERLAY_STROKE_WIDTH } from "../series.js";
+import { memo, useCallback, useMemo } from "react";
+import { CartesianChart } from "../primitives/CartesianChart.js";
+import { LINE_OVERLAY_STROKE_WIDTH } from "../series.js";
 import { VX } from "../../tokens/index.js";
-import { padAutoLower } from "../utils/domain.js";
-import { smartTicks, smartTicksEvery } from "../utils/ticks.js";
 const STAR_R = 6;
 function starPath(cx, cy, r) {
   const inner = r * 0.4;
@@ -33,241 +16,145 @@ function starPath(cx, cy, r) {
   }
   return `M${pts.join("L")}Z`;
 }
+function seriesPoints(series, data) {
+  const pts = [];
+  for (const d of data) {
+    const v = series.getValue(d);
+    if (v !== null && v !== void 0 && !Number.isNaN(v)) pts.push({ __d: d, __y: v });
+  }
+  return pts;
+}
 function MultiLineInner(props) {
-  const { series, chartId, height, legend, ariaLabel, isPending } = props;
-  const [highlightedKey, setHighlightedKey] = useState(null);
+  const {
+    data,
+    chartId,
+    getX,
+    series,
+    y,
+    y2,
+    zones,
+    xZones,
+    refLines,
+    xTicks,
+    tooltip,
+    markerShape = "circle",
+    height,
+    legend,
+    ariaLabel,
+    isPending
+  } = props;
   const styledSeries = useMemo(
     () => series.map((s) => ({ ...s, strokeWidth: s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH })),
     [series]
   );
   return /* @__PURE__ */ jsx(
-    ChartFrame,
+    CartesianChart,
     {
-      series: styledSeries,
+      data,
       chartId,
+      getX,
+      series: styledSeries,
+      ...y !== void 0 && { y },
+      ...y2 !== void 0 && { y2 },
+      ...zones !== void 0 && { zones },
+      ...xZones !== void 0 && { xZones },
+      ...refLines !== void 0 && { refLines },
+      ...xTicks !== void 0 && { xTicks },
+      ...tooltip !== void 0 && { tooltip },
       ...height !== void 0 && { height },
+      ...legend !== void 0 && { legend },
       ...ariaLabel !== void 0 && { ariaLabel },
       ...isPending !== void 0 && { isPending },
-      legend: resolveLegend(legend, {
-        highlighted: highlightedKey,
-        onHighlight: setHighlightedKey
-      }),
-      children: (plot) => /* @__PURE__ */ jsx(
-        MultiLinePlot,
-        {
-          ...props,
-          series: styledSeries,
-          plot,
-          highlightedKey
-        }
-      )
+      children: (ctx) => /* @__PURE__ */ jsx(MultiLineMarks, { getX, markerShape, ctx })
     }
   );
 }
-function MultiLinePlot(props) {
-  const {
-    data,
-    chartId,
-    getX,
-    series,
-    yDomain,
-    yAutoPad = 1.1,
-    yAutoMaxFloor,
-    yAutoMinCeil = 0,
-    zones = [],
-    refLines = [],
-    numTicksX,
-    numTicksY = 5,
-    formatValue,
-    formatYTick,
-    tooltipLabel,
-    renderExtraTooltipRows,
-    markerShape = "circle",
-    plot,
-    highlightedKey
-  } = props;
-  const dimOpacity = (s) => highlightedKey === null || s.key === highlightedKey || s.parent === highlightedKey ? 1 : 0.25;
-  const MARGIN = VX.margin;
-  const xMax = plot.width - MARGIN.left - MARGIN.right;
-  const yMax = plot.height - MARGIN.top - MARGIN.bottom;
-  const xScale = useMemo(
-    () => scalePoint({
-      // Full calendar — axis does not compress across nulls.
-      domain: data.map(getX),
-      range: [0, xMax],
-      padding: 0.3
-    }),
-    [data, xMax, getX]
-  );
-  const yScale = useMemo(() => {
-    if (yDomain === "auto") {
-      let dataMax = -Infinity;
-      let dataMin = Infinity;
-      for (const d of data) {
-        for (const s of series) {
-          const v = s.getValue(d);
-          if (v === null || v === void 0 || Number.isNaN(v)) continue;
-          if (v > dataMax) dataMax = v;
-          if (v < dataMin) dataMin = v;
-        }
-      }
-      const safeMax = Number.isFinite(dataMax) ? dataMax : 0;
-      const safeMin = Number.isFinite(dataMin) ? dataMin : 0;
-      const upper = Math.max(safeMax, yAutoMaxFloor ?? safeMax) * yAutoPad;
-      const lower = padAutoLower(Math.min(safeMin, yAutoMinCeil), yAutoPad);
-      return scaleLinear({ domain: [lower, upper], range: [yMax, 0], nice: true });
-    }
-    return scaleLinear({ domain: yDomain, range: [yMax, 0] });
-  }, [data, series, yDomain, yMax, yAutoPad, yAutoMaxFloor, yAutoMinCeil]);
-  const tooltipStyles = useTooltipStyles();
-  const { tip, tooltipRef, syncedPoint, isDirectHover, handleMouse, handleLeave } = useHoverSync(
-    {
-      data,
-      chartId,
-      getKey: getX,
-      xScale,
-      marginLeft: MARGIN.left
-    }
+function MultiLineMarks({
+  getX,
+  markerShape,
+  ctx
+}) {
+  const { data, visible, xScale, yScale, y2Scale, highlighted } = ctx;
+  const pointsBySeries = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const s of visible) m.set(s.key, seriesPoints(s, data));
+    return m;
+  }, [visible, data]);
+  const dimOpacity = useCallback(
+    (s) => highlighted === null || s.key === highlighted || s.parent === highlighted ? 1 : 0.25,
+    [highlighted]
   );
-  const tickValues = useMemo(
-    () => numTicksX ? smartTicksEvery(data.map(getX), numTicksX) : smartTicks(data.map(getX), xMax),
-    [data, xMax, getX, numTicksX]
+  const scaleFor = useCallback(
+    (s) => s.axis === "right" && y2Scale !== null ? y2Scale : yScale,
+    [y2Scale, yScale]
   );
-  const seriesPts = useMemo(() => {
-    const out = /* @__PURE__ */ new Map();
-    for (const s of series) {
-      const pts = [];
-      for (const d of data) {
-        const v = s.getValue(d);
-        if (v !== null && v !== void 0 && !Number.isNaN(v)) pts.push({ __d: d, __y: v });
+  const markerNodes = useMemo(
+    () => visible.flatMap((s) => {
+      const getMarker = s.getMarker;
+      if (!getMarker) return [];
+      const scale = scaleFor(s);
+      const op = dimOpacity(s);
+      const markers = [];
+      for (const p of pointsBySeries.get(s.key) ?? []) {
+        const m = getMarker(p.__d);
+        if (m === null) continue;
+        const cx = xScale(getX(p.__d)) ?? 0;
+        const cy = scale(p.__y);
+        const color = m.color ?? s.color;
+        const r = m.r ?? (markerShape === "star" ? STAR_R : VX.dotR);
+        markers.push(
+          markerShape === "star" ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: starPath(cx, cy, r),
+              fill: color,
+              stroke: VX.dotStroke,
+              strokeWidth: 1.5,
+              fillOpacity: op,
+              strokeOpacity: op
+            },
+            `mk-${s.key}-${getX(p.__d)}`
+          ) : /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r,
+              fill: color,
+              stroke: VX.dotStroke,
+              strokeWidth: 2,
+              fillOpacity: op,
+              strokeOpacity: op
+            },
+            `mk-${s.key}-${getX(p.__d)}`
+          )
+        );
       }
-      out.set(s.key, pts);
-    }
-    return out;
-  }, [data, series]);
-  const tooltipLbl = tip ? tooltipLabel?.(tip.data) ?? null : null;
+      return markers;
+    }),
+    [visible, pointsBySeries, xScale, getX, scaleFor, dimOpacity, markerShape]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("svg", { width: plot.width, height: plot.height, children: /* @__PURE__ */ jsxs(Group, { left: MARGIN.left, top: MARGIN.top, children: [
-      /* @__PURE__ */ jsx(GridRows, { scale: yScale, width: xMax, stroke: VX.grid, numTicks: numTicksY }),
-      /* @__PURE__ */ jsx(ZoneRects, { zones, width: xMax, leftScale: yScale }),
-      refLines.map((r, i) => /* @__PURE__ */ jsx(
-        "line",
+    visible.map((s) => {
+      const valid = pointsBySeries.get(s.key) ?? [];
+      if (valid.length === 0) return null;
+      const scale = scaleFor(s);
+      return /* @__PURE__ */ jsx(
+        LinePath,
         {
-          x1: 0,
-          x2: xMax,
-          y1: yScale(r.value),
-          y2: yScale(r.value),
-          stroke: r.color,
-          strokeDasharray: r.dashed ? VX.dashArray : void 0
+          data: valid,
+          x: (p) => xScale(getX(p.__d)) ?? 0,
+          y: (p) => scale(p.__y),
+          stroke: s.color,
+          strokeWidth: s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH,
+          strokeDasharray: s.dash === "dashed" ? VX.dashArray : void 0,
+          strokeOpacity: dimOpacity(s) * (s.strokeOpacity ?? 1),
+          curve: curveMonotoneX
         },
-        `ref-${i}`
-      )),
-      series.map((s) => {
-        const valid = seriesPts.get(s.key) ?? [];
-        if (valid.length === 0) return null;
-        return /* @__PURE__ */ jsx(
-          LinePath,
-          {
-            data: valid,
-            x: (p) => xScale(getX(p.__d)) ?? 0,
-            y: (p) => yScale(p.__y),
-            stroke: s.color,
-            strokeWidth: s.strokeWidth ?? VX.lineWidth,
-            strokeDasharray: s.dash === "dashed" ? VX.dashArray : void 0,
-            strokeOpacity: dimOpacity(s),
-            curve: curveMonotoneX
-          },
-          `line-${s.key}`
-        );
-      }),
-      series.flatMap((s) => {
-        const getMarker = s.getMarker;
-        if (!getMarker) return [];
-        const op = dimOpacity(s);
-        const markers = [];
-        for (const p of seriesPts.get(s.key) ?? []) {
-          const m = getMarker(p.__d);
-          if (m === null) continue;
-          const cx = xScale(getX(p.__d)) ?? 0;
-          const cy = yScale(p.__y);
-          const color = m.color ?? s.color;
-          const r = m.r ?? (markerShape === "star" ? STAR_R : VX.dotR);
-          markers.push(
-            markerShape === "star" ? /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: starPath(cx, cy, r),
-                fill: color,
-                stroke: VX.dotStroke,
-                strokeWidth: 1.5,
-                fillOpacity: op,
-                strokeOpacity: op
-              },
-              `mk-${s.key}-${getX(p.__d)}`
-            ) : /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx,
-                cy,
-                r,
-                fill: color,
-                stroke: VX.dotStroke,
-                strokeWidth: 2,
-                fillOpacity: op,
-                strokeOpacity: op
-              },
-              `mk-${s.key}-${getX(p.__d)}`
-            )
-          );
-        }
-        return markers;
-      }),
-      syncedPoint && (() => {
-        const sx = xScale(getX(syncedPoint)) ?? 0;
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Crosshair, { x: sx, top: 0, bottom: yMax }),
-          series.map((s) => {
-            const v = s.getValue(syncedPoint);
-            if (v === null || v === void 0 || Number.isNaN(v)) return null;
-            return /* @__PURE__ */ jsx(SeriesDot, { cx: sx, cy: yScale(v), color: s.color }, `dot-${s.key}`);
-          })
-        ] });
-      })(),
-      /* @__PURE__ */ jsx(
-        AxisLeftNumeric,
-        {
-          scale: yScale,
-          numTicks: numTicksY,
-          ...formatYTick !== void 0 && { tickFormat: formatYTick }
-        }
-      ),
-      /* @__PURE__ */ jsx(AxisBottomDate, { top: yMax, scale: xScale, tickValues }),
-      /* @__PURE__ */ jsx(HoverOverlay, { width: xMax, height: yMax, onMove: handleMouse, onLeave: handleLeave })
-    ] }) }),
-    /* @__PURE__ */ jsx(ChartTooltip, { tip: isDirectHover ? tip : null, tooltipRef, styles: tooltipStyles, children: tip && isDirectHover && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        TooltipHeader,
-        {
-          date: getX(tip.data),
-          ...tooltipLbl !== null && { label: tooltipLbl.text, labelColor: tooltipLbl.color }
-        }
-      ),
-      /* @__PURE__ */ jsxs(TooltipBody, { children: [
-        deriveTooltipRows(series, tip.data, formatValue).map((row) => /* @__PURE__ */ jsx(
-          TooltipRow,
-          {
-            color: row.color,
-            label: row.label,
-            value: row.value,
-            shape: row.shape,
-            dashed: row.dashed,
-            ...row.strokeWidth !== void 0 && { strokeWidth: row.strokeWidth }
-          },
-          row.key
-        )),
-        renderExtraTooltipRows?.(tip.data)
-      ] })
-    ] }) })
+        `line-${s.key}`
+      );
+    }),
+    markerNodes
   ] });
 }
 const MultiLine = memo(MultiLineInner);

package/dist/charts/kinds/MultiLine.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MultiLine.test.d.ts.map

package/dist/charts/kinds/MultiLine.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiLine.test.d.ts","sourceRoot":"","sources":["../../../src/charts/kinds/MultiLine.test.tsx"],"names":[],"mappings":""}