@x-plat/design-system 0.5.34 → 0.5.36

package/dist/index.cjs

@@ -6756,8 +6756,8 @@ var TOOLTIP_OFFSET = 12;
 var useChartTooltip = (enabled) => {
   const [tooltip, setTooltip] = import_react6.default.useState({
     visible: false,
-    clientX: 0,
-    clientY: 0,
+    x: 0,
+    y: 0,
     content: ""
   });
   const containerRef = import_react6.default.useRef(null);
@@ -6768,18 +6768,26 @@ var useChartTooltip = (enabled) => {
     const cy = e.clientY;
     cancelAnimationFrame(rafRef.current);
     rafRef.current = requestAnimationFrame(() => {
-      setTooltip((prev) => ({ ...prev, clientX: cx, clientY: cy }));
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setTooltip((prev) => ({ ...prev, x: cx - rect.left, y: cy - rect.top }));
     });
   }, [enabled]);
   const show = import_react6.default.useCallback((e, content) => {
     if (!enabled) return;
-    setTooltip({ visible: true, clientX: e.clientX, clientY: e.clientY, content });
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
+  }, [enabled]);
+  const showAt = import_react6.default.useCallback((x, y, content) => {
+    if (!enabled) return;
+    setTooltip({ visible: true, x, y, content });
   }, [enabled]);
   const hide = import_react6.default.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
-  return { tooltip, show, hide, move, containerRef };
+  return { tooltip, show, showAt, hide, move, containerRef };
 };
 var GridLines = import_react6.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_jsx_runtime307.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
@@ -6844,7 +6852,7 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   }, [entries, seriesPoints]);
   return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
-var LineChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+var LineChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -6884,23 +6892,9 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
       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)}`);
+        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
+          const p = seriesPoints[0][activeIndex];
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -6968,7 +6962,7 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
   );
 });
 LineChart.displayName = "LineChart";
-var CurveChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+var CurveChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -7008,23 +7002,9 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
       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)}`);
+        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
+          const p = seriesPoints[0][activeIndex];
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -7092,7 +7072,7 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
   );
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+var BarChart = import_react6.default.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = import_react6.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react6.default.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -7142,8 +7122,7 @@ var BarChart = import_react6.default.memo(({ data, labels, width, height, animat
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
-            onMouseMove: onMove,
+            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`),
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -7231,30 +7210,14 @@ var PieDonutChart = import_react6.default.memo(
         {
           d: s.d,
           fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-          className: "chart-slice",
-          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-          onMouseMove: onMove,
-          onMouseLeave: onLeave
+          className: "chart-slice"
         }
-      ) }, i)) }),
-      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
-        "text",
-        {
-          x: s.lx,
-          y: s.ly,
-          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
-          textAnchor: "middle",
-          dominantBaseline: "central",
-          children: s.v
-        },
-        `label-${i}`
-      ))
+      ) }, i)) })
     ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
-var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
+var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
   const ref = import_react6.default.useRef(null);
   const [pos, setPos] = import_react6.default.useState({ left: 0, top: 0 });
   import_react6.default.useLayoutEffect(() => {
@@ -7262,20 +7225,19 @@ var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
     if (!el) return;
     const w = el.offsetWidth;
     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;
+    let left = x + TOOLTIP_OFFSET;
+    let top = y - h - TOOLTIP_OFFSET;
+    if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
+    if (top < 0) top = y + TOOLTIP_OFFSET;
+    if (left < 0) left = 0;
     setPos({ left, top });
-  }, [clientX, clientY]);
+  }, [x, y, containerWidth, containerHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
     "div",
     {
       ref,
-      className: `chart-tooltip ${visible ? "chart-tooltip-show" : "chart-tooltip-hide"}`,
-      style: { position: "fixed", left: pos.left, top: pos.top, zIndex: 1100 },
+      className: "chart-tooltip chart-tooltip-show",
+      style: { left: pos.left, top: pos.top },
       children
     }
   );
@@ -7320,7 +7282,7 @@ var ChartLegend = ({ data, labels, type }) => {
 };
 var Chart = import_react6.default.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
-  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
+  const { tooltip, show, showAt, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
   const stableData = import_react6.default.useMemo(() => data, [JSON.stringify(data)]);
   const stableLabels = import_react6.default.useMemo(() => labels, [JSON.stringify(labels)]);
@@ -7328,13 +7290,13 @@ var Chart = import_react6.default.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartLegend, { data: stableData, labels: stableLabels, type }),
-    tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartTooltipPortal, { clientX: tooltip.clientX, clientY: tooltip.clientY, visible: tooltip.visible, children: tooltip.content })
+    tooltip.visible && tooltip.content && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";

package/dist/index.css

@@ -1929,11 +1929,14 @@
   width: 100%;
   height: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 .lib-xplat-chart .chart-svg {
   display: block;
   width: 100%;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   will-change: transform;
   contain: layout style paint;
 }
@@ -2017,7 +2020,19 @@
   white-space: nowrap;
   overflow: visible;
 }
+.lib-xplat-chart .chart-bar-animate {
+  animation: chart-bar-grow 800ms ease-out both;
+}
+.lib-xplat-chart .chart-pie-label-animate {
+  opacity: 0;
+  animation: chart-fade-in 150ms ease-out both;
+}
+.lib-xplat-chart .chart-area[style*=animationDelay] {
+  animation: chart-fade-in 800ms ease-out both;
+}
 .lib-xplat-chart .chart-tooltip {
+  position: absolute;
+  z-index: 10;
   padding: var(--spacing-space-3);
   background-color: var(--semantic-surface-neutral-strong);
   color: var(--semantic-text-inverse);
@@ -2028,25 +2043,8 @@
   max-width: 240px;
   pointer-events: none;
   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;
-}
-.lib-xplat-chart .chart-pie-label-animate {
-  opacity: 0;
-  animation: chart-fade-in 150ms ease-out both;
-}
-.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;
@@ -2103,14 +2101,6 @@
     opacity: 1;
   }
 }
-@keyframes chart-tooltip-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
 @media (prefers-reduced-motion: reduce) {
   .lib-xplat-chart .chart-bar-animate,
   .lib-xplat-chart .chart-pie-label-animate,

package/dist/index.js

@@ -6357,8 +6357,8 @@ var TOOLTIP_OFFSET = 12;
 var useChartTooltip = (enabled) => {
   const [tooltip, setTooltip] = React6.useState({
     visible: false,
-    clientX: 0,
-    clientY: 0,
+    x: 0,
+    y: 0,
     content: ""
   });
   const containerRef = React6.useRef(null);
@@ -6369,18 +6369,26 @@ var useChartTooltip = (enabled) => {
     const cy = e.clientY;
     cancelAnimationFrame(rafRef.current);
     rafRef.current = requestAnimationFrame(() => {
-      setTooltip((prev) => ({ ...prev, clientX: cx, clientY: cy }));
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setTooltip((prev) => ({ ...prev, x: cx - rect.left, y: cy - rect.top }));
     });
   }, [enabled]);
   const show = React6.useCallback((e, content) => {
     if (!enabled) return;
-    setTooltip({ visible: true, clientX: e.clientX, clientY: e.clientY, content });
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setTooltip({ visible: true, x: e.clientX - rect.left, y: e.clientY - rect.top, content });
+  }, [enabled]);
+  const showAt = React6.useCallback((x, y, content) => {
+    if (!enabled) return;
+    setTooltip({ visible: true, x, y, content });
   }, [enabled]);
   const hide = React6.useCallback(() => {
     cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
-  return { tooltip, show, hide, move, containerRef };
+  return { tooltip, show, showAt, hide, move, containerRef };
 };
 var GridLines = React6.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx307(Fragment2, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
@@ -6445,7 +6453,7 @@ var useCrosshair = (seriesPoints, entries, labels, chartH) => {
   }, [entries, seriesPoints]);
   return { activeIndex, handleMouseMove, handleMouseLeave, tooltipContent, getTooltipAt };
 };
-var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = React6.useMemo(() => Object.entries(data), [data]);
   const maxVal = React6.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -6485,23 +6493,9 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
       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)}`);
+        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
+          const p = seriesPoints[0][activeIndex];
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -6569,7 +6563,7 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
   );
 });
 LineChart.displayName = "LineChart";
-var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = React6.useMemo(() => Object.entries(data), [data]);
   const maxVal = React6.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -6609,23 +6603,9 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
       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)}`);
+        if (activeIndex !== null && seriesPoints[0]?.[activeIndex]) {
+          const p = seriesPoints[0][activeIndex];
+          onShowAt(p.x, p.y, `${labels[activeIndex]} \u2014 ${getTooltipAt(activeIndex)}`);
         } else {
           onLeave();
         }
@@ -6693,7 +6673,7 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
   );
 });
 CurveChart.displayName = "CurveChart";
-var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onMove, onLeave }) => {
+var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onShowAt, onMove, onLeave }) => {
   const entries = React6.useMemo(() => Object.entries(data), [data]);
   const maxVal = React6.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -6743,8 +6723,7 @@ var BarChart = React6.memo(({ data, labels, width, height, animate, onHover, onM
               transformOrigin: `${b.x + b.w / 2}px ${baseline}px`,
               animationDelay: `${delay}ms`
             } : void 0,
-            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
-            onMouseMove: onMove,
+            onMouseEnter: () => onShowAt(b.x + b.w / 2, b.y, `${key}: ${labels[i]} \u2014 ${b.v}`),
             onMouseLeave: onLeave
           },
           `${di}-${i}`
@@ -6832,30 +6811,14 @@ var PieDonutChart = React6.memo(
         {
           d: s.d,
           fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-          className: "chart-slice",
-          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-          onMouseMove: onMove,
-          onMouseLeave: onLeave
+          className: "chart-slice"
         }
-      ) }, i)) }),
-      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ jsx307(
-        "text",
-        {
-          x: s.lx,
-          y: s.ly,
-          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
-          textAnchor: "middle",
-          dominantBaseline: "central",
-          children: s.v
-        },
-        `label-${i}`
-      ))
+      ) }, i)) })
     ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
-var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
+var ChartTooltip = ({ x, y, containerWidth, containerHeight, children }) => {
   const ref = React6.useRef(null);
   const [pos, setPos] = React6.useState({ left: 0, top: 0 });
   React6.useLayoutEffect(() => {
@@ -6863,20 +6826,19 @@ var ChartTooltipPortal = ({ clientX, clientY, visible, children }) => {
     if (!el) return;
     const w = el.offsetWidth;
     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;
+    let left = x + TOOLTIP_OFFSET;
+    let top = y - h - TOOLTIP_OFFSET;
+    if (left + w > containerWidth) left = x - w - TOOLTIP_OFFSET;
+    if (top < 0) top = y + TOOLTIP_OFFSET;
+    if (left < 0) left = 0;
     setPos({ left, top });
-  }, [clientX, clientY]);
+  }, [x, y, containerWidth, containerHeight]);
   return /* @__PURE__ */ jsx307(
     "div",
     {
       ref,
-      className: `chart-tooltip ${visible ? "chart-tooltip-show" : "chart-tooltip-hide"}`,
-      style: { position: "fixed", left: pos.left, top: pos.top, zIndex: 1100 },
+      className: "chart-tooltip chart-tooltip-show",
+      style: { left: pos.left, top: pos.top },
       children
     }
   );
@@ -6921,7 +6883,7 @@ var ChartLegend = ({ data, labels, type }) => {
 };
 var Chart = React6.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
-  const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
+  const { tooltip, show, showAt, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
   const stableData = React6.useMemo(() => data, [JSON.stringify(data)]);
   const stableLabels = React6.useMemo(() => labels, [JSON.stringify(labels)]);
@@ -6929,13 +6891,13 @@ var Chart = React6.memo((props) => {
   const animate = useChartAnimation(containerRef, dataKey);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ jsxs197("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx307(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx307(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx307(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ jsx307(LineChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ jsx307(CurveChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ jsx307(BarChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ jsx307(PieDonutChart, { data: stableData, labels: stableLabels, width, height, animate, isDoughnut: true, onHover: show, onShowAt: showAt, onMove: move, onLeave: hide }),
     ready && (type === "bar" || type === "pie" || type === "doughnut") && /* @__PURE__ */ jsx307(ChartLegend, { data: stableData, labels: stableLabels, type }),
-    tooltip.content && /* @__PURE__ */ jsx307(ChartTooltipPortal, { clientX: tooltip.clientX, clientY: tooltip.clientY, visible: tooltip.visible, children: tooltip.content })
+    tooltip.visible && tooltip.content && /* @__PURE__ */ jsx307(ChartTooltip, { x: tooltip.x, y: tooltip.y, containerWidth: width, containerHeight: height, children: tooltip.content })
   ] });
 });
 Chart.displayName = "Chart";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.5.34",
+  "version": "0.5.36",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",