adding color-map property to Metric

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

@@ -0,0 +1,33 @@
+# 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
+
+# Layout reference can be found in the documentation: https://plotly.com/python/reference/layout/
+
+value = 50
+color_map = {
+    20: "#fd2020",
+    40: None,
+    60: "#f3ff26",
+    80: None
+}
+
+page = """
+<|{value}|metric|color_map={color_map}|>
+"""
+
+Gui(page).run()
+

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

@@ -20,7 +20,7 @@
 import {useClassNames, useDynamicJsonProperty, useDynamicProperty} from "../../utils/hooks";
 import {extractPrefix, extractSuffix, sprintfToD3Converter} from "../../utils/formatConversion";
 import {TaipyBaseProps, TaipyHoverProps} from "./utils";
-import { darkThemeTemplate } from "../../themes/darkThemeTemplate";
+import {darkThemeTemplate} from "../../themes/darkThemeTemplate";
 
 const Plot = lazy(() => import("react-plotly.js"));
 
@@ -44,6 +44,7 @@
     showValue?: boolean;
     format?: string;
     deltaFormat?: string;
+    colorMap?: string;
     template?: string;
     template_Dark_?: string;
     template_Light_?: string;
@@ -91,6 +92,14 @@
                             props.max || 100
                         ]
                     },
+                    steps: props.colorMap ? (() => {
+                        const obj = JSON.parse(props.colorMap);
+                        const keys = Object.keys(obj);
+                        return keys.sort((a, b) => parseFloat(a) - parseFloat(b)).map((key, index) => {
+                            const nextKey = keys[index + 1] !== undefined ? parseFloat(keys[index + 1]) : props.max;
+                            return {range: [parseFloat(key), nextKey], color: obj[key]};
+                        }).filter(item => item.color !== null);
+                    })() : undefined,
                     shape: props.type === "linear" ? "bullet" : "angular",
                     threshold: {
                         line: {color: "red", width: 4},
@@ -102,6 +111,7 @@
         ];
     }, [
         props.format,
+        props.colorMap,
         props.deltaFormat,
         props.min,
         props.max,
@@ -168,7 +178,7 @@
 
 export default Metric;
 
-const { colorscale, colorway, font} = darkThemeTemplate.layout;
+const {colorscale, colorway, font} = darkThemeTemplate.layout;
 const darkTemplate = {
     layout: {
         colorscale,

taipy/gui/_renderers/factory.py

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

taipy/gui/viselements.json

@@ -1166,6 +1166,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": "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",