Merge pull request #1407 from Avaiga/1396-discussion-adding-color_range_step-property-to-metric-component

adding color-map property to Metric

doc/gui/examples/controls/metric-color-map.py

@@ -0,0 +1,43 @@
+# Copyright 2021-2024 Avaiga Private Limited
+#
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+# the License. You may obtain a copy of the License at
+#
+#        http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+# an "AS IS" BASIS, 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.
+# -----------------------------------------------------------------------------------------
+# To execute this script, make sure that the taipy-gui package is installed in your
+# Python environment and run:
+#     python <script>
+# -----------------------------------------------------------------------------------------
+from taipy.gui import Gui
+
+# color_map = {
+#     # 0-20 - Let Taipy decide
+#     # 20-40 - red
+#     20: "red",
+#     # 40-60 - Let Taipy decide
+#     40: None,
+#     # 60-80 - blue
+#     60: "blue",
+#     # 80-100 - Let Taipy decide
+#     80: None
+# }
+
+value = 50
+color_map = {
+    20: "red",
+    40: None,
+    60: "blue",
+    80: None
+}
+
+page = """
+<|{value}|metric|color_map={color_map}|>
+"""
+
+Gui(page).run()
+

frontend/taipy-gui/src/components/Taipy/Metric.tsx

@@ -45,6 +45,7 @@ interface MetricProps extends TaipyBaseProps, TaipyHoverProps {
     showValue?: boolean;
     format?: string;
     deltaFormat?: string;
+    colorMap?: string;
     template?: string;
     template_Dark_?: string;
     template_Light_?: string;
@@ -67,6 +68,22 @@ const Metric = (props: MetricProps) => {
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
     const theme = useTheme();
 
+    const colorMap = useMemo(() => {
+        try {
+            const obj = props.colorMap ? JSON.parse(props.colorMap) : null;
+            if (obj && typeof obj === 'object') {
+                const keys = Object.keys(obj);
+                return keys.sort((a, b) => Number(a) - Number(b)).map((key, index) => {
+                    const nextKey = keys[index + 1] !== undefined ? Number(keys[index + 1]) : props.max || 100;
+                    return {range: [Number(key), nextKey], color: obj[key]};
+                }).filter(item => item.color !== null)
+            }
+        } catch (e) {
+            console.info(`Error parsing color_map value (metric).\n${(e as Error).message || e}`);
+        }
+        return undefined;
+    }, [props.colorMap, props.max])
+
     const data = useMemo(() => {
         const mode = (props.type === "none") ? [] : ["gauge"];
         showValue && mode.push("number");
@@ -95,6 +112,7 @@ const Metric = (props: MetricProps) => {
                             props.max || 100
                         ]
                     },
+                    steps: colorMap,
                     shape: props.type === "linear" ? "bullet" : "angular",
                     threshold: {
                         line: {color: "red", width: 4},
@@ -113,7 +131,8 @@ const Metric = (props: MetricProps) => {
         value,
         showValue,
         delta,
-        threshold
+        threshold,
+        colorMap
     ]);
 
     const style = useMemo(

taipy/gui/_renderers/factory.py

@@ -357,6 +357,7 @@ class _Factory:
                 ("show_value", PropertyType.boolean, True),
                 ("format", PropertyType.string),
                 ("delta_format", PropertyType.string),
+                ("color_map", PropertyType.dict),
                 ("hover_text", PropertyType.dynamic_string),
                 ("template", PropertyType.dict),
                 ("template[dark]", PropertyType.dict),

taipy/gui/viselements.json

@@ -1172,6 +1172,11 @@
                         "type": "str",
                         "doc": "The format to use when displaying the delta value.<br/>This uses the <code>printf</code> syntax."
                     },
+                    {
+                        "name": "color_map",
+                        "type": "dict",
+                        "doc": "TODO The color_map is used to display different colors for different ranges of the metric. The color_map's keys represent the starting point of each range, which is a number, while the values represent the corresponding color for that range. If the value associated with a key is set to None, it implies that the corresponding range will not be assigned any color."
+                    },
                     {
                         "name": "width",
                         "type": "str|number",