@x-plat/design-system 0.5.11 → 0.5.13

package/dist/components/Chart/index.cjs

@@ -85,14 +85,23 @@ var useChartSize = (ref) => {
   import_react.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
+    let rafId = 0;
     const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
-      const { width, height } = entry.contentRect;
-      setSize({ width: Math.floor(width), height: Math.floor(height) });
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const entry = entries[0];
+        if (!entry) return;
+        const { width, height } = entry.contentRect;
+        const w = Math.floor(width);
+        const h = Math.floor(height);
+        setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
+      });
     });
     observer.observe(el);
-    return () => observer.disconnect();
+    return () => {
+      cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
   }, [ref]);
   return size;
 };
@@ -104,15 +113,21 @@ var useChartTooltip = (enabled) => {
     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 rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    setTooltip((prev) => ({
-      ...prev,
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top - 12
-    }));
+    const clientX = e.clientX;
+    const clientY = 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
+      }));
+    });
   }, [enabled]);
   const show = import_react.default.useCallback((e, content) => {
     if (!enabled) return;
@@ -126,10 +141,35 @@ var useChartTooltip = (enabled) => {
     });
   }, [enabled]);
   const hide = import_react.default.useCallback(() => {
+    cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
+var GridLines = import_react.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+  const y = PADDING.top + (1 - ratio) * chartH;
+  const val = Math.round(maxVal * ratio);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+  ] }, ratio);
+}) }));
+GridLines.displayName = "GridLines";
+var getLabelStep = (count, chartW) => {
+  const minLabelWidth = 40;
+  const maxLabels = Math.floor(chartW / minLabelWidth);
+  if (count <= maxLabels) return 1;
+  return Math.ceil(count / maxLabels);
+};
+var AxisLabels = import_react.default.memo(({ labels, count, chartW, height }) => {
+  const step = getLabelStep(count, chartW);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: labels.map((label, i) => {
+    if (i % step !== 0) return null;
+    const x = PADDING.left + i / (count - 1 || 1) * chartW;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+  }) });
+});
+AxisLabels.displayName = "AxisLabels";
 var LineChart = import_react.default.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
   const entries = import_react.default.useMemo(() => Object.entries(data), [data]);
   const maxVal = import_react.default.useMemo(() => {
@@ -149,19 +189,10 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, onHove
     ),
     [entries, count, chartW, chartH, maxVal]
   );
+  const showPoints = count <= 100;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * chartH;
-      const val = Math.round(maxVal * ratio);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
-      ] }, ratio);
-    }),
-    labels.map((label, i) => {
-      const x = PADDING.left + i / (count - 1 || 1) * chartW;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
-    }),
+    /* @__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];
@@ -176,7 +207,7 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, onHove
             strokeWidth: "2"
           }
         ),
-        points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "circle",
           {
             cx: p.x,
@@ -214,19 +245,10 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, onHov
     ),
     [entries, count, chartW, chartH, maxVal]
   );
+  const showPoints = count <= 100;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * chartH;
-      const val = Math.round(maxVal * ratio);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
-      ] }, ratio);
-    }),
-    labels.map((label, i) => {
-      const x = PADDING.left + i / (count - 1 || 1) * chartW;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
-    }),
+    /* @__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];
@@ -242,7 +264,7 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, onHov
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" }),
-        points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        showPoints && points.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "circle",
           {
             cx: p.x,
@@ -272,11 +294,11 @@ var BarChart = import_react.default.memo(({ data, labels, width, height, onHover
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
   const groupW = chartW / count;
-  const barW = Math.min(32, groupW * 0.7 / groupCount);
+  const barW = Math.max(1, Math.min(32, groupW * 0.7 / groupCount));
   const bars = import_react.default.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
-        const h = v / maxVal * chartH;
+        const h = Math.max(0, v / maxVal * chartH);
         const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
         const y = PADDING.top + chartH - h;
         return { x, y, w: barW, h, v };
@@ -284,16 +306,13 @@ var BarChart = import_react.default.memo(({ data, labels, width, height, onHover
     ),
     [entries, maxVal, chartH, groupW, barW, groupCount]
   );
+  const barLabelStep = getLabelStep(count, chartW);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * chartH;
-      const val = Math.round(maxVal * ratio);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
-      ] }, ratio);
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridLines, { width, height, chartH, maxVal }),
+    labels.map((label, i) => {
+      if (i % barLabelStep !== 0) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
-    labels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];

package/dist/components/Chart/index.js

@@ -1,6 +1,6 @@
 // src/components/Chart/Chart.tsx
 import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var CATEGORICAL_COUNT = 8;
 var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT }, (_, i) => {
   const n = i + 1;
@@ -49,14 +49,23 @@ var useChartSize = (ref) => {
   React.useEffect(() => {
     const el = ref.current;
     if (!el) return;
+    let rafId = 0;
     const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
-      const { width, height } = entry.contentRect;
-      setSize({ width: Math.floor(width), height: Math.floor(height) });
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const entry = entries[0];
+        if (!entry) return;
+        const { width, height } = entry.contentRect;
+        const w = Math.floor(width);
+        const h = Math.floor(height);
+        setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
+      });
     });
     observer.observe(el);
-    return () => observer.disconnect();
+    return () => {
+      cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
   }, [ref]);
   return size;
 };
@@ -68,15 +77,21 @@ var useChartTooltip = (enabled) => {
     content: ""
   });
   const containerRef = React.useRef(null);
+  const rafRef = React.useRef(0);
   const move = React.useCallback((e) => {
     if (!enabled) return;
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    setTooltip((prev) => ({
-      ...prev,
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top - 12
-    }));
+    const clientX = e.clientX;
+    const clientY = 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
+      }));
+    });
   }, [enabled]);
   const show = React.useCallback((e, content) => {
     if (!enabled) return;
@@ -90,10 +105,35 @@ var useChartTooltip = (enabled) => {
     });
   }, [enabled]);
   const hide = React.useCallback(() => {
+    cancelAnimationFrame(rafRef.current);
     setTooltip((prev) => ({ ...prev, visible: false }));
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
+var GridLines = React.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx(Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+  const y = PADDING.top + (1 - ratio) * chartH;
+  const val = Math.round(maxVal * ratio);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
+    /* @__PURE__ */ jsx("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
+  ] }, ratio);
+}) }));
+GridLines.displayName = "GridLines";
+var getLabelStep = (count, chartW) => {
+  const minLabelWidth = 40;
+  const maxLabels = Math.floor(chartW / minLabelWidth);
+  if (count <= maxLabels) return 1;
+  return Math.ceil(count / maxLabels);
+};
+var AxisLabels = React.memo(({ labels, count, chartW, height }) => {
+  const step = getLabelStep(count, chartW);
+  return /* @__PURE__ */ jsx(Fragment, { children: labels.map((label, i) => {
+    if (i % step !== 0) return null;
+    const x = PADDING.left + i / (count - 1 || 1) * chartW;
+    return /* @__PURE__ */ jsx("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+  }) });
+});
+AxisLabels.displayName = "AxisLabels";
 var LineChart = React.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
   const entries = React.useMemo(() => Object.entries(data), [data]);
   const maxVal = React.useMemo(() => {
@@ -113,19 +153,10 @@ var LineChart = React.memo(({ data, labels, width, height, onHover, onMove, onLe
     ),
     [entries, count, chartW, chartH, maxVal]
   );
+  const showPoints = count <= 100;
   return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * chartH;
-      const val = Math.round(maxVal * ratio);
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-        /* @__PURE__ */ jsx("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
-      ] }, ratio);
-    }),
-    labels.map((label, i) => {
-      const x = PADDING.left + i / (count - 1 || 1) * chartW;
-      return /* @__PURE__ */ jsx("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
-    }),
+    /* @__PURE__ */ jsx(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ jsx(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -140,7 +171,7 @@ var LineChart = React.memo(({ data, labels, width, height, onHover, onMove, onLe
             strokeWidth: "2"
           }
         ),
-        points.map((p, i) => /* @__PURE__ */ jsx(
+        showPoints && points.map((p, i) => /* @__PURE__ */ jsx(
           "circle",
           {
             cx: p.x,
@@ -178,19 +209,10 @@ var CurveChart = React.memo(({ data, labels, width, height, onHover, onMove, onL
     ),
     [entries, count, chartW, chartH, maxVal]
   );
+  const showPoints = count <= 100;
   return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * chartH;
-      const val = Math.round(maxVal * ratio);
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-        /* @__PURE__ */ jsx("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
-      ] }, ratio);
-    }),
-    labels.map((label, i) => {
-      const x = PADDING.left + i / (count - 1 || 1) * chartW;
-      return /* @__PURE__ */ jsx("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
-    }),
+    /* @__PURE__ */ jsx(GridLines, { width, height, chartH, maxVal }),
+    /* @__PURE__ */ jsx(AxisLabels, { labels, count, chartW, height }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
@@ -206,7 +228,7 @@ var CurveChart = React.memo(({ data, labels, width, height, onHover, onMove, onL
         ] }) }),
         /* @__PURE__ */ jsx("path", { d: areaPath, fill: `url(#${gradientId})` }),
         /* @__PURE__ */ jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" }),
-        points.map((p, i) => /* @__PURE__ */ jsx(
+        showPoints && points.map((p, i) => /* @__PURE__ */ jsx(
           "circle",
           {
             cx: p.x,
@@ -236,11 +258,11 @@ var BarChart = React.memo(({ data, labels, width, height, onHover, onMove, onLea
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
   const groupW = chartW / count;
-  const barW = Math.min(32, groupW * 0.7 / groupCount);
+  const barW = Math.max(1, Math.min(32, groupW * 0.7 / groupCount));
   const bars = React.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
-        const h = v / maxVal * chartH;
+        const h = Math.max(0, v / maxVal * chartH);
         const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
         const y = PADDING.top + chartH - h;
         return { x, y, w: barW, h, v };
@@ -248,16 +270,13 @@ var BarChart = React.memo(({ data, labels, width, height, onHover, onMove, onLea
     ),
     [entries, maxVal, chartH, groupW, barW, groupCount]
   );
+  const barLabelStep = getLabelStep(count, chartW);
   return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
-    [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
-      const y = PADDING.top + (1 - ratio) * chartH;
-      const val = Math.round(maxVal * ratio);
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
-        /* @__PURE__ */ jsx("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })
-      ] }, ratio);
+    /* @__PURE__ */ jsx(GridLines, { width, height, chartH, maxVal }),
+    labels.map((label, i) => {
+      if (i % barLabelStep !== 0) return null;
+      return /* @__PURE__ */ jsx("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
-    labels.map((label, i) => /* @__PURE__ */ jsx("text", { x: PADDING.left + groupW * i + groupW / 2, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i)),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];