@underverse-ui/underverse 1.0.14 → 1.0.16

package/dist/index.cjs

@@ -17244,29 +17244,52 @@ var import_react25 = require("react");
 var import_react24 = require("react");
 var import_react_dom6 = require("react-dom");
 var import_jsx_runtime55 = require("react/jsx-runtime");
-function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, secondaryValue, items, containerRef }) {
+function ChartTooltip({
+  x,
+  y,
+  visible,
+  label,
+  value,
+  color,
+  secondaryLabel,
+  secondaryValue,
+  items,
+  containerRef,
+  formatter
+}) {
   const [isMounted, setIsMounted] = (0, import_react24.useState)(false);
   const [position, setPosition] = (0, import_react24.useState)(null);
+  const tooltipRef = (0, import_react24.useRef)(null);
   (0, import_react24.useEffect)(() => {
     setIsMounted(true);
   }, []);
   (0, import_react24.useEffect)(() => {
     if (visible && containerRef?.current) {
       const rect = containerRef.current.getBoundingClientRect();
-      setPosition({
-        top: rect.top + y,
-        left: rect.left + x
-      });
+      const tw = tooltipRef.current?.offsetWidth ?? 160;
+      const th = tooltipRef.current?.offsetHeight ?? 80;
+      let left = rect.left + x + 12;
+      let top = rect.top + y - th / 2;
+      if (left + tw > window.innerWidth - 8) {
+        left = rect.left + x - tw - 12;
+      }
+      if (top + th > window.innerHeight - 8) {
+        top = window.innerHeight - th - 8;
+      }
+      if (top < 8) top = 8;
+      if (left < 8) left = 8;
+      setPosition({ top, left });
     }
   }, [visible, x, y, containerRef]);
   if (!visible || !isMounted || !position) return null;
   const tooltipContent = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
     {
+      ref: tooltipRef,
       style: {
         position: "fixed",
         top: position.top,
-        left: position.left + 12,
+        left: position.left,
         zIndex: 99999,
         pointerEvents: "none",
         animation: "chartTooltipFadeIn 0.15s ease-out"
@@ -17289,11 +17312,11 @@ function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, seco
                   item.label,
                   ":"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "font-semibold ml-auto", children: item.value })
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "font-semibold ml-auto", children: formatter ? formatter(item.value) : item.value })
               ] }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center gap-2", children: [
                   color && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: color } }),
-                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "font-semibold", children: value })
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "font-semibold", children: formatter && value != null ? formatter(value) : value })
                 ] }),
                 secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "text-muted-foreground text-xs mt-1", children: [
                   secondaryLabel,
@@ -17316,10 +17339,39 @@ function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, seco
   return (0, import_react_dom6.createPortal)(tooltipContent, document.body);
 }
 
+// ../../components/ui/chart-utils.ts
+function getCatmullRomSpline(points, tension = 0.5) {
+  if (points.length < 2) return "";
+  if (points.length === 2) {
+    return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+  }
+  let path = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[Math.max(0, i - 1)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(points.length - 1, i + 2)];
+    const cp1x = p1.x + (p2.x - p0.x) * tension / 6;
+    const cp1y = p1.y + (p2.y - p0.y) * tension / 6;
+    const cp2x = p2.x - (p3.x - p1.x) * tension / 6;
+    const cp2y = p2.y - (p3.y - p1.y) * tension / 6;
+    path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
+  }
+  return path;
+}
+function getPathLength(points) {
+  return points.reduce((acc, p, i) => {
+    if (i === 0) return 0;
+    const prev = points[i - 1];
+    return acc + Math.sqrt((p.x - prev.x) ** 2 + (p.y - prev.y) ** 2);
+  }, 0);
+}
+
 // ../../components/ui/LineChart.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function LineChart({
   data,
+  series,
   width = 400,
   height = 200,
   color = "currentColor",
@@ -17328,50 +17380,63 @@ function LineChart({
   showGrid = true,
   showLabels = true,
   showValues = false,
+  showLegend,
   animated = true,
   curved = true,
+  formatValue,
+  referenceLines = [],
   className = ""
 }) {
   const svgRef = (0, import_react25.useRef)(null);
+  const clipId = (0, import_react25.useRef)(`line-clip-${Math.random().toString(36).slice(2, 8)}`).current;
   const padding = { top: 20, right: 20, bottom: 40, left: 40 };
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
   const [hoveredPoint, setHoveredPoint] = (0, import_react25.useState)(null);
-  const { minValue, maxValue, points, linePath, areaPath } = (0, import_react25.useMemo)(() => {
-    if (!data.length) return { minValue: 0, maxValue: 0, points: [], linePath: "", areaPath: "" };
-    const values = data.map((d) => d.value);
-    const min = Math.min(...values);
-    const max = Math.max(...values);
+  const [hiddenSeries, setHiddenSeries] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
+  const toggleSeries = (0, import_react25.useCallback)((name) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }, []);
+  const normalizedSeries = (0, import_react25.useMemo)(() => {
+    if (series && series.length > 0) return series;
+    if (data && data.length > 0) return [{ name: "", data, color, fillColor }];
+    return [];
+  }, [series, data, color, fillColor]);
+  const isMultiSeries = normalizedSeries.length > 1;
+  const { minValue, maxValue, processedSeries, labels } = (0, import_react25.useMemo)(() => {
+    if (!normalizedSeries.length || !normalizedSeries[0]?.data?.length) {
+      return { minValue: 0, maxValue: 0, processedSeries: [], labels: [] };
+    }
+    const allLabels = normalizedSeries[0].data.map((d) => d.label);
+    const allValues = normalizedSeries.flatMap((s) => s.data.map((d) => d.value));
+    const min = Math.min(...allValues);
+    const max = Math.max(...allValues);
     const range = max - min || 1;
-    const pts = data.map((d, i) => ({
-      x: padding.left + i / (data.length - 1 || 1) * chartWidth,
-      y: padding.top + chartHeight - (d.value - min) / range * chartHeight,
-      ...d
-    }));
-    let path = "";
-    let area = "";
-    if (curved && pts.length > 2) {
-      path = `M ${pts[0].x} ${pts[0].y}`;
-      area = `M ${pts[0].x} ${padding.top + chartHeight} L ${pts[0].x} ${pts[0].y}`;
-      for (let i = 0; i < pts.length - 1; i++) {
-        const p0 = pts[Math.max(0, i - 1)];
-        const p1 = pts[i];
-        const p2 = pts[i + 1];
-        const p3 = pts[Math.min(pts.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;
-        path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
-        area += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
-      }
-      area += ` L ${pts[pts.length - 1].x} ${padding.top + chartHeight} Z`;
-    } else {
-      path = pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-      area = `M ${pts[0].x} ${padding.top + chartHeight} ` + pts.map((p) => `L ${p.x} ${p.y}`).join(" ") + ` L ${pts[pts.length - 1].x} ${padding.top + chartHeight} Z`;
-    }
-    return { minValue: min, maxValue: max, points: pts, linePath: path, areaPath: area };
-  }, [data, chartWidth, chartHeight, curved, padding.left, padding.top]);
+    const processed = normalizedSeries.map((s) => {
+      const pts = s.data.map((d, i) => ({
+        x: padding.left + i / (s.data.length - 1 || 1) * chartWidth,
+        y: padding.top + chartHeight - (d.value - min) / range * chartHeight,
+        ...d
+      }));
+      let linePath = "";
+      let areaPath = "";
+      if (curved && pts.length > 2) {
+        linePath = getCatmullRomSpline(pts);
+        areaPath = `${linePath} L ${pts[pts.length - 1].x} ${padding.top + chartHeight} L ${pts[0].x} ${padding.top + chartHeight} Z`;
+      } else {
+        linePath = pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+        areaPath = `M ${pts[0].x} ${padding.top + chartHeight} ` + pts.map((p) => `L ${p.x} ${p.y}`).join(" ") + ` L ${pts[pts.length - 1].x} ${padding.top + chartHeight} Z`;
+      }
+      const lineLength = getPathLength(pts);
+      return { ...s, points: pts, linePath, areaPath, lineLength };
+    });
+    return { minValue: min, maxValue: max, processedSeries: processed, labels: allLabels };
+  }, [normalizedSeries, chartWidth, chartHeight, curved, padding.left, padding.top]);
   const gridLines = (0, import_react25.useMemo)(() => {
     const lines = [];
     const steps = 5;
@@ -17384,84 +17449,134 @@ function LineChart({
   }, [minValue, maxValue, chartHeight, padding.top]);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("rect", { x: padding.left, y: padding.top, width: chartWidth, height: chartHeight }) }) }),
       showGrid && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", fill: "currentColor", className: "text-muted-foreground", children: line.value.toFixed(0) })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", fill: "currentColor", className: "text-muted-foreground", children: formatValue ? formatValue(line.value) : line.value.toFixed(0) })
       ] }, i)) }),
-      fillColor && areaPath && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: areaPath, fill: fillColor, opacity: 0.2, className: animated ? "animate-[fadeIn_0.6s_ease-out]" : "" }),
-      linePath && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-        "path",
-        {
-          d: linePath,
-          fill: "none",
-          stroke: color,
-          strokeWidth: 2,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          className: animated ? "animate-[drawLine_1s_ease-out]" : "",
-          style: animated ? {
-            strokeDasharray: 1e3,
-            strokeDashoffset: 0,
-            animation: "drawLine 1s ease-out forwards"
-          } : void 0
-        }
-      ),
-      showDots && points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-        "g",
-        {
-          onMouseEnter: () => setHoveredPoint({ x: point.x, y: point.y, label: point.label, value: point.value }),
-          onMouseLeave: () => setHoveredPoint(null),
-          className: "cursor-pointer",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              "circle",
-              {
-                cx: point.x,
-                cy: point.y,
-                r: hoveredPoint?.x === point.x ? 6 : 4,
-                fill: color,
-                className: `transition-all duration-150 ${animated ? "animate-[scaleIn_0.3s_ease-out]" : ""}`,
-                style: animated ? { animationDelay: `${i * 0.05}s`, animationFillMode: "both" } : void 0
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("circle", { cx: point.x, cy: point.y, r: 16, fill: "transparent" }),
-            showValues && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("text", { x: point.x, y: point.y - 12, textAnchor: "middle", fontSize: "10", fontWeight: "500", className: "text-foreground", fill: "currentColor", children: point.value })
-          ]
-        },
-        i
-      )),
-      hoveredPoint && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("g", { className: "pointer-events-none", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-          "line",
-          {
-            x1: hoveredPoint.x,
-            y1: padding.top,
-            x2: hoveredPoint.x,
-            y2: padding.top + chartHeight,
-            stroke: color,
-            strokeWidth: 1,
-            strokeDasharray: "4 4",
-            opacity: 0.5
-          }
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("g", { clipPath: `url(#${clipId})`, children: [
+        processedSeries.map(
+          (s, si) => s.fillColor && s.areaPath && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            "path",
+            {
+              d: s.areaPath,
+              fill: s.fillColor,
+              className: "transition-opacity duration-300",
+              opacity: hiddenSeries.has(s.name) ? 0 : 0.15,
+              style: animated ? { opacity: 0, animation: `fadeIn 0.6s ease-out ${si * 0.1}s forwards` } : void 0
+            },
+            `area-${si}`
+          )
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-          "line",
+        processedSeries.map((s, si) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "path",
           {
-            x1: padding.left,
-            y1: hoveredPoint.y,
-            x2: padding.left + chartWidth,
-            y2: hoveredPoint.y,
-            stroke: color,
-            strokeWidth: 1,
-            strokeDasharray: "4 4",
-            opacity: 0.5
-          }
-        )
+            d: s.linePath,
+            fill: "none",
+            stroke: s.color,
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "transition-opacity duration-300",
+            opacity: hiddenSeries.has(s.name) ? 0 : 1,
+            style: animated ? {
+              strokeDasharray: s.lineLength,
+              strokeDashoffset: s.lineLength,
+              animation: `drawLine 1s ease-out ${si * 0.15}s forwards`
+            } : void 0
+          },
+          `line-${si}`
+        ))
       ] }),
-      showLabels && points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("text", { x: point.x, y: height - 10, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: point.label }, i)),
+      showDots && processedSeries.map(
+        (s, si) => !hiddenSeries.has(s.name) && s.points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+          "g",
+          {
+            onMouseEnter: () => {
+              if (isMultiSeries) {
+                const items = processedSeries.filter((ps) => !hiddenSeries.has(ps.name)).map((ps) => ({
+                  label: ps.name,
+                  value: ps.points[i]?.value ?? 0,
+                  color: ps.color
+                }));
+                setHoveredPoint({ x: point.x, y: point.y, label: point.label, value: point.value, items });
+              } else {
+                setHoveredPoint({ x: point.x, y: point.y, label: point.label, value: point.value });
+              }
+            },
+            onMouseLeave: () => setHoveredPoint(null),
+            className: "cursor-pointer",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                "circle",
+                {
+                  cx: point.x,
+                  cy: point.y,
+                  r: hoveredPoint?.x === point.x ? 6 : 4,
+                  fill: s.color,
+                  className: `transition-all duration-150 ${animated ? "animate-[scaleIn_0.3s_ease-out]" : ""}`,
+                  style: animated ? { animationDelay: `${si * 0.15 + i * 0.05}s`, animationFillMode: "both" } : void 0
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("circle", { cx: point.x, cy: point.y, r: 16, fill: "transparent" }),
+              showValues && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                "text",
+                {
+                  x: point.x,
+                  y: point.y - 12,
+                  textAnchor: "middle",
+                  fontSize: "10",
+                  fontWeight: "500",
+                  className: "text-foreground",
+                  fill: "currentColor",
+                  children: formatValue ? formatValue(point.value) : point.value
+                }
+              )
+            ]
+          },
+          `dot-${si}-${i}`
+        ))
+      ),
+      referenceLines.map((ref, i) => {
+        const range = maxValue - minValue || 1;
+        const y = padding.top + chartHeight - (ref.value - minValue) / range * chartHeight;
+        return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("g", { className: "pointer-events-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            "line",
+            {
+              x1: padding.left,
+              y1: y,
+              x2: padding.left + chartWidth,
+              y2: y,
+              stroke: ref.color || "#ef4444",
+              strokeWidth: 1.5,
+              strokeDasharray: ref.strokeDasharray || "6 4",
+              opacity: 0.7
+            }
+          ),
+          ref.label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("text", { x: padding.left + chartWidth + 4, y: y + 4, fontSize: "10", fill: ref.color || "#ef4444", fontWeight: "500", children: ref.label })
+        ] }, `ref-${i}`);
+      }),
+      hoveredPoint && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("g", { className: "pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        "line",
+        {
+          x1: hoveredPoint.x,
+          y1: padding.top,
+          x2: hoveredPoint.x,
+          y2: padding.top + chartHeight,
+          stroke: "currentColor",
+          strokeWidth: 1,
+          strokeDasharray: "4 4",
+          opacity: 0.3,
+          className: "text-foreground"
+        }
+      ) }),
+      showLabels && labels.map((lbl, i) => {
+        const x = padding.left + i / (labels.length - 1 || 1) * chartWidth;
+        return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("text", { x, y: height - 10, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: lbl }, i);
+      }),
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("style", { children: `
           @keyframes drawLine {
-            from { stroke-dashoffset: 1000; }
             to { stroke-dashoffset: 0; }
           }
           @keyframes scaleIn {
@@ -17470,10 +17585,20 @@ function LineChart({
           }
           @keyframes fadeIn {
             from { opacity: 0; }
-            to { opacity: 0.2; }
+            to { opacity: 0.15; }
           }
         ` })
     ] }),
+    (showLegend ?? isMultiSeries) && isMultiSeries && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex items-center justify-center gap-6 mt-2", children: normalizedSeries.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center gap-2 text-sm cursor-pointer select-none", onClick: () => toggleSeries(s.name), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        "div",
+        {
+          className: "w-3 h-3 rounded-md transition-opacity",
+          style: { backgroundColor: s.color, opacity: hiddenSeries.has(s.name) ? 0.3 : 1 }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: hiddenSeries.has(s.name) ? "text-muted-foreground/40 line-through" : "text-muted-foreground", children: s.name })
+    ] }, i)) }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       ChartTooltip,
       {
@@ -17481,9 +17606,11 @@ function LineChart({
         y: hoveredPoint?.y ?? 0,
         visible: !!hoveredPoint,
         label: hoveredPoint?.label,
-        value: hoveredPoint?.value,
-        color,
-        containerRef: svgRef
+        value: !isMultiSeries ? hoveredPoint?.value : void 0,
+        items: isMultiSeries ? hoveredPoint?.items : void 0,
+        color: !isMultiSeries ? processedSeries[0]?.color || color : void 0,
+        containerRef: svgRef,
+        formatter: formatValue ? (v) => formatValue(Number(v)) : void 0
       }
     )
   ] });
@@ -17494,16 +17621,20 @@ var import_react26 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function BarChart({
   data,
+  series,
   width = 400,
   height = 200,
   color = "currentColor",
   showLabels = true,
   showValues = true,
   showGrid = true,
+  showLegend,
   horizontal = false,
   animated = true,
+  stacked = false,
   barRadius = 4,
   barGap = 0.3,
+  formatValue,
   className = ""
 }) {
   const svgRef = (0, import_react26.useRef)(null);
@@ -17511,31 +17642,109 @@ function BarChart({
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
   const [hoveredBar, setHoveredBar] = (0, import_react26.useState)(null);
-  const { maxValue, bars, gridLines } = (0, import_react26.useMemo)(() => {
-    if (!data.length) return { maxValue: 0, bars: [], gridLines: [] };
-    const max = Math.max(...data.map((d) => d.value));
-    const barCount = data.length;
-    const barsData = data.map((d, i) => {
+  const normalizedSeries = (0, import_react26.useMemo)(() => {
+    if (series && series.length > 0) return series;
+    if (data && data.length > 0) return [{ name: "", data, color }];
+    return [];
+  }, [series, data, color]);
+  const isMultiSeries = normalizedSeries.length > 1;
+  const { maxValue, barGroups, gridLines } = (0, import_react26.useMemo)(() => {
+    if (!normalizedSeries.length || !normalizedSeries[0]?.data?.length) {
+      return { maxValue: 0, barGroups: [], gridLines: [] };
+    }
+    const allLabels = normalizedSeries[0].data.map((d) => d.label);
+    const seriesCount = normalizedSeries.length;
+    const labelCount = allLabels.length;
+    let max = 0;
+    if (stacked) {
+      for (let li = 0; li < labelCount; li++) {
+        const stackVal = normalizedSeries.reduce((sum, s) => sum + (s.data[li]?.value || 0), 0);
+        max = Math.max(max, stackVal);
+      }
+    } else {
+      max = Math.max(...normalizedSeries.flatMap((s) => s.data.map((d) => d.value)));
+    }
+    const groups = allLabels.map((label, li) => {
       if (horizontal) {
-        const barHeight = chartHeight / barCount * (1 - barGap);
-        const gap = chartHeight / barCount * barGap;
-        return {
-          x: padding.left,
-          y: padding.top + i * (barHeight + gap) + gap / 2,
-          width: d.value / max * chartWidth,
-          height: barHeight,
-          ...d
-        };
+        const groupH = chartHeight / labelCount;
+        const gap = groupH * barGap;
+        const usable = groupH - gap;
+        if (stacked) {
+          let cum = 0;
+          const bars = normalizedSeries.map((s) => {
+            const val = s.data[li]?.value || 0;
+            const w = val / max * chartWidth;
+            const bar = {
+              x: padding.left + cum,
+              y: padding.top + li * groupH + gap / 2,
+              width: w,
+              height: usable,
+              value: val,
+              color: s.data[li]?.color || s.color,
+              seriesName: s.name,
+              label
+            };
+            cum += w;
+            return bar;
+          });
+          return { label, bars };
+        } else {
+          const bH = usable / seriesCount;
+          const bars = normalizedSeries.map((s, si) => {
+            const val = s.data[li]?.value || 0;
+            return {
+              x: padding.left,
+              y: padding.top + li * groupH + gap / 2 + si * bH,
+              width: val / max * chartWidth,
+              height: bH,
+              value: val,
+              color: s.data[li]?.color || s.color,
+              seriesName: s.name,
+              label
+            };
+          });
+          return { label, bars };
+        }
       } else {
-        const barWidth = chartWidth / barCount * (1 - barGap);
-        const gap = chartWidth / barCount * barGap;
-        return {
-          x: padding.left + i * (barWidth + gap) + gap / 2,
-          y: padding.top + chartHeight - d.value / max * chartHeight,
-          width: barWidth,
-          height: d.value / max * chartHeight,
-          ...d
-        };
+        const groupW = chartWidth / labelCount;
+        const gap = groupW * barGap;
+        const usable = groupW - gap;
+        if (stacked) {
+          let cum = 0;
+          const bars = normalizedSeries.map((s) => {
+            const val = s.data[li]?.value || 0;
+            const h = val / max * chartHeight;
+            const bar = {
+              x: padding.left + li * groupW + gap / 2,
+              y: padding.top + chartHeight - cum - h,
+              width: usable,
+              height: h,
+              value: val,
+              color: s.data[li]?.color || s.color,
+              seriesName: s.name,
+              label
+            };
+            cum += h;
+            return bar;
+          });
+          return { label, bars };
+        } else {
+          const bW = usable / seriesCount;
+          const bars = normalizedSeries.map((s, si) => {
+            const val = s.data[li]?.value || 0;
+            return {
+              x: padding.left + li * groupW + gap / 2 + si * bW,
+              y: padding.top + chartHeight - val / max * chartHeight,
+              width: bW,
+              height: val / max * chartHeight,
+              value: val,
+              color: s.data[li]?.color || s.color,
+              seriesName: s.name,
+              label
+            };
+          });
+          return { label, bars };
+        }
       }
     });
     const lines = [];
@@ -17543,106 +17752,102 @@ function BarChart({
     for (let i = 0; i <= steps; i++) {
       const value = i / steps * max;
       if (horizontal) {
-        lines.push({
-          x: padding.left + i / steps * chartWidth,
-          y1: padding.top,
-          y2: height - padding.bottom,
-          value
-        });
+        lines.push({ x: padding.left + i / steps * chartWidth, y1: padding.top, y2: height - padding.bottom, value });
       } else {
-        lines.push({
-          y: padding.top + chartHeight - i / steps * chartHeight,
-          x1: padding.left,
-          x2: width - padding.right,
-          value
-        });
+        lines.push({ y: padding.top + chartHeight - i / steps * chartHeight, x1: padding.left, x2: width - padding.right, value });
       }
     }
-    return { maxValue: max, bars: barsData, gridLines: lines };
-  }, [data, chartWidth, chartHeight, horizontal, barGap, padding, width, height]);
+    return { maxValue: max, barGroups: groups, gridLines: lines };
+  }, [normalizedSeries, chartWidth, chartHeight, horizontal, stacked, barGap, padding, width, height]);
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
       showGrid && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("g", { children: horizontal ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("line", { x1: line.x, y1: line.y1, x2: line.x, y2: line.y2, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("text", { x: line.x, y: height - 8, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("text", { x: line.x, y: height - 8, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: formatValue ? formatValue(line.value) : line.value.toFixed(0) })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("line", { x1: line.x1, y1: line.y, x2: line.x2, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: formatValue ? formatValue(line.value) : line.value.toFixed(0) })
       ] }) }, i)) }),
-      bars.map((bar, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-        "g",
-        {
-          onMouseEnter: () => setHoveredBar({
-            x: horizontal ? bar.x + bar.width : bar.x + bar.width / 2,
-            y: horizontal ? bar.y + bar.height / 2 : bar.y,
-            label: bar.label,
-            value: bar.value,
-            color: bar.color || color
-          }),
-          onMouseLeave: () => setHoveredBar(null),
-          className: "cursor-pointer",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-              "rect",
-              {
-                x: bar.x,
-                y: horizontal ? bar.y : bar.y,
-                width: animated && !horizontal ? 0 : bar.width,
-                height: animated && horizontal ? bar.height : horizontal ? bar.height : 0,
-                rx: barRadius,
-                ry: barRadius,
-                fill: bar.color || color,
-                className: `transition-all duration-150 ${hoveredBar?.label === bar.label ? "opacity-80" : ""}`,
-                style: animated ? {
-                  animation: horizontal ? `growWidth 0.5s ease-out ${i * 0.1}s forwards` : `growHeight 0.5s ease-out ${i * 0.1}s forwards`,
-                  ...horizontal ? { width: 0 } : { height: 0, y: padding.top + chartHeight }
-                } : void 0,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                    "animate",
-                    {
-                      attributeName: horizontal ? "width" : "height",
-                      from: "0",
-                      to: horizontal ? bar.width : bar.height,
-                      dur: "0.5s",
-                      begin: `${i * 0.1}s`,
-                      fill: "freeze"
-                    }
-                  ),
-                  !horizontal && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("animate", { attributeName: "y", from: padding.top + chartHeight, to: bar.y, dur: "0.5s", begin: `${i * 0.1}s`, fill: "freeze" })
-                ]
-              }
-            ),
-            showValues && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-              "text",
-              {
-                x: horizontal ? bar.x + bar.width + 8 : bar.x + bar.width / 2,
-                y: horizontal ? bar.y + bar.height / 2 + 4 : bar.y - 8,
-                textAnchor: horizontal ? "start" : "middle",
-                fontSize: "11",
-                fontWeight: "500",
-                className: "text-foreground",
-                fill: "currentColor",
-                style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.3}s forwards` } : void 0,
-                children: bar.value
-              }
-            ),
-            showLabels && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-              "text",
-              {
-                x: horizontal ? padding.left - 8 : bar.x + bar.width / 2,
-                y: horizontal ? bar.y + bar.height / 2 + 4 : height - 10,
-                textAnchor: horizontal ? "end" : "middle",
-                fontSize: "10",
-                className: "text-muted-foreground",
-                fill: "currentColor",
-                children: bar.label
-              }
-            )
-          ]
-        },
-        i
-      )),
+      barGroups.map((group, gi) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("g", { children: [
+        group.bars.map((bar, bi) => {
+          const animDelay = gi * 0.08 + bi * 0.04;
+          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+            "g",
+            {
+              onMouseEnter: () => setHoveredBar({
+                x: horizontal ? bar.x + bar.width : bar.x + bar.width / 2,
+                y: horizontal ? bar.y + bar.height / 2 : bar.y,
+                label: bar.label,
+                value: bar.value,
+                color: bar.color,
+                seriesName: bar.seriesName
+              }),
+              onMouseLeave: () => setHoveredBar(null),
+              className: "cursor-pointer",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+                  "rect",
+                  {
+                    x: bar.x,
+                    y: bar.y,
+                    width: bar.width,
+                    height: bar.height,
+                    rx: barRadius,
+                    ry: barRadius,
+                    fill: bar.color,
+                    className: `transition-all duration-150 ${hoveredBar?.label === bar.label && hoveredBar?.seriesName === bar.seriesName ? "opacity-80" : ""}`,
+                    style: animated ? {
+                      animation: horizontal ? `growWidth 0.5s ease-out ${animDelay}s forwards` : `growHeight 0.5s ease-out ${animDelay}s forwards`,
+                      ...horizontal ? { width: 0 } : { height: 0, y: padding.top + chartHeight }
+                    } : void 0,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                        "animate",
+                        {
+                          attributeName: horizontal ? "width" : "height",
+                          from: "0",
+                          to: horizontal ? bar.width : bar.height,
+                          dur: "0.5s",
+                          begin: `${animDelay}s`,
+                          fill: "freeze"
+                        }
+                      ),
+                      !horizontal && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("animate", { attributeName: "y", from: padding.top + chartHeight, to: bar.y, dur: "0.5s", begin: `${animDelay}s`, fill: "freeze" })
+                    ]
+                  }
+                ),
+                showValues && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  "text",
+                  {
+                    x: horizontal ? bar.x + bar.width + 8 : bar.x + bar.width / 2,
+                    y: horizontal ? bar.y + bar.height / 2 + 4 : bar.y - 8,
+                    textAnchor: horizontal ? "start" : "middle",
+                    fontSize: "11",
+                    fontWeight: "500",
+                    className: "text-foreground",
+                    fill: "currentColor",
+                    style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${animDelay + 0.3}s forwards` } : void 0,
+                    children: formatValue ? formatValue(bar.value) : bar.value
+                  }
+                )
+              ]
+            },
+            bi
+          );
+        }),
+        showLabels && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          "text",
+          {
+            x: horizontal ? padding.left - 8 : padding.left + (gi + 0.5) * (chartWidth / barGroups.length),
+            y: horizontal ? padding.top + (gi + 0.5) * (chartHeight / barGroups.length) + 4 : height - 10,
+            textAnchor: horizontal ? "end" : "middle",
+            fontSize: "10",
+            className: "text-muted-foreground",
+            fill: "currentColor",
+            children: group.label
+          }
+        )
+      ] }, gi)),
       /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("style", { children: `
           @keyframes growHeight {
             from { height: 0; }
@@ -17656,16 +17861,21 @@ function BarChart({
           }
         ` })
     ] }),
+    (showLegend ?? isMultiSeries) && isMultiSeries && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex items-center justify-center gap-6 mt-2", children: normalizedSeries.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "w-3 h-3 rounded-md", style: { backgroundColor: s.color } }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-muted-foreground", children: s.name })
+    ] }, i)) }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       ChartTooltip,
       {
         x: hoveredBar?.x ?? 0,
         y: hoveredBar?.y ?? 0,
         visible: !!hoveredBar,
-        label: hoveredBar?.label,
+        label: hoveredBar?.seriesName ? `${hoveredBar.label} \u2014 ${hoveredBar.seriesName}` : hoveredBar?.label,
         value: hoveredBar?.value,
         color: hoveredBar?.color,
-        containerRef: svgRef
+        containerRef: svgRef,
+        formatter: formatValue ? (v) => formatValue(Number(v)) : void 0
       }
     )
   ] });
@@ -17684,6 +17894,8 @@ function PieChart({
   showPercentage = true,
   animated = true,
   startAngle = -90,
+  renderCenter,
+  formatValue,
   className = ""
 }) {
   const containerRef = (0, import_react27.useRef)(null);
@@ -17779,17 +17991,17 @@ function PieChart({
                   className: "text-foreground",
                   fill: "currentColor",
                   style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.3}s forwards` } : void 0,
-                  children: showPercentage ? `${(seg.percentage * 100).toFixed(0)}%` : seg.value
+                  children: showPercentage ? `${(seg.percentage * 100).toFixed(0)}%` : formatValue ? formatValue(seg.value) : seg.value
                 }
               )
             ]
           },
           i
         )),
-        donut && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("g", { children: [
+        donut && (renderCenter ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("foreignObject", { x: center - donutWidth, y: center - donutWidth / 2, width: donutWidth * 2, height: donutWidth, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: renderCenter(total) }) }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("g", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("text", { x: center, y: center - 5, textAnchor: "middle", fontSize: "12", className: "text-muted-foreground", fill: "currentColor", children: "Total" }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("text", { x: center, y: center + 15, textAnchor: "middle", fontSize: "18", fontWeight: "600", className: "text-foreground", fill: "currentColor", children: total })
-        ] })
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("text", { x: center, y: center + 15, textAnchor: "middle", fontSize: "18", fontWeight: "600", className: "text-foreground", fill: "currentColor", children: formatValue ? formatValue(total) : total })
+        ] }))
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("style", { children: `
           @keyframes pieSlice {
@@ -17816,7 +18028,7 @@ function PieChart({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-3 h-3 rounded-md shrink-0", style: { backgroundColor: seg.color } }),
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-muted-foreground", children: seg.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-foreground font-medium ml-auto", children: showPercentage ? `${(seg.percentage * 100).toFixed(0)}%` : seg.value })
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-foreground font-medium ml-auto", children: showPercentage ? `${(seg.percentage * 100).toFixed(0)}%` : formatValue ? formatValue(seg.value) : seg.value })
         ]
       },
       i
@@ -17839,26 +18051,6 @@ function PieChart({
 // ../../components/ui/AreaChart.tsx
 var import_react28 = require("react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
-function getCatmullRomSpline(points) {
-  if (points.length < 2) return "";
-  if (points.length === 2) {
-    return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
-  }
-  let path = `M ${points[0].x} ${points[0].y}`;
-  for (let i = 0; i < points.length - 1; i++) {
-    const p0 = points[Math.max(0, i - 1)];
-    const p1 = points[i];
-    const p2 = points[i + 1];
-    const p3 = points[Math.min(points.length - 1, i + 2)];
-    const tension = 0.5;
-    const cp1x = p1.x + (p2.x - p0.x) * tension / 6;
-    const cp1y = p1.y + (p2.y - p0.y) * tension / 6;
-    const cp2x = p2.x - (p3.x - p1.x) * tension / 6;
-    const cp2y = p2.y - (p3.y - p1.y) * tension / 6;
-    path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
-  }
-  return path;
-}
 function AreaChart({
   series,
   width = 400,
@@ -17870,13 +18062,25 @@ function AreaChart({
   animated = true,
   stacked = false,
   curved = true,
+  formatValue,
+  emptyText = "No data",
   className = ""
 }) {
   const containerRef = (0, import_react28.useRef)(null);
+  const clipId = (0, import_react28.useRef)(`area-clip-${Math.random().toString(36).slice(2, 8)}`).current;
   const padding = { top: 20, right: 20, bottom: 40, left: 50 };
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
   const [hoveredPoint, setHoveredPoint] = (0, import_react28.useState)(null);
+  const [hiddenSeries, setHiddenSeries] = (0, import_react28.useState)(/* @__PURE__ */ new Set());
+  const toggleSeries = (0, import_react28.useCallback)((name) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }, []);
   const { processedSeries, gridLines, maxValue, labels } = (0, import_react28.useMemo)(() => {
     if (!series.length || !series[0]?.data?.length) {
       return { processedSeries: [], gridLines: [], maxValue: 0, labels: [] };
@@ -17947,16 +18151,17 @@ function AreaChart({
   }, [series, chartWidth, chartHeight, padding, stacked, curved]);
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ref: containerRef, className: `relative flex flex-col gap-4 ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { width, height, className: "overflow-visible", style: { fontFamily: "inherit" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("rect", { x: padding.left, y: padding.top, width: chartWidth, height: chartHeight }) }) }),
       showGrid && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("g", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: formatValue ? formatValue(line.value) : line.value.toFixed(0) })
       ] }, i)) }),
-      [...processedSeries].reverse().map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("g", { clipPath: `url(#${clipId})`, children: [...processedSeries].reverse().map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "path",
         {
           d: s.areaPath,
           fill: s.color,
-          fillOpacity: s.fillOpacity ?? 0.3,
+          fillOpacity: hiddenSeries.has(s.name) ? 0 : s.fillOpacity ?? 0.3,
           className: "transition-all duration-300",
           style: animated ? {
             opacity: 0,
@@ -17964,8 +18169,8 @@ function AreaChart({
           } : void 0
         },
         `area-${i}`
-      )),
-      processedSeries.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("g", { clipPath: `url(#${clipId})`, children: processedSeries.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "path",
         {
           d: s.linePath,
@@ -17974,6 +18179,8 @@ function AreaChart({
           strokeWidth: 2,
           strokeLinecap: "round",
           strokeLinejoin: "round",
+          className: "transition-opacity duration-300",
+          opacity: hiddenSeries.has(s.name) ? 0 : 1,
           style: animated ? {
             strokeDasharray: s.lineLength,
             strokeDashoffset: s.lineLength,
@@ -17981,9 +18188,9 @@ function AreaChart({
           } : void 0
         },
         `line-${i}`
-      )),
+      )) }),
       showDots && processedSeries.map(
-        (s, seriesIdx) => s.points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+        (s, seriesIdx) => !hiddenSeries.has(s.name) && s.points.map((point, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           "g",
           {
             onMouseEnter: () => {
@@ -18067,11 +18274,18 @@ function AreaChart({
     showLegend && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex items-center justify-center gap-6", children: series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
       "div",
       {
-        className: "flex items-center gap-2 text-sm",
+        className: "flex items-center gap-2 text-sm cursor-pointer select-none",
         style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.5}s forwards` } : void 0,
+        onClick: () => toggleSeries(s.name),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-3 h-3 rounded-md", style: { backgroundColor: s.color } }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-muted-foreground", children: s.name })
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+            "div",
+            {
+              className: "w-3 h-3 rounded-md transition-opacity",
+              style: { backgroundColor: s.color, opacity: hiddenSeries.has(s.name) ? 0.3 : 1 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: hiddenSeries.has(s.name) ? "text-muted-foreground/40 line-through" : "text-muted-foreground", children: s.name })
         ]
       },
       i
@@ -18093,26 +18307,6 @@ function AreaChart({
 // ../../components/ui/Sparkline.tsx
 var import_react29 = require("react");
 var import_jsx_runtime60 = require("react/jsx-runtime");
-function getCatmullRomSpline2(points) {
-  if (points.length < 2) return "";
-  if (points.length === 2) {
-    return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
-  }
-  let path = `M ${points[0].x} ${points[0].y}`;
-  for (let i = 0; i < points.length - 1; i++) {
-    const p0 = points[Math.max(0, i - 1)];
-    const p1 = points[i];
-    const p2 = points[i + 1];
-    const p3 = points[Math.min(points.length - 1, i + 2)];
-    const tension = 0.5;
-    const cp1x = p1.x + (p2.x - p0.x) * tension / 6;
-    const cp1y = p1.y + (p2.y - p0.y) * tension / 6;
-    const cp2x = p2.x - (p3.x - p1.x) * tension / 6;
-    const cp2y = p2.y - (p3.y - p1.y) * tension / 6;
-    path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
-  }
-  return path;
-}
 function Sparkline({
   data,
   width = 100,
@@ -18143,7 +18337,7 @@ function Sparkline({
       y: padding + chartHeight - (value - min) / range * chartHeight,
       value
     }));
-    const line = curved ? getCatmullRomSpline2(pts) : `M ${pts.map((p) => `${p.x} ${p.y}`).join(" L ")}`;
+    const line = curved ? getCatmullRomSpline(pts) : `M ${pts.map((p) => `${p.x} ${p.y}`).join(" L ")}`;
     const area = `${line} L ${padding + chartWidth} ${padding + chartHeight} L ${padding} ${padding + chartHeight} Z`;
     const length = pts.reduce((acc, p, i) => {
       if (i === 0) return 0;
@@ -18244,12 +18438,22 @@ function RadarChart({
   showLegend = true,
   showValues = false,
   animated = true,
+  formatValue,
   className = ""
 }) {
   const containerRef = (0, import_react30.useRef)(null);
   const center = size / 2;
   const radius = size / 2 - 40;
   const [hoveredPoint, setHoveredPoint] = (0, import_react30.useState)(null);
+  const [hiddenSeries, setHiddenSeries] = (0, import_react30.useState)(/* @__PURE__ */ new Set());
+  const toggleSeries = (0, import_react30.useCallback)((name) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }, []);
   const { axes, processedSeries, levelPaths } = (0, import_react30.useMemo)(() => {
     if (!series.length || !series[0]?.data?.length) {
       return { axes: [], processedSeries: [], levelPaths: [] };
@@ -18304,81 +18508,83 @@ function RadarChart({
     /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("svg", { width: size, height: size, className: "overflow-visible", style: { fontFamily: "inherit" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("g", { className: "text-muted-foreground/20", children: levelPaths.map((level, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", { d: level.path, fill: "none", stroke: "currentColor", strokeWidth: 1 }, i)) }),
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("g", { className: "text-muted-foreground/30", children: axes.map((axis, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("line", { x1: center, y1: center, x2: axis.x, y2: axis.y, stroke: "currentColor", strokeWidth: 1 }, i)) }),
-      processedSeries.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-          "path",
-          {
-            d: s.path,
-            fill: s.color,
-            fillOpacity: s.fillOpacity ?? 0.2,
-            stroke: s.color,
-            strokeWidth: 2,
-            strokeLinejoin: "round",
-            className: "transition-all duration-300",
-            style: animated ? {
-              opacity: 0,
-              transform: "scale(0)",
-              transformOrigin: `${center}px ${center}px`,
-              animation: `radarPop 0.5s ease-out ${i * 0.15}s forwards`
-            } : void 0
-          }
-        ),
-        s.points.map((point, j) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
-          "g",
-          {
-            onMouseEnter: () => {
-              const items = processedSeries.map((ps) => ({
-                label: ps.name,
-                value: ps.points[j]?.value ?? 0,
-                color: ps.color
-              }));
-              setHoveredPoint({
-                x: point.x,
-                y: point.y,
-                axis: series[0]?.data[j]?.axis ?? "",
-                items
-              });
+      processedSeries.map(
+        (s, i) => !hiddenSeries.has(s.name) && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            "path",
+            {
+              d: s.path,
+              fill: s.color,
+              fillOpacity: s.fillOpacity ?? 0.2,
+              stroke: s.color,
+              strokeWidth: 2,
+              strokeLinejoin: "round",
+              className: "transition-all duration-300",
+              style: animated ? {
+                opacity: 0,
+                transform: "scale(0)",
+                transformOrigin: `${center}px ${center}px`,
+                animation: `radarPop 0.5s ease-out ${i * 0.15}s forwards`
+              } : void 0
+            }
+          ),
+          s.points.map((point, j) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+            "g",
+            {
+              onMouseEnter: () => {
+                const items = processedSeries.map((ps) => ({
+                  label: ps.name,
+                  value: ps.points[j]?.value ?? 0,
+                  color: ps.color
+                }));
+                setHoveredPoint({
+                  x: point.x,
+                  y: point.y,
+                  axis: series[0]?.data[j]?.axis ?? "",
+                  items
+                });
+              },
+              onMouseLeave: () => setHoveredPoint(null),
+              className: "cursor-pointer",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                  "circle",
+                  {
+                    cx: point.x,
+                    cy: point.y,
+                    r: hoveredPoint?.axis === series[0]?.data[j]?.axis ? 6 : 4,
+                    fill: s.color,
+                    className: "transition-all duration-150",
+                    style: animated ? {
+                      opacity: 0,
+                      transform: "scale(0)",
+                      transformOrigin: `${point.x}px ${point.y}px`,
+                      animation: `dotPop 0.3s ease-out ${i * 0.15 + j * 0.05 + 0.3}s forwards`
+                    } : void 0
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("circle", { cx: point.x, cy: point.y, r: 12, fill: "transparent" })
+              ]
             },
-            onMouseLeave: () => setHoveredPoint(null),
-            className: "cursor-pointer",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-                "circle",
-                {
-                  cx: point.x,
-                  cy: point.y,
-                  r: hoveredPoint?.axis === series[0]?.data[j]?.axis ? 6 : 4,
-                  fill: s.color,
-                  className: "transition-all duration-150",
-                  style: animated ? {
-                    opacity: 0,
-                    transform: "scale(0)",
-                    transformOrigin: `${point.x}px ${point.y}px`,
-                    animation: `dotPop 0.3s ease-out ${i * 0.15 + j * 0.05 + 0.3}s forwards`
-                  } : void 0
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("circle", { cx: point.x, cy: point.y, r: 12, fill: "transparent" })
-            ]
-          },
-          j
-        )),
-        showValues && s.points.map((point, j) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-          "text",
-          {
-            x: point.x,
-            y: point.y - 10,
-            textAnchor: "middle",
-            fontSize: "10",
-            fontWeight: "500",
-            className: "text-foreground",
-            fill: "currentColor",
-            style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.15 + 0.5}s forwards` } : void 0,
-            children: point.value
-          },
-          `val-${j}`
-        ))
-      ] }, i)),
+            j
+          )),
+          showValues && s.points.map((point, j) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            "text",
+            {
+              x: point.x,
+              y: point.y - 10,
+              textAnchor: "middle",
+              fontSize: "10",
+              fontWeight: "500",
+              className: "text-foreground",
+              fill: "currentColor",
+              style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.15 + 0.5}s forwards` } : void 0,
+              children: point.value
+            },
+            `val-${j}`
+          ))
+        ] }, i)
+      ),
       showLabels && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("g", { className: "text-muted-foreground", children: axes.map((axis, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("text", { x: axis.labelX, y: axis.labelY, textAnchor: "middle", dominantBaseline: "middle", fontSize: "11", fill: "currentColor", children: axis.label }, i)) }),
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("style", { children: `
           @keyframes radarPop {
@@ -18410,11 +18616,18 @@ function RadarChart({
     showLegend && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex items-center justify-center gap-6", children: series.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
       "div",
       {
-        className: "flex items-center gap-2 text-sm",
+        className: "flex items-center gap-2 text-sm cursor-pointer select-none",
         style: animated ? { opacity: 0, animation: `fadeIn 0.3s ease-out ${i * 0.1 + 0.5}s forwards` } : void 0,
+        onClick: () => toggleSeries(s.name),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-3 h-3 rounded-md", style: { backgroundColor: s.color } }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-muted-foreground", children: s.name })
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            "div",
+            {
+              className: "w-3 h-3 rounded-md transition-opacity",
+              style: { backgroundColor: s.color, opacity: hiddenSeries.has(s.name) ? 0.3 : 1 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: hiddenSeries.has(s.name) ? "text-muted-foreground/40 line-through" : "text-muted-foreground", children: s.name })
         ]
       },
       i
@@ -18450,11 +18663,13 @@ function GaugeChart({
   animated = true,
   startAngle = -135,
   endAngle = 135,
+  zones,
+  formatValue,
   className = ""
 }) {
   const center = size / 2;
   const radius = center - thickness / 2 - 10;
-  const { backgroundPath, valuePath, percentage, needleAngle } = (0, import_react31.useMemo)(() => {
+  const { backgroundPath, valuePath, percentage, needleAngle, zonePaths } = (0, import_react31.useMemo)(() => {
     const normalizedValue = Math.min(Math.max(value, min), max);
     const pct = (normalizedValue - min) / (max - min);
     const totalAngle = endAngle - startAngle;
@@ -18472,13 +18687,19 @@ function GaugeChart({
       const largeArc = Math.abs(end - start) > 180 ? 1 : 0;
       return `M ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArc} 1 ${endPoint.x} ${endPoint.y}`;
     };
+    const zonePaths2 = (zones ?? []).map((zone) => {
+      const zoneStart = startAngle + (Math.max(zone.min, min) - min) / (max - min) * totalAngle;
+      const zoneEnd = startAngle + (Math.min(zone.max, max) - min) / (max - min) * totalAngle;
+      return { path: createArc(zoneStart, zoneEnd), color: zone.color };
+    });
     return {
       backgroundPath: createArc(startAngle, endAngle),
       valuePath: createArc(startAngle, currentAngle),
       percentage: pct,
-      needleAngle: currentAngle
+      needleAngle: currentAngle,
+      zonePaths: zonePaths2
     };
-  }, [value, min, max, center, radius, startAngle, endAngle]);
+  }, [value, min, max, center, radius, startAngle, endAngle, zones]);
   const needleLength = radius - 10;
   const needleAngleRad = needleAngle * Math.PI / 180;
   const needleX = center + needleLength * Math.cos(needleAngleRad);
@@ -18495,6 +18716,7 @@ function GaugeChart({
         className: !backgroundColor ? "text-muted-foreground/20" : ""
       }
     ),
+    zonePaths.map((zone, i) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("path", { d: zone.path, fill: "none", stroke: zone.color, strokeWidth: thickness, strokeLinecap: "round", opacity: 0.35 }, `zone-${i}`)),
     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "path",
       {
@@ -18565,7 +18787,7 @@ function GaugeChart({
           className: "text-foreground",
           fill: "currentColor",
           style: animated ? { opacity: 0, animation: "fadeIn 0.5s ease-out 0.5s forwards" } : void 0,
-          children: value
+          children: formatValue ? formatValue(value) : value
         }
       ),
       label && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(