From 25c7d8248e70c40fc8ac368559cea29cf5945fb8 Mon Sep 17 00:00:00 2001
From: Cloud User <ubuntu@dv2-kr3-ins-bastion-01.novalocal>
Date: Mon, 16 Mar 2026 13:54:20 +0900
Subject: [PATCH] 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    | 10 +++--
 src/components/charts/TimeSeriesChart.tsx | 48 ++++++++++++-----------
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/components/charts/NetworkChart.tsx b/src/components/charts/NetworkChart.tsx
index 11b462c..e7bc30b 100644
--- a/src/components/charts/NetworkChart.tsx
+++ b/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()}
     />
   );
diff --git a/src/components/charts/TimeSeriesChart.tsx b/src/components/charts/TimeSeriesChart.tsx
index a1be109..d496e2f 100644
--- a/src/components/charts/TimeSeriesChart.tsx
+++ b/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(() => ({
-    click: (params: any) => {
-      const chart = chartRef.current?.getEchartsInstance();
-      if (!chart) return;
+  const onChartReady = useCallback((instance: any) => {
+    chartInstance.current = instance;
+  }, []);
 
-      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) {
-        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 {
-        const selected: Record<string, boolean> = {};
-        seriesNames.forEach((name) => { selected[name] = false; });
-        selected[params.seriesName] = true;
-        chart.setOption({ legend: { selected } });
-        soloIndex.current = params.seriesIndex;
-      }
-    },
-  }), [instances]);
+        if (soloIndex.current === params.seriesIndex) {
+          const selected: Record<string, boolean> = {};
+          seriesNames.forEach((name) => { selected[name] = true; });
+          chart.setOption({ legend: { selected } });
+          soloIndex.current = null;
+        } else {
+          const selected: Record<string, boolean> = {};
+          seriesNames.forEach((name) => { selected[name] = false; });
+          selected[params.seriesName] = true;
+          chart.setOption({ legend: { selected } });
+          soloIndex.current = params.seriesIndex;
+        }
+      },
+    };
+  }, [instances]);
 
   return (
     <ReactECharts
-      ref={chartRef}
       option={option}
       style={{ height }}
       notMerge
       lazyUpdate
+      onChartReady={onChartReady}
       onEvents={onEvents()}
     />
   );