@x-plat/design-system 0.5.8 → 0.5.9

package/dist/components/Chart/index.js

@@ -27,6 +27,39 @@ var getPalette = (palettes, index, key) => {
   return palettes[(index + offset) % palettes.length];
 };
 var PADDING = { top: 20, right: 20, bottom: 30, left: 40 };
+var toSmoothPath = (points) => {
+  if (points.length < 2) return "";
+  const p = points;
+  let d = `M ${p[0].x} ${p[0].y}`;
+  for (let i = 0; i < p.length - 1; i++) {
+    const p0 = p[Math.max(0, i - 1)];
+    const p1 = p[i];
+    const p2 = p[i + 1];
+    const p3 = p[Math.min(p.length - 1, i + 2)];
+    const cp1x = p1.x + (p2.x - p0.x) / 6;
+    const cp1y = p1.y + (p2.y - p0.y) / 6;
+    const cp2x = p2.x - (p3.x - p1.x) / 6;
+    const cp2y = p2.y - (p3.y - p1.y) / 6;
+    d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+  }
+  return d;
+};
+var useChartSize = (ref) => {
+  const [size, setSize] = React.useState({ width: 0, height: 0 });
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    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) });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+};
 var useChartTooltip = (enabled) => {
   const [tooltip, setTooltip] = React.useState({
     visible: false,
@@ -61,15 +94,15 @@ var useChartTooltip = (enabled) => {
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
-var LineChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
+var LineChart = React.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
   const entries = React.useMemo(() => Object.entries(data), [data]);
   const maxVal = React.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
     return Math.max(...allValues) * 1.2 || 1;
   }, [entries]);
   const count = labels.length;
-  const chartW = 600 - PADDING.left - PADDING.right;
-  const chartH = 300 - PADDING.top - PADDING.bottom;
+  const chartW = width - PADDING.left - PADDING.right;
+  const chartH = height - PADDING.top - PADDING.bottom;
   const seriesPoints = React.useMemo(
     () => entries.map(
       ([, values]) => values.map((v, i) => ({
@@ -80,18 +113,18 @@ var LineChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
     ),
     [entries, count, chartW, chartH, maxVal]
   );
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 300", className: "chart-svg", children: [
+  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: 600 - PADDING.right, y2: y, className: "chart-grid" }),
+        /* @__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: 300 - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
+      return /* @__PURE__ */ jsx("text", { x, y: height - 8, className: "chart-axis-label", textAnchor: "middle", children: label }, i);
     }),
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
@@ -126,7 +159,73 @@ var LineChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
   ] });
 });
 LineChart.displayName = "LineChart";
-var BarChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
+var CurveChart = React.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
+  const entries = React.useMemo(() => Object.entries(data), [data]);
+  const maxVal = React.useMemo(() => {
+    const allValues = entries.flatMap(([, v]) => v);
+    return Math.max(...allValues) * 1.2 || 1;
+  }, [entries]);
+  const count = labels.length;
+  const chartW = width - PADDING.left - PADDING.right;
+  const chartH = height - PADDING.top - PADDING.bottom;
+  const seriesPoints = React.useMemo(
+    () => entries.map(
+      ([, values]) => values.map((v, i) => ({
+        x: PADDING.left + i / (count - 1 || 1) * chartW,
+        y: PADDING.top + (1 - v / maxVal) * chartH,
+        v
+      }))
+    ),
+    [entries, count, chartW, chartH, maxVal]
+  );
+  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);
+    }),
+    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__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__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})` }),
+        /* @__PURE__ */ jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" }),
+        points.map((p, i) => /* @__PURE__ */ 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 = React.memo(({ data, labels, width, height, onHover, onMove, onLeave }) => {
   const entries = React.useMemo(() => Object.entries(data), [data]);
   const maxVal = React.useMemo(() => {
     const allValues = entries.flatMap(([, v]) => v);
@@ -134,8 +233,8 @@ var BarChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
   }, [entries]);
   const count = labels.length;
   const groupCount = entries.length;
-  const chartW = 600 - PADDING.left - PADDING.right;
-  const chartH = 300 - PADDING.top - PADDING.bottom;
+  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 bars = React.useMemo(
@@ -149,16 +248,16 @@ var BarChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
     ),
     [entries, maxVal, chartH, groupW, barW, groupCount]
   );
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 300", className: "chart-svg", children: [
+  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: 600 - PADDING.right, y2: y, className: "chart-grid" }),
+        /* @__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) => /* @__PURE__ */ jsx("text", { x: PADDING.left + groupW * i + groupW / 2, y: 300 - 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];
@@ -169,7 +268,7 @@ var BarChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
           y: b.y,
           width: b.w,
           height: b.h,
-          rx: "2",
+          rx: Math.min(4, b.w / 2),
           fill: color,
           className: "chart-bar",
           onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
@@ -183,14 +282,15 @@ var BarChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
 });
 BarChart.displayName = "BarChart";
 var PieDonutChart = React.memo(
-  ({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
+  ({ data, labels, width, height, isDoughnut, onHover, onMove, onLeave }) => {
     const entries = React.useMemo(() => Object.entries(data), [data]);
     const values = React.useMemo(() => entries.flatMap(([, v]) => v), [entries]);
     const total = React.useMemo(() => values.reduce((a, b) => a + b, 0) || 1, [values]);
-    const cx = 150;
-    const cy = 150;
-    const r = 120;
-    const innerR = isDoughnut ? 60 : 0;
+    const size = Math.min(width, height);
+    const cx = size / 2;
+    const cy = size / 2;
+    const r = size * 0.4;
+    const innerR = isDoughnut ? r * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
     const sliceData = React.useMemo(() => {
@@ -221,8 +321,8 @@ var PieDonutChart = React.memo(
         angle0 = endAngle;
         return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
       });
-    }, [values, total, innerR, labels]);
-    return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 300 300", className: "chart-svg chart-pie", children: sliceData.map((s, i) => /* @__PURE__ */ jsxs("g", { children: [
+    }, [values, total, cx, cy, r, innerR, labels]);
+    return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx(
         "path",
         {
@@ -239,22 +339,42 @@ var PieDonutChart = React.memo(
   }
 );
 PieDonutChart.displayName = "PieDonutChart";
+var TooltipBubble = ({ x, y, containerWidth, children }) => {
+  const ref = React.useRef(null);
+  const [adjustedX, setAdjustedX] = React.useState(x);
+  React.useEffect(() => {
+    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]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "chart-tooltip",
+      style: { left: adjustedX, top: y },
+      children
+    }
+  );
+};
 var Chart = (props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
+  const { width, height } = useChartSize(containerRef);
+  const ready = width > 0 && height > 0;
   return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    type === "line" && /* @__PURE__ */ jsx(LineChart, { data, labels, onHover: show, onMove: move, onLeave: hide }),
-    type === "bar" && /* @__PURE__ */ jsx(BarChart, { data, labels, onHover: show, onMove: move, onLeave: hide }),
-    type === "pie" && /* @__PURE__ */ jsx(PieDonutChart, { data, labels, onHover: show, onMove: move, onLeave: hide }),
-    type === "doughnut" && /* @__PURE__ */ jsx(PieDonutChart, { data, labels, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
-    tooltip.visible && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "chart-tooltip",
-        style: { left: tooltip.x, top: tooltip.y },
-        children: tooltip.content
-      }
-    )
+    ready && type === "line" && /* @__PURE__ */ jsx(LineChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ jsx(CurveChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ jsx(BarChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ jsx(PieDonutChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ jsx(PieDonutChart, { data, labels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    tooltip.visible && /* @__PURE__ */ jsx(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
 };
 Chart.displayName = "Chart";