@hsu-react/ui 2.4.1 → 2.4.2

package/src/components/Chart/Heatmap/index.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
@@ -74,6 +75,8 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
   } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   // echarts options are plain JS and cannot read the `--vita-*` variables, so the axis and legend
   // colours have to be resolved against the active appearance here
@@ -255,12 +258,17 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
 
   // Callback for handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
@@ -296,7 +304,9 @@ const Heatmap: React.FC<ChartHeatmapProps> = (props) => {
         chartInstanceRef.current?.off("click", onClick);
       }
     };
-  }, [chartOption, handleResize, onChart, onClick]);
+  }, [chartOption, handleResize, onChart, onClick,
+    containerReady,
+  ]);
 
   // Clean up resources when the component unmounts
   useEffect(() => {

package/src/components/Chart/Line/index.tsx

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import useContainerReady from "../_hooks/useContainerReady";
 
 import {
   ChartCommonProps,
@@ -73,6 +74,8 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
   } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const prevXAxisKeyRef = useRef<string | null>(null);
   const legendScrollRef = useRef<ReturnType<typeof autoScrollLegend> | null>(
@@ -267,12 +270,17 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
 
   // Callback for handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
@@ -467,6 +475,7 @@ const ChartLine: React.FC<ChartLineProps> = (props) => {
     legendScrollInterval,
     // 图例是否接管滚轮由它推导，漏了会拿到过期的滚动配置
     normalizedScroll,
+    containerReady,
   ]);
 
   // Handle auto play

package/src/components/Chart/Pie/Pie3D/index.tsx

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import useContainerReady from "../../_hooks/useContainerReady";
 import "echarts-gl";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
@@ -108,6 +109,8 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
 
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const hoveredIndexRef = useRef<number | "">("");
   const optionRef = useRef<ChartsOption | null>(null);
@@ -145,6 +148,11 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
   ]);
 
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
@@ -163,7 +171,7 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
   );
 
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     let chart = chartInstanceRef.current;
     if (!chart) {
@@ -205,6 +213,7 @@ const ChartPie3D: React.FC<ChartPie3DProps> = (props) => {
     handleGlobalOut,
     onChart,
     onClick,
+    containerReady,
   ]);
 
   useEffect(() => {

package/src/components/Chart/Pie/index.tsx

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import useContainerReady from "../_hooks/useContainerReady";
 
 import {
   ChartCommonProps,
@@ -66,6 +67,8 @@ const ChartPie: ChartPieFC = (props) => {
   } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const legendScrollRef = useRef<ReturnType<typeof autoScrollLegend> | null>(
     null
@@ -241,12 +244,17 @@ const ChartPie: ChartPieFC = (props) => {
 
   // Callback for handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
@@ -313,6 +321,7 @@ const ChartPie: ChartPieFC = (props) => {
     seriesData,
     legendVisibleCount,
     legendScrollInterval,
+    containerReady,
   ]);
 
   // Clean up resources when the component unmounts

package/src/components/Chart/Polar/index.tsx

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import useContainerReady from "../_hooks/useContainerReady";
 import {
   ChartCommonProps,
   ChartOptionType,
@@ -36,6 +37,8 @@ const Polar: React.FC<ChartPolarProps> = (props) => {
   } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
   // Cache the chart option with useMemo
@@ -170,12 +173,17 @@ const Polar: React.FC<ChartPolarProps> = (props) => {
 
   // Callback handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize a new instance or reuse the existing one
     let chart = chartInstanceRef.current;
@@ -200,7 +208,9 @@ const Polar: React.FC<ChartPolarProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize]);
+  }, [chartOption, handleResize,
+    containerReady,
+  ]);
 
   // Clean up resources on unmount
   useEffect(() => {

package/src/components/Chart/Radar/index.tsx

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import useContainerReady from "../_hooks/useContainerReady";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import styles from "../index.module.scss";
@@ -55,6 +56,8 @@ const Radar: React.FC<ChartRadarProps> = (props) => {
 
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const hoveredIndicatorRef = useRef<number>(-1);
 
@@ -188,11 +191,16 @@ const Radar: React.FC<ChartRadarProps> = (props) => {
   ]);
 
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     let chart = chartInstanceRef.current;
     if (!chart) {
@@ -343,6 +351,7 @@ const Radar: React.FC<ChartRadarProps> = (props) => {
     singleIndicatorHighlight,
     singleIndicatorHoverFill,
     color,
+    containerReady,
   ]);
 
   useEffect(() => {

package/src/components/Chart/Sankey/index.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
@@ -16,6 +17,8 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
   const { className, style, seriesData, seriesLinks, series, getImage } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
   // Cache the chart option with useMemo
@@ -100,12 +103,17 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
 
   // Callback handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize a new instance or reuse the existing one
     let chart = chartInstanceRef.current;
@@ -141,7 +149,9 @@ const Sankey: React.FC<ChartSankeyProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage]);
+  }, [chartOption, handleResize, getImage,
+    containerReady,
+  ]);
 
   // Clean up resources on unmount
   useEffect(() => {

package/src/components/Chart/Tree/index.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import useContainerReady from "../_hooks/useContainerReady";
 import styles from "../index.module.scss";
 import {
   ChartCommonProps,
@@ -19,6 +20,8 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
   const { className, style, seriesData, series, getImage } = props;
   const chartRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<echarts.ECharts | null>(null);
+  // Defers `echarts.init` until the container has a box — see the hook for why
+  const containerReady = useContainerReady(chartRef);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
   // Cache the chart option with useMemo
@@ -40,12 +43,17 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
 
   // Callback handling chart resize
   const handleResize = useCallback(() => {
+    // A keep-alive tab losing focus fires the observer with a 0×0 box; resizing to that throws
+    // the laid-out canvas away and it has to be rebuilt when the tab comes back
+    const el = chartRef.current;
+    if (!el || el.clientWidth === 0 || el.clientHeight === 0) return;
+
     chartInstanceRef.current?.resize();
   }, []);
 
   // Initialize the chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !containerReady) return;
 
     // Initialize a new instance or reuse the existing one
     let chart = chartInstanceRef.current;
@@ -81,7 +89,9 @@ const Tree: React.FC<ChartTreeProps> = (props) => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [chartOption, handleResize, getImage]);
+  }, [chartOption, handleResize, getImage,
+    containerReady,
+  ]);
 
   // Clean up resources on unmount
   useEffect(() => {

package/src/components/Chart/_hooks/useContainerReady.ts

@@ -0,0 +1,50 @@
+import { RefObject, useEffect, useState } from "react";
+
+/**
+ * Whether the referenced element has a non-zero box yet.
+ *
+ * `echarts.init` on a 0×0 element logs `Can't get DOM width or height` and builds a canvas with no
+ * size, recovering only on the next `resize()`. A chart hits that path whenever it mounts before
+ * layout has given it space — inside a keep-alive tab that is not the active one, a collapsed
+ * panel, a modal that has not opened yet — so consuming apps see the warning for charts that end
+ * up rendering perfectly well.
+ *
+ * Gating `init` on this flag defers it to the first frame the element actually occupies space.
+ *
+ * It **latches**: once measured, the element going back to 0×0 (a keep-alive tab losing focus)
+ * must not read as "not ready" again, or the init effect would tear the chart down and re-create
+ * it on every tab switch.
+ */
+const useContainerReady = (ref: RefObject<HTMLElement | null>): boolean => {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    if (ready) return;
+
+    const el = ref.current;
+    if (!el) return;
+
+    const measure = (): boolean => {
+      const { width, height } = el.getBoundingClientRect();
+      if (width > 0 && height > 0) {
+        setReady(true);
+        return true;
+      }
+      return false;
+    };
+
+    // Already laid out on mount — the common case, and it must not cost an extra frame
+    if (measure()) return;
+
+    const observer = new ResizeObserver(() => {
+      if (measure()) observer.disconnect();
+    });
+    observer.observe(el);
+
+    return () => observer.disconnect();
+  }, [ready, ref]);
+
+  return ready;
+};
+
+export default useContainerReady;