@classic-homes/charts-react 0.1.1

package/dist/index.cjs

@@ -0,0 +1,2188 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AreaChart: () => AreaChart,
+  BarChart: () => BarChart,
+  CandlestickChart: () => CandlestickChart,
+  ChartContainer: () => ChartContainer,
+  ChartEmpty: () => ChartEmpty,
+  ChartError: () => ChartError,
+  ChartSkeleton: () => ChartSkeleton,
+  DonutChart: () => DonutChart,
+  FunnelChart: () => FunnelChart,
+  GaugeChart: () => GaugeChart,
+  HeatmapChart: () => HeatmapChart,
+  LineChart: () => LineChart,
+  PieChart: () => PieChart,
+  RadarChart: () => RadarChart,
+  SankeyChart: () => SankeyChart,
+  ScatterChart: () => ScatterChart,
+  TreemapChart: () => TreemapChart,
+  cn: () => cn,
+  registerClassicThemes: () => registerClassicThemes,
+  useChart: () => useChart,
+  useChartResize: () => useChartResize,
+  useChartTheme: () => useChartTheme,
+  useReducedMotion: () => useReducedMotion
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/base/ChartContainer.tsx
+var React4 = __toESM(require("react"), 1);
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/base/ChartSkeleton.tsx
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var ChartSkeleton = React.forwardRef(
+  ({ height = 400, className }, ref) => {
+    const heightStyle = typeof height === "number" ? `${height}px` : height;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        "data-testid": "chart-skeleton",
+        className: cn("animate-pulse rounded-lg border border-border bg-muted", className),
+        style: { height: heightStyle },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-full flex-col p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-4 h-5 w-1/3 rounded bg-muted-foreground/20" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-1 items-end gap-2 px-4 pb-8", children: [40, 65, 45, 80, 55, 70, 50].map((height2, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "flex-1 rounded-t bg-muted-foreground/20",
+              style: { height: `${height2}%` }
+            },
+            i
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-between px-4", children: [1, 2, 3, 4, 5, 6, 7].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-8 rounded bg-muted-foreground/20" }, i)) })
+        ] })
+      }
+    );
+  }
+);
+ChartSkeleton.displayName = "ChartSkeleton";
+
+// src/components/base/ChartError.tsx
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ChartError = React2.forwardRef(
+  ({ message, height = 400, onRetry, className }, ref) => {
+    const heightStyle = typeof height === "number" ? `${height}px` : height;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        ref,
+        "data-testid": "chart-error",
+        role: "alert",
+        className: cn(
+          "flex flex-col items-center justify-center rounded-lg border border-destructive/50 bg-destructive/10",
+          className
+        ),
+        style: { height: heightStyle },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "svg",
+            {
+              className: "mb-3 h-10 w-10 text-destructive",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-2 text-sm font-medium text-destructive", children: message }),
+          onRetry && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: onRetry,
+              className: "rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90",
+              children: "Retry"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ChartError.displayName = "ChartError";
+
+// src/components/base/ChartEmpty.tsx
+var React3 = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ChartEmpty = React3.forwardRef(
+  ({ message = "No data available", height = 400, className }, ref) => {
+    const heightStyle = typeof height === "number" ? `${height}px` : height;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ref,
+        "data-testid": "chart-empty",
+        className: cn(
+          "flex flex-col items-center justify-center rounded-lg border border-border bg-muted/50",
+          className
+        ),
+        style: { height: heightStyle },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "svg",
+            {
+              className: "mb-3 h-10 w-10 text-muted-foreground",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 1.5,
+                  d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-muted-foreground", children: message })
+        ]
+      }
+    );
+  }
+);
+ChartEmpty.displayName = "ChartEmpty";
+
+// src/components/base/ChartContainer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ChartContainer = React4.forwardRef(
+  ({
+    title,
+    description,
+    height = 400,
+    loading,
+    error,
+    empty,
+    emptyMessage,
+    onRetry,
+    className,
+    wrapperClassName,
+    children,
+    ...props
+  }, ref) => {
+    const heightStyle = typeof height === "number" ? `${height}px` : height;
+    if (loading) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartSkeleton, { height, className: wrapperClassName });
+    }
+    if (error) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ChartError,
+        {
+          message: error,
+          height,
+          onRetry,
+          className: wrapperClassName
+        }
+      );
+    }
+    if (empty) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartEmpty, { message: emptyMessage, height, className: wrapperClassName });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        ref,
+        role: "img",
+        "aria-label": title,
+        "aria-describedby": description ? `${title}-desc` : void 0,
+        "data-testid": "chart-container",
+        className: cn("rounded-lg border border-border bg-card", wrapperClassName),
+        ...props,
+        children: [
+          description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: `${title}-desc`, className: "sr-only", children: description }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("h-full w-full", className), style: { height: heightStyle }, children })
+        ]
+      }
+    );
+  }
+);
+ChartContainer.displayName = "ChartContainer";
+
+// src/components/core/LineChart.tsx
+var React5 = __toESM(require("react"), 1);
+var echarts3 = __toESM(require("echarts/core"), 1);
+var import_charts = require("echarts/charts");
+var import_components = require("echarts/components");
+var import_renderers = require("echarts/renderers");
+var import_charts_core2 = require("@classic-homes/charts-core");
+
+// src/hooks/useChart.ts
+var import_react4 = require("react");
+var echarts2 = __toESM(require("echarts/core"), 1);
+
+// src/hooks/useChartTheme.ts
+var import_react = require("react");
+var echarts = __toESM(require("echarts/core"), 1);
+var import_charts_core = require("@classic-homes/charts-core");
+var themesRegistered = false;
+function registerClassicThemes() {
+  if (themesRegistered) return;
+  echarts.registerTheme(import_charts_core.THEME_LIGHT, import_charts_core.lightTheme);
+  echarts.registerTheme(import_charts_core.THEME_DARK, import_charts_core.darkTheme);
+  themesRegistered = true;
+}
+function useChartTheme(preference = "auto") {
+  const [currentTheme, setCurrentTheme] = (0, import_react.useState)(import_charts_core.THEME_LIGHT);
+  const updateTheme = (0, import_react.useCallback)(() => {
+    if (preference !== "auto") {
+      setCurrentTheme(preference === "dark" ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT);
+      return;
+    }
+    const isDark = document.documentElement.classList.contains("dark");
+    setCurrentTheme(isDark ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT);
+  }, [preference]);
+  (0, import_react.useEffect)(() => {
+    registerClassicThemes();
+    updateTheme();
+    if (preference !== "auto") return;
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          updateTheme();
+        }
+      });
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleMediaChange = () => updateTheme();
+    mediaQuery.addEventListener("change", handleMediaChange);
+    return () => {
+      observer.disconnect();
+      mediaQuery.removeEventListener("change", handleMediaChange);
+    };
+  }, [preference, updateTheme]);
+  return currentTheme;
+}
+
+// src/hooks/useChartResize.ts
+var import_react2 = require("react");
+function useChartResize(chartRef, containerRef) {
+  const resizeObserverRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const container = containerRef.current;
+    const chart = chartRef.current;
+    if (!container || !chart) return;
+    let resizeTimeout;
+    resizeObserverRef.current = new ResizeObserver(() => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        chart.resize();
+      }, 100);
+    });
+    resizeObserverRef.current.observe(container);
+    return () => {
+      clearTimeout(resizeTimeout);
+      resizeObserverRef.current?.disconnect();
+    };
+  }, [chartRef, containerRef]);
+}
+
+// src/hooks/useReducedMotion.ts
+var import_react3 = require("react");
+function useReducedMotion() {
+  const [reducedMotion, setReducedMotion] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(mediaQuery.matches);
+    const handleChange = (event) => {
+      setReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+  return reducedMotion;
+}
+
+// src/hooks/useChart.ts
+function useChart({
+  option,
+  theme = "auto",
+  animation,
+  onReady
+}) {
+  const containerRef = (0, import_react4.useRef)(null);
+  const chartRef = (0, import_react4.useRef)(null);
+  const currentTheme = useChartTheme(theme);
+  const reducedMotion = useReducedMotion();
+  (0, import_react4.useEffect)(() => {
+    if (!containerRef.current) return;
+    if (chartRef.current) {
+      chartRef.current.dispose();
+    }
+    chartRef.current = echarts2.init(containerRef.current, currentTheme);
+    if (onReady && chartRef.current) {
+      onReady(chartRef.current);
+    }
+    return () => {
+      chartRef.current?.dispose();
+      chartRef.current = null;
+    };
+  }, [currentTheme, onReady]);
+  (0, import_react4.useEffect)(() => {
+    if (!chartRef.current) return;
+    const shouldAnimate = animation ?? !reducedMotion;
+    const optionWithAnimation = {
+      ...option,
+      animation: shouldAnimate
+    };
+    chartRef.current.setOption(optionWithAnimation, {
+      notMerge: false,
+      lazyUpdate: true
+    });
+  }, [option, animation, reducedMotion]);
+  (0, import_react4.useEffect)(() => {
+    if (!chartRef.current || !containerRef.current) return;
+    const currentOption = chartRef.current.getOption();
+    chartRef.current.dispose();
+    chartRef.current = echarts2.init(containerRef.current, currentTheme);
+    chartRef.current.setOption(currentOption);
+  }, [currentTheme]);
+  useChartResize(chartRef, containerRef);
+  return {
+    chartRef,
+    containerRef,
+    currentTheme
+  };
+}
+
+// src/components/core/LineChart.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+echarts3.use([
+  import_charts.LineChart,
+  import_components.GridComponent,
+  import_components.TooltipComponent,
+  import_components.LegendComponent,
+  import_components.TitleComponent,
+  import_renderers.CanvasRenderer
+]);
+var LineChart = React5.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showGrid = true,
+    smooth = false,
+    areaFilled = false,
+    showDataPoints = false,
+    stacked = false,
+    onClick,
+    onHover,
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
+    const option = React5.useMemo(() => {
+      if (isEmpty) return {};
+      return {
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        tooltip: showTooltip ? {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985"
+            }
+          }
+        } : void 0,
+        legend: showLegend ? {
+          data: data.series.map((s) => s.name),
+          bottom: 0
+        } : void 0,
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: data.categories,
+          splitLine: {
+            show: showGrid
+          }
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: showGrid
+          }
+        },
+        series: data.series.map((series) => ({
+          name: series.name,
+          type: "line",
+          data: series.data,
+          smooth,
+          showSymbol: showDataPoints,
+          symbolSize: showDataPoints ? 6 : 0,
+          stack: stacked ? "Total" : void 0,
+          areaStyle: areaFilled ? { opacity: 0.3 } : void 0,
+          itemStyle: series.color ? { color: series.color } : void 0,
+          emphasis: {
+            focus: "series"
+          }
+        }))
+      };
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      showGrid,
+      smooth,
+      areaFilled,
+      showDataPoints,
+      stacked
+    ]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation,
+      onReady: (chart) => {
+        if (onClick) {
+          chart.on("click", (params) => {
+            onClick({
+              type: params.type || "click",
+              componentType: params.componentType || "series",
+              seriesIndex: params.seriesIndex,
+              seriesName: params.seriesName || "",
+              dataIndex: params.dataIndex || 0,
+              name: params.name || "",
+              value: params.value,
+              color: params.color
+            });
+          });
+        }
+        if (onHover) {
+          chart.on("mouseover", (params) => {
+            onHover({
+              type: params.type || "mouseover",
+              componentType: params.componentType || "series",
+              seriesIndex: params.seriesIndex,
+              seriesName: params.seriesName || "",
+              dataIndex: params.dataIndex || 0,
+              name: params.name || "",
+              value: params.value,
+              color: params.color
+            });
+          });
+        }
+      }
+    });
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core2.generateLineChartDescription)(title, data) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+LineChart.displayName = "LineChart";
+
+// src/components/core/BarChart.tsx
+var React6 = __toESM(require("react"), 1);
+var echarts4 = __toESM(require("echarts/core"), 1);
+var import_charts2 = require("echarts/charts");
+var import_components2 = require("echarts/components");
+var import_renderers2 = require("echarts/renderers");
+var import_charts_core3 = require("@classic-homes/charts-core");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+echarts4.use([
+  import_charts2.BarChart,
+  import_components2.GridComponent,
+  import_components2.TooltipComponent,
+  import_components2.LegendComponent,
+  import_components2.TitleComponent,
+  import_renderers2.CanvasRenderer
+]);
+var BarChart = React6.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showGrid = true,
+    orientation = "vertical",
+    stacked = false,
+    showValues = false,
+    onClick,
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
+    const isHorizontal = orientation === "horizontal";
+    const option = React6.useMemo(() => {
+      if (isEmpty) return {};
+      const categoryAxis = {
+        type: "category",
+        data: data.categories,
+        axisTick: {
+          alignWithLabel: true
+        }
+      };
+      const valueAxis = {
+        type: "value",
+        splitLine: {
+          show: showGrid
+        }
+      };
+      return {
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        tooltip: showTooltip ? {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        } : void 0,
+        legend: showLegend ? {
+          data: data.series.map((s) => s.name),
+          bottom: 0
+        } : void 0,
+        xAxis: isHorizontal ? valueAxis : categoryAxis,
+        yAxis: isHorizontal ? categoryAxis : valueAxis,
+        series: data.series.map((series) => ({
+          name: series.name,
+          type: "bar",
+          data: series.data,
+          stack: stacked ? "Total" : void 0,
+          itemStyle: series.color ? { color: series.color } : void 0,
+          label: showValues ? {
+            show: true,
+            position: isHorizontal ? "right" : "top"
+          } : void 0,
+          emphasis: {
+            focus: "series"
+          }
+        }))
+      };
+    }, [data, isEmpty, showTooltip, showLegend, showGrid, isHorizontal, stacked, showValues]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation,
+      onReady: (chart) => {
+        if (onClick) {
+          chart.on("click", (params) => {
+            onClick({
+              type: params.type || "click",
+              componentType: params.componentType || "series",
+              seriesIndex: params.seriesIndex,
+              seriesName: params.seriesName || "",
+              dataIndex: params.dataIndex || 0,
+              name: params.name || "",
+              value: params.value,
+              color: params.color
+            });
+          });
+        }
+      }
+    });
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core3.generateBarChartDescription)(title, data) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+BarChart.displayName = "BarChart";
+
+// src/components/core/PieChart.tsx
+var React7 = __toESM(require("react"), 1);
+var echarts5 = __toESM(require("echarts/core"), 1);
+var import_charts3 = require("echarts/charts");
+var import_components3 = require("echarts/components");
+var import_renderers3 = require("echarts/renderers");
+var import_charts_core4 = require("@classic-homes/charts-core");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+echarts5.use([import_charts3.PieChart, import_components3.TooltipComponent, import_components3.LegendComponent, import_components3.TitleComponent, import_renderers3.CanvasRenderer]);
+var PieChart = React7.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showLabels = true,
+    labelPosition = "outside",
+    innerRadius = 0,
+    onClick,
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.length;
+    const option = React7.useMemo(() => {
+      if (isEmpty) return {};
+      return {
+        tooltip: showTooltip ? {
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)"
+        } : void 0,
+        legend: showLegend ? {
+          orient: "horizontal",
+          bottom: 0,
+          data: data.map((d) => d.name)
+        } : void 0,
+        series: [
+          {
+            name: title,
+            type: "pie",
+            radius: innerRadius === 0 ? "70%" : ["50%", "70%"],
+            center: ["50%", "45%"],
+            data: data.map((item) => ({
+              name: item.name,
+              value: item.value,
+              itemStyle: item.color ? { color: item.color } : void 0
+            })),
+            label: showLabels ? {
+              show: true,
+              position: labelPosition,
+              formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
+            } : {
+              show: false
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      };
+    }, [data, isEmpty, showTooltip, showLegend, showLabels, labelPosition, innerRadius, title]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation,
+      onReady: (chart) => {
+        if (onClick) {
+          chart.on("click", (params) => {
+            onClick({
+              type: params.type || "click",
+              componentType: params.componentType || "series",
+              name: params.name || "",
+              value: params.value,
+              percent: params.percent,
+              color: params.color
+            });
+          });
+        }
+      }
+    });
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core4.generatePieChartDescription)(title, data, false) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+PieChart.displayName = "PieChart";
+
+// src/components/core/AreaChart.tsx
+var React8 = __toESM(require("react"), 1);
+var echarts6 = __toESM(require("echarts/core"), 1);
+var import_charts4 = require("echarts/charts");
+var import_components4 = require("echarts/components");
+var import_renderers4 = require("echarts/renderers");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+echarts6.use([
+  import_charts4.LineChart,
+  import_components4.GridComponent,
+  import_components4.TooltipComponent,
+  import_components4.LegendComponent,
+  import_components4.TitleComponent,
+  import_renderers4.CanvasRenderer
+]);
+var AreaChart = React8.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showGrid = true,
+    smooth = false,
+    stacked = false,
+    gradient = true,
+    onClick,
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
+    const option = React8.useMemo(() => {
+      if (isEmpty) return {};
+      return {
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        tooltip: showTooltip ? {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985"
+            }
+          }
+        } : void 0,
+        legend: showLegend ? {
+          data: data.series.map((s) => s.name),
+          bottom: 0
+        } : void 0,
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: data.categories
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: showGrid
+          }
+        },
+        series: data.series.map((series, index) => ({
+          name: series.name,
+          type: "line",
+          data: series.data,
+          smooth,
+          stack: stacked ? "Total" : void 0,
+          areaStyle: gradient ? {
+            opacity: 0.8,
+            color: new echarts6.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: series.color || `rgba(${60 + index * 40}, ${160 - index * 20}, ${180 - index * 30}, 0.8)`
+              },
+              {
+                offset: 1,
+                color: series.color || `rgba(${60 + index * 40}, ${160 - index * 20}, ${180 - index * 30}, 0.1)`
+              }
+            ])
+          } : { opacity: 0.5 },
+          itemStyle: series.color ? { color: series.color } : void 0,
+          emphasis: {
+            focus: "series"
+          },
+          showSymbol: false
+        }))
+      };
+    }, [data, isEmpty, showTooltip, showLegend, showGrid, smooth, stacked, gradient]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation,
+      onReady: (chart) => {
+        if (onClick) {
+          chart.on("click", (params) => {
+            onClick({
+              type: params.type || "click",
+              componentType: params.componentType || "series",
+              seriesIndex: params.seriesIndex,
+              seriesName: params.seriesName || "",
+              dataIndex: params.dataIndex || 0,
+              name: params.name || "",
+              value: params.value,
+              color: params.color
+            });
+          });
+        }
+      }
+    });
+    const accessibilityDescription = description || (!isEmpty ? `${title}. Area chart with ${data.categories.length} data points across ${data.series.length} series.` : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+AreaChart.displayName = "AreaChart";
+
+// src/components/core/ScatterChart.tsx
+var React9 = __toESM(require("react"), 1);
+var echarts7 = __toESM(require("echarts/core"), 1);
+var import_charts5 = require("echarts/charts");
+var import_components5 = require("echarts/components");
+var import_renderers5 = require("echarts/renderers");
+var import_charts_core5 = require("@classic-homes/charts-core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+echarts7.use([
+  import_charts5.ScatterChart,
+  import_components5.GridComponent,
+  import_components5.TooltipComponent,
+  import_components5.LegendComponent,
+  import_components5.TitleComponent,
+  import_renderers5.CanvasRenderer
+]);
+var ScatterChart = React9.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showGrid = true,
+    showTrendLine = false,
+    symbolSize = 10,
+    onClick,
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.series?.length || data.series.every((s) => !s.data?.length);
+    const option = React9.useMemo(() => {
+      if (isEmpty) return {};
+      const series = data.series.map((s) => ({
+        name: s.name,
+        type: "scatter",
+        data: s.data,
+        symbolSize: typeof symbolSize === "function" ? symbolSize : symbolSize,
+        itemStyle: s.color ? { color: s.color } : void 0,
+        emphasis: {
+          focus: "series",
+          itemStyle: {
+            shadowBlur: 10,
+            shadowColor: "rgba(0, 0, 0, 0.5)"
+          }
+        }
+      }));
+      if (showTrendLine) {
+        data.series.forEach((s, index) => {
+          if (s.data.length < 2) return;
+          const n = s.data.length;
+          let sumX = 0, sumY = 0, sumXY = 0, sumX2 = 0;
+          s.data.forEach(([x, y]) => {
+            sumX += x;
+            sumY += y;
+            sumXY += x * y;
+            sumX2 += x * x;
+          });
+          const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
+          const intercept = (sumY - slope * sumX) / n;
+          const xValues = s.data.map(([x]) => x);
+          const minX = Math.min(...xValues);
+          const maxX = Math.max(...xValues);
+          series.push({
+            name: `${s.name} Trend`,
+            type: "line",
+            data: [
+              [minX, slope * minX + intercept],
+              [maxX, slope * maxX + intercept]
+            ],
+            smooth: false,
+            showSymbol: false,
+            lineStyle: {
+              type: "dashed",
+              opacity: 0.7
+            },
+            emphasis: {
+              disabled: true
+            },
+            z: index
+          });
+        });
+      }
+      return {
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        tooltip: showTooltip ? {
+          trigger: "item",
+          formatter: (params) => {
+            const p = params;
+            if (!p.value) return "";
+            return `${p.seriesName}<br/>X: ${p.value[0]}<br/>Y: ${p.value[1]}`;
+          }
+        } : void 0,
+        legend: showLegend ? {
+          data: data.series.map((s) => s.name),
+          bottom: 0
+        } : void 0,
+        xAxis: {
+          type: "value",
+          splitLine: {
+            show: showGrid
+          }
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: showGrid
+          }
+        },
+        series
+      };
+    }, [data, isEmpty, showTooltip, showLegend, showGrid, showTrendLine, symbolSize]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation,
+      onReady: (chart) => {
+        if (onClick) {
+          chart.on("click", (params) => {
+            onClick({
+              type: params.type || "click",
+              componentType: params.componentType || "series",
+              seriesIndex: params.seriesIndex,
+              seriesName: params.seriesName || "",
+              dataIndex: params.dataIndex || 0,
+              name: params.name || "",
+              value: params.value,
+              color: params.color
+            });
+          });
+        }
+      }
+    });
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core5.generateScatterChartDescription)(title, data) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+ScatterChart.displayName = "ScatterChart";
+
+// src/components/core/DonutChart.tsx
+var React10 = __toESM(require("react"), 1);
+var echarts8 = __toESM(require("echarts/core"), 1);
+var import_charts6 = require("echarts/charts");
+var import_components6 = require("echarts/components");
+var import_renderers6 = require("echarts/renderers");
+var import_charts_core6 = require("@classic-homes/charts-core");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+echarts8.use([import_charts6.PieChart, import_components6.TooltipComponent, import_components6.LegendComponent, import_components6.TitleComponent, import_renderers6.CanvasRenderer]);
+var DonutChart = React10.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showLabels = true,
+    labelPosition = "outside",
+    innerRadius = "50%",
+    centerLabel,
+    centerValue,
+    onClick,
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.length;
+    const option = React10.useMemo(() => {
+      if (isEmpty) return {};
+      const graphicElements = [];
+      if (centerLabel || centerValue) {
+        graphicElements.push({
+          type: "group",
+          left: "center",
+          top: "40%",
+          children: [
+            ...centerValue !== void 0 ? [
+              {
+                type: "text",
+                style: {
+                  text: String(centerValue),
+                  fontSize: 28,
+                  fontWeight: "bold",
+                  fill: "currentColor",
+                  textAlign: "center"
+                },
+                top: 0,
+                left: "center"
+              }
+            ] : [],
+            ...centerLabel ? [
+              {
+                type: "text",
+                style: {
+                  text: centerLabel,
+                  fontSize: 14,
+                  fill: "#888",
+                  textAlign: "center"
+                },
+                top: centerValue !== void 0 ? 35 : 0,
+                left: "center"
+              }
+            ] : []
+          ]
+        });
+      }
+      return {
+        tooltip: showTooltip ? {
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)"
+        } : void 0,
+        legend: showLegend ? {
+          orient: "horizontal",
+          bottom: 0,
+          data: data.map((d) => d.name)
+        } : void 0,
+        graphic: graphicElements.length > 0 ? graphicElements : void 0,
+        series: [
+          {
+            name: title,
+            type: "pie",
+            radius: [innerRadius, "70%"],
+            center: ["50%", "45%"],
+            avoidLabelOverlap: true,
+            data: data.map((item) => ({
+              name: item.name,
+              value: item.value,
+              itemStyle: item.color ? { color: item.color } : void 0
+            })),
+            label: showLabels ? {
+              show: true,
+              position: labelPosition,
+              formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
+            } : {
+              show: false
+            },
+            labelLine: {
+              show: showLabels && labelPosition === "outside"
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      };
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      showLabels,
+      labelPosition,
+      innerRadius,
+      centerLabel,
+      centerValue,
+      title
+    ]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation,
+      onReady: (chart) => {
+        if (onClick) {
+          chart.on("click", (params) => {
+            onClick({
+              type: params.type || "click",
+              componentType: params.componentType || "series",
+              name: params.name || "",
+              value: params.value,
+              percent: params.percent,
+              color: params.color
+            });
+          });
+        }
+      }
+    });
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core6.generatePieChartDescription)(title, data, true) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+DonutChart.displayName = "DonutChart";
+
+// src/components/extended/RadarChart.tsx
+var React11 = __toESM(require("react"), 1);
+var echarts9 = __toESM(require("echarts/core"), 1);
+var import_charts7 = require("echarts/charts");
+var import_components7 = require("echarts/components");
+var import_renderers7 = require("echarts/renderers");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+echarts9.use([
+  import_charts7.RadarChart,
+  import_components7.TooltipComponent,
+  import_components7.LegendComponent,
+  import_components7.TitleComponent,
+  import_components7.RadarComponent,
+  import_renderers7.CanvasRenderer
+]);
+var RadarChart = React11.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    indicators,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    shape = "polygon",
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.series?.length || !indicators?.length || data.series.every((s) => !s.data?.length);
+    const option = React11.useMemo(() => {
+      if (isEmpty) return {};
+      return {
+        tooltip: showTooltip ? {
+          trigger: "item"
+        } : void 0,
+        legend: showLegend ? {
+          data: data.series.map((s) => s.name),
+          bottom: 0
+        } : void 0,
+        radar: {
+          indicator: indicators.map((ind) => ({
+            name: ind.name,
+            max: ind.max,
+            min: ind.min
+          })),
+          shape
+        },
+        series: [
+          {
+            type: "radar",
+            data: data.series.map((series) => ({
+              name: series.name,
+              value: series.data,
+              itemStyle: series.color ? { color: series.color } : void 0,
+              areaStyle: {
+                opacity: 0.2
+              }
+            }))
+          }
+        ]
+      };
+    }, [data, indicators, isEmpty, showTooltip, showLegend, shape]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation
+    });
+    const accessibilityDescription = description || (!isEmpty ? `${title}. Radar chart with ${indicators.length} dimensions comparing ${data.series.length} series.` : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+RadarChart.displayName = "RadarChart";
+
+// src/components/extended/FunnelChart.tsx
+var React12 = __toESM(require("react"), 1);
+var echarts10 = __toESM(require("echarts/core"), 1);
+var import_charts8 = require("echarts/charts");
+var import_components8 = require("echarts/components");
+var import_renderers8 = require("echarts/renderers");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+echarts10.use([
+  import_charts8.FunnelChart,
+  import_components8.TooltipComponent,
+  import_components8.LegendComponent,
+  import_components8.TitleComponent,
+  import_renderers8.CanvasRenderer
+]);
+var FunnelChart = React12.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    sort = "descending",
+    orientation = "vertical",
+    showLabels = true,
+    onClick,
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.length;
+    const option = React12.useMemo(() => {
+      if (isEmpty) return {};
+      return {
+        tooltip: showTooltip ? {
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c}"
+        } : void 0,
+        legend: showLegend ? {
+          data: data.map((d) => d.name),
+          bottom: 0
+        } : void 0,
+        series: [
+          {
+            name: title,
+            type: "funnel",
+            left: "10%",
+            top: 60,
+            bottom: 60,
+            width: "80%",
+            min: 0,
+            max: Math.max(...data.map((d) => d.value)),
+            minSize: "0%",
+            maxSize: "100%",
+            sort,
+            orient: orientation,
+            gap: 2,
+            label: showLabels ? {
+              show: true,
+              position: "inside",
+              formatter: "{b}: {c}"
+            } : {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            emphasis: {
+              label: {
+                fontSize: 16
+              }
+            },
+            data: data.map((item) => ({
+              name: item.name,
+              value: item.value,
+              itemStyle: item.color ? { color: item.color } : void 0
+            }))
+          }
+        ]
+      };
+    }, [data, isEmpty, showTooltip, showLegend, sort, orientation, showLabels, title]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation,
+      onReady: (chart) => {
+        if (onClick) {
+          chart.on("click", (params) => {
+            onClick({
+              type: params.type || "click",
+              componentType: params.componentType || "series",
+              name: params.name || "",
+              value: params.value,
+              color: params.color
+            });
+          });
+        }
+      }
+    });
+    const accessibilityDescription = description || (!isEmpty ? `${title}. Funnel chart with ${data.length} stages.` : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+FunnelChart.displayName = "FunnelChart";
+
+// src/components/extended/GaugeChart.tsx
+var React13 = __toESM(require("react"), 1);
+var echarts11 = __toESM(require("echarts/core"), 1);
+var import_charts9 = require("echarts/charts");
+var import_components9 = require("echarts/components");
+var import_renderers9 = require("echarts/renderers");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+echarts11.use([import_charts9.GaugeChart, import_components9.TitleComponent, import_renderers9.CanvasRenderer]);
+var GaugeChart = React13.forwardRef(
+  ({
+    title,
+    description,
+    value,
+    min = 0,
+    max = 100,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    splitNumber = 10,
+    showProgress = true,
+    formatValue,
+    class: className,
+    ...props
+  }, ref) => {
+    const option = React13.useMemo(() => {
+      return {
+        series: [
+          {
+            type: "gauge",
+            center: ["50%", "60%"],
+            radius: "80%",
+            min,
+            max,
+            splitNumber,
+            progress: showProgress ? {
+              show: true,
+              width: 18
+            } : void 0,
+            axisLine: {
+              lineStyle: {
+                width: 18
+              }
+            },
+            axisTick: {
+              distance: -30,
+              splitNumber: 5,
+              lineStyle: {
+                width: 2,
+                color: "#999"
+              }
+            },
+            splitLine: {
+              distance: -32,
+              length: 10,
+              lineStyle: {
+                width: 3,
+                color: "#999"
+              }
+            },
+            axisLabel: {
+              distance: -20,
+              color: "#999",
+              fontSize: 12
+            },
+            anchor: {
+              show: true,
+              size: 20,
+              itemStyle: {
+                borderWidth: 2
+              }
+            },
+            pointer: {
+              width: 6,
+              length: "60%"
+            },
+            title: {
+              show: true,
+              offsetCenter: [0, "70%"],
+              fontSize: 14
+            },
+            detail: {
+              valueAnimation: animation,
+              fontSize: 28,
+              fontWeight: "bold",
+              offsetCenter: [0, "40%"],
+              formatter: formatValue || "{value}"
+            },
+            data: [
+              {
+                value,
+                name: title
+              }
+            ]
+          }
+        ]
+      };
+    }, [value, min, max, splitNumber, showProgress, formatValue, title, animation]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation
+    });
+    const accessibilityDescription = description || `${title}. Gauge showing value ${value} on scale from ${min} to ${max}.`;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+GaugeChart.displayName = "GaugeChart";
+
+// src/components/extended/HeatmapChart.tsx
+var React14 = __toESM(require("react"), 1);
+var echarts12 = __toESM(require("echarts/core"), 1);
+var import_charts10 = require("echarts/charts");
+var import_components10 = require("echarts/components");
+var import_renderers10 = require("echarts/renderers");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+echarts12.use([
+  import_charts10.HeatmapChart,
+  import_components10.GridComponent,
+  import_components10.TooltipComponent,
+  import_components10.TitleComponent,
+  import_components10.VisualMapComponent,
+  import_renderers10.CanvasRenderer
+]);
+var HeatmapChart = React14.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    xAxis,
+    yAxis,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showTooltip = true,
+    showValues = false,
+    onClick,
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.data?.length || !xAxis?.length || !yAxis?.length;
+    const values = data?.data?.map(([, , value]) => value) || [];
+    const minValue = data?.min ?? Math.min(...values);
+    const maxValue = data?.max ?? Math.max(...values);
+    const option = React14.useMemo(() => {
+      if (isEmpty) return {};
+      return {
+        tooltip: showTooltip ? {
+          position: "top",
+          formatter: (params) => {
+            const p = params;
+            if (!p.value) return "";
+            const [xIdx, yIdx, value] = p.value;
+            return `${xAxis[xIdx]} / ${yAxis[yIdx]}: ${value}`;
+          }
+        } : void 0,
+        grid: {
+          left: "3%",
+          right: "10%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: {
+          type: "category",
+          data: xAxis,
+          splitArea: {
+            show: true
+          }
+        },
+        yAxis: {
+          type: "category",
+          data: yAxis,
+          splitArea: {
+            show: true
+          }
+        },
+        visualMap: {
+          min: minValue,
+          max: maxValue,
+          calculable: true,
+          orient: "vertical",
+          right: "0%",
+          top: "center"
+        },
+        series: [
+          {
+            name: title,
+            type: "heatmap",
+            data: data.data,
+            label: showValues ? {
+              show: true
+            } : void 0,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      };
+    }, [data, xAxis, yAxis, isEmpty, showTooltip, showValues, minValue, maxValue, title]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation,
+      onReady: (chart) => {
+        if (onClick) {
+          chart.on("click", (params) => {
+            const [xIdx, yIdx, value] = params.value || [0, 0, 0];
+            onClick({
+              type: params.type || "click",
+              componentType: params.componentType || "series",
+              xIndex: xIdx,
+              yIndex: yIdx,
+              xLabel: xAxis[xIdx],
+              yLabel: yAxis[yIdx],
+              value
+            });
+          });
+        }
+      }
+    });
+    const accessibilityDescription = description || (!isEmpty ? `${title}. Heatmap with ${xAxis.length} columns and ${yAxis.length} rows.` : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+HeatmapChart.displayName = "HeatmapChart";
+
+// src/components/extended/TreemapChart.tsx
+var React15 = __toESM(require("react"), 1);
+var echarts13 = __toESM(require("echarts/core"), 1);
+var import_charts11 = require("echarts/charts");
+var import_components11 = require("echarts/components");
+var import_renderers11 = require("echarts/renderers");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+echarts13.use([import_charts11.TreemapChart, import_components11.TooltipComponent, import_components11.TitleComponent, import_renderers11.CanvasRenderer]);
+var TreemapChart = React15.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    levels,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showTooltip = true,
+    onClick,
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.length;
+    const option = React15.useMemo(() => {
+      if (isEmpty) return {};
+      return {
+        tooltip: showTooltip ? {
+          formatter: (params) => {
+            const p = params;
+            return `${p.name}: ${p.value}`;
+          }
+        } : void 0,
+        series: [
+          {
+            type: "treemap",
+            data,
+            roam: false,
+            levels: levels || [
+              {
+                itemStyle: {
+                  borderColor: "#555",
+                  borderWidth: 4,
+                  gapWidth: 4
+                }
+              },
+              {
+                colorSaturation: [0.3, 0.6],
+                itemStyle: {
+                  borderColorSaturation: 0.7,
+                  gapWidth: 2,
+                  borderWidth: 2
+                }
+              },
+              {
+                colorSaturation: [0.3, 0.5],
+                itemStyle: {
+                  borderColorSaturation: 0.6,
+                  gapWidth: 1
+                }
+              },
+              {
+                colorSaturation: [0.3, 0.5]
+              }
+            ],
+            label: {
+              show: true,
+              formatter: "{b}"
+            },
+            upperLabel: {
+              show: true,
+              height: 30
+            },
+            breadcrumb: {
+              show: true
+            }
+          }
+        ]
+      };
+    }, [data, levels, isEmpty, showTooltip]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation,
+      onReady: (chart) => {
+        if (onClick) {
+          chart.on("click", (params) => {
+            const treePathInfo = params.treePathInfo || [];
+            onClick({
+              type: params.type || "click",
+              componentType: params.componentType || "series",
+              name: params.name || "",
+              value: params.value,
+              path: treePathInfo.map((item) => item.name || ""),
+              depth: treePathInfo.length - 1
+            });
+          });
+        }
+      }
+    });
+    const accessibilityDescription = description || (!isEmpty ? `${title}. Treemap chart showing hierarchical data.` : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+TreemapChart.displayName = "TreemapChart";
+
+// src/components/extended/CandlestickChart.tsx
+var React16 = __toESM(require("react"), 1);
+var echarts14 = __toESM(require("echarts/core"), 1);
+var import_charts12 = require("echarts/charts");
+var import_components12 = require("echarts/components");
+var import_renderers12 = require("echarts/renderers");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+echarts14.use([
+  import_charts12.CandlestickChart,
+  import_charts12.BarChart,
+  import_components12.GridComponent,
+  import_components12.TooltipComponent,
+  import_components12.TitleComponent,
+  import_components12.DataZoomComponent,
+  import_renderers12.CanvasRenderer
+]);
+var CandlestickChart = React16.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showTooltip = true,
+    showVolume = false,
+    onClick,
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.dates?.length || !data?.data?.length;
+    const option = React16.useMemo(() => {
+      if (isEmpty) return {};
+      const candlestickData = data.data.map((item) => [item.open, item.close, item.low, item.high]);
+      const seriesArr = [
+        {
+          name: title,
+          type: "candlestick",
+          data: candlestickData,
+          itemStyle: {
+            color: "#ef4444",
+            // Up color (red for bearish in some markets)
+            color0: "#22c55e",
+            // Down color (green for bullish)
+            borderColor: "#ef4444",
+            borderColor0: "#22c55e"
+          }
+        }
+      ];
+      const gridArr = [
+        {
+          left: "10%",
+          right: "10%",
+          top: 60,
+          height: showVolume ? "50%" : "70%"
+        }
+      ];
+      const xAxisArr = [
+        {
+          type: "category",
+          data: data.dates,
+          boundaryGap: false,
+          axisLine: { onZero: false },
+          splitLine: { show: false },
+          min: "dataMin",
+          max: "dataMax"
+        }
+      ];
+      const yAxisArr = [
+        {
+          scale: true,
+          splitArea: {
+            show: true
+          }
+        }
+      ];
+      if (showVolume && data.volume) {
+        gridArr.push({
+          left: "10%",
+          right: "10%",
+          top: "73%",
+          height: "12%"
+        });
+        xAxisArr.push({
+          type: "category",
+          gridIndex: 1,
+          data: data.dates,
+          boundaryGap: false,
+          axisLine: { onZero: false },
+          axisTick: { show: false },
+          splitLine: { show: false },
+          axisLabel: { show: false },
+          min: "dataMin",
+          max: "dataMax"
+        });
+        yAxisArr.push({
+          scale: true,
+          gridIndex: 1,
+          splitNumber: 2,
+          axisLabel: { show: false },
+          axisLine: { show: false },
+          axisTick: { show: false },
+          splitLine: { show: false }
+        });
+        seriesArr.push({
+          name: "Volume",
+          type: "bar",
+          xAxisIndex: 1,
+          yAxisIndex: 1,
+          data: data.volume,
+          itemStyle: {
+            color: "#6b7280"
+          }
+        });
+      }
+      return {
+        tooltip: showTooltip ? {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        } : void 0,
+        grid: gridArr,
+        xAxis: xAxisArr,
+        yAxis: yAxisArr,
+        dataZoom: [
+          {
+            type: "inside",
+            start: 80,
+            end: 100
+          },
+          {
+            show: true,
+            type: "slider",
+            top: "90%",
+            start: 80,
+            end: 100
+          }
+        ],
+        series: seriesArr
+      };
+    }, [data, isEmpty, showTooltip, showVolume, title]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation,
+      onReady: (chart) => {
+        if (onClick) {
+          chart.on("click", (params) => {
+            const dataIndex = params.dataIndex || 0;
+            const item = data.data[dataIndex];
+            onClick({
+              type: params.type || "click",
+              componentType: params.componentType || "series",
+              date: data.dates[dataIndex],
+              open: item.open,
+              close: item.close,
+              high: item.high,
+              low: item.low,
+              volume: data.volume?.[dataIndex]
+            });
+          });
+        }
+      }
+    });
+    const accessibilityDescription = description || (!isEmpty ? `${title}. Candlestick chart with ${data.dates.length} data points.` : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+CandlestickChart.displayName = "CandlestickChart";
+
+// src/components/extended/SankeyChart.tsx
+var React17 = __toESM(require("react"), 1);
+var echarts15 = __toESM(require("echarts/core"), 1);
+var import_charts13 = require("echarts/charts");
+var import_components13 = require("echarts/components");
+var import_renderers13 = require("echarts/renderers");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+echarts15.use([import_charts13.SankeyChart, import_components13.TooltipComponent, import_components13.TitleComponent, import_renderers13.CanvasRenderer]);
+var SankeyChart = React17.forwardRef(
+  ({
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = "auto",
+    animation = true,
+    showTooltip = true,
+    orient = "horizontal",
+    onClick,
+    class: className,
+    ...props
+  }, ref) => {
+    const isEmpty = !data?.nodes?.length || !data?.links?.length;
+    const option = React17.useMemo(() => {
+      if (isEmpty) return {};
+      return {
+        tooltip: showTooltip ? {
+          trigger: "item",
+          triggerOn: "mousemove"
+        } : void 0,
+        series: [
+          {
+            type: "sankey",
+            orient,
+            emphasis: {
+              focus: "adjacency"
+            },
+            data: data.nodes.map((node) => ({
+              name: node.name,
+              itemStyle: node.color ? { color: node.color } : void 0
+            })),
+            links: data.links.map((link) => ({
+              source: link.source,
+              target: link.target,
+              value: link.value
+            })),
+            lineStyle: {
+              color: "gradient",
+              curveness: 0.5
+            },
+            label: {
+              position: orient === "horizontal" ? "right" : "bottom"
+            }
+          }
+        ]
+      };
+    }, [data, isEmpty, showTooltip, orient]);
+    const { containerRef } = useChart({
+      option,
+      theme,
+      animation,
+      onReady: (chart) => {
+        if (onClick) {
+          chart.on("click", (params) => {
+            const isEdge = params.dataType === "edge";
+            onClick({
+              type: params.type || "click",
+              componentType: params.componentType || "series",
+              dataType: isEdge ? "edge" : "node",
+              name: params.name || "",
+              value: isEdge ? params.value : void 0,
+              source: isEdge ? params.data?.source : void 0,
+              target: isEdge ? params.data?.target : void 0
+            });
+          });
+        }
+      }
+    });
+    const accessibilityDescription = description || (!isEmpty ? `${title}. Sankey diagram with ${data.nodes.length} nodes and ${data.links.length} links.` : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+SankeyChart.displayName = "SankeyChart";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AreaChart,
+  BarChart,
+  CandlestickChart,
+  ChartContainer,
+  ChartEmpty,
+  ChartError,
+  ChartSkeleton,
+  DonutChart,
+  FunnelChart,
+  GaugeChart,
+  HeatmapChart,
+  LineChart,
+  PieChart,
+  RadarChart,
+  SankeyChart,
+  ScatterChart,
+  TreemapChart,
+  cn,
+  registerClassicThemes,
+  useChart,
+  useChartResize,
+  useChartTheme,
+  useReducedMotion
+});