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;
@@ -66,6 +67,22 @@
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
     const theme = useTheme();
 
+    const colorMap = useMemo(() => {
+        try {
+            const obj = props.colorMap && JSON.parse(props.colorMap);
+            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 !== null && item.color !== null)
+            }
+        } catch (e) {
+            console.info(`Error while parsing Metric.colorMap\n${(e as Error).message || e}`);
+        }
+        return undefined;
+    }, [props.colorMap, props.max])
+
     const data = useMemo(() => {
         return [
             {
@@ -91,6 +108,7 @@
                             props.max || 100
                         ]
                     },
+                    steps: colorMap,
                     shape: props.type === "linear" ? "bullet" : "angular",
                     threshold: {
                         line: {color: "red", width: 4},
@@ -109,7 +127,8 @@
         value,
         showValue,
         delta,
-        threshold
+        threshold,
+        colorMap
     ]);
 
     const style = useMemo(
@@ -168,7 +187,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",