basalt-ui 1.13.0 → 1.15.0

package/dist/charts/kinds/Bars.js

@@ -1,40 +1,35 @@
 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, AxisRightNumeric } 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, useMemo } from "react";
 import { VX } from "../../tokens/index.js";
+import { CartesianChart } from "../primitives/CartesianChart.js";
+import { LINE_OVERLAY_STROKE_WIDTH } from "../series.js";
 import { padAutoLower } from "../utils/domain.js";
-import { smartTicks, smartTicksEvery } from "../utils/ticks.js";
 function BarsInner(props) {
   const {
+    data,
+    height,
+    chartId,
+    getX,
+    getValue,
     positiveBars,
     negativeBars = [],
     lines = [],
-    getValue,
-    chartId,
-    height,
+    zones,
+    refLines,
+    y,
+    y2,
+    barWidthRatio = 0.6,
+    barLayout = "stacked",
+    barOpacity,
+    xTicks,
+    tooltip,
+    margin,
     legend,
     ariaLabel,
     isPending
   } = props;
-  const [highlightedKey, setHighlightedKey] = useState(null);
   const barSeries = useMemo(
     () => [...positiveBars, ...negativeBars].map((b) => ({
       key: b.key,
@@ -42,6 +37,7 @@ function BarsInner(props) {
       color: b.color,
       mark: "bar",
       fillOpacity: 0.85,
+      ...b.axisSide !== void 0 && { axis: b.axisSide },
       getValue: (d) => getValue(d, b.key),
       ...b.formatValue !== void 0 && { formatValue: b.formatValue }
     })),
@@ -55,412 +51,256 @@ function BarsInner(props) {
       mark: "line",
       dash: ln.dashed ? "dashed" : "solid",
       strokeWidth: ln.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH,
+      ...ln.axisSide !== void 0 && { axis: ln.axisSide },
       getValue: (d) => getValue(d, ln.key),
       ...ln.formatValue !== void 0 && { formatValue: ln.formatValue }
     })),
     [lines, getValue]
   );
-  const legendSeries = useMemo(
+  const series = useMemo(
     () => [...barSeries, ...lineSeries],
     [barSeries, lineSeries]
   );
-  return /* @__PURE__ */ jsx(
-    ChartFrame,
-    {
-      series: legendSeries,
-      chartId,
-      ...height !== void 0 && { height },
-      ...ariaLabel !== void 0 && { ariaLabel },
-      ...isPending !== void 0 && { isPending },
-      legend: resolveLegend(legend, {
-        highlighted: highlightedKey,
-        onHighlight: setHighlightedKey
-      }),
-      children: (plot) => /* @__PURE__ */ jsx(
-        BarsPlot,
-        {
-          ...props,
-          plot,
-          highlightedKey,
-          barSeries,
-          lineSeries
-        }
-      )
-    }
-  );
-}
-function BarsPlot(props) {
-  const {
-    data,
-    chartId,
-    getX,
-    getValue,
-    positiveBars,
-    negativeBars = [],
-    lines = [],
-    zones = [],
-    refLines = [],
-    leftAxis,
-    rightAxis,
-    barWidthRatio = 0.6,
-    barLayout = "stacked",
-    barOpacity,
-    tooltipLabel,
-    renderPrefixTooltipRows,
-    renderExtraTooltipRows,
-    hideBarTooltipRows = false,
-    formatValue = (v) => String(Math.round(v)),
-    numTicksX,
-    marginLeft,
-    plot,
-    highlightedKey,
-    barSeries,
-    lineSeries
-  } = props;
-  const dimOpacity = (key) => highlightedKey === null || highlightedKey === key ? 1 : 0.15;
-  const MARGIN = useMemo(
-    () => ({
-      ...VX.margin,
-      left: marginLeft ?? VX.margin.left,
-      right: rightAxis ? Math.max(VX.margin.right, 40) : VX.margin.right
-    }),
-    [rightAxis, marginLeft]
-  );
-  const xMax = plot.width - MARGIN.left - MARGIN.right;
-  const yMax = plot.height - MARGIN.top - MARGIN.bottom;
-  const xScale = useMemo(
-    () => scalePoint({ domain: data.map(getX), range: [0, xMax], padding: 0.3 }),
-    [data, xMax, getX]
-  );
-  const leftYScale = useMemo(() => {
-    if (leftAxis.domain === "auto") {
-      const autoPad = leftAxis.autoPad ?? 1.1;
-      let maxSum = 0;
-      let minSum = 0;
-      if (barLayout === "stacked") {
-        for (const d of data) {
+  const yConfig = useMemo(() => {
+    const base = y ?? {};
+    if (barLayout !== "stacked" || base.domain !== void 0 && base.domain !== "auto")
+      return base;
+    const pad = base.autoPad ?? 1.1;
+    return {
+      ...base,
+      // Visible-only, so a legend toggle shrinks the axis rather than leaving a gap.
+      domain: (rows, visible) => {
+        const shown = new Set(visible.map((s) => s.key));
+        let maxSum = 0;
+        let minSum = 0;
+        for (const d of rows) {
           let pos = 0;
           for (const b of positiveBars) {
+            if (!shown.has(b.key)) continue;
             const v = getValue(d, b.key);
             if (v !== null && !Number.isNaN(v) && v > 0) pos += v;
           }
           let neg = 0;
           for (const b of negativeBars) {
+            if (!shown.has(b.key)) continue;
             const v = getValue(d, b.key);
             if (v !== null && !Number.isNaN(v) && v > 0) neg -= v;
           }
           if (pos > maxSum) maxSum = pos;
           if (neg < minSum) minSum = neg;
         }
-      } else {
-        for (const d of data) {
-          for (const b of positiveBars) {
-            if ((b.axisSide ?? "left") !== "left") continue;
-            const v = getValue(d, b.key);
+        for (const ln of lines) {
+          if ((ln.axisSide ?? "left") !== "left" || !shown.has(ln.key)) continue;
+          for (const d of rows) {
+            const v = getValue(d, ln.key);
             if (v === null || Number.isNaN(v)) continue;
             if (v > maxSum) maxSum = v;
+            if (v < minSum) minSum = v;
           }
         }
+        const upper = Math.max(maxSum, base.autoMaxFloor ?? maxSum) * pad;
+        const ceil = base.autoMinCeil ?? 0;
+        return [padAutoLower(Math.min(minSum, ceil), pad), upper];
       }
-      for (const ln of lines) {
-        if ((ln.axisSide ?? "left") !== "left") continue;
-        for (const d of data) {
-          const v = getValue(d, ln.key);
-          if (v === null || Number.isNaN(v)) continue;
-          if (v > maxSum) maxSum = v;
-          if (v < minSum) minSum = v;
-        }
-      }
-      const upper = Math.max(maxSum, leftAxis.autoMaxFloor ?? maxSum) * autoPad;
-      const ceil = leftAxis.autoMinCeil ?? 0;
-      const lower = padAutoLower(Math.min(minSum, ceil), autoPad);
-      return scaleLinear({ domain: [lower, upper], range: [yMax, 0], nice: true });
-    }
-    return scaleLinear({ domain: leftAxis.domain, range: [yMax, 0] });
-  }, [data, leftAxis, positiveBars, negativeBars, lines, getValue, yMax, barLayout]);
-  const rightYScale = useMemo(() => {
-    if (!rightAxis) return null;
-    if (rightAxis.domain === "auto") {
-      const autoPad = rightAxis.autoPad ?? 1.1;
-      let max = -Infinity;
-      let min = Infinity;
-      if (barLayout === "grouped") {
-        for (const d of data) {
-          for (const b of positiveBars) {
-            if ((b.axisSide ?? "left") !== "right") continue;
-            const v = getValue(d, b.key);
-            if (v === null || Number.isNaN(v)) continue;
-            if (v > max) max = v;
-            if (v < min) min = v;
-          }
-        }
-      }
-      for (const ln of lines) {
-        if ((ln.axisSide ?? "left") !== "right") continue;
-        for (const d of data) {
-          const v = getValue(d, ln.key);
-          if (v === null || Number.isNaN(v)) continue;
-          if (v > max) max = v;
-          if (v < min) min = v;
-        }
-      }
-      for (const z of zones) {
-        if ((z.axisSide ?? "left") !== "right") continue;
-        if (Number.isFinite(z.to) && z.to > max) max = z.to;
-        if (Number.isFinite(z.from) && z.from < min) min = z.from;
-      }
-      for (const r of refLines) {
-        if ((r.axisSide ?? "left") !== "right") continue;
-        if (r.value > max) max = r.value;
-        if (r.value < min) min = r.value;
-      }
-      const safeMax = Number.isFinite(max) ? max : 0;
-      const safeMin = Number.isFinite(min) ? min : 0;
-      const upper = Math.max(safeMax, rightAxis.autoMaxFloor ?? safeMax) * autoPad;
-      const ceil = rightAxis.autoMinCeil ?? 0;
-      const lower = padAutoLower(Math.min(safeMin, ceil), autoPad);
-      return scaleLinear({ domain: [lower, upper], range: [yMax, 0], nice: true });
-    }
-    return scaleLinear({ domain: rightAxis.domain, range: [yMax, 0] });
-  }, [data, rightAxis, lines, zones, refLines, positiveBars, getValue, yMax, barLayout]);
-  const tooltipStyles = useTooltipStyles();
-  const { tip, tooltipRef, syncedPoint, isDirectHover, handleMouse, handleLeave } = useHoverSync(
+    };
+  }, [y, barLayout, positiveBars, negativeBars, lines, getValue]);
+  const mappedRefLines = useMemo(
+    () => refLines?.map((r) => ({
+      value: r.value,
+      color: r.color,
+      ...r.dashed !== void 0 && { dashed: r.dashed },
+      ...r.axisSide !== void 0 && { axis: r.axisSide }
+    })),
+    [refLines]
+  );
+  return /* @__PURE__ */ jsx(
+    CartesianChart,
     {
       data,
       chartId,
-      getKey: getX,
-      xScale,
-      marginLeft: MARGIN.left
+      getX,
+      series,
+      y: yConfig,
+      ...y2 !== void 0 && { y2 },
+      ...xTicks !== void 0 && { xTicks },
+      ...zones !== void 0 && { zones },
+      ...mappedRefLines !== void 0 && { refLines: mappedRefLines },
+      ...height !== void 0 && { height },
+      ...legend !== void 0 && { legend },
+      ...tooltip !== void 0 && { tooltip },
+      ...margin !== void 0 && { margin },
+      ...ariaLabel !== void 0 && { ariaLabel },
+      ...isPending !== void 0 && { isPending },
+      children: (ctx) => /* @__PURE__ */ jsx(
+        BarsMarks,
+        {
+          getX,
+          getValue,
+          positiveBars,
+          negativeBars,
+          lines,
+          barWidthRatio,
+          barLayout,
+          ...barOpacity !== void 0 && { barOpacity },
+          ctx
+        }
+      )
     }
   );
-  const tickValues = useMemo(
-    () => numTicksX ? smartTicksEvery(data.map(getX), numTicksX) : smartTicks(data.map(getX), xMax),
-    [data, xMax, getX, numTicksX]
-  );
-  const groupWidth = Math.max(xMax / Math.max(data.length, 1) * barWidthRatio, 2);
-  const groupedBarWidths = useMemo(() => {
-    if (barLayout !== "grouped") return [];
-    const totalWeight = positiveBars.reduce((s, b) => s + (b.weight ?? 1), 0) || 1;
-    return positiveBars.map((b) => Math.max(groupWidth * ((b.weight ?? 1) / totalWeight), 1));
-  }, [positiveBars, groupWidth, barLayout]);
-  const groupedBarOffsets = useMemo(() => {
-    const out = [];
+}
+function BarsMarks({
+  getX,
+  getValue,
+  positiveBars,
+  negativeBars,
+  lines,
+  barWidthRatio,
+  barLayout,
+  barOpacity,
+  ctx
+}) {
+  const { data: rows, xScale, yScale, y2Scale, xMax, hidden, highlighted } = ctx;
+  const barGroups = useMemo(() => {
+    const scaleForSide2 = (side) => side === "right" && y2Scale ? y2Scale : yScale;
+    const dim2 = (key) => highlighted === null || highlighted === key ? 1 : 0.15;
+    const groupWidth = Math.max(xMax / Math.max(rows.length, 1) * barWidthRatio, 2);
+    const totalWeight = barLayout === "grouped" ? positiveBars.reduce((s, b) => s + (b.weight ?? 1), 0) || 1 : 1;
+    const groupedBarWidths = barLayout === "grouped" ? positiveBars.map((b) => Math.max(groupWidth * ((b.weight ?? 1) / totalWeight), 1)) : [];
+    const groupedBarOffsets = [];
     let cursor = 0;
     for (const w of groupedBarWidths) {
-      out.push(cursor);
+      groupedBarOffsets.push(cursor);
       cursor += w;
     }
-    return out;
-  }, [groupedBarWidths]);
-  const scaleFor = (side) => side === "right" && rightYScale ? rightYScale : leftYScale;
-  const tooltipLbl = tip ? tooltipLabel?.(tip.data) ?? null : null;
-  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: leftYScale,
-          width: xMax,
-          stroke: VX.grid,
-          numTicks: leftAxis.numTicks ?? 5
-        }
-      ),
-      /* @__PURE__ */ jsx(ZoneRects, { zones, width: xMax, leftScale: leftYScale, rightScale: rightYScale }),
-      refLines.map((r, i) => {
-        const scale = scaleFor(r.axisSide);
-        return /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: 0,
-            x2: xMax,
-            y1: scale(r.value),
-            y2: scale(r.value),
-            stroke: r.color,
-            strokeDasharray: r.dashed ? VX.dashArray : void 0
-          },
-          `ref-${i}`
-        );
-      }),
-      data.map((d) => {
-        const cx = xScale(getX(d)) ?? 0;
-        const groupLeft = cx - groupWidth / 2;
-        const els = [];
-        if (barLayout === "stacked") {
-          let posOffset = 0;
-          for (const b of positiveBars) {
-            const v = getValue(d, b.key);
-            if (v === null || Number.isNaN(v) || v <= 0) continue;
-            const top = posOffset + v;
-            const yTop = leftYScale(top);
-            const yBottom = leftYScale(posOffset);
-            els.push(
-              /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x: groupLeft,
-                  y: yTop,
-                  width: groupWidth,
-                  height: yBottom - yTop,
-                  rx: 1.4,
-                  fill: b.color,
-                  fillOpacity: (barOpacity?.(d, b.key) ?? 0.85) * dimOpacity(b.key)
-                },
-                `${getX(d)}-${b.key}`
-              )
-            );
-            posOffset = top;
-          }
-          let negOffset = 0;
-          for (const b of negativeBars) {
-            const v = getValue(d, b.key);
-            if (v === null || Number.isNaN(v) || v <= 0) continue;
-            const top = negOffset + v;
-            const yTop = leftYScale(-negOffset);
-            const yBottom = leftYScale(-top);
-            els.push(
-              /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x: groupLeft,
-                  y: yTop,
-                  width: groupWidth,
-                  height: yBottom - yTop,
-                  rx: 1.4,
-                  fill: b.color,
-                  fillOpacity: (barOpacity?.(d, b.key) ?? 0.85) * dimOpacity(b.key)
-                },
-                `${getX(d)}-${b.key}-neg`
-              )
-            );
-            negOffset = top;
-          }
-        } else {
-          positiveBars.forEach((b, i) => {
-            const v = getValue(d, b.key);
-            if (v === null || Number.isNaN(v) || v <= 0) return;
-            const scale = scaleFor(b.axisSide);
-            const yTop = scale(v);
-            const yBottom = scale(0);
-            els.push(
-              /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x: groupLeft + (groupedBarOffsets[i] ?? 0),
-                  y: yTop,
-                  width: groupedBarWidths[i] ?? 0,
-                  height: yBottom - yTop,
-                  rx: 1.4,
-                  fill: b.color,
-                  fillOpacity: (barOpacity?.(d, b.key) ?? 0.85) * dimOpacity(b.key)
-                },
-                `${getX(d)}-${b.key}`
-              )
-            );
+    return rows.map((d) => {
+      const cx = xScale(getX(d)) ?? 0;
+      const groupLeft = cx - groupWidth / 2;
+      const rects = [];
+      if (barLayout === "stacked") {
+        let posOffset = 0;
+        for (const b of positiveBars) {
+          if (hidden.has(b.key)) continue;
+          const v = getValue(d, b.key);
+          if (v === null || Number.isNaN(v) || v <= 0) continue;
+          const top = posOffset + v;
+          const yTop = yScale(top);
+          const yBottom = yScale(posOffset);
+          rects.push({
+            key: `${getX(d)}-${b.key}`,
+            x: groupLeft,
+            y: yTop,
+            width: groupWidth,
+            height: yBottom - yTop,
+            fill: b.color,
+            fillOpacity: (barOpacity?.(d, b.key) ?? 0.85) * dim2(b.key)
           });
+          posOffset = top;
         }
-        return /* @__PURE__ */ jsx("g", { children: els }, `bars-${getX(d)}`);
-      }),
-      lines.map((ln) => {
-        const scale = scaleFor(ln.axisSide);
-        const valid = [];
-        for (const d of data) {
-          const v = getValue(d, ln.key);
-          if (v !== null && !Number.isNaN(v)) valid.push({ __d: d, __y: v });
-        }
-        if (valid.length === 0) return null;
-        return /* @__PURE__ */ jsx(
-          LinePath,
-          {
-            data: valid,
-            x: (p) => xScale(getX(p.__d)) ?? 0,
-            y: (p) => scale(p.__y),
-            stroke: ln.color,
-            strokeWidth: ln.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH,
-            strokeDasharray: ln.dashed ? VX.dashArray : void 0,
-            strokeOpacity: dimOpacity(ln.key),
-            curve: curveMonotoneX
-          },
-          `line-${ln.key}`
-        );
-      }),
-      negativeBars.length > 0 && /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: 0,
-          x2: xMax,
-          y1: leftYScale(0),
-          y2: leftYScale(0),
-          stroke: VX.grid,
-          strokeWidth: 1
-        }
-      ),
-      syncedPoint && (() => {
-        const sx = xScale(getX(syncedPoint)) ?? 0;
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Crosshair, { x: sx, top: 0, bottom: yMax }),
-          lines.map((ln) => {
-            const v = getValue(syncedPoint, ln.key);
-            if (v === null || Number.isNaN(v)) return null;
-            const scale = scaleFor(ln.axisSide);
-            return /* @__PURE__ */ jsx(SeriesDot, { cx: sx, cy: scale(v), color: ln.color }, `dot-${ln.key}`);
-          })
-        ] });
-      })(),
-      /* @__PURE__ */ jsx(
-        AxisLeftNumeric,
-        {
-          scale: leftYScale,
-          numTicks: leftAxis.numTicks ?? 5,
-          ...leftAxis.formatTick !== void 0 && { tickFormat: leftAxis.formatTick }
-        }
-      ),
-      rightYScale && rightAxis && /* @__PURE__ */ jsx(
-        AxisRightNumeric,
-        {
-          scale: rightYScale,
-          left: xMax,
-          numTicks: rightAxis.numTicks ?? 5,
-          ...rightAxis.formatTick !== void 0 && { tickFormat: rightAxis.formatTick }
+        let negOffset = 0;
+        for (const b of negativeBars) {
+          if (hidden.has(b.key)) continue;
+          const v = getValue(d, b.key);
+          if (v === null || Number.isNaN(v) || v <= 0) continue;
+          const top = negOffset + v;
+          const yTop = yScale(-negOffset);
+          const yBottom = yScale(-top);
+          rects.push({
+            key: `${getX(d)}-${b.key}-neg`,
+            x: groupLeft,
+            y: yTop,
+            width: groupWidth,
+            height: yBottom - yTop,
+            fill: b.color,
+            fillOpacity: (barOpacity?.(d, b.key) ?? 0.85) * dim2(b.key)
+          });
+          negOffset = top;
         }
-      ),
-      /* @__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,
+      } else {
+        positiveBars.forEach((b, i) => {
+          if (hidden.has(b.key)) return;
+          const v = getValue(d, b.key);
+          if (v === null || Number.isNaN(v) || v <= 0) return;
+          const scale = scaleForSide2(b.axisSide);
+          const yTop = scale(v);
+          const yBottom = scale(0);
+          rects.push({
+            key: `${getX(d)}-${b.key}`,
+            x: groupLeft + (groupedBarOffsets[i] ?? 0),
+            y: yTop,
+            width: groupedBarWidths[i] ?? 0,
+            height: yBottom - yTop,
+            fill: b.color,
+            fillOpacity: (barOpacity?.(d, b.key) ?? 0.85) * dim2(b.key)
+          });
+        });
+      }
+      return { rowKey: getX(d), rects };
+    });
+  }, [
+    rows,
+    xScale,
+    yScale,
+    y2Scale,
+    xMax,
+    hidden,
+    highlighted,
+    positiveBars,
+    negativeBars,
+    barLayout,
+    barWidthRatio,
+    barOpacity,
+    getX,
+    getValue
+  ]);
+  const lineValid = useMemo(() => {
+    const out = /* @__PURE__ */ new Map();
+    for (const ln of lines) {
+      const valid = [];
+      for (const d of rows) {
+        const v = getValue(d, ln.key);
+        if (v !== null && !Number.isNaN(v)) valid.push({ __d: d, __y: v });
+      }
+      out.set(ln.key, valid);
+    }
+    return out;
+  }, [lines, rows, getValue]);
+  const scaleForSide = (side) => side === "right" && y2Scale ? y2Scale : yScale;
+  const dim = (key) => highlighted === null || highlighted === key ? 1 : 0.15;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    barGroups.map((group) => /* @__PURE__ */ jsx("g", { children: group.rects.map((r) => /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: r.x,
+        y: r.y,
+        width: r.width,
+        height: r.height,
+        rx: 1.4,
+        fill: r.fill,
+        fillOpacity: r.fillOpacity
+      },
+      r.key
+    )) }, `bars-${group.rowKey}`)),
+    lines.map((ln) => {
+      if (hidden.has(ln.key)) return null;
+      const scale = scaleForSide(ln.axisSide);
+      const valid = lineValid.get(ln.key) ?? [];
+      if (valid.length === 0) return null;
+      return /* @__PURE__ */ jsx(
+        LinePath,
         {
-          date: getX(tip.data),
-          ...tooltipLbl !== null && { label: tooltipLbl.text, labelColor: tooltipLbl.color }
-        }
-      ),
-      /* @__PURE__ */ jsxs(TooltipBody, { children: [
-        renderPrefixTooltipRows?.(tip.data),
-        !hideBarTooltipRows && deriveTooltipRows(barSeries, tip.data, formatValue).map((row) => /* @__PURE__ */ jsx(
-          TooltipRow,
-          {
-            color: row.color,
-            label: row.label,
-            value: row.value,
-            shape: row.shape
-          },
-          row.key
-        )),
-        deriveTooltipRows(lineSeries, 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)
-      ] })
-    ] }) })
+          data: valid,
+          x: (p) => xScale(getX(p.__d)) ?? 0,
+          y: (p) => scale(p.__y),
+          stroke: ln.color,
+          strokeWidth: ln.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH,
+          strokeDasharray: ln.dashed ? VX.dashArray : void 0,
+          strokeOpacity: dim(ln.key),
+          curve: curveMonotoneX
+        },
+        `line-${ln.key}`
+      );
+    }),
+    negativeBars.length > 0 && /* @__PURE__ */ jsx("line", { x1: 0, x2: xMax, y1: yScale(0), y2: yScale(0), stroke: VX.grid, strokeWidth: 1 })
   ] });
 }
 const Bars = memo(BarsInner);