Merge pull request #58 from Shenhan11/fix/chart-fixes

fix: fix null value access and memory leaks in chart component and monitor page

Author: Nimbus318

packages/web/projects/vgpu/hooks/useInstantVector.js

@@ -42,7 +42,7 @@ const useInstantVector = (configs, parseQuery = (query) => query, times) => {
             },
           });
 
-          data.value[index].data = percentData.data[0]?.values;
+          data.value[index].data = percentData.data[0]?.values || [];
         }
       },
     );
@@ -67,7 +67,7 @@ const useInstantVector = (configs, parseQuery = (query) => query, times) => {
             },
           });
 
-          data.value[index].data = percentData.data[0]?.values;
+          data.value[index].data = percentData.data[0]?.values || [];
         }
       },
     );
@@ -79,13 +79,17 @@ const useInstantVector = (configs, parseQuery = (query) => query, times) => {
     fetchInstantData();
   });
 
-  watch(
-    times,
-    () => {
-      fetchRangeData();
-    },
-    // { immediate: true },
-  );
+  if (times) {
+    watch(
+      () => times.value,
+      () => {
+        // Only fetch data when both start and end times are available
+        if (times?.value?.[0] && times?.value?.[1]) {
+          fetchRangeData();
+        }
+      },
+    );
+  }
 
   return data;
 };

packages/web/projects/vgpu/views/monitor/overview/getOptions.js

@@ -477,6 +477,12 @@ export const getLineOptions = ({
 };
 
 export const getRangeOptions = (data) => {
+  if (!data || !data[0] || !data[0].data) {
+    return {
+      series: [],
+    };
+  }
+
   return {
     legend: {
       // data: [],
@@ -487,6 +493,7 @@ export const getRangeOptions = (data) => {
         type: 'cross',
       },
       formatter: function (params) {
+        if (!params || params.length === 0) return '';
         var res = params[0].name + '<br/>';
         for (var i = 0; i < params.length; i++) {
           res +=

packages/web/projects/vgpu/views/monitor/overview/index.vue

@@ -395,7 +395,7 @@ const fetchRangeData = () => {
           query: v.query,
         })
         .then((res) => {
-          v.data = res.data[0].values;
+          v.data = res.data?.[0]?.values || [];
         });
     }
   }
@@ -407,7 +407,7 @@ const fetchRangeData = () => {
         query: `sum({__name__=~"alert:.*:count"})`,
       })
       .then((res) => {
-        alarmData.value = res.data[0].values;
+        alarmData.value = res.data?.[0]?.values || [];
       });
 
 };

packages/web/src/components/Echarts-plus.vue

@@ -21,35 +21,46 @@ const props = defineProps({
 });
 
 const echartsRef = ref(null);
+const myChart = ref(null);
 
 const refresh = debounce(() => {
-  const myChart = echarts.init(echartsRef.value);
-  myChart.setOption(props.options);
-  myChart.on('finished', () => {
-    myChart.resize();
-    myChart.off('finished');
-  });
+  if (myChart.value) {
+    myChart.value.dispose();
+  }
+  myChart.value = echarts.init(echartsRef.value);
+  if (props.options) {
+    myChart.value.setOption(props.options);
+  }
   if (props.onClick) {
-    // myChart.on('click', props.onClick);
+    myChart.value.on('click', (params) => {
+      props.onClick(params, myChart.value);
+    });
   }
 }, 10);
 
-const resizeObserver = new ResizeObserver((e) => {
-  refresh();
+const resizeObserver = new ResizeObserver(() => {
+  requestAnimationFrame(() => {
+    refresh();
+  });
 });
 
 const currentName = ref();
 
 watchEffect(() => {
   const options = props.options;
   nextTick(() => {
-    const myChart = echarts.init(echartsRef.value);
-    myChart.setOption(props.options);
+    if (myChart.value) {
+      myChart.value.dispose();
+    }
+    myChart.value = echarts.init(echartsRef.value);
+    if (props.options) {
+      myChart.value.setOption(props.options);
+    }
 
     if (props.onClick) {
-      myChart.off('click');
-      myChart.on('click', (params) => {
-        props.onClick(params, myChart);
+      myChart.value.off('click');
+      myChart.value.on('click', (params) => {
+        props.onClick(params, myChart.value);
       });
     }
   });
@@ -60,6 +71,9 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
+  if (myChart.value) {
+    myChart.value.dispose();
+  }
   resizeObserver.disconnect();
 });