@classic-homes/charts-react 0.1.36 → 0.1.37

package/dist/index.cjs

@@ -316,13 +316,15 @@ function useChartResize(chartRef, containerRef) {
   const resizeObserverRef = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
     const container = containerRef.current;
-    const chart = chartRef.current;
-    if (!container || !chart) return;
+    if (!container) return;
     let resizeTimeout;
     resizeObserverRef.current = new ResizeObserver(() => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
-        chart.resize();
+        const chart = chartRef.current;
+        if (chart && !chart.isDisposed()) {
+          chart.resize();
+        }
       }, 100);
     });
     resizeObserverRef.current.observe(container);
@@ -352,6 +354,7 @@ function useReducedMotion() {
 }
 
 // src/hooks/useChart.ts
+var SET_OPTION_OPTS = { notMerge: false, lazyUpdate: true };
 function useChart({
   option,
   theme = "auto",
@@ -364,39 +367,29 @@ function useChart({
   const reducedMotion = useReducedMotion();
   const onReadyRef = (0, import_react4.useRef)(onReady);
   onReadyRef.current = onReady;
+  const optionRef = (0, import_react4.useRef)(option);
+  optionRef.current = {
+    ...option,
+    animation: animation ?? !reducedMotion
+  };
   (0, import_react4.useEffect)(() => {
     if (!containerRef.current) return;
-    if (chartRef.current) {
-      chartRef.current.dispose();
-    }
-    chartRef.current = echarts2.init(containerRef.current, currentTheme);
-    if (onReadyRef.current && chartRef.current) {
-      onReadyRef.current(chartRef.current);
-    }
+    const chart = echarts2.init(containerRef.current, currentTheme);
+    chartRef.current = chart;
+    chart.setOption(optionRef.current, SET_OPTION_OPTS);
+    onReadyRef.current?.(chart);
     return () => {
-      chartRef.current?.dispose();
-      chartRef.current = null;
+      chart.dispose();
+      if (chartRef.current === chart) {
+        chartRef.current = null;
+      }
     };
   }, [currentTheme]);
   (0, import_react4.useEffect)(() => {
-    if (!chartRef.current) return;
-    const shouldAnimate = animation ?? !reducedMotion;
-    const optionWithAnimation = {
-      ...option,
-      animation: shouldAnimate
-    };
-    chartRef.current.setOption(optionWithAnimation, {
-      notMerge: false,
-      lazyUpdate: true
-    });
+    const chart = chartRef.current;
+    if (!chart || chart.isDisposed()) return;
+    chart.setOption(optionRef.current, SET_OPTION_OPTS);
   }, [option, animation, reducedMotion]);
-  (0, import_react4.useEffect)(() => {
-    if (!chartRef.current || !containerRef.current) return;
-    const currentOption = chartRef.current.getOption();
-    chartRef.current.dispose();
-    chartRef.current = echarts2.init(containerRef.current, currentTheme);
-    chartRef.current.setOption(currentOption);
-  }, [currentTheme]);
   useChartResize(chartRef, containerRef);
   return {
     chartRef,

package/dist/index.js

@@ -263,13 +263,15 @@ function useChartResize(chartRef, containerRef) {
   const resizeObserverRef = useRef(null);
   useEffect2(() => {
     const container = containerRef.current;
-    const chart = chartRef.current;
-    if (!container || !chart) return;
+    if (!container) return;
     let resizeTimeout;
     resizeObserverRef.current = new ResizeObserver(() => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
-        chart.resize();
+        const chart = chartRef.current;
+        if (chart && !chart.isDisposed()) {
+          chart.resize();
+        }
       }, 100);
     });
     resizeObserverRef.current.observe(container);
@@ -299,6 +301,7 @@ function useReducedMotion() {
 }
 
 // src/hooks/useChart.ts
+var SET_OPTION_OPTS = { notMerge: false, lazyUpdate: true };
 function useChart({
   option,
   theme = "auto",
@@ -311,39 +314,29 @@ function useChart({
   const reducedMotion = useReducedMotion();
   const onReadyRef = useRef2(onReady);
   onReadyRef.current = onReady;
+  const optionRef = useRef2(option);
+  optionRef.current = {
+    ...option,
+    animation: animation ?? !reducedMotion
+  };
   useEffect4(() => {
     if (!containerRef.current) return;
-    if (chartRef.current) {
-      chartRef.current.dispose();
-    }
-    chartRef.current = echarts2.init(containerRef.current, currentTheme);
-    if (onReadyRef.current && chartRef.current) {
-      onReadyRef.current(chartRef.current);
-    }
+    const chart = echarts2.init(containerRef.current, currentTheme);
+    chartRef.current = chart;
+    chart.setOption(optionRef.current, SET_OPTION_OPTS);
+    onReadyRef.current?.(chart);
     return () => {
-      chartRef.current?.dispose();
-      chartRef.current = null;
+      chart.dispose();
+      if (chartRef.current === chart) {
+        chartRef.current = null;
+      }
     };
   }, [currentTheme]);
   useEffect4(() => {
-    if (!chartRef.current) return;
-    const shouldAnimate = animation ?? !reducedMotion;
-    const optionWithAnimation = {
-      ...option,
-      animation: shouldAnimate
-    };
-    chartRef.current.setOption(optionWithAnimation, {
-      notMerge: false,
-      lazyUpdate: true
-    });
+    const chart = chartRef.current;
+    if (!chart || chart.isDisposed()) return;
+    chart.setOption(optionRef.current, SET_OPTION_OPTS);
   }, [option, animation, reducedMotion]);
-  useEffect4(() => {
-    if (!chartRef.current || !containerRef.current) return;
-    const currentOption = chartRef.current.getOption();
-    chartRef.current.dispose();
-    chartRef.current = echarts2.init(containerRef.current, currentTheme);
-    chartRef.current.setOption(currentOption);
-  }, [currentTheme]);
   useChartResize(chartRef, containerRef);
   return {
     chartRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/charts-react",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "description": "React ECharts components for Classic Theme",
   "type": "module",
   "main": "dist/index.js",