diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts index 90243c77..ccf98861 100644 --- a/src/types/dashboard.d.ts +++ b/src/types/dashboard.d.ts @@ -123,7 +123,7 @@ export interface CardConfig { fontSize?: number; showUnit?: boolean; textAlign?: "center" | "right" | "left"; - decorations?: { [key: string]: string }; + valueMappings?: { [key: string]: string }; } export interface TextConfig { diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue index fc0b00ca..30f02385 100644 --- a/src/views/dashboard/Widget.vue +++ b/src/views/dashboard/Widget.vue @@ -32,7 +32,7 @@ limitations under the License. --> :config="{ i: 0, ...graph, - decorations: graph?.decorations, + valueMappings: graph?.valueMappings, metricConfig: config.metricConfig, expressions: config.expressions || [], typesOfMQE: typesOfMQE || [], diff --git a/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue b/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue index 101bea6c..f0a8eb2e 100644 --- a/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue +++ b/src/views/dashboard/configuration/widget/graph-styles/components/ValueMappings.vue @@ -39,22 +39,22 @@ limitations under the License. --> const dashboardStore = useDashboardStore(); const graph = dashboardStore.selectedGrid.graph; - const decorations = ref<{ [key: string]: string }>(graph?.valueMappings || {}); - const keys = ref(graph.valueMappings ? Object.keys(decorations.value) : [""]); + const valueMappings = ref<{ [key: string]: string }>(graph?.valueMappings || {}); + const keys = ref(graph.valueMappings ? Object.keys(valueMappings.value) : [""]); function changeKeys(event: any, index: number) { const params = event.target.textContent || ""; - const list = Object.keys(decorations.value); + const list = Object.keys(valueMappings.value); if (params) { - decorations.value[params] = decorations.value[list[index]]; + valueMappings.value[params] = valueMappings.value[list[index]]; } - delete decorations.value[list[index]]; - keys.value = Object.keys(decorations.value); + delete valueMappings.value[list[index]]; + keys.value = Object.keys(valueMappings.value); updateConfig(); } function changeValues(event: any, key: string) { - decorations.value[key] = event.target.textContent || ""; + valueMappings.value[key] = event.target.textContent || ""; updateConfig(); } @@ -66,7 +66,7 @@ limitations under the License. --> if (!keys.value.length) { return; } - delete decorations.value[keys.value[index]]; + delete valueMappings.value[keys.value[index]]; keys.value.splice(index, 1); updateConfig(); } @@ -74,7 +74,7 @@ limitations under the License. --> function updateConfig() { const graph = { ...dashboardStore.selectedGrid.graph, - valueMappings: decorations.value, + valueMappings: valueMappings.value, }; dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph }); } diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue index 2b79e31d..3ece0eed 100644 --- a/src/views/dashboard/graphs/Card.vue +++ b/src/views/dashboard/graphs/Card.vue @@ -48,13 +48,13 @@ limitations under the License. --> showUnit: true, textAlign: "center", metricConfig: [], - decorations: {}, + valueMappings: {}, }), }, }); const { t } = useI18n(); const metricConfig = computed(() => props.config.metricConfig || []); - const decorations = computed(() => props.config.decorations || {}); + const valueMappings = computed(() => props.config.valueMappings || {}); 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], @@ -62,11 +62,11 @@ limitations under the License. --> const unit = computed(() => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit || "")); function getValue() { - if (decorations.value[singleVal.value]) { - return decorations.value[singleVal.value]; + if (valueMappings.value[singleVal.value]) { + return valueMappings.value[singleVal.value]; } const regex = /-?\d+(\.\d+)?/g; - const list = Object.keys(decorations.value); + const list = Object.keys(valueMappings.value); for (const i of list) { const k = i.replace(/\s+/g, ""); let withinRange = false; @@ -81,9 +81,8 @@ limitations under the License. --> } else { withinRange = withinRange && (k.endsWith("+∞)") || Number(singleVal.value) < (ranges[1] || ranges[0])); } - console.log(withinRange); if (withinRange) { - return decorations.value[i] || singleVal.value; + return valueMappings.value[i] || singleVal.value; } } return singleVal.value; diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue index 93e048ed..cb938698 100644 --- a/src/views/dashboard/graphs/Table.vue +++ b/src/views/dashboard/graphs/Table.vue @@ -58,14 +58,14 @@ limitations under the License. --> showTableValues: boolean; tableHeaderCol2: string; typesOfMQE: string[]; - decorations: {}; + valueMappings: {}; }>, default: () => ({ showTableValues: true }), }, }); const { t } = useI18n(); - const decorations = computed<{ [key: string]: string }>(() => props.config.decorations || {}); + const valueMappings = computed<{ [key: string]: string }>(() => props.config.valueMappings || {}); const nameWidth = computed(() => (props.config.showTableValues ? 80 : 100)); const dataKeys = computed(() => { const keys = Object.keys(props.data || {}).filter( @@ -78,11 +78,11 @@ limitations under the License. --> function getColValue(keys: string[]) { const source = props.data[(keys as string[]).join(",")][props.data[(keys as string[]).join(",")].length - 1 || 0]; - if (decorations.value[source]) { - return decorations.value[source]; + if (valueMappings.value[source]) { + return valueMappings.value[source]; } const regex = /-?\d+(\.\d+)?/g; - const list = Object.keys(decorations.value); + const list = Object.keys(valueMappings.value); for (const i of list) { const k = i.replace(/\s+/g, ""); let withinRange = false; @@ -98,7 +98,7 @@ limitations under the License. --> withinRange = withinRange && (k.endsWith("+∞)") || Number(source) < (ranges[1] || ranges[0])); } if (withinRange) { - return decorations.value[i]; + return valueMappings.value[i]; } } return source;