@particle-academy/react-fancy 5.12.0 → 5.14.0

package/dist/chunk-PVWPZYTR.js

@@ -0,0 +1,830 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { useMemo, useRef, useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Chart/chart.utils.ts
+var DEFAULT_COLORS = [
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#ef4444",
+  "#8b5cf6",
+  "#06b6d4",
+  "#ec4899",
+  "#f97316"
+];
+function createLinearScale(domain, range) {
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  const span = d1 - d0 || 1;
+  return (value) => r0 + (value - d0) / span * (r1 - r0);
+}
+function linearPath(points) {
+  if (points.length === 0) return "";
+  return points.map((p, i) => `${i === 0 ? "M" : "L"}${p[0]},${p[1]}`).join(" ");
+}
+function monotonePath(points) {
+  if (points.length < 2) return linearPath(points);
+  if (points.length === 2) return linearPath(points);
+  const n = points.length;
+  const dx = [];
+  const dy = [];
+  const m = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx.push(points[i + 1][0] - points[i][0]);
+    dy.push(points[i + 1][1] - points[i][1]);
+    m.push(dy[i] / (dx[i] || 1));
+  }
+  const tangents = [m[0]];
+  for (let i = 1; i < n - 1; i++) {
+    if (m[i - 1] * m[i] <= 0) {
+      tangents.push(0);
+    } else {
+      tangents.push((m[i - 1] + m[i]) / 2);
+    }
+  }
+  tangents.push(m[n - 2]);
+  for (let i = 0; i < n - 1; i++) {
+    if (Math.abs(m[i]) < 1e-6) {
+      tangents[i] = 0;
+      tangents[i + 1] = 0;
+    } else {
+      const a = tangents[i] / m[i];
+      const b = tangents[i + 1] / m[i];
+      const s = a * a + b * b;
+      if (s > 9) {
+        const t = 3 / Math.sqrt(s);
+        tangents[i] = t * a * m[i];
+        tangents[i + 1] = t * b * m[i];
+      }
+    }
+  }
+  let d = `M${points[0][0]},${points[0][1]}`;
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = points[i];
+    const p1 = points[i + 1];
+    const dxi = dx[i] / 3;
+    const cp1x = p0[0] + dxi;
+    const cp1y = p0[1] + tangents[i] * dxi;
+    const cp2x = p1[0] - dxi;
+    const cp2y = p1[1] - tangents[i + 1] * dxi;
+    d += ` C${cp1x},${cp1y} ${cp2x},${cp2y} ${p1[0]},${p1[1]}`;
+  }
+  return d;
+}
+function computeTicks(min, max, count = 5) {
+  if (count < 2) return [min];
+  const ticks = [];
+  const step = (max - min) / (count - 1);
+  for (let i = 0; i < count; i++) {
+    ticks.push(min + step * i);
+  }
+  return ticks;
+}
+function niceNum(range, round) {
+  const exponent = Math.floor(Math.log10(range));
+  const fraction = range / Math.pow(10, exponent);
+  let niceFraction;
+  if (round) {
+    if (fraction < 1.5) niceFraction = 1;
+    else if (fraction < 3) niceFraction = 2;
+    else if (fraction < 7) niceFraction = 5;
+    else niceFraction = 10;
+  } else {
+    if (fraction <= 1) niceFraction = 1;
+    else if (fraction <= 2) niceFraction = 2;
+    else if (fraction <= 5) niceFraction = 5;
+    else niceFraction = 10;
+  }
+  return niceFraction * Math.pow(10, exponent);
+}
+function niceScale(min, max, tickCount = 5) {
+  if (min === max) {
+    return { min: min - 1, max: max + 1, ticks: computeTicks(min - 1, max + 1, tickCount) };
+  }
+  const range = niceNum(max - min, false);
+  const tickSpacing = niceNum(range / (tickCount - 1), true);
+  const niceMin = Math.floor(min / tickSpacing) * tickSpacing;
+  const niceMax = Math.ceil(max / tickSpacing) * tickSpacing;
+  const ticks = [];
+  for (let v = niceMin; v <= niceMax + tickSpacing * 0.5; v += tickSpacing) {
+    ticks.push(Math.round(v * 1e10) / 1e10);
+  }
+  return { min: niceMin, max: niceMax, ticks };
+}
+function ChartBar({
+  data,
+  height = 200,
+  showValues = false,
+  className
+}) {
+  const maxValue = useMemo(
+    () => Math.max(...data.map((d) => d.value), 1),
+    [data]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), "data-react-fancy-chart-bar": "", children: [
+    showValues && /* @__PURE__ */ jsx("div", { className: "mb-1 flex gap-2", children: data.map((item) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex-1 text-center text-xs font-medium text-zinc-500 dark:text-zinc-400",
+        children: item.value
+      },
+      item.label
+    )) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex items-end gap-2",
+        style: { height },
+        children: data.map((item, i) => {
+          const barHeight = item.value / maxValue * 100;
+          const color = item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex h-full flex-1 items-end justify-center",
+              "data-react-fancy-chart-bar-column": "",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-react-fancy-chart-bar-item": "",
+                  className: "w-full rounded-t-md transition-all duration-500",
+                  style: {
+                    height: `${barHeight}%`,
+                    backgroundColor: color,
+                    minHeight: 4
+                  }
+                }
+              )
+            },
+            item.label
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 flex gap-2", children: data.map((item) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex-1 text-center text-xs text-zinc-500 dark:text-zinc-400",
+        children: item.label
+      },
+      item.label
+    )) })
+  ] });
+}
+ChartBar.displayName = "ChartBar";
+function ChartDonut({
+  data,
+  size = 160,
+  strokeWidth = 24,
+  showLegend = true,
+  className
+}) {
+  const total = useMemo(() => data.reduce((s, d) => s + d.value, 0), [data]);
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const segments = useMemo(() => {
+    let offset = 0;
+    return data.map((item, i) => {
+      const pct = total > 0 ? item.value / total : 0;
+      const dash = pct * circumference;
+      const gap = circumference - dash;
+      const rotation = offset / total * 360;
+      offset += item.value;
+      return {
+        ...item,
+        dash,
+        gap,
+        rotation,
+        color: item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length]
+      };
+    });
+  }, [data, total, circumference]);
+  return /* @__PURE__ */ jsxs("div", { "data-react-fancy-chart-donut": "", className: cn("inline-flex items-center gap-6", className), children: [
+    /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: segments.map((seg) => /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: size / 2,
+        cy: size / 2,
+        r: radius,
+        fill: "none",
+        stroke: seg.color,
+        strokeWidth,
+        strokeDasharray: `${seg.dash} ${seg.gap}`,
+        strokeLinecap: "round",
+        transform: `rotate(${seg.rotation - 90} ${size / 2} ${size / 2})`
+      },
+      seg.label
+    )) }),
+    showLegend && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: segments.map((seg) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-3 w-3 rounded-full",
+          style: { backgroundColor: seg.color }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-zinc-600 dark:text-zinc-400", children: seg.label }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: seg.value })
+    ] }, seg.label)) })
+  ] });
+}
+ChartDonut.displayName = "ChartDonut";
+function defaultFormat(value) {
+  if (Math.abs(value) >= 1e3) return `${(value / 1e3).toFixed(value % 1e3 === 0 ? 0 : 1)}k`;
+  if (Number.isInteger(value)) return String(value);
+  return value.toFixed(1);
+}
+function ChartAxis({
+  orientation,
+  ticks,
+  scale,
+  x,
+  y,
+  length,
+  label,
+  formatTick = defaultFormat
+}) {
+  if (orientation === "x") {
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("line", { x1: x, y1: y, x2: x + length, y2: y, stroke: "currentColor", className: "text-zinc-200 dark:text-zinc-700" }),
+      ticks.map((tick) => {
+        const tx = scale(tick);
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("line", { x1: tx, y1: y, x2: tx, y2: y + 4, stroke: "currentColor", className: "text-zinc-300 dark:text-zinc-600" }),
+          /* @__PURE__ */ jsx("text", { x: tx, y: y + 16, textAnchor: "middle", className: "fill-zinc-500 text-[10px] dark:fill-zinc-400", children: formatTick(tick) })
+        ] }, tick);
+      }),
+      label && /* @__PURE__ */ jsx("text", { x: x + length / 2, y: y + 32, textAnchor: "middle", className: "fill-zinc-500 text-[11px] dark:fill-zinc-400", children: label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("line", { x1: x, y1: y, x2: x, y2: y + length, stroke: "currentColor", className: "text-zinc-200 dark:text-zinc-700" }),
+    ticks.map((tick) => {
+      const ty = scale(tick);
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: x - 4, y1: ty, x2: x, y2: ty, stroke: "currentColor", className: "text-zinc-300 dark:text-zinc-600" }),
+        /* @__PURE__ */ jsx("text", { x: x - 8, y: ty + 3, textAnchor: "end", className: "fill-zinc-500 text-[10px] dark:fill-zinc-400", children: formatTick(tick) })
+      ] }, tick);
+    }),
+    label && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x - 36,
+        y: y + length / 2,
+        textAnchor: "middle",
+        transform: `rotate(-90, ${x - 36}, ${y + length / 2})`,
+        className: "fill-zinc-500 text-[11px] dark:fill-zinc-400",
+        children: label
+      }
+    )
+  ] });
+}
+ChartAxis.displayName = "ChartAxis";
+function ChartGrid({ x, y, width, height, horizontal, vertical }) {
+  return /* @__PURE__ */ jsxs("g", { children: [
+    horizontal?.ticks.map((tick) => {
+      const ty = horizontal.scale(tick);
+      return /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: x,
+          y1: ty,
+          x2: x + width,
+          y2: ty,
+          stroke: "currentColor",
+          strokeDasharray: "4 4",
+          className: "text-zinc-100 dark:text-zinc-800"
+        },
+        `h-${tick}`
+      );
+    }),
+    vertical?.ticks.map((tick) => {
+      const tx = vertical.scale(tick);
+      return /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: tx,
+          y1: y,
+          x2: tx,
+          y2: y + height,
+          stroke: "currentColor",
+          strokeDasharray: "4 4",
+          className: "text-zinc-100 dark:text-zinc-800"
+        },
+        `v-${tick}`
+      );
+    })
+  ] });
+}
+ChartGrid.displayName = "ChartGrid";
+function ChartTooltip({ visible, x, y, content, className }) {
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute z-50 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs shadow-lg dark:border-zinc-700 dark:bg-zinc-900",
+        className
+      ),
+      style: {
+        left: x,
+        top: y,
+        transform: "translate(-50%, -100%) translateY(-8px)"
+      },
+      children: content
+    }
+  );
+}
+ChartTooltip.displayName = "ChartTooltip";
+var PADDING = { top: 16, right: 16, bottom: 40, left: 48 };
+function ChartLine({
+  labels,
+  series,
+  height = 240,
+  curve = "monotone",
+  showDots = true,
+  fill = false,
+  fillOpacity = 0.1,
+  xAxis = true,
+  yAxis = true,
+  grid = true,
+  tooltip = true,
+  animate = true,
+  responsive = false,
+  className
+}) {
+  const containerRef = useRef(null);
+  const [hoverInfo, setHoverInfo] = useState(null);
+  const width = 500;
+  const plotWidth = width - PADDING.left - PADDING.right;
+  const plotHeight = height - PADDING.top - PADDING.bottom;
+  const allValues = series.flatMap((s) => s.data);
+  const dataMin = Math.min(0, ...allValues);
+  const dataMax = Math.max(...allValues);
+  const { min: yMin, max: yMax, ticks: yTicks } = useMemo(
+    () => niceScale(dataMin, dataMax, 5),
+    [dataMin, dataMax]
+  );
+  const xScale = useMemo(
+    () => createLinearScale([0, labels.length - 1], [PADDING.left, PADDING.left + plotWidth]),
+    [labels.length, plotWidth]
+  );
+  const yScale = useMemo(
+    () => createLinearScale([yMin, yMax], [PADDING.top + plotHeight, PADDING.top]),
+    [yMin, yMax, plotHeight]
+  );
+  const pathFn = curve === "monotone" ? monotonePath : linearPath;
+  const handleMouseMove = (e) => {
+    if (!tooltip || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const svgX = (e.clientX - rect.left) / rect.width * width;
+    const closestIdx = Math.round((svgX - PADDING.left) / plotWidth * (labels.length - 1));
+    const idx = Math.max(0, Math.min(labels.length - 1, closestIdx));
+    setHoverInfo({
+      x: xScale(idx) / width * rect.width,
+      y: e.clientY - rect.top,
+      labelIdx: idx
+    });
+  };
+  const svgProps = responsive ? { viewBox: `0 0 ${width} ${height}`, width: "100%", preserveAspectRatio: "xMidYMid meet" } : { width, height };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      "data-react-fancy-chart-line": "",
+      className: cn("relative", className),
+      onMouseMove: handleMouseMove,
+      onMouseLeave: () => setHoverInfo(null),
+      children: [
+        /* @__PURE__ */ jsxs("svg", { ...svgProps, height: responsive ? void 0 : height, children: [
+          grid && /* @__PURE__ */ jsx(
+            ChartGrid,
+            {
+              x: PADDING.left,
+              y: PADDING.top,
+              width: plotWidth,
+              height: plotHeight,
+              horizontal: { ticks: yTicks, scale: yScale }
+            }
+          ),
+          series.map((s, si) => {
+            const color = s.color ?? DEFAULT_COLORS[si % DEFAULT_COLORS.length];
+            const points = s.data.map((v, i) => [xScale(i), yScale(v)]);
+            const d = pathFn(points);
+            return /* @__PURE__ */ jsxs("g", { children: [
+              fill && /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: `${d} L${points[points.length - 1][0]},${yScale(yMin)} L${points[0][0]},${yScale(yMin)} Z`,
+                  fill: color,
+                  fillOpacity
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth: 2,
+                  className: animate ? "transition-all duration-500" : ""
+                }
+              ),
+              showDots && points.map(([px, py], i) => /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: px,
+                  cy: py,
+                  r: 3,
+                  fill: "white",
+                  stroke: color,
+                  strokeWidth: 2
+                },
+                i
+              ))
+            ] }, s.label);
+          }),
+          yAxis && /* @__PURE__ */ jsx(ChartAxis, { orientation: "y", ticks: yTicks, scale: yScale, x: PADDING.left, y: PADDING.top, length: plotHeight }),
+          xAxis && /* @__PURE__ */ jsx(
+            ChartAxis,
+            {
+              orientation: "x",
+              ticks: labels.map((_, i) => i),
+              scale: xScale,
+              x: PADDING.left,
+              y: PADDING.top + plotHeight,
+              length: plotWidth,
+              formatTick: (v) => labels[Math.round(v)] ?? ""
+            }
+          ),
+          hoverInfo !== null && /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: xScale(hoverInfo.labelIdx),
+              y1: PADDING.top,
+              x2: xScale(hoverInfo.labelIdx),
+              y2: PADDING.top + plotHeight,
+              stroke: "currentColor",
+              strokeDasharray: "4 4",
+              className: "text-zinc-300 dark:text-zinc-600"
+            }
+          )
+        ] }),
+        tooltip && hoverInfo !== null && /* @__PURE__ */ jsx(
+          ChartTooltip,
+          {
+            visible: true,
+            x: hoverInfo.x,
+            y: hoverInfo.y,
+            content: /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "mb-1 font-medium", children: labels[hoverInfo.labelIdx] }),
+              series.map((s, si) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "inline-block h-2 w-2 rounded-full",
+                    style: { backgroundColor: s.color ?? DEFAULT_COLORS[si % DEFAULT_COLORS.length] }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
+                  s.label,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: s.data[hoverInfo.labelIdx] })
+              ] }, s.label))
+            ] })
+          }
+        ),
+        series.length > 1 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-4", children: series.map((s, si) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "inline-block h-2.5 w-2.5 rounded-full",
+              style: { backgroundColor: s.color ?? DEFAULT_COLORS[si % DEFAULT_COLORS.length] }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-zinc-600 dark:text-zinc-400", children: s.label })
+        ] }, s.label)) })
+      ]
+    }
+  );
+}
+ChartLine.displayName = "ChartLine";
+function ChartArea(props) {
+  return /* @__PURE__ */ jsx(ChartLine, { ...props, fill: true, fillOpacity: 0.15 });
+}
+ChartArea.displayName = "ChartArea";
+function ChartPie({
+  data,
+  size = 200,
+  showLabels = false,
+  tooltip = true,
+  className
+}) {
+  const containerRef = useRef(null);
+  const [hoverIdx, setHoverIdx] = useState(null);
+  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
+  const total = useMemo(() => data.reduce((s, d) => s + d.value, 0), [data]);
+  const center = size / 2;
+  const radius = size / 2 - 4;
+  const slices = useMemo(() => {
+    let startAngle = -Math.PI / 2;
+    return data.map((item, i) => {
+      const pct = total > 0 ? item.value / total : 0;
+      const angle = pct * 2 * Math.PI;
+      const endAngle = startAngle + angle;
+      const largeArc = angle > Math.PI ? 1 : 0;
+      const x1 = center + radius * Math.cos(startAngle);
+      const y1 = center + radius * Math.sin(startAngle);
+      const x2 = center + radius * Math.cos(endAngle);
+      const y2 = center + radius * Math.sin(endAngle);
+      const midAngle = startAngle + angle / 2;
+      const labelX = center + radius * 0.65 * Math.cos(midAngle);
+      const labelY = center + radius * 0.65 * Math.sin(midAngle);
+      const d = pct >= 1 ? `M${center},${center - radius} A${radius},${radius} 0 1 1 ${center},${center + radius} A${radius},${radius} 0 1 1 ${center},${center - radius}` : `M${center},${center} L${x1},${y1} A${radius},${radius} 0 ${largeArc} 1 ${x2},${y2} Z`;
+      const color = item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+      startAngle = endAngle;
+      return { ...item, d, color, labelX, labelY, pct };
+    });
+  }, [data, total, center, radius]);
+  const handleMouseMove = (e) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setTooltipPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, "data-react-fancy-chart-pie": "", className: cn("relative inline-flex items-center gap-6", className), onMouseMove: handleMouseMove, children: [
+    /* @__PURE__ */ jsx("svg", { width: size, height: size, children: slices.map((slice, i) => /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: slice.d,
+          fill: slice.color,
+          stroke: "white",
+          strokeWidth: 2,
+          className: "transition-opacity",
+          opacity: hoverIdx !== null && hoverIdx !== i ? 0.5 : 1,
+          onMouseEnter: () => setHoverIdx(i),
+          onMouseLeave: () => setHoverIdx(null)
+        }
+      ),
+      showLabels && slice.pct > 0.05 && /* @__PURE__ */ jsxs(
+        "text",
+        {
+          x: slice.labelX,
+          y: slice.labelY,
+          textAnchor: "middle",
+          dominantBaseline: "middle",
+          className: "fill-white text-[10px] font-medium",
+          children: [
+            Math.round(slice.pct * 100),
+            "%"
+          ]
+        }
+      )
+    ] }, slice.label)) }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: slices.map((slice) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full", style: { backgroundColor: slice.color } }),
+      /* @__PURE__ */ jsx("span", { className: "text-zinc-600 dark:text-zinc-400", children: slice.label }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: slice.value })
+    ] }, slice.label)) }),
+    tooltip && hoverIdx !== null && /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        visible: true,
+        x: tooltipPos.x,
+        y: tooltipPos.y,
+        content: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: slices[hoverIdx].label }),
+          ":",
+          " ",
+          slices[hoverIdx].value,
+          " (",
+          Math.round(slices[hoverIdx].pct * 100),
+          "%)"
+        ] })
+      }
+    )
+  ] });
+}
+ChartPie.displayName = "ChartPie";
+function ChartSparkline({
+  data,
+  width = 120,
+  height = 32,
+  color = "#3b82f6",
+  className
+}) {
+  const d = useMemo(() => {
+    if (data.length < 2) return "";
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const xScale = createLinearScale([0, data.length - 1], [1, width - 1]);
+    const yScale = createLinearScale([min, max], [height - 2, 2]);
+    const points = data.map((v, i) => [xScale(i), yScale(v)]);
+    return monotonePath(points);
+  }, [data, width, height]);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width,
+      height,
+      className: cn("inline-block", className),
+      "data-react-fancy-chart-sparkline": "",
+      children: /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinecap: "round" })
+    }
+  );
+}
+ChartSparkline.displayName = "ChartSparkline";
+function ChartHorizontalBar({
+  data,
+  height,
+  showValues = true,
+  className
+}) {
+  const maxValue = useMemo(
+    () => Math.max(...data.map((d) => d.value), 1),
+    [data]
+  );
+  const barHeight = 28;
+  const gap = 8;
+  const computedHeight = height ?? data.length * (barHeight + gap) - gap;
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), "data-react-fancy-chart-horizontal-bar": "", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", style: { height: computedHeight }, children: data.map((item, i) => {
+    const widthPct = item.value / maxValue * 100;
+    const color = item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "w-20 shrink-0 truncate text-right text-xs text-zinc-500 dark:text-zinc-400", children: item.label }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-7 rounded-r-md transition-all duration-500",
+            style: {
+              width: `${widthPct}%`,
+              backgroundColor: color,
+              minWidth: 4
+            }
+          }
+        ),
+        showValues && /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-full ml-2 -translate-y-1/2 text-xs font-medium text-zinc-500", children: item.value })
+      ] })
+    ] }, item.label);
+  }) }) });
+}
+ChartHorizontalBar.displayName = "ChartHorizontalBar";
+var PADDING2 = { top: 16, right: 16, bottom: 40, left: 48 };
+function ChartStackedBar({
+  labels,
+  series,
+  height = 240,
+  xAxis = true,
+  yAxis = true,
+  grid = true,
+  tooltip = true,
+  responsive = false,
+  className
+}) {
+  const containerRef = useRef(null);
+  const [hoverIdx, setHoverIdx] = useState(null);
+  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
+  const width = 500;
+  const plotWidth = width - PADDING2.left - PADDING2.right;
+  const plotHeight = height - PADDING2.top - PADDING2.bottom;
+  const stackTotals = useMemo(
+    () => labels.map((_, li) => series.reduce((sum, s) => sum + (s.data[li] ?? 0), 0)),
+    [labels, series]
+  );
+  const maxTotal = Math.max(...stackTotals, 1);
+  const { min: yMin, max: yMax, ticks: yTicks } = useMemo(
+    () => niceScale(0, maxTotal, 5),
+    [maxTotal]
+  );
+  const yScale = useMemo(
+    () => createLinearScale([yMin, yMax], [PADDING2.top + plotHeight, PADDING2.top]),
+    [yMin, yMax, plotHeight]
+  );
+  const barWidth = Math.max(8, plotWidth / labels.length * 0.6);
+  const barGap = (plotWidth - barWidth * labels.length) / (labels.length + 1);
+  const handleMouseMove = (e) => {
+    if (!tooltip || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setTooltipPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  };
+  const svgProps = responsive ? { viewBox: `0 0 ${width} ${height}`, width: "100%", preserveAspectRatio: "xMidYMid meet" } : { width, height };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, "data-react-fancy-chart-stacked-bar": "", className: cn("relative", className), onMouseMove: handleMouseMove, children: [
+    /* @__PURE__ */ jsxs("svg", { ...svgProps, height: responsive ? void 0 : height, children: [
+      grid && /* @__PURE__ */ jsx(
+        ChartGrid,
+        {
+          x: PADDING2.left,
+          y: PADDING2.top,
+          width: plotWidth,
+          height: plotHeight,
+          horizontal: { ticks: yTicks, scale: yScale }
+        }
+      ),
+      labels.map((label, li) => {
+        const x = PADDING2.left + barGap * (li + 1) + barWidth * li;
+        let cumulative = 0;
+        return /* @__PURE__ */ jsx(
+          "g",
+          {
+            onMouseEnter: () => setHoverIdx(li),
+            onMouseLeave: () => setHoverIdx(null),
+            children: series.map((s, si) => {
+              const val = s.data[li] ?? 0;
+              const y0 = yScale(cumulative);
+              const y1 = yScale(cumulative + val);
+              cumulative += val;
+              const color = s.color ?? DEFAULT_COLORS[si % DEFAULT_COLORS.length];
+              return /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x,
+                  y: y1,
+                  width: barWidth,
+                  height: Math.max(0, y0 - y1),
+                  fill: color,
+                  rx: si === series.length - 1 ? 3 : 0,
+                  className: "transition-opacity",
+                  opacity: hoverIdx !== null && hoverIdx !== li ? 0.5 : 1
+                },
+                s.label
+              );
+            })
+          },
+          label
+        );
+      }),
+      yAxis && /* @__PURE__ */ jsx(ChartAxis, { orientation: "y", ticks: yTicks, scale: yScale, x: PADDING2.left, y: PADDING2.top, length: plotHeight }),
+      xAxis && /* @__PURE__ */ jsx(
+        ChartAxis,
+        {
+          orientation: "x",
+          ticks: labels.map((_, i) => i),
+          scale: (i) => PADDING2.left + barGap * (i + 1) + barWidth * i + barWidth / 2,
+          x: PADDING2.left,
+          y: PADDING2.top + plotHeight,
+          length: plotWidth,
+          formatTick: (v) => labels[Math.round(v)] ?? ""
+        }
+      )
+    ] }),
+    tooltip && hoverIdx !== null && /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        visible: true,
+        x: tooltipPos.x,
+        y: tooltipPos.y,
+        content: /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-1 font-medium", children: labels[hoverIdx] }),
+          series.map((s, si) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "inline-block h-2 w-2 rounded-full",
+                style: { backgroundColor: s.color ?? DEFAULT_COLORS[si % DEFAULT_COLORS.length] }
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
+              s.label,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: s.data[hoverIdx] ?? 0 })
+          ] }, s.label)),
+          /* @__PURE__ */ jsxs("div", { className: "mt-1 border-t border-zinc-200 pt-1 text-zinc-500 dark:border-zinc-700", children: [
+            "Total: ",
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-900 dark:text-white", children: stackTotals[hoverIdx] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-4", children: series.map((s, si) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "inline-block h-2.5 w-2.5 rounded-full",
+          style: { backgroundColor: s.color ?? DEFAULT_COLORS[si % DEFAULT_COLORS.length] }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-zinc-600 dark:text-zinc-400", children: s.label })
+    ] }, s.label)) })
+  ] });
+}
+ChartStackedBar.displayName = "ChartStackedBar";
+
+// src/components/Chart/Chart.tsx
+var Chart = {
+  Bar: ChartBar,
+  Donut: ChartDonut,
+  Line: ChartLine,
+  Area: ChartArea,
+  Pie: ChartPie,
+  Sparkline: ChartSparkline,
+  HorizontalBar: ChartHorizontalBar,
+  StackedBar: ChartStackedBar
+};
+
+export { Chart };
+//# sourceMappingURL=chunk-PVWPZYTR.js.map
+//# sourceMappingURL=chunk-PVWPZYTR.js.map