fix: replace ref with onChartReady callback for dynamic echarts components

Dynamic imports via next/dynamic don't support ref prop, causing TypeScript
build errors in CI. Use onChartReady callback to capture echarts instance.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/charts/NetworkChart.tsx

@@ -14,7 +14,7 @@ interface NetworkChartProps {
 }
 
 export default function NetworkChart({ title = 'Network Traffic', data, height = 300 }: NetworkChartProps) {
-  const chartRef = useRef<any>(null);
+  const chartInstance = useRef<any>(null);
   const soloIndex = useRef<number | null>(null);
 
   if (!data.receive.length && !data.transmit.length) {
@@ -91,9 +91,13 @@ export default function NetworkChart({ title = 'Network Traffic', data, height =
     series: allSeries,
   };
 
+  const onChartReady = useCallback((instance: any) => {
+    chartInstance.current = instance;
+  }, []);
+
   const onEvents = useCallback(() => ({
     click: (params: any) => {
-      const chart = chartRef.current?.getEchartsInstance();
+      const chart = chartInstance.current;
       if (!chart) return;
 
       if (soloIndex.current === params.seriesIndex) {
@@ -113,11 +117,11 @@ export default function NetworkChart({ title = 'Network Traffic', data, height =
 
   return (
     <ReactECharts
-      ref={chartRef}
       option={option}
       style={{ height }}
       notMerge
       lazyUpdate
+      onChartReady={onChartReady}
       onEvents={onEvents()}
     />
   );

src/components/charts/TimeSeriesChart.tsx

@@ -20,7 +20,7 @@ export default function TimeSeriesChart({
   unit = '%',
   height = 300,
 }: TimeSeriesChartProps) {
-  const chartRef = useRef<any>(null);
+  const chartInstance = useRef<any>(null);
   const soloIndex = useRef<number | null>(null);
 
   const series = instances.map((inst) => ({
@@ -83,36 +83,40 @@ export default function TimeSeriesChart({
     series,
   };
 
-  const onEvents = useCallback(() => ({
+  const onChartReady = useCallback((instance: any) => {
-    click: (params: any) => {
+    chartInstance.current = instance;
-      const chart = chartRef.current?.getEchartsInstance();
+  }, []);
-      if (!chart) return;
 
-      const seriesNames = instances.map((inst) => inst.instance || 'total');
+  const onEvents = useCallback(() => {
+    const seriesNames = instances.map((inst) => inst.instance || 'total');
+    return {
+      click: (params: any) => {
+        const chart = chartInstance.current;
+        if (!chart) return;
 
-      if (soloIndex.current === params.seriesIndex) {
+        if (soloIndex.current === params.seriesIndex) {
-        const selected: Record<string, boolean> = {};
+          const selected: Record<string, boolean> = {};
-        seriesNames.forEach((name) => { selected[name] = true; });
+          seriesNames.forEach((name) => { selected[name] = true; });
-        chart.dispatchAction({ type: 'legendSelect', batch: seriesNames.map(name => ({ name })) });
+          chart.setOption({ legend: { selected } });
-        chart.setOption({ legend: { selected } });
+          soloIndex.current = null;
-        soloIndex.current = null;
+        } else {
-      } else {
+          const selected: Record<string, boolean> = {};
-        const selected: Record<string, boolean> = {};
+          seriesNames.forEach((name) => { selected[name] = false; });
-        seriesNames.forEach((name) => { selected[name] = false; });
+          selected[params.seriesName] = true;
-        selected[params.seriesName] = true;
+          chart.setOption({ legend: { selected } });
-        chart.setOption({ legend: { selected } });
+          soloIndex.current = params.seriesIndex;
-        soloIndex.current = params.seriesIndex;
+        }
-      }
+      },
-    },
+    };
-  }), [instances]);
+  }, [instances]);
 
   return (
     <ReactECharts
-      ref={chartRef}
       option={option}
       style={{ height }}
       notMerge
       lazyUpdate
+      onChartReady={onChartReady}
       onEvents={onEvents()}
     />
   );