fix: update graph

src/components/Graph.vue

@@ -16,13 +16,12 @@ limitations under the License. -->
   <div ref="chartRef" :style="`height:${height};width:${width};`"></div>
 </template>
 <script lang="ts" setup>
-import { watch, ref, defineProps, Ref } from "vue";
+import { watch, ref, defineProps, Ref, onMounted, onBeforeUnmount } from "vue";
 import type { PropType } from "vue";
-import { useECharts } from "@/hooks/useECharts";
+import { useECharts } from "@/hooks/useEcharts";
 /*global Nullable*/
 const chartRef = ref<Nullable<HTMLDivElement>>(null);
-const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-
+const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
 const props = defineProps({
   clickEvent: { type: Function as PropType<(param: unknown) => void> },
   height: { type: String, default: "100%" },
@@ -33,10 +32,24 @@ const props = defineProps({
   },
 });
 
+onMounted(() => {
+  if (!chartRef.value) {
+    return;
+  }
+  window.addEventListener("resize", resize);
+});
+
 watch(
   () => props.option,
   (opt) => {
     setOptions(opt);
   }
 );
+
+onBeforeUnmount(() => {
+  if (!chartRef.value) {
+    return;
+  }
+  window.removeEventListener("resize", resize);
+});
 </script>

src/hooks/useEcharts.ts

@@ -116,6 +116,7 @@ export function useECharts(
   }
 
   function resize() {
+    console.log("resize");
     chartInstance?.resize();
   }
 

src/store/modules/dashboard.ts

@@ -51,10 +51,22 @@ export const dashboardStore = defineStore({
         w: 24,
         h: 12,
         i: String(this.layout.length),
+        metrics: ["service_resp_time"],
+        queryMetricType: "readMetricsValues",
         type: "Widget",
-        widget: {},
-        graph: {},
-        standard: {},
+        widget: {
+          title: "Title123",
+          tips: "Tooltip123",
+        },
+        graph: {
+          showBackground: true,
+          barWidth: 30,
+          type: "Line",
+        },
+        standard: {
+          sortOrder: "DEC",
+          unit: "s",
+        },
       };
       this.layout = this.layout.map((d: LayoutConfig) => {
         d.y = d.y + newWidget.h;
@@ -119,10 +131,22 @@ export const dashboardStore = defineStore({
         w: 24,
         h: 12,
         i: String(children.length),
+        metrics: ["service_resp_time"],
+        queryMetricType: "readMetricsValues",
         type: "Widget",
-        widget: {},
-        graph: {},
-        standard: {},
+        widget: {
+          title: "Title123",
+          tips: "Tooltip123",
+        },
+        graph: {
+          showBackground: true,
+          barWidth: 30,
+          type: "Line",
+        },
+        standard: {
+          sortOrder: "DEC",
+          unit: "s",
+        },
       };
       if (this.layout[idx].children) {
         const items = children.map((d: LayoutConfig) => {

src/views/dashboard/controls/Widget.vue

@@ -24,7 +24,7 @@ limitations under the License. -->
         <template #reference>
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
         </template>
-        <div class="tools" @click="setConfig">
+        <div class="tools" @click="editConfig">
           <span>Edit</span>
         </div>
         <div class="tools" @click="removeWidget">
@@ -104,7 +104,7 @@ export default defineComponent({
     function removeWidget() {
       dashboardStore.removeControls(props.data);
     }
-    function setConfig() {
+    function editConfig() {
       dashboardStore.setConfigPanel(true);
       dashboardStore.selectWidget(props.data);
     }
@@ -112,7 +112,7 @@ export default defineComponent({
       state,
       appStoreWithOut,
       removeWidget,
-      setConfig,
+      editConfig,
       data,
     };
   },

src/views/dashboard/graphs/Line.vue

@@ -16,7 +16,7 @@ limitations under the License. -->
   <Graph :option="option" />
 </template>
 <script lang="ts" setup>
-import { defineProps, ref, computed } from "vue";
+import { defineProps, computed } from "vue";
 import type { PropType } from "vue";
 import { Event } from "@/types/events";