Merge pull request #1364 from Avaiga/metric-theme

Adding theme for metric

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

@@ -43,6 +43,7 @@ import {
     useDynamicProperty,
     useModule,
 } from "../../utils/hooks";
+import { darkThemeTemplate } from "../../themes/darkThemeTemplate";
 
 const Plot = lazy(() => import("react-plotly.js"));
 
@@ -348,7 +349,7 @@ const Chart = (props: ChartProp) => {
                 theme.palette.mode === "dark"
                     ? props.template_Dark_
                         ? JSON.parse(props.template_Dark_)
-                        : darkTemplate
+                        : darkThemeTemplate
                     : props.template_Light_ && JSON.parse(props.template_Light_);
             template = tpl ? (tplTheme ? { ...tpl, ...tplTheme } : tpl) : tplTheme ? tplTheme : undefined;
         } catch (e) {
@@ -649,353 +650,3 @@ const Chart = (props: ChartProp) => {
 };
 
 export default Chart;
-
-const darkTemplate = {
-    data: {
-        barpolar: [
-            {
-                marker: {
-                    line: {
-                        color: "rgb(17,17,17)",
-                    },
-                    pattern: {
-                        solidity: 0.2,
-                    },
-                },
-                type: "barpolar",
-            },
-        ],
-        bar: [
-            {
-                error_x: {
-                    color: "#f2f5fa",
-                },
-                error_y: {
-                    color: "#f2f5fa",
-                },
-                marker: {
-                    line: {
-                        color: "rgb(17,17,17)",
-                    },
-                    pattern: {
-                        solidity: 0.2,
-                    },
-                },
-                type: "bar",
-            },
-        ],
-        carpet: [
-            {
-                aaxis: {
-                    endlinecolor: "#A2B1C6",
-                    gridcolor: "#506784",
-                    linecolor: "#506784",
-                    minorgridcolor: "#506784",
-                    startlinecolor: "#A2B1C6",
-                },
-                baxis: {
-                    endlinecolor: "#A2B1C6",
-                    gridcolor: "#506784",
-                    linecolor: "#506784",
-                    minorgridcolor: "#506784",
-                    startlinecolor: "#A2B1C6",
-                },
-                type: "carpet",
-            },
-        ],
-        contour: [
-            {
-                colorscale: [
-                    [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"],
-                ],
-                type: "contour",
-            },
-        ],
-        heatmapgl: [
-            {
-                colorscale: [
-                    [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"],
-                ],
-                type: "heatmapgl",
-            },
-        ],
-        heatmap: [
-            {
-                colorscale: [
-                    [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"],
-                ],
-                type: "heatmap",
-            },
-        ],
-        histogram2dcontour: [
-            {
-                colorscale: [
-                    [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"],
-                ],
-                type: "histogram2dcontour",
-            },
-        ],
-        histogram2d: [
-            {
-                colorscale: [
-                    [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"],
-                ],
-                type: "histogram2d",
-            },
-        ],
-        histogram: [
-            {
-                marker: {
-                    pattern: {
-                        solidity: 0.2,
-                    },
-                },
-                type: "histogram",
-            },
-        ],
-        scatter: [
-            {
-                marker: {
-                    line: {
-                        color: "#283442",
-                    },
-                },
-                type: "scatter",
-            },
-        ],
-        scattergl: [
-            {
-                marker: {
-                    line: {
-                        color: "#283442",
-                    },
-                },
-                type: "scattergl",
-            },
-        ],
-        surface: [
-            {
-                colorscale: [
-                    [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"],
-                ],
-                type: "surface",
-            },
-        ],
-        table: [
-            {
-                cells: {
-                    fill: {
-                        color: "#506784",
-                    },
-                    line: {
-                        color: "rgb(17,17,17)",
-                    },
-                },
-                header: {
-                    fill: {
-                        color: "#2a3f5f",
-                    },
-                    line: {
-                        color: "rgb(17,17,17)",
-                    },
-                },
-                type: "table",
-            },
-        ],
-    },
-    layout: {
-        annotationdefaults: {
-            arrowcolor: "#f2f5fa",
-        },
-        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",
-        },
-        geo: {
-            bgcolor: "rgb(17,17,17)",
-            lakecolor: "rgb(17,17,17)",
-            landcolor: "rgb(17,17,17)",
-            subunitcolor: "#506784",
-        },
-        mapbox: {
-            style: "dark",
-        },
-        paper_bgcolor: "rgb(17,17,17)",
-        plot_bgcolor: "rgb(17,17,17)",
-        polar: {
-            angularaxis: {
-                gridcolor: "#506784",
-                linecolor: "#506784",
-            },
-            bgcolor: "rgb(17,17,17)",
-            radialaxis: {
-                gridcolor: "#506784",
-                linecolor: "#506784",
-            },
-        },
-        scene: {
-            xaxis: {
-                backgroundcolor: "rgb(17,17,17)",
-                gridcolor: "#506784",
-                linecolor: "#506784",
-                zerolinecolor: "#C8D4E3",
-            },
-            yaxis: {
-                backgroundcolor: "rgb(17,17,17)",
-                gridcolor: "#506784",
-                linecolor: "#506784",
-                zerolinecolor: "#C8D4E3",
-            },
-            zaxis: {
-                backgroundcolor: "rgb(17,17,17)",
-                gridcolor: "#506784",
-                linecolor: "#506784",
-                showbackground: true,
-                zerolinecolor: "#C8D4E3",
-            },
-        },
-        shapedefaults: {
-            line: {
-                color: "#f2f5fa",
-            },
-        },
-        sliderdefaults: {
-            bgcolor: "#C8D4E3",
-            bordercolor: "rgb(17,17,17)",
-        },
-        ternary: {
-            aaxis: {
-                gridcolor: "#506784",
-                linecolor: "#506784",
-            },
-            baxis: {
-                gridcolor: "#506784",
-                linecolor: "#506784",
-            },
-            bgcolor: "rgb(17,17,17)",
-            caxis: {
-                gridcolor: "#506784",
-                linecolor: "#506784",
-            },
-        },
-        updatemenudefaults: {
-            bgcolor: "#506784",
-        },
-        xaxis: {
-            gridcolor: "#283442",
-            linecolor: "#506784",
-            tickcolor: "#506784",
-            zerolinecolor: "#283442",
-        },
-        yaxis: {
-            gridcolor: "#283442",
-            linecolor: "#506784",
-            tickcolor: "#506784",
-            zerolinecolor: "#283442",
-        },
-    },
-};

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

@@ -16,9 +16,11 @@ import {Data} from "plotly.js";
 import Box from "@mui/material/Box";
 import Skeleton from "@mui/material/Skeleton";
 import Tooltip from "@mui/material/Tooltip";
+import {useTheme} from "@mui/material";
 import {useClassNames, useDynamicJsonProperty, useDynamicProperty} from "../../utils/hooks";
 import {extractPrefix, extractSuffix, sprintfToD3Converter} from "../../utils/formatConversion";
 import {TaipyBaseProps, TaipyHoverProps} from "./utils";
+import { darkThemeTemplate } from "../../themes/darkThemeTemplate";
 
 const Plot = lazy(() => import("react-plotly.js"));
 
@@ -42,6 +44,9 @@ interface MetricProps extends TaipyBaseProps, TaipyHoverProps {
     showValue?: boolean;
     format?: string;
     deltaFormat?: string;
+    template?: string;
+    template_Dark_?: string;
+    template_Light_?: string;
 }
 
 const emptyLayout = {} as Record<string, Record<string, unknown>>;
@@ -59,6 +64,7 @@ const Metric = (props: MetricProps) => {
     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 +122,41 @@ const Metric = (props: MetricProps) => {
 
     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 +167,13 @@ const Metric = (props: MetricProps) => {
 }
 
 export default Metric;
+
+const { colorscale, colorway, font} = darkThemeTemplate.layout;
+const darkTemplate = {
+    layout: {
+        colorscale,
+        colorway,
+        font,
+        paper_bgcolor: "rgb(31,47,68)",
+    },
+}

frontend/taipy-gui/src/themes/darkThemeTemplate.ts

@@ -0,0 +1,349 @@
+export const darkThemeTemplate = {
+    data: {
+        barpolar: [
+            {
+                marker: {
+                    line: {
+                        color: "rgb(17,17,17)",
+                    },
+                    pattern: {
+                        solidity: 0.2,
+                    },
+                },
+                type: "barpolar",
+            },
+        ],
+        bar: [
+            {
+                error_x: {
+                    color: "#f2f5fa",
+                },
+                error_y: {
+                    color: "#f2f5fa",
+                },
+                marker: {
+                    line: {
+                        color: "rgb(17,17,17)",
+                    },
+                    pattern: {
+                        solidity: 0.2,
+                    },
+                },
+                type: "bar",
+            },
+        ],
+        carpet: [
+            {
+                aaxis: {
+                    endlinecolor: "#A2B1C6",
+                    gridcolor: "#506784",
+                    linecolor: "#506784",
+                    minorgridcolor: "#506784",
+                    startlinecolor: "#A2B1C6",
+                },
+                baxis: {
+                    endlinecolor: "#A2B1C6",
+                    gridcolor: "#506784",
+                    linecolor: "#506784",
+                    minorgridcolor: "#506784",
+                    startlinecolor: "#A2B1C6",
+                },
+                type: "carpet",
+            },
+        ],
+        contour: [
+            {
+                colorscale: [
+                    [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"],
+                ],
+                type: "contour",
+            },
+        ],
+        heatmapgl: [
+            {
+                colorscale: [
+                    [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"],
+                ],
+                type: "heatmapgl",
+            },
+        ],
+        heatmap: [
+            {
+                colorscale: [
+                    [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"],
+                ],
+                type: "heatmap",
+            },
+        ],
+        histogram2dcontour: [
+            {
+                colorscale: [
+                    [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"],
+                ],
+                type: "histogram2dcontour",
+            },
+        ],
+        histogram2d: [
+            {
+                colorscale: [
+                    [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"],
+                ],
+                type: "histogram2d",
+            },
+        ],
+        histogram: [
+            {
+                marker: {
+                    pattern: {
+                        solidity: 0.2,
+                    },
+                },
+                type: "histogram",
+            },
+        ],
+        scatter: [
+            {
+                marker: {
+                    line: {
+                        color: "#283442",
+                    },
+                },
+                type: "scatter",
+            },
+        ],
+        scattergl: [
+            {
+                marker: {
+                    line: {
+                        color: "#283442",
+                    },
+                },
+                type: "scattergl",
+            },
+        ],
+        surface: [
+            {
+                colorscale: [
+                    [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"],
+                ],
+                type: "surface",
+            },
+        ],
+        table: [
+            {
+                cells: {
+                    fill: {
+                        color: "#506784",
+                    },
+                    line: {
+                        color: "rgb(17,17,17)",
+                    },
+                },
+                header: {
+                    fill: {
+                        color: "#2a3f5f",
+                    },
+                    line: {
+                        color: "rgb(17,17,17)",
+                    },
+                },
+                type: "table",
+            },
+        ],
+    },
+    layout: {
+        annotationdefaults: {
+            arrowcolor: "#f2f5fa",
+        },
+        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",
+        },
+        geo: {
+            bgcolor: "rgb(17,17,17)",
+            lakecolor: "rgb(17,17,17)",
+            landcolor: "rgb(17,17,17)",
+            subunitcolor: "#506784",
+        },
+        mapbox: {
+            style: "dark",
+        },
+        paper_bgcolor: "rgb(17,17,17)",
+        plot_bgcolor: "rgb(17,17,17)",
+        polar: {
+            angularaxis: {
+                gridcolor: "#506784",
+                linecolor: "#506784",
+            },
+            bgcolor: "rgb(17,17,17)",
+            radialaxis: {
+                gridcolor: "#506784",
+                linecolor: "#506784",
+            },
+        },
+        scene: {
+            xaxis: {
+                backgroundcolor: "rgb(17,17,17)",
+                gridcolor: "#506784",
+                linecolor: "#506784",
+                zerolinecolor: "#C8D4E3",
+            },
+            yaxis: {
+                backgroundcolor: "rgb(17,17,17)",
+                gridcolor: "#506784",
+                linecolor: "#506784",
+                zerolinecolor: "#C8D4E3",
+            },
+            zaxis: {
+                backgroundcolor: "rgb(17,17,17)",
+                gridcolor: "#506784",
+                linecolor: "#506784",
+                showbackground: true,
+                zerolinecolor: "#C8D4E3",
+            },
+        },
+        shapedefaults: {
+            line: {
+                color: "#f2f5fa",
+            },
+        },
+        sliderdefaults: {
+            bgcolor: "#C8D4E3",
+            bordercolor: "rgb(17,17,17)",
+        },
+        ternary: {
+            aaxis: {
+                gridcolor: "#506784",
+                linecolor: "#506784",
+            },
+            baxis: {
+                gridcolor: "#506784",
+                linecolor: "#506784",
+            },
+            bgcolor: "rgb(17,17,17)",
+            caxis: {
+                gridcolor: "#506784",
+                linecolor: "#506784",
+            },
+        },
+        updatemenudefaults: {
+            bgcolor: "#506784",
+        },
+        xaxis: {
+            gridcolor: "#283442",
+            linecolor: "#506784",
+            tickcolor: "#506784",
+            zerolinecolor: "#283442",
+        },
+        yaxis: {
+            gridcolor: "#283442",
+            linecolor: "#506784",
+            tickcolor: "#506784",
+            zerolinecolor: "#283442",
+        },
+    },
+};

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 <a href=\"https://plotly.com/javascript/layout-template/\">layout template</a>."
+                    },
+                    {
+                        "name": "template[dark]",
+                        "type": "dict",
+                        "doc": "The Plotly <a href=\"https://plotly.com/javascript/layout-template/\">layout template</a> applied over the base template when theme is dark."
+                    },
+                    {
+                        "name": "template[light]",
+                        "type": "dict",
+                        "doc": "The Plotly <a href=\"https://plotly.com/javascript/layout-template/\">layout template</a> applied over the base template when theme is not dark."
                     }
                 ]
             }
@@ -2375,17 +2390,17 @@
                     {
                         "name": "template",
                         "type": "dict",
-                        "doc": "The Plotly layout <a href=\"https://plotly.com/javascript/layout-template/\">template</a>."
+                        "doc": "The Plotly <a href=\"https://plotly.com/javascript/layout-template/\">layout 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."
+                        "doc": "The Plotly <a href=\"https://plotly.com/javascript/layout-template/\">layout 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."
+                        "doc": "The Plotly <a href=\"https://plotly.com/javascript/layout-template/\">layout template</a> applied over the base template when theme is not dark."
                     },
                     {
                         "name": "decimator",