From 747204171a6eb697c2fe40e13decd849e8d4404f Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Thu, 13 Nov 2025 00:09:34 +0900
Subject: [PATCH] replace echartsInstance ref with a direct variable assignment

---
 .../Charts/components/InstanceActivity.vue    | 46 +++++++++----------
 .../components/InstanceActivityDetail.vue     | 32 ++++++-------
 2 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/views/Charts/components/InstanceActivity.vue b/src/views/Charts/components/InstanceActivity.vue
index 49facb76..a72d0879 100644
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -174,7 +174,7 @@
         getActivityData
     } = useInstanceActivityData();
 
-    const echartsInstance = ref(null);
+    let echartsInstance = null;
     const resizeObserver = ref(null);
     const { handleIntersectionObserver } = useIntersectionObserver();
     const isLoading = ref(true);
@@ -204,9 +204,9 @@
     watch(
         () => isDarkMode.value,
         () => {
-            if (echartsInstance.value) {
-                echartsInstance.value.dispose();
-                echartsInstance.value = null;
+            if (echartsInstance) {
+                echartsInstance.dispose();
+                echartsInstance = null;
                 initEcharts();
             }
         }
@@ -215,7 +215,7 @@
     watch(
         () => dtHour12.value,
         () => {
-            if (echartsInstance.value) {
+            if (echartsInstance) {
                 initEcharts();
             }
         }
@@ -223,7 +223,7 @@
 
     // onActivated(() => {
     //     // first time also call activated
-    //     if (echartsInstance.value) {
+    //     if (echartsInstance) {
     //         reloadData();
     //     }
     // });
@@ -276,17 +276,17 @@
 
             await nextTick();
 
-            if (echartsInstance.value && activityData.value.length) {
+            if (echartsInstance && activityData.value.length) {
                 const chartsHeight = activityData.value.length * (barWidth.value + 10) + 200;
-                echartsInstance.value.resize({
+                echartsInstance.resize({
                     height: chartsHeight,
                     animation: {
                         duration: 300
                     }
                 });
-                echartsInstance.value.setOption(getNewOption(), { notMerge: true });
-            } else if (echartsInstance.value) {
-                echartsInstance.value.clear();
+                echartsInstance.setOption(getNewOption(), { notMerge: true });
+            } else if (echartsInstance) {
+                echartsInstance.clear();
             }
         } catch (error) {
             console.error('Error in reloadData:', error);
@@ -349,12 +349,12 @@
         const chartDom = activityChartRef.value;
 
         const afterInit = () => {
-            if (!echartsInstance.value) {
+            if (!echartsInstance) {
                 console.error('ECharts instance not initialized');
                 return;
             }
 
-            echartsInstance.value.resize({
+            echartsInstance.resize({
                 height: chartsHeight,
                 animation: {
                     duration: 300
@@ -363,26 +363,26 @@
 
             const handleClickYAxisLabel = handleYAxisLabelClick;
 
-            echartsInstance.value.off('click');
+            echartsInstance.off('click');
 
             if (activityData.value.length && worldNameArray.value.length) {
                 const options = getNewOption();
-                echartsInstance.value.clear();
-                echartsInstance.value.setOption(options, { notMerge: true });
-                echartsInstance.value.on('click', 'yAxis', handleClickYAxisLabel);
+                echartsInstance.clear();
+                echartsInstance.setOption(options, { notMerge: true });
+                echartsInstance.on('click', 'yAxis', handleClickYAxisLabel);
             } else {
-                echartsInstance.value.clear();
+                echartsInstance.clear();
             }
             isLoading.value = false;
         };
 
         const initEchartsInstance = () => {
-            echartsInstance.value = echarts.init(chartDom, `${isDarkMode.value ? 'dark' : null}`, {
+            echartsInstance = echarts.init(chartDom, `${isDarkMode.value ? 'dark' : null}`, {
                 height: chartsHeight
             });
             // resizeObserver.value = new ResizeObserver((entries) => {
             //     for (const entry of entries) {
-            //         echartsInstance.value.resize({
+            //         echartsInstance.resize({
             //             width: entry.contentRect.width,
             //             animation: {
             //                 duration: 300
@@ -393,7 +393,7 @@
             // resizeObserver.value.observe(chartDom);
         };
 
-        if (!echartsInstance.value) {
+        if (!echartsInstance) {
             initEchartsInstance();
         }
         afterInit();
@@ -541,9 +541,9 @@
     function handleSettingsChange() {
         handleChangeSettings(activityDetailChartRef);
 
-        if (echartsInstance.value) {
+        if (echartsInstance) {
             const newOptions = getNewOption();
-            echartsInstance.value.setOption({
+            echartsInstance.setOption({
                 yAxis: newOptions.yAxis
             });
         }
diff --git a/src/views/Charts/components/InstanceActivityDetail.vue b/src/views/Charts/components/InstanceActivityDetail.vue
index 668aae1b..13934a9f 100644
--- a/src/views/Charts/components/InstanceActivityDetail.vue
+++ b/src/views/Charts/components/InstanceActivityDetail.vue
@@ -44,7 +44,7 @@
     const activityDetailChartRef = ref(null);
 
     const isLoading = ref(true);
-    const echartsInstance = ref(null);
+    let echartsInstance = null;
     const usersFirstActivity = ref(null);
     const resizeObserver = ref(null);
 
@@ -59,9 +59,9 @@
     watch(
         () => isDarkMode.value,
         () => {
-            if (echartsInstance.value) {
-                echartsInstance.value.dispose();
-                echartsInstance.value = null;
+            if (echartsInstance) {
+                echartsInstance.dispose();
+                echartsInstance = null;
                 initEcharts();
             }
         }
@@ -70,7 +70,7 @@
     watch(
         () => dtHour12.value,
         () => {
-            if (echartsInstance.value) {
+            if (echartsInstance) {
                 initEcharts();
             }
         }
@@ -103,12 +103,12 @@
 
     function initResizeObserver() {
         resizeObserver.value = new ResizeObserver((entries) => {
-            if (!echartsInstance.value) {
+            if (!echartsInstance) {
                 return;
             }
             for (const entry of entries) {
                 try {
-                    echartsInstance.value.resize({
+                    echartsInstance.resize({
                         width: entry.contentRect.width,
                         animation: {
                             duration: 300
@@ -131,29 +131,29 @@
         const chartDom = activityDetailChartRef.value;
 
         const afterInit = () => {
-            if (!echartsInstance.value) {
+            if (!echartsInstance) {
                 console.error('ECharts instance not initialized');
                 isLoading.value = false;
                 return;
             }
 
             try {
-                echartsInstance.value.resize({
+                echartsInstance.resize({
                     height: chartsHeight,
                     animation: {
                         duration: 300
                     }
                 });
 
-                echartsInstance.value.off('click');
+                echartsInstance.off('click');
 
                 const options = getNewOption();
                 if (options && options.series && options.series.length > 0) {
-                    echartsInstance.value.clear();
-                    echartsInstance.value.setOption(options, { notMerge: true });
-                    echartsInstance.value.on('click', 'yAxis', handleClickYAxisLabel);
+                    echartsInstance.clear();
+                    echartsInstance.setOption(options, { notMerge: true });
+                    echartsInstance.on('click', 'yAxis', handleClickYAxisLabel);
                 } else {
-                    echartsInstance.value.clear();
+                    echartsInstance.clear();
                 }
             } catch (error) {
                 console.error('Error in afterInit:', error);
@@ -163,8 +163,8 @@
         };
 
         const initEchartsInstance = () => {
-            if (!echartsInstance.value) {
-                echartsInstance.value = echarts.init(chartDom, `${isDarkMode.value ? 'dark' : null}`, {
+            if (!echartsInstance) {
+                echartsInstance = echarts.init(chartDom, `${isDarkMode.value ? 'dark' : null}`, {
                     height: chartsHeight,
                     useDirtyRect: props.activityDetailData.length > 80
                 });