update

src/types/dashboard.d.ts

@@ -123,6 +123,7 @@ export interface CardConfig {
   fontSize?: number;
   showUnit?: boolean;
   textAlign?: "center" | "right" | "left";
+  decorations?: { [key: string]: string };
 }
 
 export interface TextConfig {

src/views/dashboard/Widget.vue

@@ -32,6 +32,7 @@ limitations under the License. -->
         :config="{
           i: 0,
           ...graph,
+          decorations: graph?.decorations,
           metricConfig: config.metricConfig,
           expressions: config.expressions || [],
           typesOfMQE: typesOfMQE || [],

src/views/dashboard/configuration/Widget.vue

@@ -32,7 +32,8 @@ limitations under the License. -->
           :data="states.source"
           :config="{
             ...graph,
-            legend: (dashboardStore.selectedGrid.graph || {}).legend,
+            decorations: dashboardStore.selectedGrid.graph?.decorations,
+            legend: dashboardStore.selectedGrid.graph?.legend,
             i: dashboardStore.selectedGrid.i,
             metricConfig: dashboardStore.selectedGrid.metricConfig,
             relatedTrace: dashboardStore.selectedGrid.relatedTrace,

src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue

@@ -38,16 +38,12 @@ limitations under the License. -->
   import { useDashboardStore } from "@/store/modules/dashboard";
 
   const dashboardStore = useDashboardStore();
-  const graph = dashboardStore.selectedGrid.graph || {};
+  const decorations = ref<{ [key: string]: string }>(dashboardStore.selectedGrid.decorations || {});
-  const decorations = ref<{ [key: string]: string }>(graph.decorations || {});
+  const keys = ref<string[]>(dashboardStore.selectedGrid.decorations ? Object.keys(decorations.value) : [""]);
-  const keys = ref<string[]>(graph.decorations ? Object.keys(graph.decorations) : [""]);
 
   function changeKeys(event: any, index: number) {
     const params = event.target.textContent || "";
     const list = Object.keys(decorations.value);
-    if (!list[index]) {
-      return;
-    }
     if (params) {
       decorations.value[params] = decorations.value[list[index]];
     }

src/views/dashboard/controls/Widget.vue

@@ -51,6 +51,7 @@ limitations under the License. -->
         :data="state.source"
         :config="{
           ...data.graph,
+          decorations: data.graph?.decorations,
           i: data.i,
           id: data.id,
           metricConfig: data.metricConfig || [],

src/views/dashboard/graphs/Card.vue

@@ -22,7 +22,7 @@ limitations under the License. -->
       justifyContent: config.textAlign || 'center',
     }"
   >
-    {{ singleVal }}
+    {{ decorations[singleVal] || singleVal }}
     <span class="unit" v-show="config.showUnit && unit">
       {{ decodeURIComponent(unit) }}
     </span>
@@ -48,11 +48,13 @@ limitations under the License. -->
         showUnit: true,
         textAlign: "center",
         metricConfig: [],
+        decorations: {},
       }),
     },
   });
   const { t } = useI18n();
   const metricConfig = computed(() => props.config.metricConfig || []);
+  const decorations = computed(() => props.config.decorations || {});
   const key = computed(() => Object.keys(props.data)[0]);
   const singleVal = computed(() =>
     Array.isArray(props.data[key.value]) ? props.data[key.value][0] : props.data[key.value],