Adding theme for metric

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

@@ -19,6 +19,7 @@
 import {useClassNames, useDynamicJsonProperty, useDynamicProperty} from "../../utils/hooks";
 import {extractPrefix, extractSuffix, sprintfToD3Converter} from "../../utils/formatConversion";
 import {TaipyBaseProps, TaipyHoverProps} from "./utils";
+import {useTheme} from "@mui/material";
 
 const Plot = lazy(() => import("react-plotly.js"));
 
@@ -42,6 +43,9 @@
     showValue?: boolean;
     format?: string;
     deltaFormat?: string;
+    template?: string;
+    template_Dark_?: string;
+    template_Light_?: string;
 }
 
 const emptyLayout = {} as Record<string, Record<string, unknown>>;
@@ -59,6 +63,7 @@
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
     const baseLayout = useDynamicJsonProperty(props.layout, props.defaultLayout || "", emptyLayout);
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
+    const theme = useTheme();
 
     const data = useMemo(() => {
         return [
@@ -116,13 +121,41 @@
 
     const skelStyle = useMemo(() => ({...style, minHeight: "7em"}), [style]);
 
+    const layout = useMemo(() => {
+        const layout = {...baseLayout};
+        let template = undefined;
+        try {
+            const tpl = props.template && JSON.parse(props.template);
+            const tplTheme =
+                theme.palette.mode === "dark"
+                    ? props.template_Dark_
+                        ? JSON.parse(props.template_Dark_)
+                        : darkTemplate
+                    : props.template_Light_ && JSON.parse(props.template_Light_);
+            template = tpl ? (tplTheme ? {...tpl, ...tplTheme} : tpl) : tplTheme ? tplTheme : undefined;
+        } catch (e) {
+            console.info(`Error while parsing Metric.template\n${(e as Error).message || e}`);
+        }
+        if (template) {
+            layout.template = template;
+        }
+
+        return layout
+    }, [
+        props.template,
+        props.template_Dark_,
+        props.template_Light_,
+        theme.palette.mode,
+        baseLayout
+    ])
+
     return (
         <Box data-testid={props.testId} className={className}>
             <Tooltip title={hover || ""}>
                 <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
                     <Plot
                         data={data as Data[]}
-                        layout={baseLayout}
+                        layout={layout}
                         style={style}
                         useResizeHandler
                     />
@@ -133,3 +166,63 @@
 }
 
 export default Metric;
+
+const darkTemplate = {
+    layout: {
+        colorscale: {
+            diverging: [
+                [0, "#8e0152"],
+                [0.1, "#c51b7d"],
+                [0.2, "#de77ae"],
+                [0.3, "#f1b6da"],
+                [0.4, "#fde0ef"],
+                [0.5, "#f7f7f7"],
+                [0.6, "#e6f5d0"],
+                [0.7, "#b8e186"],
+                [0.8, "#7fbc41"],
+                [0.9, "#4d9221"],
+                [1, "#276419"],
+            ],
+            sequential: [
+                [0.0, "#0d0887"],
+                [0.1111111111111111, "#46039f"],
+                [0.2222222222222222, "#7201a8"],
+                [0.3333333333333333, "#9c179e"],
+                [0.4444444444444444, "#bd3786"],
+                [0.5555555555555556, "#d8576b"],
+                [0.6666666666666666, "#ed7953"],
+                [0.7777777777777778, "#fb9f3a"],
+                [0.8888888888888888, "#fdca26"],
+                [1.0, "#f0f921"],
+            ],
+            sequentialminus: [
+                [0.0, "#0d0887"],
+                [0.1111111111111111, "#46039f"],
+                [0.2222222222222222, "#7201a8"],
+                [0.3333333333333333, "#9c179e"],
+                [0.4444444444444444, "#bd3786"],
+                [0.5555555555555556, "#d8576b"],
+                [0.6666666666666666, "#ed7953"],
+                [0.7777777777777778, "#fb9f3a"],
+                [0.8888888888888888, "#fdca26"],
+                [1.0, "#f0f921"],
+            ],
+        },
+        colorway: [
+            "#636efa",
+            "#EF553B",
+            "#00cc96",
+            "#ab63fa",
+            "#FFA15A",
+            "#19d3f3",
+            "#FF6692",
+            "#B6E880",
+            "#FF97FF",
+            "#FECB52",
+        ],
+        font: {
+            color: "#f2f5fa",
+        },
+        paper_bgcolor: "rgb(31,47,68)",
+    },
+};

taipy/gui/_renderers/factory.py

@@ -372,6 +372,9 @@ class _Factory:
                 ("show_value", PropertyType.boolean, True),
                 ("format", PropertyType.string),
                 ("delta_format", PropertyType.string),
+                ("template", PropertyType.dict),
+                ("template[dark]", PropertyType.dict),
+                ("template[light]", PropertyType.dict),
             ]
         ),
         "navbar": lambda gui, control_type, attrs: _Builder(

taipy/gui/viselements.json

@@ -905,6 +905,21 @@
                         "type": "str|number",
                         "default_value": "None",
                         "doc": "The height, in CSS units, of the metric."
+                    },
+                    {
+                        "name": "template",
+                        "type": "dict",
+                        "doc": "The Plotly layout <a href=\"https://plotly.com/javascript/layout-template/\">template</a>."
+                    },
+                    {
+                        "name": "template[dark]",
+                        "type": "dict",
+                        "doc": "The Plotly layout <a href=\"https://plotly.com/javascript/layout-template/\">template</a> applied over the base template when theme is dark."
+                    },
+                    {
+                        "name": "template[light]",
+                        "type": "dict",
+                        "doc": "The Plotly layout <a href=\"https://plotly.com/javascript/layout-template/\">template</a> applied over the base template when theme is not dark."
                     }
                 ]
             }