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,17 +83,20 @@ export default function TimeSeriesChart({
     series,
   };
 
-  const onEvents = useCallback(() => ({
-    click: (params: any) => {
-      const chart = chartRef.current?.getEchartsInstance();
-      if (!chart) return;
+  const onChartReady = useCallback((instance: any) => {
+    chartInstance.current = instance;
+  }, []);
 
+  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) {
           const selected: Record<string, boolean> = {};
           seriesNames.forEach((name) => { selected[name] = true; });
-        chart.dispatchAction({ type: 'legendSelect', batch: seriesNames.map(name => ({ name })) });
           chart.setOption({ legend: { selected } });
           soloIndex.current = null;
         } else {
@@ -104,15 +107,16 @@ export default function TimeSeriesChart({
           soloIndex.current = params.seriesIndex;
         }
       },
-  }), [instances]);
+    };
+  }, [instances]);
 
   return (
     <ReactECharts
-      ref={chartRef}
       option={option}
       style={{ height }}
       notMerge
       lazyUpdate
+      onChartReady={onChartReady}
       onEvents={onEvents()}
     />
   );