update

src/locales/lang/en.ts

@@ -387,5 +387,6 @@ const msg = {
   hierarchyNodeMetrics: "Metrics for Hierarchy Graph Node",
   hierarchyNodeDashboard: "As dashboard for Hierarchy Graph Node",
   valueMappings: "Value Mappings",
+  mappingTip: "Notice: The mapping key is like (-∞, 2] or [4, 10)",
 };
 export default msg;

src/locales/lang/es.ts

@@ -387,5 +387,6 @@ const msg = {
   hierarchyNodeMetrics: "Metrics for Hierarchy Graph Node",
   hierarchyNodeDashboard: "As dashboard for Hierarchy Graph Node",
   valueMappings: "Value Mappings",
+  mappingTip: "Notice: The mapping key is like (-∞, 2] or [4, 10)",
 };
 export default msg;

src/locales/lang/zh.ts

@@ -385,5 +385,6 @@ const msg = {
   hierarchyNodeMetrics: "层次图节点的指标",
   hierarchyNodeDashboard: "作为层次图节点的dashboard",
   valueMappings: "值映射",
+  mappingTip: "注意: 映射键如 (-∞, 2] 或者 [4, 10)",
 };
 export default msg;

src/views/dashboard/configuration/widget/graph-styles/Card.vue

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">{{ t("valueMappings") }}</span>
     <value-mappings />
   </div>
   <div>

src/views/dashboard/configuration/widget/graph-styles/Table.vue

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <span class="label">{{ t("valueMappings") }}</span>
     <value-mappings />
   </div>
   <div class="item">

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

@@ -13,6 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
+  <div>
+    <span class="label">{{ t("valueMappings") }}</span>
+    <span class="label red">({{ t("mappingTip") }})</span>
+  </div>
   <div v-for="(key, index) in keys" :key="index" class="mb-10 flex-h">
     <div class="content-decoration" contenteditable="true" @blur="changeKeys($event, index)">
       {{ key }}
@@ -36,7 +40,9 @@ limitations under the License. -->
 <script lang="ts" setup>
   import { ref } from "vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import { useI18n } from "vue-i18n";
 
+  const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const graph = dashboardStore.selectedGrid.graph;
   const valueMappings = ref<{ [key: string]: string }>(graph?.valueMappings || {});
@@ -94,4 +100,10 @@ limitations under the License. -->
       border-color: $active-color;
     }
   }
+
+  .label {
+    font-size: 13px;
+    font-weight: 500;
+    padding-right: 10px;
+  }
 </style>

src/views/dashboard/graphs/Card.vue

@@ -72,14 +72,14 @@ limitations under the License. -->
       let withinRange = false;
       const ranges = k.match(regex)?.map(Number) || [];
       if (k.startsWith("[")) {
-        withinRange = k.startsWith("[-∞") || Number(singleVal.value) >= ranges[0];
+        withinRange = Number(singleVal.value) >= ranges[0];
       } else {
         withinRange = k.startsWith("(-∞") || Number(singleVal.value) > ranges[0];
       }
       if (k.endsWith("]")) {
-        withinRange = withinRange && (k.endsWith("+∞]") || Number(singleVal.value) <= (ranges[1] || ranges[0]));
+        withinRange = withinRange && Number(singleVal.value) <= (ranges[1] || ranges[0]);
       } else {
-        withinRange = withinRange && (k.endsWith("+∞)") || Number(singleVal.value) < (ranges[1] || ranges[0]));
+        withinRange = withinRange && (k.endsWith("∞)") || Number(singleVal.value) < (ranges[1] || ranges[0]));
       }
       if (withinRange) {
         return valueMappings.value[i] || singleVal.value;

src/views/dashboard/graphs/Table.vue

@@ -88,14 +88,14 @@ limitations under the License. -->
       let withinRange = false;
       const ranges = k.match(regex)?.map(Number) || [];
       if (k.startsWith("[")) {
-        withinRange = k.startsWith("[-∞") || Number(source) >= ranges[0];
+        withinRange = Number(source) >= ranges[0];
       } else {
         withinRange = k.startsWith("(-∞") || Number(source) > ranges[0];
       }
       if (k.endsWith("]")) {
-        withinRange = withinRange && (k.endsWith("+∞]") || Number(source) <= (ranges[1] || ranges[0]));
+        withinRange = withinRange && Number(source) <= (ranges[1] || ranges[0]);
       } else {
-        withinRange = withinRange && (k.endsWith("+∞)") || Number(source) < (ranges[1] || ranges[0]));
+        withinRange = withinRange && (k.endsWith("∞)") || Number(source) < (ranges[1] || ranges[0]));
       }
       if (withinRange) {
         return valueMappings.value[i];