@classic-homes/charts-react 0.1.1

package/dist/index.js

@@ -0,0 +1,2167 @@
+// src/components/base/ChartContainer.tsx
+import * as React4 from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/base/ChartSkeleton.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartSkeleton = React.forwardRef(
+  ({ height = 400, className }, ref) => {
+    const heightStyle = typeof height === "number" ? `${height}px` : height;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": "chart-skeleton",
+        className: cn("animate-pulse rounded-lg border border-border bg-muted", className),
+        style: { height: heightStyle },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col p-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-4 h-5 w-1/3 rounded bg-muted-foreground/20" }),
+          /* @__PURE__ */ 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__ */ jsx(
+            "div",
+            {
+              className: "flex-1 rounded-t bg-muted-foreground/20",
+              style: { height: `${height2}%` }
+            },
+            i
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-between px-4", children: [1, 2, 3, 4, 5, 6, 7].map((i) => /* @__PURE__ */ jsx("div", { className: "h-3 w-8 rounded bg-muted-foreground/20" }, i)) })
+        ] })
+      }
+    );
+  }
+);
+ChartSkeleton.displayName = "ChartSkeleton";
+
+// src/components/base/ChartError.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChartError = React2.forwardRef(
+  ({ message, height = 400, onRetry, className }, ref) => {
+    const heightStyle = typeof height === "number" ? `${height}px` : height;
+    return /* @__PURE__ */ jsxs2(
+      "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__ */ jsx2(
+            "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__ */ jsx2(
+                "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__ */ jsx2("p", { className: "mb-2 text-sm font-medium text-destructive", children: message }),
+          onRetry && /* @__PURE__ */ jsx2(
+            "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
+import * as React3 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "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__ */ jsxs3(
+      "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__ */ jsx3(
+            "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__ */ jsx3(
+                "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__ */ jsx3("p", { className: "text-sm text-muted-foreground", children: message })
+        ]
+      }
+    );
+  }
+);
+ChartEmpty.displayName = "ChartEmpty";
+
+// src/components/base/ChartContainer.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "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__ */ jsx4(ChartSkeleton, { height, className: wrapperClassName });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsx4(
+        ChartError,
+        {
+          message: error,
+          height,
+          onRetry,
+          className: wrapperClassName
+        }
+      );
+    }
+    if (empty) {
+      return /* @__PURE__ */ jsx4(ChartEmpty, { message: emptyMessage, height, className: wrapperClassName });
+    }
+    return /* @__PURE__ */ jsxs4(
+      "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__ */ jsx4("span", { id: `${title}-desc`, className: "sr-only", children: description }),
+          /* @__PURE__ */ jsx4("div", { className: cn("h-full w-full", className), style: { height: heightStyle }, children })
+        ]
+      }
+    );
+  }
+);
+ChartContainer.displayName = "ChartContainer";
+
+// src/components/core/LineChart.tsx
+import * as React5 from "react";
+import * as echarts3 from "echarts/core";
+import { LineChart as EChartsLineChart } from "echarts/charts";
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import { generateLineChartDescription } from "@classic-homes/charts-core";
+
+// src/hooks/useChart.ts
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import * as echarts2 from "echarts/core";
+
+// src/hooks/useChartTheme.ts
+import { useEffect, useState, useCallback } from "react";
+import * as echarts from "echarts/core";
+import { lightTheme, darkTheme, THEME_LIGHT, THEME_DARK } from "@classic-homes/charts-core";
+var themesRegistered = false;
+function registerClassicThemes() {
+  if (themesRegistered) return;
+  echarts.registerTheme(THEME_LIGHT, lightTheme);
+  echarts.registerTheme(THEME_DARK, darkTheme);
+  themesRegistered = true;
+}
+function useChartTheme(preference = "auto") {
+  const [currentTheme, setCurrentTheme] = useState(THEME_LIGHT);
+  const updateTheme = useCallback(() => {
+    if (preference !== "auto") {
+      setCurrentTheme(preference === "dark" ? THEME_DARK : THEME_LIGHT);
+      return;
+    }
+    const isDark = document.documentElement.classList.contains("dark");
+    setCurrentTheme(isDark ? THEME_DARK : THEME_LIGHT);
+  }, [preference]);
+  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
+import { useEffect as useEffect2, useRef } from "react";
+function useChartResize(chartRef, containerRef) {
+  const resizeObserverRef = useRef(null);
+  useEffect2(() => {
+    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
+import { useState as useState2, useEffect as useEffect3 } from "react";
+function useReducedMotion() {
+  const [reducedMotion, setReducedMotion] = useState2(false);
+  useEffect3(() => {
+    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 = useRef2(null);
+  const chartRef = useRef2(null);
+  const currentTheme = useChartTheme(theme);
+  const reducedMotion = useReducedMotion();
+  useEffect4(() => {
+    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]);
+  useEffect4(() => {
+    if (!chartRef.current) return;
+    const shouldAnimate = animation ?? !reducedMotion;
+    const optionWithAnimation = {
+      ...option,
+      animation: shouldAnimate
+    };
+    chartRef.current.setOption(optionWithAnimation, {
+      notMerge: false,
+      lazyUpdate: true
+    });
+  }, [option, animation, reducedMotion]);
+  useEffect4(() => {
+    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
+import { jsx as jsx5 } from "react/jsx-runtime";
+echarts3.use([
+  EChartsLineChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  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 ? generateLineChartDescription(title, data) : void 0);
+    return /* @__PURE__ */ jsx5(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx5("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+LineChart.displayName = "LineChart";
+
+// src/components/core/BarChart.tsx
+import * as React6 from "react";
+import * as echarts4 from "echarts/core";
+import { BarChart as EChartsBarChart } from "echarts/charts";
+import {
+  GridComponent as GridComponent2,
+  TooltipComponent as TooltipComponent2,
+  LegendComponent as LegendComponent2,
+  TitleComponent as TitleComponent2
+} from "echarts/components";
+import { CanvasRenderer as CanvasRenderer2 } from "echarts/renderers";
+import { generateBarChartDescription } from "@classic-homes/charts-core";
+import { jsx as jsx6 } from "react/jsx-runtime";
+echarts4.use([
+  EChartsBarChart,
+  GridComponent2,
+  TooltipComponent2,
+  LegendComponent2,
+  TitleComponent2,
+  CanvasRenderer2
+]);
+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 ? generateBarChartDescription(title, data) : void 0);
+    return /* @__PURE__ */ jsx6(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx6("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+BarChart.displayName = "BarChart";
+
+// src/components/core/PieChart.tsx
+import * as React7 from "react";
+import * as echarts5 from "echarts/core";
+import { PieChart as EChartsPieChart } from "echarts/charts";
+import { TooltipComponent as TooltipComponent3, LegendComponent as LegendComponent3, TitleComponent as TitleComponent3 } from "echarts/components";
+import { CanvasRenderer as CanvasRenderer3 } from "echarts/renderers";
+import { generatePieChartDescription } from "@classic-homes/charts-core";
+import { jsx as jsx7 } from "react/jsx-runtime";
+echarts5.use([EChartsPieChart, TooltipComponent3, LegendComponent3, TitleComponent3, CanvasRenderer3]);
+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 ? generatePieChartDescription(title, data, false) : void 0);
+    return /* @__PURE__ */ jsx7(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx7("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+PieChart.displayName = "PieChart";
+
+// src/components/core/AreaChart.tsx
+import * as React8 from "react";
+import * as echarts6 from "echarts/core";
+import { LineChart as EChartsLineChart2 } from "echarts/charts";
+import {
+  GridComponent as GridComponent3,
+  TooltipComponent as TooltipComponent4,
+  LegendComponent as LegendComponent4,
+  TitleComponent as TitleComponent4
+} from "echarts/components";
+import { CanvasRenderer as CanvasRenderer4 } from "echarts/renderers";
+import { jsx as jsx8 } from "react/jsx-runtime";
+echarts6.use([
+  EChartsLineChart2,
+  GridComponent3,
+  TooltipComponent4,
+  LegendComponent4,
+  TitleComponent4,
+  CanvasRenderer4
+]);
+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__ */ jsx8(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx8("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+AreaChart.displayName = "AreaChart";
+
+// src/components/core/ScatterChart.tsx
+import * as React9 from "react";
+import * as echarts7 from "echarts/core";
+import { ScatterChart as EChartsScatterChart } from "echarts/charts";
+import {
+  GridComponent as GridComponent4,
+  TooltipComponent as TooltipComponent5,
+  LegendComponent as LegendComponent5,
+  TitleComponent as TitleComponent5
+} from "echarts/components";
+import { CanvasRenderer as CanvasRenderer5 } from "echarts/renderers";
+import { generateScatterChartDescription } from "@classic-homes/charts-core";
+import { jsx as jsx9 } from "react/jsx-runtime";
+echarts7.use([
+  EChartsScatterChart,
+  GridComponent4,
+  TooltipComponent5,
+  LegendComponent5,
+  TitleComponent5,
+  CanvasRenderer5
+]);
+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 ? generateScatterChartDescription(title, data) : void 0);
+    return /* @__PURE__ */ jsx9(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx9("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+ScatterChart.displayName = "ScatterChart";
+
+// src/components/core/DonutChart.tsx
+import * as React10 from "react";
+import * as echarts8 from "echarts/core";
+import { PieChart as EChartsPieChart2 } from "echarts/charts";
+import { TooltipComponent as TooltipComponent6, LegendComponent as LegendComponent6, TitleComponent as TitleComponent6 } from "echarts/components";
+import { CanvasRenderer as CanvasRenderer6 } from "echarts/renderers";
+import { generatePieChartDescription as generatePieChartDescription2 } from "@classic-homes/charts-core";
+import { jsx as jsx10 } from "react/jsx-runtime";
+echarts8.use([EChartsPieChart2, TooltipComponent6, LegendComponent6, TitleComponent6, CanvasRenderer6]);
+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 ? generatePieChartDescription2(title, data, true) : void 0);
+    return /* @__PURE__ */ jsx10(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx10("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+DonutChart.displayName = "DonutChart";
+
+// src/components/extended/RadarChart.tsx
+import * as React11 from "react";
+import * as echarts9 from "echarts/core";
+import { RadarChart as EChartsRadarChart } from "echarts/charts";
+import {
+  TooltipComponent as TooltipComponent7,
+  LegendComponent as LegendComponent7,
+  TitleComponent as TitleComponent7,
+  RadarComponent
+} from "echarts/components";
+import { CanvasRenderer as CanvasRenderer7 } from "echarts/renderers";
+import { jsx as jsx11 } from "react/jsx-runtime";
+echarts9.use([
+  EChartsRadarChart,
+  TooltipComponent7,
+  LegendComponent7,
+  TitleComponent7,
+  RadarComponent,
+  CanvasRenderer7
+]);
+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__ */ jsx11(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx11("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+RadarChart.displayName = "RadarChart";
+
+// src/components/extended/FunnelChart.tsx
+import * as React12 from "react";
+import * as echarts10 from "echarts/core";
+import { FunnelChart as EChartsFunnelChart } from "echarts/charts";
+import { TooltipComponent as TooltipComponent8, LegendComponent as LegendComponent8, TitleComponent as TitleComponent8 } from "echarts/components";
+import { CanvasRenderer as CanvasRenderer8 } from "echarts/renderers";
+import { jsx as jsx12 } from "react/jsx-runtime";
+echarts10.use([
+  EChartsFunnelChart,
+  TooltipComponent8,
+  LegendComponent8,
+  TitleComponent8,
+  CanvasRenderer8
+]);
+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__ */ jsx12(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx12("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+FunnelChart.displayName = "FunnelChart";
+
+// src/components/extended/GaugeChart.tsx
+import * as React13 from "react";
+import * as echarts11 from "echarts/core";
+import { GaugeChart as EChartsGaugeChart } from "echarts/charts";
+import { TitleComponent as TitleComponent9 } from "echarts/components";
+import { CanvasRenderer as CanvasRenderer9 } from "echarts/renderers";
+import { jsx as jsx13 } from "react/jsx-runtime";
+echarts11.use([EChartsGaugeChart, TitleComponent9, CanvasRenderer9]);
+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__ */ jsx13(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx13("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+GaugeChart.displayName = "GaugeChart";
+
+// src/components/extended/HeatmapChart.tsx
+import * as React14 from "react";
+import * as echarts12 from "echarts/core";
+import { HeatmapChart as EChartsHeatmapChart } from "echarts/charts";
+import {
+  GridComponent as GridComponent5,
+  TooltipComponent as TooltipComponent9,
+  TitleComponent as TitleComponent10,
+  VisualMapComponent
+} from "echarts/components";
+import { CanvasRenderer as CanvasRenderer10 } from "echarts/renderers";
+import { jsx as jsx14 } from "react/jsx-runtime";
+echarts12.use([
+  EChartsHeatmapChart,
+  GridComponent5,
+  TooltipComponent9,
+  TitleComponent10,
+  VisualMapComponent,
+  CanvasRenderer10
+]);
+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__ */ jsx14(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx14("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+HeatmapChart.displayName = "HeatmapChart";
+
+// src/components/extended/TreemapChart.tsx
+import * as React15 from "react";
+import * as echarts13 from "echarts/core";
+import { TreemapChart as EChartsTreemapChart } from "echarts/charts";
+import { TooltipComponent as TooltipComponent10, TitleComponent as TitleComponent11 } from "echarts/components";
+import { CanvasRenderer as CanvasRenderer11 } from "echarts/renderers";
+import { jsx as jsx15 } from "react/jsx-runtime";
+echarts13.use([EChartsTreemapChart, TooltipComponent10, TitleComponent11, CanvasRenderer11]);
+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__ */ jsx15(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx15("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+TreemapChart.displayName = "TreemapChart";
+
+// src/components/extended/CandlestickChart.tsx
+import * as React16 from "react";
+import * as echarts14 from "echarts/core";
+import {
+  CandlestickChart as EChartsCandlestickChart,
+  BarChart as EChartsBarChart2
+} from "echarts/charts";
+import {
+  GridComponent as GridComponent6,
+  TooltipComponent as TooltipComponent11,
+  TitleComponent as TitleComponent12,
+  DataZoomComponent
+} from "echarts/components";
+import { CanvasRenderer as CanvasRenderer12 } from "echarts/renderers";
+import { jsx as jsx16 } from "react/jsx-runtime";
+echarts14.use([
+  EChartsCandlestickChart,
+  EChartsBarChart2,
+  GridComponent6,
+  TooltipComponent11,
+  TitleComponent12,
+  DataZoomComponent,
+  CanvasRenderer12
+]);
+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__ */ jsx16(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx16("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+CandlestickChart.displayName = "CandlestickChart";
+
+// src/components/extended/SankeyChart.tsx
+import * as React17 from "react";
+import * as echarts15 from "echarts/core";
+import { SankeyChart as EChartsSankeyChart } from "echarts/charts";
+import { TooltipComponent as TooltipComponent12, TitleComponent as TitleComponent13 } from "echarts/components";
+import { CanvasRenderer as CanvasRenderer13 } from "echarts/renderers";
+import { jsx as jsx17 } from "react/jsx-runtime";
+echarts15.use([EChartsSankeyChart, TooltipComponent12, TitleComponent13, CanvasRenderer13]);
+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__ */ jsx17(
+      ChartContainer,
+      {
+        ref,
+        title,
+        description: accessibilityDescription,
+        height,
+        loading,
+        error,
+        empty: isEmpty,
+        emptyMessage,
+        className: cn(className),
+        ...props,
+        children: /* @__PURE__ */ jsx17("div", { ref: containerRef, className: "h-full w-full" })
+      }
+    );
+  }
+);
+SankeyChart.displayName = "SankeyChart";
+export {
+  AreaChart,
+  BarChart,
+  CandlestickChart,
+  ChartContainer,
+  ChartEmpty,
+  ChartError,
+  ChartSkeleton,
+  DonutChart,
+  FunnelChart,
+  GaugeChart,
+  HeatmapChart,
+  LineChart,
+  PieChart,
+  RadarChart,
+  SankeyChart,
+  ScatterChart,
+  TreemapChart,
+  cn,
+  registerClassicThemes,
+  useChart,
+  useChartResize,
+  useChartTheme,
+  useReducedMotion
+};