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

src/store/modules/dashboard.ts

@@ -76,9 +76,10 @@ export const dashboardStore = defineStore({
       this.currentDashboard = item;
     },
     addControl(type: string) {
+      const arr = this.layout.map((d: any) => Number(d.i));
       const newItem: LayoutConfig = {
         ...NewControl,
-        i: String(this.layout.length),
+        i: String(Math.max(...arr) + 1),
         type,
         metricTypes: [""],
         metrics: [""],
@@ -146,9 +147,10 @@ export const dashboardStore = defineStore({
       }
       const tabIndex = this.layout[idx].activedTabIndex || 0;
       const { children } = this.layout[idx].children[tabIndex];
+      const arr = children.map((d: any) => Number(d.i));
       const newItem: LayoutConfig = {
         ...NewControl,
-        i: String(children.length),
+        i: String(Math.max(...arr) + 1),
         type,
         metricTypes: [""],
         metrics: [""],

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() {
+async function setMetricType(chart?: any) {
-  const { graph } = dashboardStore.selectedGrid;
+  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",