@classic-homes/charts-react 0.2.2 → 0.3.0

package/dist/index.cjs

@@ -34,6 +34,7 @@ __export(index_exports, {
   BarChart: () => BarChart,
   CandlestickChart: () => CandlestickChart,
   ChartContainer: () => ChartContainer,
+  ChartDataTable: () => ChartDataTable,
   ChartEmpty: () => ChartEmpty,
   ChartError: () => ChartError,
   ChartLegend: () => ChartLegend,
@@ -49,7 +50,9 @@ __export(index_exports, {
   ScatterChart: () => ScatterChart,
   TreemapChart: () => TreemapChart,
   cn: () => cn,
+  exportChartImage: () => exportChartImage,
   registerClassicThemes: () => registerClassicThemes,
+  registerEchartsModules: () => registerEchartsModules,
   useChart: () => useChart,
   useChartLegend: () => useChartLegend,
   useChartResize: () => useChartResize,
@@ -60,6 +63,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/base/ChartContainer.tsx
 var React4 = __toESM(require("react"), 1);
+var import_charts_core2 = require("@classic-homes/charts-core");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -143,7 +147,7 @@ var ChartError = React2.forwardRef(
             {
               type: "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",
+              className: "rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground hover:bg-destructive/90",
               children: "Retry"
             }
           )
@@ -199,20 +203,62 @@ var ChartEmpty = React3.forwardRef(
 );
 ChartEmpty.displayName = "ChartEmpty";
 
-// src/components/base/ChartContainer.tsx
+// src/components/base/ChartDataTable.tsx
+var import_charts_core = require("@classic-homes/charts-core");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function ChartDataTable({
+  table,
+  caption,
+  format,
+  srOnly = false,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-testid": "chart-data-table",
+      className: cn(srOnly ? "sr-only" : "max-h-80 overflow-auto", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { className: "w-full border-collapse text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("caption", { className: srOnly ? void 0 : "sr-only", children: caption }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: table.headers.map((header, column) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "th",
+          {
+            scope: "col",
+            className: cn(
+              "sticky top-0 border-b border-border bg-card px-3 py-2 font-medium text-muted-foreground",
+              column === 0 ? "text-left" : "text-right"
+            ),
+            children: header
+          },
+          column
+        )) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: table.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { className: "border-b border-border last:border-0", children: row.map(
+          (cell, column) => column === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "th",
+            {
+              scope: "row",
+              className: "px-3 py-1.5 text-left font-normal text-foreground",
+              children: (0, import_charts_core.formatTableCell)(table, cell, column, format)
+            },
+            column
+          ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "px-3 py-1.5 text-right tabular-nums text-foreground", children: (0, import_charts_core.formatTableCell)(table, cell, column, format) }, column)
+        ) }, rowIndex)) })
+      ] })
+    }
+  );
+}
+
+// src/components/base/ChartContainer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var CHART_ONLY_PROPS = [
-  "minHeight",
-  "maxHeight",
   "rowHeight",
   "showLegend",
   "showGrid",
   "valueFormat",
   "locale",
   "onReady",
+  "onHover",
   "events",
-  "showDataTable",
-  "exportable",
   "patterns",
   "referenceLines",
   "referenceBands",
@@ -225,11 +271,15 @@ function domProps(props) {
   for (const key of CHART_ONLY_PROPS) delete rest[key];
   return rest;
 }
+var SR_TABLE_MAX_ROWS = 500;
+var buttonClass = "rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
 var ChartContainer = React4.forwardRef(
   ({
     title,
     description,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     empty,
@@ -239,16 +289,24 @@ var ChartContainer = React4.forwardRef(
     wrapperClassName,
     legend,
     legendPosition = "bottom",
+    dataTable,
+    showDataTable = "sr-only",
+    format,
+    exportable,
+    exportImage,
     children,
     ...props
   }, ref) => {
     const heightStyle = typeof height === "number" ? `${height}px` : height;
-    const descriptionId = `${React4.useId()}-desc`;
+    const uid = React4.useId();
+    const descriptionId = `${uid}-desc`;
+    const tableId = `${uid}-table`;
+    const [tableOpen, setTableOpen] = React4.useState(false);
     if (loading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartSkeleton, { height, className: wrapperClassName });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartSkeleton, { height, className: wrapperClassName });
     }
     if (error) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         ChartError,
         {
           message: error,
@@ -259,9 +317,19 @@ var ChartContainer = React4.forwardRef(
       );
     }
     if (empty) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartEmpty, { message: emptyMessage, height, className: wrapperClassName });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartEmpty, { message: emptyMessage, height, className: wrapperClassName });
     }
-    const chart = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    const exportConfig = exportable ? exportable === true ? {} : exportable : void 0;
+    const canExportImage = !!exportConfig && exportConfig.image !== false && !!exportImage;
+    const canExportCsv = !!exportConfig && exportConfig.csv !== false && !!dataTable;
+    const filename = exportConfig?.filename ?? (0, import_charts_core2.chartFilename)(title);
+    const toggleTable = showDataTable === true && !!dataTable;
+    const toolbar = canExportImage || canExportCsv || toggleTable;
+    const downloadImage = () => {
+      const url = exportImage?.();
+      if (url) (0, import_charts_core2.downloadFile)(url, `${filename}.png`);
+    };
+    const chart = (chartClassName) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         ref,
@@ -269,37 +337,95 @@ var ChartContainer = React4.forwardRef(
         "aria-label": title,
         "aria-describedby": description ? descriptionId : void 0,
         "data-testid": "chart-container",
-        className: legend ? "min-h-0 min-w-0 flex-1" : cn("rounded-lg border border-border bg-card", wrapperClassName),
+        className: chartClassName,
         ...domProps(props),
         children: [
-          description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: descriptionId, className: "sr-only", children: description }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("h-full w-full", className), style: { height: heightStyle }, children })
+          description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: descriptionId, className: "sr-only", children: description }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: cn("h-full w-full", className),
+              style: {
+                height: heightStyle,
+                minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
+                maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0
+              },
+              children
+            }
+          )
         ]
       }
     );
-    if (!legend) return chart;
+    const srTable = dataTable && showDataTable === "sr-only" && dataTable.rows.length <= SR_TABLE_MAX_ROWS ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartDataTable, { table: dataTable, caption: `${title} data`, format, srOnly: true }) : null;
+    if (!legend && !toolbar) {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        chart(cn("rounded-lg border border-border bg-card", wrapperClassName)),
+        srTable
+      ] });
+    }
     const side = legendPosition === "left" || legendPosition === "right";
     const leading = legendPosition === "top" || legendPosition === "left";
-    const legendNode = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    const legendNode = legend ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         "data-testid": "chart-legend",
         className: cn("flex shrink-0 p-2", side ? "items-center" : "justify-center"),
         children: legend
       }
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    ) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
-        className: cn(
-          "flex rounded-lg border border-border bg-card",
-          side ? "flex-row" : "flex-col",
-          wrapperClassName
-        ),
+        "data-testid": "chart-frame",
+        className: cn("flex flex-col rounded-lg border border-border bg-card", wrapperClassName),
         children: [
-          leading && legendNode,
-          chart,
-          !leading && legendNode
+          toolbar && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              "data-testid": "chart-toolbar",
+              className: "flex justify-end gap-1 px-2 pt-2 print:hidden",
+              children: [
+                toggleTable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: buttonClass,
+                    "aria-expanded": tableOpen,
+                    "aria-controls": tableId,
+                    onClick: () => setTableOpen((open) => !open),
+                    children: tableOpen ? "Hide data" : "Show data"
+                  }
+                ),
+                canExportImage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: buttonClass,
+                    "aria-label": `Download ${title} as PNG`,
+                    onClick: downloadImage,
+                    children: "PNG"
+                  }
+                ),
+                canExportCsv && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: buttonClass,
+                    "aria-label": `Download ${title} data as CSV`,
+                    onClick: () => (0, import_charts_core2.downloadCsv)(dataTable, filename),
+                    children: "CSV"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex min-h-0 flex-1", side ? "flex-row" : "flex-col"), children: [
+            leading && legendNode,
+            chart("min-h-0 min-w-0 flex-1"),
+            !leading && legendNode
+          ] }),
+          toggleTable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { id: tableId, hidden: !tableOpen, className: "border-t border-border p-2", children: tableOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartDataTable, { table: dataTable, caption: `${title} data`, format }) }),
+          srTable
         ]
       }
     );
@@ -309,11 +435,11 @@ ChartContainer.displayName = "ChartContainer";
 
 // src/components/base/ChartLegend.tsx
 var React5 = __toESM(require("react"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ChartLegend = React5.forwardRef(
   ({ items, toggle, position = "bottom", chartTitle, orientation, className }, ref) => {
     const vertical = (orientation ?? (position === "left" || position === "right" ? "vertical" : "horizontal")) === "vertical";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "ul",
       {
         ref,
@@ -323,7 +449,7 @@ var ChartLegend = React5.forwardRef(
           vertical ? "flex-col" : "flex-wrap justify-center",
           className
         ),
-        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "button",
           {
             type: "button",
@@ -334,7 +460,7 @@ var ChartLegend = React5.forwardRef(
               item.visible ? "text-foreground" : "text-muted-foreground line-through"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -356,32 +482,78 @@ ChartLegend.displayName = "ChartLegend";
 var React6 = __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_core4 = require("@classic-homes/charts-core");
+var import_components2 = require("echarts/components");
+var import_renderers2 = require("echarts/renderers");
+var import_charts_core6 = require("@classic-homes/charts-core");
+
+// src/lib/events.ts
+var raw = (params) => params ?? {};
+function toDataPointParams(params, fallbackType) {
+  const p = raw(params);
+  return {
+    type: p.type || fallbackType,
+    componentType: p.componentType || "series",
+    seriesIndex: p.seriesIndex,
+    seriesName: p.seriesName || "",
+    dataIndex: p.dataIndex ?? 0,
+    name: p.name || "",
+    value: p.value,
+    color: typeof p.color === "string" ? p.color : void 0,
+    event: p.event?.event
+  };
+}
+function toSliceParams(params, fallbackType) {
+  const p = raw(params);
+  return {
+    type: p.type || fallbackType,
+    componentType: p.componentType || "series",
+    seriesIndex: p.seriesIndex,
+    seriesName: p.seriesName,
+    dataIndex: p.dataIndex,
+    name: p.name || "",
+    value: p.value,
+    percent: p.percent,
+    color: typeof p.color === "string" ? p.color : void 0,
+    event: p.event?.event
+  };
+}
+function chartEvents(events, mapped) {
+  const merged = { ...events };
+  for (const [name, handler] of Object.entries(mapped)) {
+    if (!handler) continue;
+    const own = events?.[name];
+    merged[name] = own ? (params) => {
+      handler(params);
+      own(params);
+    } : handler;
+  }
+  return merged;
+}
 
 // src/hooks/useChart.ts
 var import_react4 = require("react");
 var echarts2 = __toESM(require("echarts/core"), 1);
-var import_charts_core2 = require("@classic-homes/charts-core");
+var import_components = require("echarts/components");
+var import_renderers = require("echarts/renderers");
+var import_charts_core4 = require("@classic-homes/charts-core");
 
 // 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 import_charts_core3 = 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);
+  echarts.registerTheme(import_charts_core3.THEME_LIGHT, import_charts_core3.lightTheme);
+  echarts.registerTheme(import_charts_core3.THEME_DARK, import_charts_core3.darkTheme);
   themesRegistered = true;
 }
 function resolveTheme(preference) {
   if (preference !== "auto") {
-    return preference === "dark" ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT;
+    return preference === "dark" ? import_charts_core3.THEME_DARK : import_charts_core3.THEME_LIGHT;
   }
-  if (typeof document === "undefined") return import_charts_core.THEME_LIGHT;
-  return document.documentElement.classList.contains("dark") ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT;
+  if (typeof document === "undefined") return import_charts_core3.THEME_LIGHT;
+  return document.documentElement.classList.contains("dark") ? import_charts_core3.THEME_DARK : import_charts_core3.THEME_LIGHT;
 }
 function useChartTheme(preference = "auto") {
   const [currentTheme, setCurrentTheme] = (0, import_react.useState)(() => resolveTheme(preference));
@@ -459,64 +631,141 @@ function useReducedMotion() {
 }
 
 // src/hooks/useChart.ts
+echarts2.use([
+  import_components.AriaComponent,
+  import_components.DataZoomInsideComponent,
+  import_components.DataZoomSliderComponent,
+  import_components.DatasetComponent,
+  import_components.GraphicComponent,
+  import_components.MarkAreaComponent,
+  import_components.MarkLineComponent,
+  import_renderers.CanvasRenderer
+]);
+var registerEchartsModules = (modules) => echarts2.use(modules);
+function exportChartImage(chart, { type = "png", pixelRatio = 2, backgroundColor } = {}) {
+  if (!chart || chart.isDisposed()) return null;
+  const background = backgroundColor ?? (typeof document !== "undefined" ? getComputedStyle(chart.getDom()).getPropertyValue("--card").trim() : "");
+  const color = !background ? "#ffffff" : /^[\d.]+\s/.test(background) ? `hsl(${background})` : background;
+  return chart.getDataURL({ type, pixelRatio, backgroundColor: color });
+}
 var isComponentType = (mainType) => echarts2.ComponentModel.hasClass(mainType);
 function applyOption(chart, prev, next) {
   chart.setOption(next, {
-    replaceMerge: (0, import_charts_core2.getReplaceMerge)(prev, next, isComponentType),
+    replaceMerge: (0, import_charts_core4.getReplaceMerge)(prev, next, isComponentType),
     lazyUpdate: true
   });
 }
+function captureState(chart) {
+  if (chart.isDisposed()) return null;
+  const option = chart.getOption();
+  const selected = option.legend?.[0]?.selected ?? {};
+  return {
+    hidden: Object.keys(selected).filter((name) => selected[name] === false),
+    zoom: (option.dataZoom ?? []).map(({ start, end }) => ({ start, end }))
+  };
+}
+function restoreState(chart, state) {
+  if (!state) return;
+  for (const name of state.hidden) chart.dispatchAction({ type: "legendUnSelect", name });
+  state.zoom.forEach(({ start, end }, dataZoomIndex) => {
+    if (start !== void 0 && end !== void 0 && (start !== 0 || end !== 100)) {
+      chart.dispatchAction({ type: "dataZoom", dataZoomIndex, start, end });
+    }
+  });
+}
 function useChart({
   option,
   theme = "auto",
   animation,
-  onReady
+  patterns,
+  events,
+  onReady,
+  onCreated
 }) {
   const containerRef = (0, import_react4.useRef)(null);
   const container = useRefElement(containerRef);
   const chartRef = (0, import_react4.useRef)(null);
+  const [chart, setChart] = (0, import_react4.useState)(null);
   const currentTheme = useChartTheme(theme);
   const reducedMotion = useReducedMotion();
   const onReadyRef = (0, import_react4.useRef)(onReady);
   onReadyRef.current = onReady;
+  const onCreatedRef = (0, import_react4.useRef)(onCreated);
+  onCreatedRef.current = onCreated;
+  const eventsRef = (0, import_react4.useRef)(events);
+  eventsRef.current = events;
   const optionRef = (0, import_react4.useRef)(option);
   optionRef.current = {
     ...option,
     // Reduced motion always wins over the animation prop
-    animation: (animation ?? true) && !reducedMotion
+    animation: (animation ?? true) && !reducedMotion,
+    // Labels stay off: the container already describes the chart
+    ...patterns && {
+      aria: { enabled: true, label: { enabled: false }, decal: { show: true } }
+    }
   };
   const appliedRef = (0, import_react4.useRef)(null);
+  const carriedRef = (0, import_react4.useRef)(null);
   (0, import_react4.useEffect)(() => {
     if (!container) return;
-    const chart = echarts2.init(container, currentTheme);
-    chartRef.current = chart;
-    applyOption(chart, null, optionRef.current);
+    const instance = echarts2.init(container, currentTheme);
+    chartRef.current = instance;
+    onReadyRef.current?.(instance);
+    applyOption(instance, null, optionRef.current);
     appliedRef.current = optionRef.current;
-    onReadyRef.current?.(chart);
+    const carried = carriedRef.current;
+    carriedRef.current = null;
+    if (carried) instance.setOption({}, { lazyUpdate: false });
+    restoreState(instance, carried);
+    onCreatedRef.current?.(instance);
+    setChart(instance);
     return () => {
-      chart.dispose();
-      if (chartRef.current === chart) {
+      carriedRef.current = captureState(instance);
+      instance.dispose();
+      if (chartRef.current === instance) {
         chartRef.current = null;
       }
+      setChart((current) => current === instance ? null : current);
     };
   }, [container, currentTheme]);
   (0, import_react4.useEffect)(() => {
-    const chart = chartRef.current;
-    if (!chart || chart.isDisposed()) return;
-    applyOption(chart, appliedRef.current, optionRef.current);
+    const instance = chartRef.current;
+    if (!instance || instance.isDisposed()) return;
+    applyOption(instance, appliedRef.current, optionRef.current);
     appliedRef.current = optionRef.current;
-  }, [option, animation, reducedMotion]);
+  }, [option, animation, reducedMotion, patterns]);
+  const eventNames = JSON.stringify(
+    Object.keys(events ?? {}).filter((name) => events?.[name]).sort()
+  );
+  (0, import_react4.useEffect)(() => {
+    if (!chart || chart.isDisposed()) return;
+    const bound = JSON.parse(eventNames).map((name) => {
+      const listener = (params) => eventsRef.current?.[name]?.(params);
+      chart.on(name, listener);
+      return [name, listener];
+    });
+    return () => {
+      if (chart.isDisposed()) return;
+      for (const [name, listener] of bound) chart.off(name, listener);
+    };
+  }, [chart, eventNames]);
   useChartResize(chartRef, containerRef);
+  const exportImage = (0, import_react4.useCallback)(
+    (options) => exportChartImage(chartRef.current, options),
+    []
+  );
   return {
     chartRef,
     containerRef,
-    currentTheme
+    chart,
+    currentTheme,
+    exportImage
   };
 }
 
 // src/hooks/useChartLegend.ts
 var import_react6 = require("react");
-var import_charts_core3 = require("@classic-homes/charts-core");
+var import_charts_core5 = require("@classic-homes/charts-core");
 
 // src/hooks/useLatestRef.ts
 var import_react5 = require("react");
@@ -565,7 +814,7 @@ function useChartLegend({
   return {
     attach,
     renderProps: {
-      items: (0, import_charts_core3.getLegendItems)(names, palette, colors, visible),
+      items: (0, import_charts_core5.getLegendItems)(names, palette, colors, visible),
       position: config?.position ?? "bottom",
       chartTitle: title,
       toggle: (name) => dispatch({ type: "legendToggleSelect", name }),
@@ -581,14 +830,14 @@ function useChartLegend({
 }
 
 // src/components/core/LineChart.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 echarts3.use([
   import_charts.LineChart,
-  import_components.GridComponent,
-  import_components.TooltipComponent,
-  import_components.LegendComponent,
-  import_components.TitleComponent,
-  import_renderers.CanvasRenderer
+  import_components2.GridComponent,
+  import_components2.TooltipComponent,
+  import_components2.LegendComponent,
+  import_components2.TitleComponent,
+  import_renderers2.CanvasRenderer
 ]);
 var LineChart = React6.forwardRef(
   ({
@@ -596,6 +845,8 @@ var LineChart = React6.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -608,24 +859,36 @@ var LineChart = React6.forwardRef(
     areaFilled = false,
     showDataPoints = false,
     stacked = false,
+    connectNulls = false,
     showLabels = false,
+    valueFormat,
+    locale,
     labelFormatter,
     xAxisConfig,
     yAxisConfig,
+    referenceLines,
+    referenceBands,
+    dataZoom,
     tooltipFormatter,
     tooltipValueFormatter,
     legend: legendConfig,
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     onHover,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
+    const isPercent = stacked === "percent";
     const currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core4.getChartColors)(currentTheme);
+    const chartColors = (0, import_charts_core6.getChartColors)(currentTheme);
     const legend = useChartLegend({
       names: data?.series?.map((s) => s.name) ?? [],
       colors: data?.series?.map((s) => s.color) ?? [],
@@ -635,20 +898,55 @@ var LineChart = React6.forwardRef(
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const builtInLegend = showLegend && !customLegend;
     const option = React6.useMemo(() => {
       if (isEmpty) return {};
-      const getLabel = (0, import_charts_core4.seriesLabelLookup)(data.series);
-      const showSymbol = showDataPoints || showLabels || (0, import_charts_core4.hasPointLabels)(data.series);
-      return (0, import_charts_core4.mergeChartOption)(
+      const formatters = (0, import_charts_core6.chartFormatters)({
+        valueFormat: isPercent ? "percentValue" : valueFormat,
+        locale,
+        tooltipValueFormatter,
+        labelFormatter
+      });
+      const plotted = isPercent ? (0, import_charts_core6.toPercentStack)(data.series) : data.series;
+      const getLabel = (0, import_charts_core6.seriesLabelLookup)(data.series);
+      const showSymbol = showDataPoints || showLabels || (0, import_charts_core6.hasPointLabels)(data.series);
+      const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
+      const series = data.series.map((source, index) => ({
+        name: source.name,
+        type: "line",
+        data: (0, import_charts_core6.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
+          position: "top"
+        }),
+        smooth,
+        showSymbol,
+        symbolSize: showDataPoints ? 6 : 0,
+        connectNulls,
+        stack: stacked ? "Total" : void 0,
+        areaStyle: areaFilled ? { opacity: 0.3 } : void 0,
+        itemStyle: source.color ? { color: source.color } : void 0,
+        label: (0, import_charts_core6.buildDataLabel)({ show: true, position: "top" }, void 0, {
+          show: showLabels,
+          formatter: formatters.label,
+          getLabel
+        }),
+        emphasis: {
+          focus: "series"
+        }
+      }));
+      return (0, import_charts_core6.mergeChartOption)(
         {
           grid: {
             left: "3%",
             right: "4%",
             bottom: "3%",
             containLabel: true,
-            ...(0, import_charts_core4.gridInset)(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+            ...(0, import_charts_core6.withZoomInset)(
+              (0, import_charts_core6.gridInset)(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+              dataZoom,
+              "x"
+            )
           },
-          tooltip: (0, import_charts_core4.buildTooltip)(
+          tooltip: (0, import_charts_core6.buildTooltip)(
             {
               trigger: "axis",
               axisPointer: {
@@ -661,16 +959,17 @@ var LineChart = React6.forwardRef(
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter,
+              valueFormatter: formatters.tooltip,
               getLabel
             }
           ),
-          legend: (0, import_charts_core4.buildLegend)(
+          legend: (0, import_charts_core6.buildLegend)(
             data.series.map((s) => s.name),
             legendConfig,
             { show: showLegend, custom: customLegend }
           ),
-          xAxis: (0, import_charts_core4.buildAxis)(
+          dataZoom: (0, import_charts_core6.buildDataZoom)(dataZoom, "x", legendBottom ? 36 : 0),
+          xAxis: (0, import_charts_core6.buildAxis)(
             {
               type: "category",
               boundaryGap: false,
@@ -681,34 +980,22 @@ var LineChart = React6.forwardRef(
             },
             xAxisConfig
           ),
-          yAxis: (0, import_charts_core4.buildAxis)(
+          yAxis: (0, import_charts_core6.buildAxis)(
             {
               type: "value",
+              ...isPercent && { max: 100 },
               splitLine: {
                 show: showGrid
               }
             },
-            yAxisConfig
+            formatters.axis(yAxisConfig)
           ),
-          series: data.series.map((series) => ({
-            name: series.name,
-            type: "line",
-            data: (0, import_charts_core4.withPointLabels)(series.data, series.labels, labelFormatter, { position: "top" }),
-            smooth,
-            showSymbol,
-            symbolSize: showDataPoints ? 6 : 0,
-            stack: stacked ? "Total" : void 0,
-            areaStyle: areaFilled ? { opacity: 0.3 } : void 0,
-            itemStyle: series.color ? { color: series.color } : void 0,
-            label: (0, import_charts_core4.buildDataLabel)({ show: true, position: "top" }, void 0, {
-              show: showLabels,
-              formatter: labelFormatter,
-              getLabel
-            }),
-            emphasis: {
-              focus: "series"
-            }
-          }))
+          series: (0, import_charts_core6.withReferenceMarks)(series, referenceLines, referenceBands, {
+            valueAxis: "y",
+            format: formatters.format,
+            color: chartColors.reference,
+            bandColor: chartColors.referenceBand
+          })
         },
         optionOverride
       );
@@ -722,62 +1009,48 @@ var LineChart = React6.forwardRef(
       areaFilled,
       showDataPoints,
       stacked,
+      isPercent,
+      connectNulls,
       chartColors,
       showLabels,
+      valueFormat,
+      locale,
       labelFormatter,
       xAxisConfig,
       yAxisConfig,
+      referenceLines,
+      referenceBands,
+      dataZoom,
       tooltipFormatter,
       tooltipValueFormatter,
       legendConfig,
       customLegend,
+      builtInLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick, onHover });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
-      theme: currentTheme === import_charts_core4.THEME_DARK ? "dark" : "light",
+      theme: currentTheme === import_charts_core6.THEME_DARK ? "dark" : "light",
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
-            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
-          });
-        });
-        chart.on("mouseover", (params) => {
-          const { onHover: onHover2 } = latest.current;
-          if (!onHover2) return;
-          onHover2({
-            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
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toDataPointParams(params, "click"))),
+        mouseover: onHover && ((params) => onHover(toDataPointParams(params, "mouseover")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core4.generateLineChartDescription)(title, data) : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    const format = (0, import_charts_core6.resolveValueFormatter)(valueFormat, locale);
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core6.generateLineChartDescription)(title, data, format) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -785,8 +1058,13 @@ var LineChart = React6.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : (0, import_charts_core6.categoryTable)(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -797,17 +1075,17 @@ LineChart.displayName = "LineChart";
 var React7 = __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_core5 = require("@classic-homes/charts-core");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_components3 = require("echarts/components");
+var import_renderers3 = require("echarts/renderers");
+var import_charts_core7 = require("@classic-homes/charts-core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 echarts4.use([
   import_charts2.BarChart,
-  import_components2.GridComponent,
-  import_components2.TooltipComponent,
-  import_components2.LegendComponent,
-  import_components2.TitleComponent,
-  import_renderers2.CanvasRenderer
+  import_components3.GridComponent,
+  import_components3.TooltipComponent,
+  import_components3.LegendComponent,
+  import_components3.TitleComponent,
+  import_renderers3.CanvasRenderer
 ]);
 var BarChart = React7.forwardRef(
   ({
@@ -815,6 +1093,9 @@ var BarChart = React7.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
+    rowHeight,
     loading,
     error,
     emptyMessage,
@@ -826,33 +1107,54 @@ var BarChart = React7.forwardRef(
     orientation = "vertical",
     stacked = false,
     showValues = false,
+    valueFormat,
+    locale,
     labelFormatter,
     xAxisConfig,
     yAxisConfig,
+    referenceLines,
+    referenceBands,
+    dataZoom,
     tooltipFormatter,
     tooltipValueFormatter,
     legend: legendConfig,
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
+    onHover,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
     const isHorizontal = orientation === "horizontal";
+    const isPercent = stacked === "percent";
     const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core7.getChartColors)(currentTheme);
     const legend = useChartLegend({
       names: data?.series?.map((s) => s.name) ?? [],
       colors: data?.series?.map((s) => s.color) ?? [],
-      palette: (0, import_charts_core5.getChartColors)(currentTheme).series,
+      palette: chartColors.series,
       config: legendConfig,
       title,
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const builtInLegend = showLegend && !customLegend;
     const option = React7.useMemo(() => {
       if (isEmpty) return {};
+      const formatters = (0, import_charts_core7.chartFormatters)({
+        valueFormat: isPercent ? "percentValue" : valueFormat,
+        locale,
+        tooltipValueFormatter,
+        labelFormatter
+      });
+      const plotted = isPercent ? (0, import_charts_core7.toPercentStack)(data.series) : data.series;
       const categoryAxis = {
         type: "category",
         data: data.categories,
@@ -864,21 +1166,46 @@ var BarChart = React7.forwardRef(
       };
       const valueAxis = {
         type: "value",
+        ...isPercent && { max: 100 },
         splitLine: {
           show: showGrid
         }
       };
-      const getLabel = (0, import_charts_core5.seriesLabelLookup)(data.series);
-      return (0, import_charts_core5.mergeChartOption)(
+      const getLabel = (0, import_charts_core7.seriesLabelLookup)(data.series);
+      const labelPosition = isHorizontal ? "right" : "top";
+      const zoomAxis = isHorizontal ? "y" : "x";
+      const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
+      const series = data.series.map((source, index) => ({
+        name: source.name,
+        type: "bar",
+        data: (0, import_charts_core7.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
+          position: labelPosition
+        }),
+        stack: stacked ? "Total" : void 0,
+        itemStyle: source.color ? { color: source.color } : void 0,
+        label: (0, import_charts_core7.buildDataLabel)({ show: true, position: labelPosition }, void 0, {
+          show: showValues,
+          formatter: formatters.label,
+          getLabel
+        }),
+        emphasis: {
+          focus: "series"
+        }
+      }));
+      return (0, import_charts_core7.mergeChartOption)(
         {
           grid: {
             left: "3%",
             right: "4%",
             bottom: "3%",
             containLabel: true,
-            ...(0, import_charts_core5.gridInset)(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+            ...(0, import_charts_core7.withZoomInset)(
+              (0, import_charts_core7.gridInset)(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+              dataZoom,
+              zoomAxis
+            )
           },
-          tooltip: (0, import_charts_core5.buildTooltip)(
+          tooltip: (0, import_charts_core7.buildTooltip)(
             {
               trigger: "axis",
               axisPointer: {
@@ -888,37 +1215,31 @@ var BarChart = React7.forwardRef(
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter,
+              valueFormatter: formatters.tooltip,
               getLabel
             }
           ),
-          legend: (0, import_charts_core5.buildLegend)(
+          legend: (0, import_charts_core7.buildLegend)(
             data.series.map((s) => s.name),
             legendConfig,
             { show: showLegend, custom: customLegend }
           ),
-          xAxis: (0, import_charts_core5.buildAxis)(isHorizontal ? valueAxis : categoryAxis, xAxisConfig),
-          yAxis: (0, import_charts_core5.buildAxis)(isHorizontal ? categoryAxis : valueAxis, yAxisConfig),
-          series: data.series.map((series) => ({
-            name: series.name,
-            type: "bar",
-            data: (0, import_charts_core5.withPointLabels)(series.data, series.labels, labelFormatter, {
-              position: isHorizontal ? "right" : "top"
-            }),
-            stack: stacked ? "Total" : void 0,
-            itemStyle: series.color ? { color: series.color } : void 0,
-            label: (0, import_charts_core5.buildDataLabel)(
-              {
-                show: true,
-                position: isHorizontal ? "right" : "top"
-              },
-              void 0,
-              { show: showValues, formatter: labelFormatter, getLabel }
-            ),
-            emphasis: {
-              focus: "series"
-            }
-          }))
+          dataZoom: (0, import_charts_core7.buildDataZoom)(dataZoom, zoomAxis, legendBottom ? 36 : 0),
+          xAxis: (0, import_charts_core7.buildAxis)(
+            isHorizontal ? valueAxis : categoryAxis,
+            isHorizontal ? formatters.axis(xAxisConfig) : xAxisConfig
+          ),
+          yAxis: (0, import_charts_core7.buildAxis)(
+            isHorizontal ? categoryAxis : valueAxis,
+            isHorizontal ? yAxisConfig : formatters.axis(yAxisConfig)
+          ),
+          series: (0, import_charts_core7.withReferenceMarks)(series, referenceLines, referenceBands, {
+            valueAxis: isHorizontal ? "x" : "y",
+            inverse: isHorizontal,
+            format: formatters.format,
+            color: chartColors.reference,
+            bandColor: chartColors.referenceBand
+          })
         },
         optionOverride
       );
@@ -929,48 +1250,54 @@ var BarChart = React7.forwardRef(
       showLegend,
       showGrid,
       isHorizontal,
+      isPercent,
       stacked,
       showValues,
+      valueFormat,
+      locale,
       labelFormatter,
       xAxisConfig,
       yAxisConfig,
+      referenceLines,
+      referenceBands,
+      dataZoom,
       tooltipFormatter,
       tooltipValueFormatter,
       legendConfig,
       customLegend,
+      builtInLegend,
+      chartColors,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
-            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
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toDataPointParams(params, "click"))),
+        mouseover: onHover && ((params) => onHover(toDataPointParams(params, "mouseover")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core5.generateBarChartDescription)(title, data) : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    const format = (0, import_charts_core7.resolveValueFormatter)(valueFormat, locale);
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core7.generateBarChartDescription)(title, data, format) : void 0);
+    const resolvedHeight = isHorizontal ? (0, import_charts_core7.resolveChartHeight)(height, data?.categories?.length ?? 0, {
+      rowHeight,
+      minHeight,
+      maxHeight,
+      chrome: 56 + (builtInLegend ? 36 : 0) + (dataZoom ? 36 : 0)
+    }) : height === "auto" ? 400 : height;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
-        height,
+        height: resolvedHeight,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -978,8 +1305,13 @@ var BarChart = React7.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : (0, import_charts_core7.categoryTable)(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -990,17 +1322,19 @@ BarChart.displayName = "BarChart";
 var React8 = __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_core6 = require("@classic-homes/charts-core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-echarts5.use([import_charts3.PieChart, import_components3.TooltipComponent, import_components3.LegendComponent, import_components3.TitleComponent, import_renderers3.CanvasRenderer]);
+var import_components4 = require("echarts/components");
+var import_renderers4 = require("echarts/renderers");
+var import_charts_core8 = require("@classic-homes/charts-core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+echarts5.use([import_charts3.PieChart, import_components4.TooltipComponent, import_components4.LegendComponent, import_components4.TitleComponent, import_renderers4.CanvasRenderer]);
 var PieChart = React8.forwardRef(
   ({
     title,
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -1011,6 +1345,8 @@ var PieChart = React8.forwardRef(
     showLabels = true,
     labelPosition = "outside",
     innerRadius = 0,
+    valueFormat,
+    locale,
     labelFormatter,
     tooltipFormatter,
     tooltipValueFormatter,
@@ -1018,6 +1354,11 @@ var PieChart = React8.forwardRef(
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -1027,31 +1368,36 @@ var PieChart = React8.forwardRef(
     const legend = useChartLegend({
       names: data?.map((d) => d.name) ?? [],
       colors: data?.map((d) => d.color) ?? [],
-      palette: (0, import_charts_core6.getChartColors)(currentTheme).series,
+      palette: (0, import_charts_core8.getChartColors)(currentTheme).series,
       config: legendConfig,
       title,
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const format = React8.useMemo(
+      () => (0, import_charts_core8.resolveValueFormatter)(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const tooltipValues = tooltipValueFormatter ?? format;
     const option = React8.useMemo(() => {
       if (isEmpty) return {};
-      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const valueFormatter = tooltipFormatter === void 0 ? tooltipValues : void 0;
       const tooltipBase = {
         trigger: "item",
         formatter: valueFormatter ? (params) => {
           const p = params;
-          return `${(0, import_charts_core6.escapeHtml)(p.seriesName)} <br/>${(0, import_charts_core6.escapeHtml)(p.name)}: ${(0, import_charts_core6.escapeHtml)((0, import_charts_core6.formatTooltipValue)(p.value, valueFormatter))} (${p.percent}%)`;
+          return `${(0, import_charts_core8.escapeHtml)(p.seriesName)} <br/>${(0, import_charts_core8.escapeHtml)(p.name)}: ${(0, import_charts_core8.escapeHtml)((0, import_charts_core8.formatTooltipValue)(p.value, valueFormatter))} (${p.percent}%)`;
         } : "{a} <br/>{b}: {c} ({d}%)"
       };
-      return (0, import_charts_core6.mergeChartOption)(
+      return (0, import_charts_core8.mergeChartOption)(
         {
-          tooltip: (0, import_charts_core6.buildTooltip)(tooltipBase, {
+          tooltip: (0, import_charts_core8.buildTooltip)(tooltipBase, {
             show: showTooltip,
             formatter: tooltipFormatter,
-            valueFormatter: tooltipValueFormatter,
-            getLabel: (0, import_charts_core6.itemLabelLookup)(data)
+            valueFormatter: tooltipValues,
+            getLabel: (0, import_charts_core8.itemLabelLookup)(data)
           }),
-          legend: (0, import_charts_core6.buildLegend)(
+          legend: (0, import_charts_core8.buildLegend)(
             data.map((d) => d.name),
             legendConfig,
             { show: showLegend, custom: customLegend, defaults: { orient: "horizontal" } }
@@ -1061,21 +1407,21 @@ var PieChart = React8.forwardRef(
               name: title,
               type: "pie",
               radius: innerRadius ? [innerRadius, "70%"] : "70%",
-              center: (0, import_charts_core6.legendCenter)(legendConfig, showLegend && !customLegend, ["50%", "45%"]),
+              center: (0, import_charts_core8.legendCenter)(legendConfig, showLegend && !customLegend, ["50%", "45%"]),
               data: data.map((item) => ({
                 name: item.name,
                 value: item.value,
                 itemStyle: item.color ? { color: item.color } : void 0,
-                label: (0, import_charts_core6.pointLabel)(item.label, labelFormatter, { position: labelPosition })
+                label: (0, import_charts_core8.pointLabel)(item.label, labelFormatter, { position: labelPosition })
               })),
-              label: (0, import_charts_core6.buildDataLabel)(
+              label: (0, import_charts_core8.buildDataLabel)(
                 {
                   show: true,
                   position: labelPosition,
                   formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
                 },
                 { show: false },
-                { show: showLabels, formatter: labelFormatter, getLabel: (0, import_charts_core6.itemLabelLookup)(data) }
+                { show: showLabels, formatter: labelFormatter, getLabel: (0, import_charts_core8.itemLabelLookup)(data) }
               ),
               emphasis: {
                 itemStyle: {
@@ -1100,40 +1446,32 @@ var PieChart = React8.forwardRef(
       title,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      tooltipValues,
       legendConfig,
       customLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
-            type: params.type || "click",
-            componentType: params.componentType || "series",
-            name: params.name || "",
-            value: params.value,
-            percent: params.percent,
-            color: params.color
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toSliceParams(params, "click")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core6.generatePieChartDescription)(title, data, false) : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core8.generatePieChartDescription)(title, data, false) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -1141,8 +1479,13 @@ var PieChart = React8.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : (0, import_charts_core8.sliceTable)(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1153,17 +1496,17 @@ PieChart.displayName = "PieChart";
 var React9 = __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_charts_core7 = require("@classic-homes/charts-core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_components5 = require("echarts/components");
+var import_renderers5 = require("echarts/renderers");
+var import_charts_core9 = require("@classic-homes/charts-core");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 echarts6.use([
   import_charts4.LineChart,
-  import_components4.GridComponent,
-  import_components4.TooltipComponent,
-  import_components4.LegendComponent,
-  import_components4.TitleComponent,
-  import_renderers4.CanvasRenderer
+  import_components5.GridComponent,
+  import_components5.TooltipComponent,
+  import_components5.LegendComponent,
+  import_components5.TitleComponent,
+  import_renderers5.CanvasRenderer
 ]);
 var AreaChart = React9.forwardRef(
   ({
@@ -1171,6 +1514,8 @@ var AreaChart = React9.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -1181,24 +1526,37 @@ var AreaChart = React9.forwardRef(
     showGrid = true,
     smooth = false,
     stacked = false,
+    connectNulls = false,
     gradient = true,
     showLabels = false,
+    valueFormat,
+    locale,
     labelFormatter,
     xAxisConfig,
     yAxisConfig,
+    referenceLines,
+    referenceBands,
+    dataZoom,
     tooltipFormatter,
     tooltipValueFormatter,
     legend: legendConfig,
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
+    onHover,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
+    const isPercent = stacked === "percent";
     const currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core7.getChartColors)(currentTheme);
+    const chartColors = (0, import_charts_core9.getChartColors)(currentTheme);
     const legend = useChartLegend({
       names: data?.series?.map((s) => s.name) ?? [],
       colors: data?.series?.map((s) => s.color) ?? [],
@@ -1208,20 +1566,63 @@ var AreaChart = React9.forwardRef(
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const builtInLegend = showLegend && !customLegend;
     const option = React9.useMemo(() => {
       if (isEmpty) return {};
-      const getLabel = (0, import_charts_core7.seriesLabelLookup)(data.series);
-      const showSymbol = showLabels || (0, import_charts_core7.hasPointLabels)(data.series);
-      return (0, import_charts_core7.mergeChartOption)(
+      const formatters = (0, import_charts_core9.chartFormatters)({
+        valueFormat: isPercent ? "percentValue" : valueFormat,
+        locale,
+        tooltipValueFormatter,
+        labelFormatter
+      });
+      const plotted = isPercent ? (0, import_charts_core9.toPercentStack)(data.series) : data.series;
+      const getLabel = (0, import_charts_core9.seriesLabelLookup)(data.series);
+      const showSymbol = showLabels || (0, import_charts_core9.hasPointLabels)(data.series);
+      const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
+      const series = data.series.map((source, index) => {
+        const base = source.color || chartColors.series[index % chartColors.series.length];
+        return {
+          name: source.name,
+          type: "line",
+          data: (0, import_charts_core9.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
+            position: "top"
+          }),
+          smooth,
+          connectNulls,
+          stack: stacked ? "Total" : void 0,
+          areaStyle: gradient ? {
+            opacity: 0.8,
+            color: new echarts6.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: (0, import_charts_core9.colorWithAlpha)(base, 0.8) },
+              { offset: 1, color: (0, import_charts_core9.colorWithAlpha)(base, 0.1) }
+            ])
+          } : { opacity: 0.5 },
+          itemStyle: source.color ? { color: source.color } : void 0,
+          label: (0, import_charts_core9.buildDataLabel)({ show: true, position: "top" }, void 0, {
+            show: showLabels,
+            formatter: formatters.label,
+            getLabel
+          }),
+          emphasis: {
+            focus: "series"
+          },
+          showSymbol
+        };
+      });
+      return (0, import_charts_core9.mergeChartOption)(
         {
           grid: {
             left: "3%",
             right: "4%",
             bottom: "3%",
             containLabel: true,
-            ...(0, import_charts_core7.gridInset)(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+            ...(0, import_charts_core9.withZoomInset)(
+              (0, import_charts_core9.gridInset)(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+              dataZoom,
+              "x"
+            )
           },
-          tooltip: (0, import_charts_core7.buildTooltip)(
+          tooltip: (0, import_charts_core9.buildTooltip)(
             {
               trigger: "axis",
               axisPointer: {
@@ -1234,16 +1635,17 @@ var AreaChart = React9.forwardRef(
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter,
+              valueFormatter: formatters.tooltip,
               getLabel
             }
           ),
-          legend: (0, import_charts_core7.buildLegend)(
+          legend: (0, import_charts_core9.buildLegend)(
             data.series.map((s) => s.name),
             legendConfig,
             { show: showLegend, custom: customLegend }
           ),
-          xAxis: (0, import_charts_core7.buildAxis)(
+          dataZoom: (0, import_charts_core9.buildDataZoom)(dataZoom, "x", legendBottom ? 36 : 0),
+          xAxis: (0, import_charts_core9.buildAxis)(
             {
               type: "category",
               boundaryGap: false,
@@ -1251,43 +1653,21 @@ var AreaChart = React9.forwardRef(
             },
             xAxisConfig
           ),
-          yAxis: (0, import_charts_core7.buildAxis)(
+          yAxis: (0, import_charts_core9.buildAxis)(
             {
               type: "value",
+              ...isPercent && { max: 100 },
               splitLine: {
                 show: showGrid
               }
             },
-            yAxisConfig
+            formatters.axis(yAxisConfig)
           ),
-          series: data.series.map((series, index) => {
-            const base = series.color || chartColors.series[index % chartColors.series.length];
-            return {
-              name: series.name,
-              type: "line",
-              data: (0, import_charts_core7.withPointLabels)(series.data, series.labels, labelFormatter, {
-                position: "top"
-              }),
-              smooth,
-              stack: stacked ? "Total" : void 0,
-              areaStyle: gradient ? {
-                opacity: 0.8,
-                color: new echarts6.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: (0, import_charts_core7.colorWithAlpha)(base, 0.8) },
-                  { offset: 1, color: (0, import_charts_core7.colorWithAlpha)(base, 0.1) }
-                ])
-              } : { opacity: 0.5 },
-              itemStyle: series.color ? { color: series.color } : void 0,
-              label: (0, import_charts_core7.buildDataLabel)({ show: true, position: "top" }, void 0, {
-                show: showLabels,
-                formatter: labelFormatter,
-                getLabel
-              }),
-              emphasis: {
-                focus: "series"
-              },
-              showSymbol
-            };
+          series: (0, import_charts_core9.withReferenceMarks)(series, referenceLines, referenceBands, {
+            valueAxis: "y",
+            format: formatters.format,
+            color: chartColors.reference,
+            bandColor: chartColors.referenceBand
           })
         },
         optionOverride
@@ -1300,49 +1680,49 @@ var AreaChart = React9.forwardRef(
       showGrid,
       smooth,
       stacked,
+      isPercent,
+      connectNulls,
       gradient,
       chartColors,
       showLabels,
+      valueFormat,
+      locale,
       labelFormatter,
       xAxisConfig,
       yAxisConfig,
+      referenceLines,
+      referenceBands,
+      dataZoom,
       tooltipFormatter,
       tooltipValueFormatter,
       legendConfig,
       customLegend,
+      builtInLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
-      theme: currentTheme === import_charts_core7.THEME_DARK ? "dark" : "light",
+      theme: currentTheme === import_charts_core9.THEME_DARK ? "dark" : "light",
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
-            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
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toDataPointParams(params, "click"))),
+        mouseover: onHover && ((params) => onHover(toDataPointParams(params, "mouseover")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
-    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_runtime9.jsx)(
+    const format = (0, import_charts_core9.resolveValueFormatter)(valueFormat, locale);
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core9.generateAreaChartDescription)(title, data, format) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -1350,8 +1730,13 @@ var AreaChart = React9.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : (0, import_charts_core9.categoryTable)(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1362,19 +1747,19 @@ AreaChart.displayName = "AreaChart";
 var React10 = __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_core8 = require("@classic-homes/charts-core");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_components6 = require("echarts/components");
+var import_renderers6 = require("echarts/renderers");
+var import_charts_core10 = require("@classic-homes/charts-core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 echarts7.use([
   import_charts5.ScatterChart,
   // Trend lines are line series
   import_charts5.LineChart,
-  import_components5.GridComponent,
-  import_components5.TooltipComponent,
-  import_components5.LegendComponent,
-  import_components5.TitleComponent,
-  import_renderers5.CanvasRenderer
+  import_components6.GridComponent,
+  import_components6.TooltipComponent,
+  import_components6.LegendComponent,
+  import_components6.TitleComponent,
+  import_renderers6.CanvasRenderer
 ]);
 var ScatterChart = React10.forwardRef(
   ({
@@ -1382,6 +1767,8 @@ var ScatterChart = React10.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -1393,25 +1780,36 @@ var ScatterChart = React10.forwardRef(
     showTrendLine = false,
     symbolSize = 10,
     showLabels = false,
+    valueFormat,
+    locale,
     labelFormatter,
     xAxisConfig,
     yAxisConfig,
+    referenceLines,
+    referenceBands,
     tooltipFormatter,
     tooltipValueFormatter,
     legend: legendConfig,
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
+    onHover,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.series?.length || data.series.every((s) => !s.data?.length);
     const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core10.getChartColors)(currentTheme);
     const legend = useChartLegend({
       names: data?.series?.map((s) => s.name) ?? [],
       colors: data?.series?.map((s) => s.color) ?? [],
-      palette: (0, import_charts_core8.getChartColors)(currentTheme).series,
+      palette: chartColors.series,
       config: legendConfig,
       title,
       onLegendChange
@@ -1419,16 +1817,22 @@ var ScatterChart = React10.forwardRef(
     const customLegend = renderLegend !== void 0;
     const option = React10.useMemo(() => {
       if (isEmpty) return {};
-      const getLabel = (0, import_charts_core8.seriesLabelLookup)(data.series);
+      const formatters = (0, import_charts_core10.chartFormatters)({
+        valueFormat,
+        locale,
+        tooltipValueFormatter,
+        labelFormatter
+      });
+      const getLabel = (0, import_charts_core10.seriesLabelLookup)(data.series);
       const series = data.series.map((s) => ({
         name: s.name,
         type: "scatter",
-        data: (0, import_charts_core8.withPointLabels)(s.data, s.labels, labelFormatter, { position: "top" }),
+        data: (0, import_charts_core10.withPointLabels)(s.data, s.labels, formatters.label, { position: "top" }),
         symbolSize: typeof symbolSize === "function" ? symbolSize : symbolSize,
         itemStyle: s.color ? { color: s.color } : void 0,
-        label: (0, import_charts_core8.buildDataLabel)({ show: true, position: "top" }, void 0, {
+        label: (0, import_charts_core10.buildDataLabel)({ show: true, position: "top" }, void 0, {
           show: showLabels,
-          formatter: labelFormatter,
+          formatter: formatters.label,
           getLabel
         }),
         emphasis: {
@@ -1478,39 +1882,39 @@ var ScatterChart = React10.forwardRef(
           });
         });
       }
-      return (0, import_charts_core8.mergeChartOption)(
+      return (0, import_charts_core10.mergeChartOption)(
         {
           grid: {
             left: "3%",
             right: "4%",
             bottom: "3%",
             containLabel: true,
-            ...(0, import_charts_core8.gridInset)(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+            ...(0, import_charts_core10.gridInset)(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
           },
-          tooltip: (0, import_charts_core8.buildTooltip)(
+          tooltip: (0, import_charts_core10.buildTooltip)(
             {
               trigger: "item",
               formatter: (params) => {
                 const p = params;
                 if (!p.value) return "";
-                const x = (0, import_charts_core8.formatTooltipValue)(p.value[0], tooltipValueFormatter);
-                const y = (0, import_charts_core8.formatTooltipValue)(p.value[1], tooltipValueFormatter);
-                return `${(0, import_charts_core8.escapeHtml)(p.seriesName)}<br/>X: ${(0, import_charts_core8.escapeHtml)(x)}<br/>Y: ${(0, import_charts_core8.escapeHtml)(y)}`;
+                const x = (0, import_charts_core10.formatTooltipValue)(p.value[0], formatters.tooltip);
+                const y = (0, import_charts_core10.formatTooltipValue)(p.value[1], formatters.tooltip);
+                return `${(0, import_charts_core10.escapeHtml)(p.seriesName)}<br/>X: ${(0, import_charts_core10.escapeHtml)(x)}<br/>Y: ${(0, import_charts_core10.escapeHtml)(y)}`;
               }
             },
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter,
+              valueFormatter: formatters.tooltip,
               getLabel
             }
           ),
-          legend: (0, import_charts_core8.buildLegend)(
+          legend: (0, import_charts_core10.buildLegend)(
             data.series.map((s) => s.name),
             legendConfig,
             { show: showLegend, custom: customLegend }
           ),
-          xAxis: (0, import_charts_core8.buildAxis)(
+          xAxis: (0, import_charts_core10.buildAxis)(
             {
               type: "value",
               splitLine: {
@@ -1519,16 +1923,26 @@ var ScatterChart = React10.forwardRef(
             },
             xAxisConfig
           ),
-          yAxis: (0, import_charts_core8.buildAxis)(
+          yAxis: (0, import_charts_core10.buildAxis)(
             {
               type: "value",
               splitLine: {
                 show: showGrid
               }
             },
-            yAxisConfig
+            formatters.axis(yAxisConfig)
           ),
-          series
+          series: (0, import_charts_core10.withReferenceMarks)(
+            series,
+            referenceLines,
+            referenceBands,
+            {
+              valueAxis: "y",
+              format: formatters.format,
+              color: chartColors.reference,
+              bandColor: chartColors.referenceBand
+            }
+          )
         },
         optionOverride
       );
@@ -1541,46 +1955,42 @@ var ScatterChart = React10.forwardRef(
       showTrendLine,
       symbolSize,
       showLabels,
+      valueFormat,
+      locale,
       labelFormatter,
       xAxisConfig,
       yAxisConfig,
+      referenceLines,
+      referenceBands,
+      chartColors,
       tooltipFormatter,
       tooltipValueFormatter,
       legendConfig,
       customLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
-            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
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toDataPointParams(params, "click"))),
+        mouseover: onHover && ((params) => onHover(toDataPointParams(params, "mouseover")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core8.generateScatterChartDescription)(title, data) : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core10.generateScatterChartDescription)(title, data) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -1588,8 +1998,13 @@ var ScatterChart = React10.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : (0, import_charts_core10.scatterTable)(data, xAxisConfig?.name, yAxisConfig?.name),
+        showDataTable,
+        format: (0, import_charts_core10.resolveValueFormatter)(valueFormat, locale),
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1600,17 +2015,19 @@ ScatterChart.displayName = "ScatterChart";
 var React11 = __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_core9 = require("@classic-homes/charts-core");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-echarts8.use([import_charts6.PieChart, import_components6.TooltipComponent, import_components6.LegendComponent, import_components6.TitleComponent, import_renderers6.CanvasRenderer]);
+var import_components7 = require("echarts/components");
+var import_renderers7 = require("echarts/renderers");
+var import_charts_core11 = require("@classic-homes/charts-core");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+echarts8.use([import_charts6.PieChart, import_components7.TooltipComponent, import_components7.LegendComponent, import_components7.TitleComponent, import_renderers7.CanvasRenderer]);
 var DonutChart = React11.forwardRef(
   ({
     title,
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -1623,6 +2040,8 @@ var DonutChart = React11.forwardRef(
     innerRadius = "50%",
     centerLabel,
     centerValue,
+    valueFormat,
+    locale,
     labelFormatter,
     tooltipFormatter,
     tooltipValueFormatter,
@@ -1630,13 +2049,18 @@ var DonutChart = React11.forwardRef(
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
     const currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core9.getChartColors)(currentTheme);
+    const chartColors = (0, import_charts_core11.getChartColors)(currentTheme);
     const legend = useChartLegend({
       names: data?.map((d) => d.name) ?? [],
       colors: data?.map((d) => d.color) ?? [],
@@ -1646,13 +2070,18 @@ var DonutChart = React11.forwardRef(
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const format = React11.useMemo(
+      () => (0, import_charts_core11.resolveValueFormatter)(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const tooltipValues = tooltipValueFormatter ?? format;
     const option = React11.useMemo(() => {
       if (isEmpty) return {};
-      const pieCenter = (0, import_charts_core9.legendCenter)(legendConfig, showLegend && !customLegend, ["50%", "45%"]);
+      const pieCenter = (0, import_charts_core11.legendCenter)(legendConfig, showLegend && !customLegend, ["50%", "45%"]);
       const graphicElements = [];
       if (centerLabel || centerValue) {
         graphicElements.push(
-          (0, import_charts_core9.anchorCenterGraphic)(
+          (0, import_charts_core11.anchorCenterGraphic)(
             {
               type: "group",
               left: "center",
@@ -1692,23 +2121,23 @@ var DonutChart = React11.forwardRef(
           )
         );
       }
-      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const valueFormatter = tooltipFormatter === void 0 ? tooltipValues : void 0;
       const tooltipBase = {
         trigger: "item",
         formatter: valueFormatter ? (params) => {
           const p = params;
-          return `${(0, import_charts_core9.escapeHtml)(p.seriesName)} <br/>${(0, import_charts_core9.escapeHtml)(p.name)}: ${(0, import_charts_core9.escapeHtml)((0, import_charts_core9.formatTooltipValue)(p.value, valueFormatter))} (${p.percent}%)`;
+          return `${(0, import_charts_core11.escapeHtml)(p.seriesName)} <br/>${(0, import_charts_core11.escapeHtml)(p.name)}: ${(0, import_charts_core11.escapeHtml)((0, import_charts_core11.formatTooltipValue)(p.value, valueFormatter))} (${p.percent}%)`;
         } : "{a} <br/>{b}: {c} ({d}%)"
       };
-      return (0, import_charts_core9.mergeChartOption)(
+      return (0, import_charts_core11.mergeChartOption)(
         {
-          tooltip: (0, import_charts_core9.buildTooltip)(tooltipBase, {
+          tooltip: (0, import_charts_core11.buildTooltip)(tooltipBase, {
             show: showTooltip,
             formatter: tooltipFormatter,
-            valueFormatter: tooltipValueFormatter,
-            getLabel: (0, import_charts_core9.itemLabelLookup)(data)
+            valueFormatter: tooltipValues,
+            getLabel: (0, import_charts_core11.itemLabelLookup)(data)
           }),
-          legend: (0, import_charts_core9.buildLegend)(
+          legend: (0, import_charts_core11.buildLegend)(
             data.map((d) => d.name),
             legendConfig,
             { show: showLegend, custom: customLegend, defaults: { orient: "horizontal" } }
@@ -1725,16 +2154,16 @@ var DonutChart = React11.forwardRef(
                 name: item.name,
                 value: item.value,
                 itemStyle: item.color ? { color: item.color } : void 0,
-                label: (0, import_charts_core9.pointLabel)(item.label, labelFormatter, { position: labelPosition })
+                label: (0, import_charts_core11.pointLabel)(item.label, labelFormatter, { position: labelPosition })
               })),
-              label: (0, import_charts_core9.buildDataLabel)(
+              label: (0, import_charts_core11.buildDataLabel)(
                 {
                   show: true,
                   position: labelPosition,
                   formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
                 },
                 { show: false },
-                { show: showLabels, formatter: labelFormatter, getLabel: (0, import_charts_core9.itemLabelLookup)(data) }
+                { show: showLabels, formatter: labelFormatter, getLabel: (0, import_charts_core11.itemLabelLookup)(data) }
               ),
               labelLine: {
                 show: showLabels && labelPosition === "outside"
@@ -1765,40 +2194,32 @@ var DonutChart = React11.forwardRef(
       chartColors,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      tooltipValues,
       legendConfig,
       customLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
-      theme: currentTheme === import_charts_core9.THEME_DARK ? "dark" : "light",
+      theme: currentTheme === import_charts_core11.THEME_DARK ? "dark" : "light",
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
-            type: params.type || "click",
-            componentType: params.componentType || "series",
-            name: params.name || "",
-            value: params.value,
-            percent: params.percent,
-            color: params.color
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toSliceParams(params, "click")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core9.generatePieChartDescription)(title, data, true) : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core11.generatePieChartDescription)(title, data, true) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -1806,8 +2227,13 @@ var DonutChart = React11.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : (0, import_charts_core11.sliceTable)(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1818,17 +2244,17 @@ DonutChart.displayName = "DonutChart";
 var React12 = __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_charts_core10 = require("@classic-homes/charts-core");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_components8 = require("echarts/components");
+var import_renderers8 = require("echarts/renderers");
+var import_charts_core12 = require("@classic-homes/charts-core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 echarts9.use([
   import_charts7.RadarChart,
-  import_components7.TooltipComponent,
-  import_components7.LegendComponent,
-  import_components7.TitleComponent,
-  import_components7.RadarComponent,
-  import_renderers7.CanvasRenderer
+  import_components8.TooltipComponent,
+  import_components8.LegendComponent,
+  import_components8.TitleComponent,
+  import_components8.RadarComponent,
+  import_renderers8.CanvasRenderer
 ]);
 var RadarChart = React12.forwardRef(
   ({
@@ -1837,6 +2263,8 @@ var RadarChart = React12.forwardRef(
     data,
     indicators,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -1846,6 +2274,8 @@ var RadarChart = React12.forwardRef(
     showTooltip = true,
     shape = "polygon",
     showLabels = false,
+    valueFormat,
+    locale,
     labelFormatter,
     tooltipFormatter,
     tooltipValueFormatter,
@@ -1853,6 +2283,11 @@ var RadarChart = React12.forwardRef(
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -1862,27 +2297,32 @@ var RadarChart = React12.forwardRef(
     const legend = useChartLegend({
       names: data?.series?.map((s) => s.name) ?? [],
       colors: data?.series?.map((s) => s.color) ?? [],
-      palette: (0, import_charts_core10.getChartColors)(currentTheme).series,
+      palette: (0, import_charts_core12.getChartColors)(currentTheme).series,
       config: legendConfig,
       title,
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const format = React12.useMemo(
+      () => (0, import_charts_core12.resolveValueFormatter)(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React12.useMemo(() => {
       if (isEmpty) return {};
-      return (0, import_charts_core10.mergeChartOption)(
+      return (0, import_charts_core12.mergeChartOption)(
         {
-          tooltip: (0, import_charts_core10.buildTooltip)(
+          tooltip: (0, import_charts_core12.buildTooltip)(
             {
               trigger: "item"
             },
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter
+              valueFormatter
             }
           ),
-          legend: (0, import_charts_core10.buildLegend)(
+          legend: (0, import_charts_core12.buildLegend)(
             data.series.map((s) => s.name),
             legendConfig,
             { show: showLegend, custom: customLegend }
@@ -1894,12 +2334,12 @@ var RadarChart = React12.forwardRef(
               min: ind.min
             })),
             shape,
-            center: (0, import_charts_core10.legendCenter)(legendConfig, showLegend && !customLegend, ["50%", "50%"])
+            center: (0, import_charts_core12.legendCenter)(legendConfig, showLegend && !customLegend, ["50%", "50%"])
           },
           series: [
             {
               type: "radar",
-              label: (0, import_charts_core10.buildDataLabel)({ show: true }, void 0, {
+              label: (0, import_charts_core12.buildDataLabel)({ show: true }, void 0, {
                 show: showLabels,
                 formatter: labelFormatter
               }),
@@ -1926,22 +2366,20 @@ var RadarChart = React12.forwardRef(
       showLabels,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       legendConfig,
       customLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             seriesIndex: params.seriesIndex,
@@ -1951,17 +2389,21 @@ var RadarChart = React12.forwardRef(
             value: params.value,
             color: params.color
           });
-        });
-      }
+        })
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Radar chart with ${indicators.length} dimensions comparing ${data.series.length} series.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -1969,8 +2411,13 @@ var RadarChart = React12.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : (0, import_charts_core12.radarTable)(data, indicators),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1981,16 +2428,16 @@ RadarChart.displayName = "RadarChart";
 var React13 = __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_charts_core11 = require("@classic-homes/charts-core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_components9 = require("echarts/components");
+var import_renderers9 = require("echarts/renderers");
+var import_charts_core13 = require("@classic-homes/charts-core");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 echarts10.use([
   import_charts8.FunnelChart,
-  import_components8.TooltipComponent,
-  import_components8.LegendComponent,
-  import_components8.TitleComponent,
-  import_renderers8.CanvasRenderer
+  import_components9.TooltipComponent,
+  import_components9.LegendComponent,
+  import_components9.TitleComponent,
+  import_renderers9.CanvasRenderer
 ]);
 var FunnelChart = React13.forwardRef(
   ({
@@ -1998,6 +2445,8 @@ var FunnelChart = React13.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -2008,6 +2457,8 @@ var FunnelChart = React13.forwardRef(
     sort = "descending",
     orientation = "vertical",
     showLabels = true,
+    valueFormat,
+    locale,
     labelFormatter,
     tooltipFormatter,
     tooltipValueFormatter,
@@ -2015,6 +2466,11 @@ var FunnelChart = React13.forwardRef(
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -2024,32 +2480,37 @@ var FunnelChart = React13.forwardRef(
     const legend = useChartLegend({
       names: data?.map((d) => d.name) ?? [],
       colors: data?.map((d) => d.color) ?? [],
-      palette: (0, import_charts_core11.getChartColors)(currentTheme).series,
+      palette: (0, import_charts_core13.getChartColors)(currentTheme).series,
       config: legendConfig,
       title,
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const format = React13.useMemo(
+      () => (0, import_charts_core13.resolveValueFormatter)(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React13.useMemo(() => {
       if (isEmpty) return {};
-      const getLabel = (0, import_charts_core11.itemLabelLookup)(data);
-      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const getLabel = (0, import_charts_core13.itemLabelLookup)(data);
+      const templateFormatter = tooltipFormatter === void 0 ? valueFormatter : void 0;
       const tooltipBase = {
         trigger: "item",
-        formatter: valueFormatter ? (params) => {
+        formatter: templateFormatter ? (params) => {
           const p = params;
-          return `${(0, import_charts_core11.escapeHtml)(p.seriesName)} <br/>${(0, import_charts_core11.escapeHtml)(p.name)}: ${(0, import_charts_core11.escapeHtml)((0, import_charts_core11.formatTooltipValue)(p.value, valueFormatter))}`;
+          return `${(0, import_charts_core13.escapeHtml)(p.seriesName)} <br/>${(0, import_charts_core13.escapeHtml)(p.name)}: ${(0, import_charts_core13.escapeHtml)((0, import_charts_core13.formatTooltipValue)(p.value, templateFormatter))}`;
         } : "{a} <br/>{b}: {c}"
       };
-      return (0, import_charts_core11.mergeChartOption)(
+      return (0, import_charts_core13.mergeChartOption)(
         {
-          tooltip: (0, import_charts_core11.buildTooltip)(tooltipBase, {
+          tooltip: (0, import_charts_core13.buildTooltip)(tooltipBase, {
             show: showTooltip,
             formatter: tooltipFormatter,
-            valueFormatter: tooltipValueFormatter,
+            valueFormatter,
             getLabel
           }),
-          legend: (0, import_charts_core11.buildLegend)(
+          legend: (0, import_charts_core13.buildLegend)(
             data.map((d) => d.name),
             legendConfig,
             { show: showLegend, custom: customLegend }
@@ -2070,7 +2531,7 @@ var FunnelChart = React13.forwardRef(
               sort,
               orient: orientation,
               gap: 2,
-              label: (0, import_charts_core11.buildDataLabel)(
+              label: (0, import_charts_core13.buildDataLabel)(
                 {
                   show: true,
                   position: "inside",
@@ -2091,7 +2552,7 @@ var FunnelChart = React13.forwardRef(
                 name: item.name,
                 value: item.value,
                 itemStyle: item.color ? { color: item.color } : void 0,
-                label: (0, import_charts_core11.pointLabel)(item.label, labelFormatter, { position: "inside" })
+                label: (0, import_charts_core13.pointLabel)(item.label, labelFormatter, { position: "inside" })
               }))
             }
           ]
@@ -2109,39 +2570,41 @@ var FunnelChart = React13.forwardRef(
       title,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       legendConfig,
       customLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             name: params.name || "",
             value: params.value,
             color: params.color
           });
-        });
-      }
+        })
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Funnel chart with ${data.length} stages.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -2149,8 +2612,13 @@ var FunnelChart = React13.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : (0, import_charts_core13.sliceTable)(data, "Stage"),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2161,11 +2629,11 @@ FunnelChart.displayName = "FunnelChart";
 var React14 = __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_charts_core12 = require("@classic-homes/charts-core");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-echarts11.use([import_charts9.GaugeChart, import_components9.TitleComponent, import_components9.TooltipComponent, import_renderers9.CanvasRenderer]);
+var import_components10 = require("echarts/components");
+var import_renderers10 = require("echarts/renderers");
+var import_charts_core14 = require("@classic-homes/charts-core");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+echarts11.use([import_charts9.GaugeChart, import_components10.TitleComponent, import_components10.TooltipComponent, import_renderers10.CanvasRenderer]);
 var GaugeChart = React14.forwardRef(
   ({
     title,
@@ -2174,6 +2642,8 @@ var GaugeChart = React14.forwardRef(
     min = 0,
     max = 100,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -2183,21 +2653,33 @@ var GaugeChart = React14.forwardRef(
     showProgress = true,
     formatValue,
     showTooltip = true,
+    valueFormat,
+    locale,
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core12.getChartColors)(currentTheme);
+    const chartColors = (0, import_charts_core14.getChartColors)(currentTheme);
     const reducedMotion = useReducedMotion();
+    const format = React14.useMemo(
+      () => (0, import_charts_core14.resolveValueFormatter)(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = formatValue ?? format;
     const option = React14.useMemo(() => {
-      return (0, import_charts_core12.mergeChartOption)(
+      return (0, import_charts_core14.mergeChartOption)(
         {
           // No tooltip by default; one appears once its content is customised
-          tooltip: tooltipFormatter || tooltipValueFormatter ? (0, import_charts_core12.buildTooltip)(
+          tooltip: tooltipFormatter || tooltipValueFormatter ? (0, import_charts_core14.buildTooltip)(
             { trigger: "item" },
             {
               show: showTooltip,
@@ -2264,7 +2746,7 @@ var GaugeChart = React14.forwardRef(
                 fontSize: 28,
                 fontWeight: "bold",
                 offsetCenter: [0, "40%"],
-                formatter: formatValue || "{value}"
+                formatter: valueFormatter || "{value}"
               },
               data: [
                 {
@@ -2283,7 +2765,7 @@ var GaugeChart = React14.forwardRef(
       max,
       splitNumber,
       showProgress,
-      formatValue,
+      valueFormatter,
       title,
       animation,
       reducedMotion,
@@ -2293,16 +2775,15 @@ var GaugeChart = React14.forwardRef(
       tooltipValueFormatter,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
-      theme: currentTheme === import_charts_core12.THEME_DARK ? "dark" : "light",
+      theme: currentTheme === import_charts_core14.THEME_DARK ? "dark" : "light",
       animation,
-      onReady: (chart) => {
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             seriesIndex: params.seriesIndex,
@@ -2312,23 +2793,35 @@ var GaugeChart = React14.forwardRef(
             value: params.value,
             color: params.color
           });
-        });
-      }
+        })
+      }),
+      onCreated: onReady
     });
-    const accessibilityDescription = description || `${title}. Gauge showing value ${value} on scale from ${min} to ${max}.`;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    const show = (n) => valueFormatter ? valueFormatter(n) : String(n);
+    const accessibilityDescription = description || `${title}. Gauge showing value ${show(value)} on scale from ${show(min)} to ${show(max)}.`;
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         emptyMessage,
         className: cn(className),
+        dataTable: {
+          headers: ["Metric", "Value", "Minimum", "Maximum"],
+          rows: [[title, value, min, max]]
+        },
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2339,17 +2832,17 @@ GaugeChart.displayName = "GaugeChart";
 var React15 = __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_charts_core13 = require("@classic-homes/charts-core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_components11 = require("echarts/components");
+var import_renderers11 = require("echarts/renderers");
+var import_charts_core15 = require("@classic-homes/charts-core");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 echarts12.use([
   import_charts10.HeatmapChart,
-  import_components10.GridComponent,
-  import_components10.TooltipComponent,
-  import_components10.TitleComponent,
-  import_components10.VisualMapComponent,
-  import_renderers10.CanvasRenderer
+  import_components11.GridComponent,
+  import_components11.TooltipComponent,
+  import_components11.TitleComponent,
+  import_components11.VisualMapComponent,
+  import_renderers11.CanvasRenderer
 ]);
 var HeatmapChart = React15.forwardRef(
   ({
@@ -2359,6 +2852,8 @@ var HeatmapChart = React15.forwardRef(
     xAxis,
     yAxis,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -2369,9 +2864,16 @@ var HeatmapChart = React15.forwardRef(
     labelFormatter,
     xAxisConfig,
     yAxisConfig,
+    valueFormat,
+    locale,
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -2385,24 +2887,29 @@ var HeatmapChart = React15.forwardRef(
     }
     const minValue = data?.min ?? dataMin;
     const maxValue = data?.max ?? dataMax;
+    const format = React15.useMemo(
+      () => (0, import_charts_core15.resolveValueFormatter)(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React15.useMemo(() => {
       if (isEmpty) return {};
-      return (0, import_charts_core13.mergeChartOption)(
+      return (0, import_charts_core15.mergeChartOption)(
         {
-          tooltip: (0, import_charts_core13.buildTooltip)(
+          tooltip: (0, import_charts_core15.buildTooltip)(
             {
               position: "top",
               formatter: (params) => {
                 const p = params;
                 if (!p.value) return "";
                 const [xIdx, yIdx, value] = p.value;
-                return `${(0, import_charts_core13.escapeHtml)(xAxis[xIdx])} / ${(0, import_charts_core13.escapeHtml)(yAxis[yIdx])}: ${(0, import_charts_core13.escapeHtml)((0, import_charts_core13.formatTooltipValue)(value, tooltipValueFormatter))}`;
+                return `${(0, import_charts_core15.escapeHtml)(xAxis[xIdx])} / ${(0, import_charts_core15.escapeHtml)(yAxis[yIdx])}: ${(0, import_charts_core15.escapeHtml)((0, import_charts_core15.formatTooltipValue)(value, valueFormatter))}`;
               }
             },
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter
+              valueFormatter
             }
           ),
           grid: {
@@ -2411,7 +2918,7 @@ var HeatmapChart = React15.forwardRef(
             bottom: "3%",
             containLabel: true
           },
-          xAxis: (0, import_charts_core13.buildAxis)(
+          xAxis: (0, import_charts_core15.buildAxis)(
             {
               type: "category",
               data: xAxis,
@@ -2421,7 +2928,7 @@ var HeatmapChart = React15.forwardRef(
             },
             xAxisConfig
           ),
-          yAxis: (0, import_charts_core13.buildAxis)(
+          yAxis: (0, import_charts_core15.buildAxis)(
             {
               type: "category",
               data: yAxis,
@@ -2437,14 +2944,15 @@ var HeatmapChart = React15.forwardRef(
             calculable: true,
             orient: "vertical",
             right: "0%",
-            top: "center"
+            top: "center",
+            formatter: valueFormatter ? (value) => valueFormatter(value) : void 0
           },
           series: [
             {
               name: title,
               type: "heatmap",
               data: data.data,
-              label: (0, import_charts_core13.buildDataLabel)({ show: true }, void 0, {
+              label: (0, import_charts_core15.buildDataLabel)({ show: true }, void 0, {
                 show: showValues,
                 formatter: labelFormatter
               }),
@@ -2473,46 +2981,53 @@ var HeatmapChart = React15.forwardRef(
       xAxisConfig,
       yAxisConfig,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick, xAxis, yAxis });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        chart.on("click", (params) => {
-          const { onClick: onClick2, xAxis: xAxis2, yAxis: yAxis2 } = latest.current;
-          if (!onClick2) return;
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
           const [xIdx, yIdx, value] = params.value || [0, 0, 0];
-          onClick2({
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             xIndex: xIdx,
             yIndex: yIdx,
-            xLabel: xAxis2[xIdx],
-            yLabel: yAxis2[yIdx],
+            xLabel: xAxis[xIdx],
+            yLabel: yAxis[yIdx],
             value
           });
-        });
-      }
+        })
+      }),
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Heatmap with ${xAxis.length} columns and ${yAxis.length} rows.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        dataTable: isEmpty ? void 0 : (0, import_charts_core15.heatmapTable)(data, xAxis, yAxis),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2523,11 +3038,11 @@ HeatmapChart.displayName = "HeatmapChart";
 var React16 = __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_charts_core14 = require("@classic-homes/charts-core");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-echarts13.use([import_charts11.TreemapChart, import_components11.TooltipComponent, import_components11.TitleComponent, import_renderers11.CanvasRenderer]);
+var import_components12 = require("echarts/components");
+var import_renderers12 = require("echarts/renderers");
+var import_charts_core16 = require("@classic-homes/charts-core");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+echarts13.use([import_charts11.TreemapChart, import_components12.TooltipComponent, import_components12.TitleComponent, import_renderers12.CanvasRenderer]);
 var TreemapChart = React16.forwardRef(
   ({
     title,
@@ -2535,6 +3050,8 @@ var TreemapChart = React16.forwardRef(
     data,
     levels,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -2542,36 +3059,48 @@ var TreemapChart = React16.forwardRef(
     animation = true,
     showTooltip = true,
     labelFormatter,
+    valueFormat,
+    locale,
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
     const currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core14.getChartColors)(currentTheme);
+    const chartColors = (0, import_charts_core16.getChartColors)(currentTheme);
+    const format = React16.useMemo(
+      () => (0, import_charts_core16.resolveValueFormatter)(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React16.useMemo(() => {
       if (isEmpty) return {};
       const toNode = (node) => ({
         ...node,
         children: node.children?.map(toNode),
-        label: (0, import_charts_core14.pointLabel)(node.label, labelFormatter)
+        label: (0, import_charts_core16.pointLabel)(node.label, labelFormatter)
       });
-      return (0, import_charts_core14.mergeChartOption)(
+      return (0, import_charts_core16.mergeChartOption)(
         {
-          tooltip: (0, import_charts_core14.buildTooltip)(
+          tooltip: (0, import_charts_core16.buildTooltip)(
             {
               formatter: (params) => {
                 const p = params;
-                return `${(0, import_charts_core14.escapeHtml)(p.name)}: ${(0, import_charts_core14.escapeHtml)((0, import_charts_core14.formatTooltipValue)(p.value, tooltipValueFormatter))}`;
+                return `${(0, import_charts_core16.escapeHtml)(p.name)}: ${(0, import_charts_core16.escapeHtml)((0, import_charts_core16.formatTooltipValue)(p.value, valueFormatter))}`;
               }
             },
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter
+              valueFormatter
             }
           ),
           series: [
@@ -2606,10 +3135,10 @@ var TreemapChart = React16.forwardRef(
                   colorSaturation: [0.3, 0.5]
                 }
               ],
-              label: (0, import_charts_core14.buildDataLabel)({ show: true, formatter: "{b}" }, void 0, {
+              label: (0, import_charts_core16.buildDataLabel)({ show: true, formatter: "{b}" }, void 0, {
                 show: true,
                 formatter: labelFormatter,
-                getLabel: (0, import_charts_core14.nameLabelLookup)(data)
+                getLabel: (0, import_charts_core16.nameLabelLookup)(data)
               }),
               upperLabel: {
                 show: true,
@@ -2631,20 +3160,19 @@ var TreemapChart = React16.forwardRef(
       chartColors,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
-      theme: currentTheme === import_charts_core14.THEME_DARK ? "dark" : "light",
+      theme: currentTheme === import_charts_core16.THEME_DARK ? "dark" : "light",
       animation,
-      onReady: (chart) => {
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
           const treePathInfo = params.treePathInfo || [];
-          onClick2({
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             name: params.name || "",
@@ -2652,24 +3180,32 @@ var TreemapChart = React16.forwardRef(
             path: treePathInfo.map((item) => item.name || ""),
             depth: treePathInfo.length - 1
           });
-        });
-      }
+        })
+      }),
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Treemap chart showing hierarchical data.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        dataTable: isEmpty ? void 0 : (0, import_charts_core16.treemapTable)(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2680,18 +3216,18 @@ TreemapChart.displayName = "TreemapChart";
 var React17 = __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_charts_core15 = require("@classic-homes/charts-core");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_components13 = require("echarts/components");
+var import_renderers13 = require("echarts/renderers");
+var import_charts_core17 = require("@classic-homes/charts-core");
+var import_jsx_runtime18 = 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
+  import_components13.GridComponent,
+  import_components13.TooltipComponent,
+  import_components13.TitleComponent,
+  import_components13.DataZoomComponent,
+  import_renderers13.CanvasRenderer
 ]);
 var CandlestickChart = React17.forwardRef(
   ({
@@ -2699,6 +3235,8 @@ var CandlestickChart = React17.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -2706,18 +3244,31 @@ var CandlestickChart = React17.forwardRef(
     animation = true,
     showTooltip = true,
     showVolume = false,
+    zoomStart = 80,
     xAxisConfig,
     yAxisConfig,
+    valueFormat,
+    locale,
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.dates?.length || !data?.data?.length;
     const currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core15.getChartColors)(currentTheme);
+    const chartColors = (0, import_charts_core17.getChartColors)(currentTheme);
+    const format = React17.useMemo(
+      () => (0, import_charts_core17.resolveValueFormatter)(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React17.useMemo(() => {
       if (isEmpty) return {};
       const candlestickData = data.data.map((item) => [item.open, item.close, item.low, item.high]);
@@ -2745,7 +3296,7 @@ var CandlestickChart = React17.forwardRef(
         }
       ];
       const xAxisArr = [
-        (0, import_charts_core15.buildAxis)(
+        (0, import_charts_core17.buildAxis)(
           {
             type: "category",
             data: data.dates,
@@ -2759,7 +3310,7 @@ var CandlestickChart = React17.forwardRef(
         )
       ];
       const yAxisArr = [
-        (0, import_charts_core15.buildAxis)(
+        (0, import_charts_core17.buildAxis)(
           {
             scale: true,
             splitArea: {
@@ -2808,9 +3359,9 @@ var CandlestickChart = React17.forwardRef(
           }
         });
       }
-      return (0, import_charts_core15.mergeChartOption)(
+      return (0, import_charts_core17.mergeChartOption)(
         {
-          tooltip: (0, import_charts_core15.buildTooltip)(
+          tooltip: (0, import_charts_core17.buildTooltip)(
             {
               trigger: "axis",
               axisPointer: {
@@ -2820,7 +3371,7 @@ var CandlestickChart = React17.forwardRef(
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter
+              valueFormatter
             }
           ),
           grid: gridArr,
@@ -2829,14 +3380,14 @@ var CandlestickChart = React17.forwardRef(
           dataZoom: [
             {
               type: "inside",
-              start: 80,
+              start: zoomStart,
               end: 100
             },
             {
               show: true,
               type: "slider",
               top: "90%",
-              start: 80,
+              start: zoomStart,
               end: 100
             }
           ],
@@ -2849,54 +3400,62 @@ var CandlestickChart = React17.forwardRef(
       isEmpty,
       showTooltip,
       showVolume,
+      zoomStart,
       title,
       chartColors,
       xAxisConfig,
       yAxisConfig,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick, data });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
-      theme: currentTheme === import_charts_core15.THEME_DARK ? "dark" : "light",
+      theme: currentTheme === import_charts_core17.THEME_DARK ? "dark" : "light",
       animation,
-      onReady: (chart) => {
-        chart.on("click", (params) => {
-          const { onClick: onClick2, data: data2 } = latest.current;
-          if (!onClick2) return;
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
           const dataIndex = params.dataIndex || 0;
-          const item = data2.data[dataIndex];
+          const item = data.data[dataIndex];
           if (!item) return;
-          onClick2({
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
-            date: data2.dates[dataIndex],
+            date: data.dates[dataIndex],
             open: item.open,
             close: item.close,
             high: item.high,
             low: item.low,
-            volume: data2.volume?.[dataIndex]
+            volume: data.volume?.[dataIndex]
           });
-        });
-      }
+        })
+      }),
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Candlestick chart with ${data.dates.length} data points.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        dataTable: isEmpty ? void 0 : (0, import_charts_core17.candlestickTable)(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2907,17 +3466,19 @@ CandlestickChart.displayName = "CandlestickChart";
 var React18 = __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_charts_core16 = require("@classic-homes/charts-core");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-echarts15.use([import_charts13.SankeyChart, import_components13.TooltipComponent, import_components13.TitleComponent, import_renderers13.CanvasRenderer]);
+var import_components14 = require("echarts/components");
+var import_renderers14 = require("echarts/renderers");
+var import_charts_core18 = require("@classic-homes/charts-core");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+echarts15.use([import_charts13.SankeyChart, import_components14.TooltipComponent, import_components14.TitleComponent, import_renderers14.CanvasRenderer]);
 var SankeyChart = React18.forwardRef(
   ({
     title,
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -2926,19 +3487,31 @@ var SankeyChart = React18.forwardRef(
     showTooltip = true,
     orient = "horizontal",
     labelFormatter,
+    valueFormat,
+    locale,
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.nodes?.length || !data?.links?.length;
+    const format = React18.useMemo(
+      () => (0, import_charts_core18.resolveValueFormatter)(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React18.useMemo(() => {
       if (isEmpty) return {};
-      return (0, import_charts_core16.mergeChartOption)(
+      return (0, import_charts_core18.mergeChartOption)(
         {
-          tooltip: (0, import_charts_core16.buildTooltip)(
+          tooltip: (0, import_charts_core18.buildTooltip)(
             {
               trigger: "item",
               triggerOn: "mousemove"
@@ -2946,7 +3519,7 @@ var SankeyChart = React18.forwardRef(
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter
+              valueFormatter
             }
           ),
           series: [
@@ -2959,7 +3532,7 @@ var SankeyChart = React18.forwardRef(
               data: data.nodes.map((node) => ({
                 name: node.name,
                 itemStyle: node.color ? { color: node.color } : void 0,
-                label: (0, import_charts_core16.pointLabel)(node.label, labelFormatter)
+                label: (0, import_charts_core18.pointLabel)(node.label, labelFormatter)
               })),
               links: data.links.map((link) => ({
                 source: link.source,
@@ -2970,12 +3543,12 @@ var SankeyChart = React18.forwardRef(
                 color: "gradient",
                 curveness: 0.5
               },
-              label: (0, import_charts_core16.buildDataLabel)(
+              label: (0, import_charts_core18.buildDataLabel)(
                 {
                   position: orient === "horizontal" ? "right" : "bottom"
                 },
                 void 0,
-                { show: true, formatter: labelFormatter, getLabel: (0, import_charts_core16.nameLabelLookup)(data.nodes) }
+                { show: true, formatter: labelFormatter, getLabel: (0, import_charts_core18.nameLabelLookup)(data.nodes) }
               )
             }
           ]
@@ -2989,20 +3562,19 @@ var SankeyChart = React18.forwardRef(
       orient,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
           const isEdge = params.dataType === "edge";
-          onClick2({
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             dataType: isEdge ? "edge" : "node",
@@ -3011,24 +3583,32 @@ var SankeyChart = React18.forwardRef(
             source: isEdge ? params.data?.source : void 0,
             target: isEdge ? params.data?.target : void 0
           });
-        });
-      }
+        })
+      }),
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Sankey diagram with ${data.nodes.length} nodes and ${data.links.length} links.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        dataTable: isEmpty ? void 0 : (0, import_charts_core18.sankeyTable)(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -3040,6 +3620,7 @@ SankeyChart.displayName = "SankeyChart";
   BarChart,
   CandlestickChart,
   ChartContainer,
+  ChartDataTable,
   ChartEmpty,
   ChartError,
   ChartLegend,
@@ -3055,7 +3636,9 @@ SankeyChart.displayName = "SankeyChart";
   ScatterChart,
   TreemapChart,
   cn,
+  exportChartImage,
   registerClassicThemes,
+  registerEchartsModules,
   useChart,
   useChartLegend,
   useChartResize,