fix: calculate widget index and init metrics config (#41)

src/views/dashboard/configuration/Widget.vue

@@ -17,9 +17,6 @@ limitations under the License. -->
     <div class="graph" v-loading="loading">
       <div class="header">
         <span>{{ dashboardStore.selectedGrid.widget.title }}</span>
-        <span v-show="dashboardStore.selectedGrid.standard.unit" class="unit">
-          ({{ dashboardStore.selectedGrid.standard.unit }})
-        </span>
         <div class="tips" v-show="dashboardStore.selectedGrid.widget.tips">
           <el-tooltip :content="dashboardStore.selectedGrid.widget.tips">
             <Icon iconName="info_outline" size="sm" />

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -159,8 +159,8 @@ states.visTypes = setVisTypes();
 setDashboards();
 setMetricType();
 
-async function setMetricType() {
-  const { graph } = dashboardStore.selectedGrid;
+async function setMetricType(chart?: any) {
+  const graph = chart || dashboardStore.selectedGrid.graph;
   const json = await dashboardStore.fetchMetricList();
   if (json.errors) {
     ElMessage.error(json.errors);
@@ -203,6 +203,7 @@ async function setMetricType() {
     ...dashboardStore.selectedGrid,
     metrics: states.metrics,
     metricTypes: states.metricTypes,
+    graph,
   });
   states.metricTypeList = [];
   for (const metric of metrics) {
@@ -266,7 +267,6 @@ function setVisTypes() {
 
 function changeChartType(item: Option) {
   const graph = DefaultGraphConfig[item.value];
-  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
   states.isList = ListChartTypes.includes(graph.type);
   if (states.isList) {
     dashboardStore.selectWidget({
@@ -278,7 +278,7 @@ function changeChartType(item: Option) {
     states.metricTypes = [""];
     defaultLen.value = 5;
   }
-  setMetricType();
+  setMetricType(graph);
   setDashboards();
   states.dashboardName = "";
   defaultLen.value = 10;

src/views/dashboard/configuration/widget/metric/Standard.vue

@@ -71,7 +71,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { SortOrder, CalculationOpts } from "../../../data";
@@ -104,6 +104,12 @@ function changeConfigs(index: number, param: { [key: string]: string }) {
   });
   emit("update");
 }
+watch(
+  () => props.currentMetricConfig,
+  () => {
+    currentMetric.value = props.currentMetricConfig;
+  }
+);
 </script>
 <style lang="scss" scoped>
 .config-panel {

src/views/dashboard/controls/Widget.vue

@@ -19,9 +19,6 @@ limitations under the License. -->
         <span>
           {{ data.widget?.title || "" }}
         </span>
-        <span class="unit" v-show="data.standard?.unit">
-          ({{ data.standard?.unit }})
-        </span>
       </div>
       <div>
         <el-tooltip :content="data.widget?.tips">

src/views/dashboard/data.ts

@@ -67,7 +67,7 @@ export const DefaultGraphConfig: { [key: string]: any } = {
     type: "Card",
     fontSize: 14,
     textAlign: "center",
-    showUint: true,
+    showUnit: true,
   },
   Table: {
     type: "Table",