diff --git a/src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue b/src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue
index f7de1632..fd1176a4 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue
@@ -23,7 +23,13 @@ limitations under the License. -->
-
+
@@ -33,16 +39,26 @@ limitations under the License. -->
const dashboardStore = useDashboardStore();
const graph = dashboardStore.selectedGrid.graph || {};
- const decorations = ref<{ [key: string]: string }>(graph.contentDecorations || { value: "content" });
- const keys = ref(graph.contentDecorations ? Object.keys(graph.contentDecorations) : [""]);
+ const decorations = ref<{ [key: string]: string }>(graph.decorations || {});
+ const keys = ref(graph.decorations ? Object.keys(graph.decorations) : [""]);
function changeKeys(event: any, index: number) {
const params = event.target.textContent || "";
- decorations.value[params] = "";
+ const list = Object.keys(decorations.value);
+ if (!list[index]) {
+ return;
+ }
+ if (params) {
+ decorations.value[params] = decorations.value[list[index]];
+ }
+ delete decorations.value[list[index]];
+ keys.value = Object.keys(decorations.value);
+ updateConfig({ decorations: decorations.value });
}
function changeValues(event: any, key: string) {
decorations.value[key] = event.target.textContent || "";
+ updateConfig({ decorations: decorations.value });
}
function addDecoration() {
@@ -58,6 +74,15 @@ limitations under the License. -->
}
delete decorations.value[keys.value[index]];
keys.value.splice(index, 1);
+ updateConfig({ decorations: decorations.value });
+ }
+
+ function updateConfig(param: { [key: string]: unknown }) {
+ const graph = {
+ ...dashboardStore.selectedGrid.graph,
+ ...param,
+ };
+ dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}