@x-plat/design-system 0.5.31 → 0.5.33

package/dist/components/Chart/index.cjs

@@ -157,40 +157,28 @@ var useChartAnimation = (containerRef, dataKey) => {
   }, [dataKey]);
   return animate || prefersReducedMotion();
 };
+var TOOLTIP_OFFSET = 12;
 var useChartTooltip = (enabled) => {
   const [tooltip, setTooltip] = import_react.default.useState({
     visible: false,
-    x: 0,
-    y: 0,
+    clientX: 0,
+    clientY: 0,
     content: ""
   });
   const containerRef = import_react.default.useRef(null);
   const rafRef = import_react.default.useRef(0);
   const move = import_react.default.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 = import_react.default.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 = import_react.default.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
@@ -222,6 +210,45 @@ var AxisLabels = import_react.default.memo(({ labels, count, chartW, height }) =
   }) });
 });
 AxisLabels.displayName = "AxisLabels";
+var useCrosshair = (seriesPoints, entries, labels, chartH) => {
+  const [activeIndex, setActiveIndex] = import_react.default.useState(null);
+  const handleMouseMove = import_react.default.useCallback((e) => {
+    const svg = e.currentTarget;
+    const rect = svg.getBoundingClientRect();
+    const mx = (e.clientX - rect.left) / rect.width * svg.viewBox.baseVal.width;
+    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++) {
+      const dist = Math.abs(points[i].x - mx);
+      if (dist < minDist) {
+        minDist = dist;
+        closest = i;
+      }
+    }
+    setActiveIndex(minDist <= threshold ? closest : null);
+  }, [seriesPoints]);
+  const handleMouseLeave = import_react.default.useCallback(() => {
+    setActiveIndex(null);
+  }, []);
+  const tooltipContent = import_react.default.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]);
+  const getTooltipAt = import_react.default.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 = import_react.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
   const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react.default.useMemo(() => {
@@ -241,8 +268,9 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const showPoints = count <= 100;
   const lineRefs = import_react.default.useRef([]);
+  const clipRef = import_react.default.useRef(null);
+  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   import_react.default.useEffect(() => {
     if (!animate) return;
     lineRefs.current.forEach((el) => {
@@ -255,61 +283,123 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
         el.style.strokeDashoffset = "0";
       });
     });
-  }, [animate, seriesPoints]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(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__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "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 activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
+  const lineClipId = "line-area-clip";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      className: "chart-svg",
+      onMouseMove: (e) => {
+        handleMouseMove(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();
+        onLeave();
+      },
+      children: [
+        animate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: lineClipId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { ref: clipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(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__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                d: areaD,
+                fill: `url(#${gradientId})`,
+                clipPath: animate ? `url(#${lineClipId})` : void 0
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "polyline",
+              {
+                ref: (el) => {
+                  lineRefs.current[di] = el;
+                },
+                points: polyPoints,
+                fill: "none",
+                stroke: color,
+                strokeWidth: "2"
+              }
+            ),
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "circle",
+              {
+                cx: points[activeIndex].x,
+                cy: points[activeIndex].y,
+                r: "5",
+                fill: color,
+                className: "chart-point-active"
+              }
+            )
+          ] }, di);
+        }),
+        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "line",
           {
-            d: areaD,
-            fill: `url(#${gradientId})`,
-            className: "chart-area",
-            style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
+            x1: activeX,
+            y1: PADDING.top,
+            x2: activeX,
+            y2: PADDING.top + chartH,
+            className: "chart-crosshair"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "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__ */ (0, import_jsx_runtime.jsx)(
-          "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 = import_react.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
@@ -331,8 +421,9 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  const showPoints = count <= 100;
   const lineRefs = import_react.default.useRef([]);
+  const curveClipRef = import_react.default.useRef(null);
+  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
   import_react.default.useEffect(() => {
     if (!animate) return;
     lineRefs.current.forEach((el) => {
@@ -345,61 +436,123 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
         el.style.strokeDashoffset = "0";
       });
     });
-  }, [animate, seriesPoints]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridLines, { width, height, chartH, maxVal }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(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__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "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 activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
+  const curveClipId = "curve-area-clip";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      className: "chart-svg",
+      onMouseMove: (e) => {
+        handleMouseMove(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();
+        onLeave();
+      },
+      children: [
+        animate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: curveClipId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { ref: curveClipRef, x: "0", y: "0", width: animate ? 0 : width, height }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridLines, { width, height, chartH, maxVal }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(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__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                d: areaPath,
+                fill: `url(#${gradientId})`,
+                clipPath: animate ? `url(#${curveClipId})` : void 0
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                ref: (el) => {
+                  lineRefs.current[di] = el;
+                },
+                d: linePath,
+                fill: "none",
+                stroke: color,
+                strokeWidth: "2"
+              }
+            ),
+            activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "circle",
+              {
+                cx: points[activeIndex].x,
+                cy: points[activeIndex].y,
+                r: "5",
+                fill: color,
+                className: "chart-point-active"
+              }
+            )
+          ] }, di);
+        }),
+        activeX !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "line",
           {
-            d: areaPath,
-            fill: `url(#${gradientId})`,
-            className: "chart-area",
-            style: animate ? { animationDelay: "600ms" } : { opacity: 1 }
+            x1: activeX,
+            y1: PADDING.top,
+            x2: activeX,
+            y2: PADDING.top + chartH,
+            className: "chart-crosshair"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "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__ */ (0, import_jsx_runtime.jsx)(
-          "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 = import_react.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
@@ -564,30 +717,70 @@ var PieDonutChart = import_react.default.memo(
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
-var TooltipBubble = ({ x, y, containerWidth, children }) => {
+var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
   const ref = import_react.default.useRef(null);
-  const [adjustedX, setAdjustedX] = import_react.default.useState(x);
-  import_react.default.useEffect(() => {
+  const [pos, setPos] = import_react.default.useState({ left: 0, top: 0 });
+  import_react.default.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "chart-legend-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "chart-legend-text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "chart-legend-label", children: labels[i] || `${i + 1}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "chart-legend-value", children: [
+            v.toLocaleString(),
+            "(",
+            pct,
+            "%)"
+          ] })
+        ] })
+      ] }, i);
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "chart-legend-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "chart-legend-dot", style: { backgroundColor: color } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "chart-legend-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "chart-legend-label", children: key }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "chart-legend-value", children: sum.toLocaleString() })
+      ] })
+    ] }, di);
+  }) });
+};
 var Chart = import_react.default.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
@@ -603,7 +796,8 @@ var Chart = import_react.default.memo((props) => {
     ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
     ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
     ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
+    ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
+    tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltipPortal, { clientX: tooltip.clientX, clientY: tooltip.clientY, visible: tooltip.visible, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";

package/dist/components/Chart/index.css

@@ -74,19 +74,43 @@
 .lib-xplat-chart .chart-area {
   opacity: 1;
 }
+.lib-xplat-chart .chart-crosshair {
+  stroke: var(--semantic-border-strong);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+  pointer-events: none;
+}
+.lib-xplat-chart .chart-point-active {
+  pointer-events: none;
+  transition: cx 0.05s, cy 0.05s;
+}
+.lib-xplat-chart .chart-crosshair-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--semantic-text-strong);
+  text-align: center;
+  white-space: nowrap;
+  overflow: visible;
+}
 .lib-xplat-chart .chart-tooltip {
-  position: absolute;
-  transform: translate(-50%, -100%);
-  padding: var(--spacing-space-2) var(--spacing-space-3);
+  padding: var(--spacing-space-3);
   background-color: var(--semantic-surface-neutral-strong);
   color: var(--semantic-text-inverse);
   font-size: 12px;
+  line-height: 18px;
   font-weight: 500;
   border-radius: var(--spacing-radius-md);
-  white-space: nowrap;
+  max-width: 240px;
   pointer-events: none;
-  z-index: 10;
-  animation: chart-tooltip-in 150ms ease-out;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.lib-xplat-chart .chart-tooltip.chart-tooltip-show {
+  opacity: 1;
+  animation: chart-tooltip-in 120ms ease-out;
+}
+.lib-xplat-chart .chart-tooltip.chart-tooltip-hide {
+  opacity: 0;
+  animation: chart-tooltip-out 80ms ease-in;
 }
 .lib-xplat-chart .chart-bar-animate {
   animation: chart-bar-grow 800ms ease-out both;
@@ -98,6 +122,38 @@
 .lib-xplat-chart .chart-area[style*=animationDelay] {
   animation: chart-fade-in 800ms ease-out both;
 }
+.lib-xplat-chart .chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--spacing-space-4);
+  padding: var(--spacing-space-3) 0;
+}
+.lib-xplat-chart .chart-legend-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-chart .chart-legend-dot {
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-top: 3px;
+}
+.lib-xplat-chart .chart-legend-text {
+  display: flex;
+  flex-direction: column;
+}
+.lib-xplat-chart .chart-legend-label {
+  font-size: 12px;
+  color: var(--semantic-text-muted);
+}
+.lib-xplat-chart .chart-legend-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--semantic-text-strong);
+}
 @keyframes chart-bar-grow {
   from {
     transform: scaleY(0);
@@ -117,11 +173,17 @@
 @keyframes chart-tooltip-in {
   from {
     opacity: 0;
-    transform: translate(-50%, -90%);
   }
   to {
     opacity: 1;
-    transform: translate(-50%, -100%);
+  }
+}
+@keyframes chart-tooltip-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
   }
 }
 @media (prefers-reduced-motion: reduce) {