@x-plat/design-system 0.5.7 → 0.5.9

package/dist/components/Chart/index.js

@@ -1,25 +1,65 @@
 // src/components/Chart/Chart.tsx
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var LINE_BAR_PALETTES = [
-  ["var(--primitive-red-100)", "var(--primitive-red-200)", "var(--primitive-red-300)", "var(--primitive-red-400)", "var(--primitive-red-500)", "var(--primitive-red-600)"],
-  ["var(--primitive-orange-100)", "var(--primitive-orange-200)", "var(--primitive-orange-300)", "var(--primitive-orange-400)", "var(--primitive-orange-500)", "var(--primitive-orange-600)"],
-  ["var(--primitive-yellow-100)", "var(--primitive-yellow-200)", "var(--primitive-yellow-300)", "var(--primitive-yellow-400)", "var(--primitive-yellow-500)", "var(--primitive-yellow-600)"],
-  ["var(--primitive-green-100)", "var(--primitive-green-200)", "var(--primitive-green-300)", "var(--primitive-green-400)", "var(--primitive-green-500)", "var(--primitive-green-600)"],
-  ["var(--primitive-blue-100)", "var(--primitive-blue-200)", "var(--primitive-blue-300)", "var(--primitive-blue-400)", "var(--primitive-blue-500)", "var(--primitive-blue-600)"],
-  ["var(--primitive-light-blue-100)", "var(--primitive-light-blue-200)", "var(--primitive-light-blue-300)", "var(--primitive-light-blue-400)", "var(--primitive-light-blue-500)", "var(--primitive-light-blue-600)"],
-  ["var(--primitive-purple-100)", "var(--primitive-purple-200)", "var(--primitive-purple-300)", "var(--primitive-purple-400)", "var(--primitive-purple-500)", "var(--primitive-purple-600)"],
-  ["var(--primitive-pink-100)", "var(--primitive-pink-200)", "var(--primitive-pink-300)", "var(--primitive-pink-400)", "var(--primitive-pink-500)", "var(--primitive-pink-600)"]
-];
-var PIE_PALETTES = [
-  ["var(--primitive-orange-300)", "var(--primitive-red-300)", "var(--primitive-yellow-300)", "var(--primitive-green-300)", "var(--primitive-blue-300)", "var(--primitive-light-blue-300)"],
-  ["var(--primitive-orange-400)", "var(--primitive-red-400)", "var(--primitive-yellow-400)", "var(--primitive-green-400)", "var(--primitive-blue-400)", "var(--primitive-light-blue-400)"],
-  ["var(--primitive-orange-500)", "var(--primitive-red-500)", "var(--primitive-yellow-500)", "var(--primitive-green-500)", "var(--primitive-blue-500)", "var(--primitive-light-blue-500)"]
-];
-var getPalette = (palettes, index) => {
-  return palettes[index % palettes.length];
+var CATEGORICAL_COUNT = 8;
+var LINE_BAR_PALETTES = Array.from({ length: CATEGORICAL_COUNT }, (_, i) => {
+  const n = i + 1;
+  return [
+    `var(--semantic-categorical-${n}-bg)`,
+    `var(--semantic-categorical-${n}-area)`,
+    `var(--semantic-categorical-${n}-fill)`,
+    `var(--semantic-categorical-${n}-text)`
+  ];
+});
+var PIE_COLORS = Array.from(
+  { length: CATEGORICAL_COUNT },
+  (_, i) => `var(--semantic-categorical-${i + 1}-fill)`
+);
+var hashString = (str) => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i) | 0;
+  }
+  return Math.abs(hash);
+};
+var getPalette = (palettes, index, key) => {
+  const offset = key ? hashString(key) : 0;
+  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,
@@ -54,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) => ({
@@ -73,22 +113,22 @@ 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);
-      const color = palette[4];
+      const palette = getPalette(LINE_BAR_PALETTES, di, key);
+      const color = palette[2];
       const points = seriesPoints[di];
       return /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx(
@@ -119,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);
@@ -127,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(
@@ -142,19 +248,19 @@ 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);
-      const color = palette[4];
+      const palette = getPalette(LINE_BAR_PALETTES, di, key);
+      const color = palette[2];
       return bars[di].map((b, i) => /* @__PURE__ */ jsx(
         "rect",
         {
@@ -162,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}`),
@@ -176,14 +282,17 @@ var BarChart = React.memo(({ data, labels, onHover, onMove, onLeave }) => {
 });
 BarChart.displayName = "BarChart";
 var PieDonutChart = React.memo(
-  ({ data, labels, isDoughnut, onHover, onMove, onLeave }) => {
-    const values = React.useMemo(() => Object.entries(data).flatMap(([, v]) => v), [data]);
+  ({ 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 palette = getPalette(PIE_PALETTES, 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(() => {
       let angle0 = -Math.PI / 2;
       return values.map((v, i) => {
@@ -212,13 +321,13 @@ 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",
         {
           d: s.d,
-          fill: palette[i % palette.length],
+          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
           className: "chart-slice",
           onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
           onMouseMove: onMove,
@@ -230,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";