@x-plat/design-system 0.5.31 → 0.5.32

package/dist/components/index.js

@@ -2326,6 +2326,40 @@ var AxisLabels = React6.memo(({ labels, count, chartW, height }) => {
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
+var useCrosshair = (seriesPoints, entries, labels, chartH) => {
+  const [activeIndex, setActiveIndex] = React6.useState(null);
+  const [mouseX, setMouseX] = React6.useState(null);
+  const handleMouseMove = React6.useCallback((e) => {
+    const svg = e.currentTarget;
+    const rect = svg.getBoundingClientRect();
+    const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
+    setMouseX(mx);
+    if (seriesPoints.length === 0 || seriesPoints[0].length === 0) return;
+    const points = seriesPoints[0];
+    let closest = 0;
+    let minDist = Math.abs(points[0].x - mx);
+    for (let i = 1; i < points.length; i++) {
+      const dist = Math.abs(points[i].x - mx);
+      if (dist < minDist) {
+        minDist = dist;
+        closest = i;
+      }
+    }
+    setActiveIndex(closest);
+  }, [seriesPoints]);
+  const handleMouseLeave = React6.useCallback(() => {
+    setActiveIndex(null);
+    setMouseX(null);
+  }, []);
+  const tooltipContent = React6.useMemo(() => {
+    if (activeIndex === null) return "";
+    return entries.map(([key], di) => {
+      const p = seriesPoints[di]?.[activeIndex];
+      return p ? `${key}: ${p.v}` : "";
+    }).filter(Boolean).join(" / ");
+  }, [activeIndex, entries, seriesPoints]);
+  return { activeIndex, mouseX, handleMouseMove, handleMouseLeave, tooltipContent };
+};
 var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = React6.useMemo(() => Object.entries(data), [data]);
   const maxVal = React6.useMemo(() => {
@@ -2345,8 +2379,9 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const showPoints = count <= 100;
   const lineRefs = React6.useRef([]);
+  const clipRef = React6.useRef(null);
+  const { activeIndex, mouseX, handleMouseMove, handleMouseLeave, tooltipContent } = useCrosshair(seriesPoints, entries, labels, chartH);
   React6.useEffect(() => {
     if (!animate) return;
     lineRefs.current.forEach((el) => {
@@ -2359,61 +2394,110 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
         el.style.strokeDashoffset = "0";
       });
     });
-  }, [animate, seriesPoints]);
-  return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ jsx307(AxisLabels, { labels, count, chartW, height }),
-    entries.map(([key], di) => {
-      const palette = getPalette(LINE_BAR_PALETTES, di, key);
-      const color = palette[2];
-      const areaColor = palette[0];
-      const points = seriesPoints[di];
-      const gradientId = `line-gradient-${di}`;
-      const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
-      const areaD = `M ${points[0].x},${points[0].y} ${points.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${points[points.length - 1].x},${PADDING.top + chartH} L ${points[0].x},${PADDING.top + chartH} Z`;
-      return /* @__PURE__ */ jsxs197("g", { children: [
-        /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsxs197("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
-          /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
-        ] }) }),
-        /* @__PURE__ */ jsx307(
-          "path",
+    if (clipRef.current) {
+      clipRef.current.setAttribute("width", "0");
+      requestAnimationFrame(() => {
+        if (clipRef.current) {
+          clipRef.current.style.transition = "width 1200ms ease-out 200ms";
+          clipRef.current.setAttribute("width", `${width}`);
+        }
+      });
+    }
+  }, [animate, seriesPoints, width]);
+  const guideX = mouseX != null && mouseX >= PADDING.left && mouseX <= width - PADDING.right ? mouseX : null;
+  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x : null;
+  const lineClipId = "line-area-clip";
+  return /* @__PURE__ */ jsxs197(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      className: "chart-svg",
+      onMouseMove: (e) => {
+        handleMouseMove(e);
+        onMove(e);
+      },
+      onMouseLeave: () => {
+        handleMouseLeave();
+        onLeave();
+      },
+      children: [
+        animate && /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsx307("clipPath", { id: lineClipId, children: /* @__PURE__ */ jsx307("rect", { ref: clipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ jsx307(AxisLabels, { labels, count, chartW, height }),
+        entries.map(([key], di) => {
+          const palette = getPalette(LINE_BAR_PALETTES, di, key);
+          const color = palette[2];
+          const areaColor = palette[0];
+          const points = seriesPoints[di];
+          const gradientId = `line-gradient-${di}`;
+          const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
+          const areaD = `M ${points[0].x},${points[0].y} ${points.map((p) => `L ${p.x},${p.y}`).join(" ")} L ${points[points.length - 1].x},${PADDING.top + chartH} L ${points[0].x},${PADDING.top + chartH} Z`;
+          return /* @__PURE__ */ jsxs197("g", { children: [
+            /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsxs197("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+              /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+            ] }) }),
+            /* @__PURE__ */ jsx307(
+              "path",
+              {
+                d: areaD,
+                fill: `url(#${gradientId})`,
+                clipPath: animate ? `url(#${lineClipId})` : void 0
+              }
+            ),
+            /* @__PURE__ */ jsx307(
+              "polyline",
+              {
+                ref: (el) => {
+                  lineRefs.current[di] = el;
+                },
+                points: polyPoints,
+                fill: "none",
+                stroke: color,
+                strokeWidth: "2"
+              }
+            ),
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx307(
+              "circle",
+              {
+                cx: points[activeIndex].x,
+                cy: points[activeIndex].y,
+                r: "5",
+                fill: color,
+                className: "chart-point-active"
+              }
+            )
+          ] }, di);
+        }),
+        guideX !== null && /* @__PURE__ */ jsx307(
+          "line",
           {
-            d: areaD,
-            fill: `url(#${gradientId})`,
-            className: "chart-area",
-            style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
+            x1: guideX,
+            y1: PADDING.top,
+            x2: guideX,
+            y2: PADDING.top + chartH,
+            className: "chart-crosshair"
           }
         ),
+        activeIndex !== null && activeX !== null && /* @__PURE__ */ jsx307("foreignObject", { x: activeX - 100, y: 0, width: "200", height: PADDING.top, children: /* @__PURE__ */ jsxs197("div", { className: "chart-crosshair-label", children: [
+          labels[activeIndex],
+          " \u2014 ",
+          tooltipContent
+        ] }) }),
         /* @__PURE__ */ jsx307(
-          "polyline",
+          "rect",
           {
-            ref: (el) => {
-              lineRefs.current[di] = el;
-            },
-            points: polyPoints,
-            fill: "none",
-            stroke: color,
-            strokeWidth: "2"
+            x: PADDING.left,
+            y: PADDING.top,
+            width: chartW,
+            height: chartH,
+            fill: "transparent",
+            style: { cursor: "crosshair" }
           }
-        ),
-        showPoints && points.map((p, i) => /* @__PURE__ */ jsx307(
-          "circle",
-          {
-            cx: p.x,
-            cy: p.y,
-            r: "4",
-            fill: color,
-            className: "chart-point",
-            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${p.v}`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          },
-          i
-        ))
-      ] }, di);
-    })
-  ] });
+        )
+      ]
+    }
+  );
 });
 LineChart.displayName = "LineChart";
 var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
@@ -2435,8 +2519,9 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const showPoints = count <= 100;
   const lineRefs = React6.useRef([]);
+  const curveClipRef = React6.useRef(null);
+  const { activeIndex, mouseX, handleMouseMove, handleMouseLeave, tooltipContent } = useCrosshair(seriesPoints, entries, labels, chartH);
   React6.useEffect(() => {
     if (!animate) return;
     lineRefs.current.forEach((el) => {
@@ -2449,61 +2534,110 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
         el.style.strokeDashoffset = "0";
       });
     });
-  }, [animate, seriesPoints]);
-  return /* @__PURE__ */ jsxs197("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ jsx307(AxisLabels, { labels, count, chartW, height }),
-    entries.map(([key], di) => {
-      const palette = getPalette(LINE_BAR_PALETTES, di, key);
-      const color = palette[2];
-      const areaColor = palette[0];
-      const points = seriesPoints[di];
-      const gradientId = `curve-gradient-${di}`;
-      const linePath = toSmoothPath(points);
-      const areaPath = linePath + ` L ${points[points.length - 1].x} ${PADDING.top + chartH} L ${points[0].x} ${PADDING.top + chartH} Z`;
-      return /* @__PURE__ */ jsxs197("g", { children: [
-        /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsxs197("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
-          /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
-        ] }) }),
-        /* @__PURE__ */ jsx307(
-          "path",
+    if (curveClipRef.current) {
+      curveClipRef.current.setAttribute("width", "0");
+      requestAnimationFrame(() => {
+        if (curveClipRef.current) {
+          curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
+          curveClipRef.current.setAttribute("width", `${width}`);
+        }
+      });
+    }
+  }, [animate, seriesPoints, width]);
+  const guideX = mouseX != null && mouseX >= PADDING.left && mouseX <= width - PADDING.right ? mouseX : null;
+  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x : null;
+  const curveClipId = "curve-area-clip";
+  return /* @__PURE__ */ jsxs197(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      className: "chart-svg",
+      onMouseMove: (e) => {
+        handleMouseMove(e);
+        onMove(e);
+      },
+      onMouseLeave: () => {
+        handleMouseLeave();
+        onLeave();
+      },
+      children: [
+        animate && /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsx307("clipPath", { id: curveClipId, children: /* @__PURE__ */ jsx307("rect", { ref: curveClipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ jsx307(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ jsx307(AxisLabels, { labels, count, chartW, height }),
+        entries.map(([key], di) => {
+          const palette = getPalette(LINE_BAR_PALETTES, di, key);
+          const color = palette[2];
+          const areaColor = palette[0];
+          const points = seriesPoints[di];
+          const gradientId = `curve-gradient-${di}`;
+          const linePath = toSmoothPath(points);
+          const areaPath = linePath + ` L ${points[points.length - 1].x} ${PADDING.top + chartH} L ${points[0].x} ${PADDING.top + chartH} Z`;
+          return /* @__PURE__ */ jsxs197("g", { children: [
+            /* @__PURE__ */ jsx307("defs", { children: /* @__PURE__ */ jsxs197("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+              /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+            ] }) }),
+            /* @__PURE__ */ jsx307(
+              "path",
+              {
+                d: areaPath,
+                fill: `url(#${gradientId})`,
+                clipPath: animate ? `url(#${curveClipId})` : void 0
+              }
+            ),
+            /* @__PURE__ */ jsx307(
+              "path",
+              {
+                ref: (el) => {
+                  lineRefs.current[di] = el;
+                },
+                d: linePath,
+                fill: "none",
+                stroke: color,
+                strokeWidth: "2"
+              }
+            ),
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx307(
+              "circle",
+              {
+                cx: points[activeIndex].x,
+                cy: points[activeIndex].y,
+                r: "5",
+                fill: color,
+                className: "chart-point-active"
+              }
+            )
+          ] }, di);
+        }),
+        guideX !== null && /* @__PURE__ */ jsx307(
+          "line",
           {
-            d: areaPath,
-            fill: `url(#${gradientId})`,
-            className: "chart-area",
-            style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
+            x1: guideX,
+            y1: PADDING.top,
+            x2: guideX,
+            y2: PADDING.top + chartH,
+            className: "chart-crosshair"
           }
         ),
+        activeIndex !== null && activeX !== null && /* @__PURE__ */ jsx307("foreignObject", { x: activeX - 100, y: 0, width: "200", height: PADDING.top, children: /* @__PURE__ */ jsxs197("div", { className: "chart-crosshair-label", children: [
+          labels[activeIndex],
+          " \u2014 ",
+          tooltipContent
+        ] }) }),
         /* @__PURE__ */ jsx307(
-          "path",
+          "rect",
           {
-            ref: (el) => {
-              lineRefs.current[di] = el;
-            },
-            d: linePath,
-            fill: "none",
-            stroke: color,
-            strokeWidth: "2"
+            x: PADDING.left,
+            y: PADDING.top,
+            width: chartW,
+            height: chartH,
+            fill: "transparent",
+            style: { cursor: "crosshair" }
           }
-        ),
-        showPoints && points.map((p, i) => /* @__PURE__ */ jsx307(
-          "circle",
-          {
-            cx: p.x,
-            cy: p.y,
-            r: "4",
-            fill: color,
-            className: "chart-point",
-            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${p.v}`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          },
-          i
-        ))
-      ] }, di);
-    })
-  ] });
+        )
+      ]
+    }
+  );
 });
 CurveChart.displayName = "CurveChart";
 var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {