@x-plat/design-system 0.5.32 → 0.5.34

package/dist/components/Chart/index.js

@@ -116,45 +116,35 @@ var useChartAnimation = (containerRef, dataKey) => {
       prevDataKey.current = dataKey;
       if (prefersReducedMotion()) return;
       setAnimate(false);
-      requestAnimationFrame(() => setAnimate(true));
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setAnimate(true));
+      });
     }
   }, [dataKey]);
   return animate || prefersReducedMotion();
 };
+var TOOLTIP_OFFSET = 12;
 var useChartTooltip = (enabled) => {
   const [tooltip, setTooltip] = React.useState({
     visible: false,
-    x: 0,
-    y: 0,
+    clientX: 0,
+    clientY: 0,
     content: ""
   });
   const containerRef = React.useRef(null);
   const rafRef = React.useRef(0);
   const move = React.useCallback((e) => {
     if (!enabled) return;
-    const clientX = e.clientX;
-    const clientY = e.clientY;
+    const cx = e.clientX;
+    const cy = e.clientY;
     cancelAnimationFrame(rafRef.current);
     rafRef.current = requestAnimationFrame(() => {
-      const rect = containerRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      setTooltip((prev) => ({
-        ...prev,
-        x: clientX - rect.left,
-        y: clientY - rect.top - 12
-      }));
+      setTooltip((prev) => ({ ...prev, clientX: cx, clientY: cy }));
     });
   }, [enabled]);
   const show = React.useCallback((e, content) => {
     if (!enabled) return;
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    setTooltip({
-      visible: true,
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top - 12,
-      content
-    });
+    setTooltip({ visible: true, clientX: e.clientX, clientY: e.clientY, content });
   }, [enabled]);
   const hide = React.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
@@ -188,14 +178,14 @@ var AxisLabels = React.memo(({ labels, count, chartW, height }) => {
 AxisLabels.displayName = "AxisLabels";
 var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   const [activeIndex, setActiveIndex] = React.useState(null);
-  const [mouseX, setMouseX] = React.useState(null);
   const handleMouseMove = React.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];
+    const step = points.length > 1 ? Math.abs(points[1].x - points[0].x) : 20;
+    const threshold = step / 2;
     let closest = 0;
     let minDist = Math.abs(points[0].x - mx);
     for (let i = 1; i < points.length; i++) {
@@ -205,11 +195,10 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
         closest = i;
       }
     }
-    setActiveIndex(closest);
+    setActiveIndex(minDist <= threshold ? closest : null);
   }, [seriesPoints]);
   const handleMouseLeave = React.useCallback(() => {
     setActiveIndex(null);
-    setMouseX(null);
   }, []);
   const tooltipContent = React.useMemo(() => {
     if (activeIndex === null) return "";
@@ -218,7 +207,13 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
       return p ? `${key}: ${p.v}` : "";
     }).filter(Boolean).join(" / ");
   }, [activeIndex, entries, seriesPoints]);
-  return { activeIndex, mouseX, handleMouseMove, handleMouseLeave, tooltipContent };
+  const getTooltipAt = React.useCallback((idx) => {
+    return entries.map(([key], di) => {
+      const p = seriesPoints[di]?.[idx];
+      return p ? `${key}: ${p.v}` : "";
+    }).filter(Boolean).join(" / ");
+  }, [entries, seriesPoints]);
+  return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
 var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = React.useMemo(() => Object.entries(data), [data]);
@@ -239,33 +234,19 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const lineRefs = React.useRef([]);
   const clipRef = React.useRef(null);
-  const { activeIndex, mouseX, handleMouseMove, handleMouseLeave, tooltipContent } = useCrosshair(seriesPoints, entries, labels, chartH);
+  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React.useEffect(() => {
-    if (!animate) return;
-    lineRefs.current.forEach((el) => {
-      if (!el) return;
-      const len = el.getTotalLength();
-      el.style.strokeDasharray = `${len}`;
-      el.style.strokeDashoffset = `${len}`;
-      requestAnimationFrame(() => {
-        el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
-        el.style.strokeDashoffset = "0";
-      });
+    if (!animate || !clipRef.current) return;
+    clipRef.current.setAttribute("width", "0");
+    requestAnimationFrame(() => {
+      if (clipRef.current) {
+        clipRef.current.style.transition = "width 1200ms ease-out 200ms";
+        clipRef.current.setAttribute("width", `${width}`);
+      }
     });
-    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;
+  }, [animate, width]);
+  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
   const lineClipId = "line-area-clip";
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -274,7 +255,26 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
-        onMove(e);
+        const svg = e.currentTarget;
+        const rect = svg.getBoundingClientRect();
+        const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
+        const points = seriesPoints[0];
+        if (!points || points.length === 0) return;
+        const step = points.length > 1 ? Math.abs(points[1].x - points[0].x) : 20;
+        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;
+          }
+        }
+        if (minDist <= step / 2) {
+          onHover(e, `${labels[closest]} \u2014 ${getTooltipAt(closest)}`);
+        } else {
+          onLeave();
+        }
       },
       onMouseLeave: () => {
         handleMouseLeave();
@@ -297,26 +297,10 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
               /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
               /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
             ] }) }),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: areaD,
-                fill: `url(#${gradientId})`,
-                clipPath: animate ? `url(#${lineClipId})` : void 0
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "polyline",
-              {
-                ref: (el) => {
-                  lineRefs.current[di] = el;
-                },
-                points: polyPoints,
-                fill: "none",
-                stroke: color,
-                strokeWidth: "2"
-              }
-            ),
+            /* @__PURE__ */ jsxs("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
+              /* @__PURE__ */ jsx("path", { d: areaD, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ jsx("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
+            ] }),
             activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx(
               "circle",
               {
@@ -329,21 +313,16 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
             )
           ] }, di);
         }),
-        guideX !== null && /* @__PURE__ */ jsx(
+        activeX !== null && /* @__PURE__ */ jsx(
           "line",
           {
-            x1: guideX,
+            x1: activeX,
             y1: PADDING.top,
-            x2: guideX,
+            x2: activeX,
             y2: PADDING.top + chartH,
             className: "chart-crosshair"
           }
         ),
-        activeIndex !== null && activeX !== null && /* @__PURE__ */ jsx("foreignObject", { x: activeX - 100, y: 0, width: "200", height: PADDING.top, children: /* @__PURE__ */ jsxs("div", { className: "chart-crosshair-label", children: [
-          labels[activeIndex],
-          " \u2014 ",
-          tooltipContent
-        ] }) }),
         /* @__PURE__ */ jsx(
           "rect",
           {
@@ -379,33 +358,19 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const lineRefs = React.useRef([]);
   const curveClipRef = React.useRef(null);
-  const { activeIndex, mouseX, handleMouseMove, handleMouseLeave, tooltipContent } = useCrosshair(seriesPoints, entries, labels, chartH);
+  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   React.useEffect(() => {
-    if (!animate) return;
-    lineRefs.current.forEach((el) => {
-      if (!el) return;
-      const len = el.getTotalLength();
-      el.style.strokeDasharray = `${len}`;
-      el.style.strokeDashoffset = `${len}`;
-      requestAnimationFrame(() => {
-        el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
-        el.style.strokeDashoffset = "0";
-      });
+    if (!animate || !curveClipRef.current) return;
+    curveClipRef.current.setAttribute("width", "0");
+    requestAnimationFrame(() => {
+      if (curveClipRef.current) {
+        curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
+        curveClipRef.current.setAttribute("width", `${width}`);
+      }
     });
-    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;
+  }, [animate, width]);
+  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
   const curveClipId = "curve-area-clip";
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -414,7 +379,26 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
       className: "chart-svg",
       onMouseMove: (e) => {
         handleMouseMove(e);
-        onMove(e);
+        const svg = e.currentTarget;
+        const rect = svg.getBoundingClientRect();
+        const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
+        const points = seriesPoints[0];
+        if (!points || points.length === 0) return;
+        const step = points.length > 1 ? Math.abs(points[1].x - points[0].x) : 20;
+        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;
+          }
+        }
+        if (minDist <= step / 2) {
+          onHover(e, `${labels[closest]} \u2014 ${getTooltipAt(closest)}`);
+        } else {
+          onLeave();
+        }
       },
       onMouseLeave: () => {
         handleMouseLeave();
@@ -437,26 +421,10 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
               /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
               /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
             ] }) }),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: areaPath,
-                fill: `url(#${gradientId})`,
-                clipPath: animate ? `url(#${curveClipId})` : void 0
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                ref: (el) => {
-                  lineRefs.current[di] = el;
-                },
-                d: linePath,
-                fill: "none",
-                stroke: color,
-                strokeWidth: "2"
-              }
-            ),
+            /* @__PURE__ */ jsxs("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
+              /* @__PURE__ */ jsx("path", { d: areaPath, fill: `url(#${gradientId})` }),
+              /* @__PURE__ */ jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
+            ] }),
             activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx(
               "circle",
               {
@@ -469,21 +437,16 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
             )
           ] }, di);
         }),
-        guideX !== null && /* @__PURE__ */ jsx(
+        activeX !== null && /* @__PURE__ */ jsx(
           "line",
           {
-            x1: guideX,
+            x1: activeX,
             y1: PADDING.top,
-            x2: guideX,
+            x2: activeX,
             y2: PADDING.top + chartH,
             className: "chart-crosshair"
           }
         ),
-        activeIndex !== null && activeX !== null && /* @__PURE__ */ jsx("foreignObject", { x: activeX - 100, y: 0, width: "200", height: PADDING.top, children: /* @__PURE__ */ jsxs("div", { className: "chart-crosshair-label", children: [
-          labels[activeIndex],
-          " \u2014 ",
-          tooltipContent
-        ] }) }),
         /* @__PURE__ */ jsx(
           "rect",
           {
@@ -662,30 +625,70 @@ var PieDonutChart = React.memo(
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
-var TooltipBubble = ({ x, y, containerWidth, children }) => {
+var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
   const ref = React.useRef(null);
-  const [adjustedX, setAdjustedX] = React.useState(x);
-  React.useEffect(() => {
+  const [pos, setPos] = React.useState({ left: 0, top: 0 });
+  React.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     const w = el.offsetWidth;
-    const half = w / 2;
-    const margin = 8;
-    let nx = x;
-    if (x - half < margin) nx = half + margin;
-    else if (x + half > containerWidth - margin) nx = containerWidth - half - margin;
-    setAdjustedX(nx);
-  }, [x, containerWidth]);
+    const h = el.offsetHeight;
+    const vw = window.innerWidth;
+    let left = clientX + TOOLTIP_OFFSET;
+    let top = clientY - h - TOOLTIP_OFFSET;
+    if (left + w > vw - 8) left = clientX - w - TOOLTIP_OFFSET;
+    if (top < 8) top = clientY + TOOLTIP_OFFSET;
+    if (left < 8) left = 8;
+    setPos({ left, top });
+  }, [clientX, clientY]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: "chart-tooltip",
-      style: { left: adjustedX, top: y },
+      className: `chart-tooltip ${visible ? "chart-tooltip-show" : "chart-tooltip-hide"}`,
+      style: { position: "fixed", left: pos.left, top: pos.top, zIndex: 1100 },
       children
     }
   );
 };
+var ChartLegend = ({ data, labels, type }) => {
+  const entries = Object.entries(data);
+  if (type === "pie" || type === "doughnut") {
+    const values = entries.flatMap(([, v]) => v);
+    const total = values.reduce((a, b) => a + b, 0) || 1;
+    const firstKey = entries[0]?.[0] ?? "";
+    const colorOffset = hashString(firstKey);
+    return /* @__PURE__ */ jsx("div", { className: "chart-legend", children: values.map((v, i) => {
+      const pct = Math.round(v / total * 100);
+      const color = PIE_COLORS[(i + colorOffset) % PIE_COLORS.length];
+      return /* @__PURE__ */ jsxs("div", { className: "chart-legend-item", children: [
+        /* @__PURE__ */ jsx("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+        /* @__PURE__ */ jsxs("div", { className: "chart-legend-text", children: [
+          /* @__PURE__ */ jsx("span", { className: "chart-legend-label", children: labels[i] || `${i + 1}` }),
+          /* @__PURE__ */ jsxs("span", { className: "chart-legend-value", children: [
+            v.toLocaleString(),
+            "(",
+            pct,
+            "%)"
+          ] })
+        ] })
+      ] }, i);
+    }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "chart-legend", children: entries.map(([key], di) => {
+    const palette = getPalette(LINE_BAR_PALETTES, di, key);
+    const color = palette[2];
+    const values = entries[di][1];
+    const sum = values.reduce((a, b) => a + b, 0);
+    return /* @__PURE__ */ jsxs("div", { className: "chart-legend-item", children: [
+      /* @__PURE__ */ jsx("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+      /* @__PURE__ */ jsxs("div", { className: "chart-legend-text", children: [
+        /* @__PURE__ */ jsx("span", { className: "chart-legend-label", children: key }),
+        /* @__PURE__ */ jsx("span", { className: "chart-legend-value", children: sum.toLocaleString() })
+      ] })
+    ] }, di);
+  }) });
+};
 var Chart = React.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
@@ -701,7 +704,8 @@ var Chart = React.memo((props) => {
     ready && type === "bar" && /* @__PURE__ */ jsx(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
     ready && type === "pie" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
     ready && type === "doughnut" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    tooltip.visible && /* @__PURE__ */ jsx(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
+    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    tooltip.content && /* @__PURE__ */ jsx(ChartTooltipPortal, { clientX: tooltip.clientX, clientY: tooltip.clientY, visible: tooltip.visible, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";