diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index 0c4b34da..f921a1c5 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -22,7 +22,7 @@ limitations under the License. -->
       justifyContent: config.textAlign || 'center',
     }"
   >
-    {{ decorations[singleVal] || singleVal }}
+    {{ getValue() }}
     <span class="unit" v-show="config.showUnit && unit">
       {{ decodeURIComponent(unit) }}
     </span>
@@ -60,6 +60,34 @@ limitations under the License. -->
     Array.isArray(props.data[key.value]) ? props.data[key.value][0] : props.data[key.value],
   );
   const unit = computed(() => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit || ""));
+
+  function getValue() {
+    if (decorations.value[singleVal.value]) {
+      return decorations.value[singleVal.value];
+    }
+    const regex = /-?\d+(\.\d+)?/g;
+    const list = Object.keys(decorations.value);
+    for (const i of list) {
+      const k = i.replace(/\s+/g, "");
+      let withinRange = false;
+      const ranges = k.match(regex)?.map(Number) || [];
+      if (k.startsWith("[")) {
+        withinRange = k.startsWith("[-∞") ? true : Number(singleVal.value) >= ranges[0];
+      } else {
+        withinRange = k.startsWith("(-∞") ? true : Number(singleVal.value) > ranges[0];
+      }
+      if (k.endsWith("]")) {
+        withinRange = withinRange && (k.endsWith("+∞]") ? true : Number(singleVal.value) <= (ranges[1] || ranges[0]));
+      } else {
+        withinRange = withinRange && (k.endsWith("+∞)") ? true : Number(singleVal.value) < (ranges[1] || ranges[0]));
+      }
+      console.log(withinRange);
+      if (withinRange) {
+        return decorations.value[i] || singleVal.value;
+      }
+    }
+    return singleVal.value;
+  }
 </script>
 <style lang="scss" scoped>
   .chart-card {
diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue
index 0d663e21..57f76886 100644
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -65,7 +65,7 @@ limitations under the License. -->
   });
 
   const { t } = useI18n();
-  const decorations = computed<{ [key: number]: string }>(() => props.config.decorations || {});
+  const decorations = computed<{ [key: string]: string }>(() => props.config.decorations || {});
   const nameWidth = computed(() => (props.config.showTableValues ? 80 : 100));
   const dataKeys = computed(() => {
     const keys = Object.keys(props.data || {}).filter(
@@ -75,9 +75,33 @@ limitations under the License. -->
 
     return list;
   });
+
   function getColValue(keys: string[]) {
-    const val = props.data[(keys as string[]).join(",")][props.data[(keys as string[]).join(",")].length - 1 || 0];
-    return decorations.value[val] || val;
+    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];
+    }
+    const regex = /-?\d+(\.\d+)?/g;
+    const list = Object.keys(decorations.value);
+    for (const i of list) {
+      const k = i.replace(/\s+/g, "");
+      let withinRange = false;
+      const ranges = k.match(regex)?.map(Number) || [];
+      if (k.startsWith("[")) {
+        withinRange = k.startsWith("[-∞") ? true : Number(source) >= ranges[0];
+      } else {
+        withinRange = k.startsWith("(-∞") ? true : Number(source) > ranges[0];
+      }
+      if (k.endsWith("]")) {
+        withinRange = withinRange && (k.endsWith("+∞]") ? true : Number(source) <= (ranges[1] || ranges[0]));
+      } else {
+        withinRange = withinRange && (k.endsWith("+∞)") ? true : Number(source) < (ranges[1] || ranges[0]));
+      }
+      if (withinRange) {
+        return decorations.value[i];
+      }
+    }
+    return source;
   }
 </script>
 <style lang="scss" scoped>