Repository: Avaiga/taipy
File: frontend/taipy-gui/src/components/Taipy/Metric.tsx (TypeScript)

Code before:
                : ({...defaultStyle, width: width, height: height} as CSSProperties),
        [height, width]
    );

    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 {
            title: props.title || layout.title,
            ...layout
        } as Partial<Layout>
    }, [
        props.title,
        props.template,
        props.template_Dark_,
        props.template_Light_,
        theme.palette.mode,
        baseLayout,
    ])

    return (
        <Box data-testid={props.testId} className={className}>
            <Tooltip title={hover || ""}>
                <div>
                    <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
                        <Plot
                            data={data}
                            layout={layout}
                            style={style}
                            useResizeHandler
                        />
                    </Suspense>
                </div>

Review comment (suggestion):
no need to expand layout here
I propose
```
if (props.title) {
   layout.title = props.title;
}
```

Code after:
                : ({...defaultStyle, width: width, height: height} as CSSProperties),
        [height, width]
    );

    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;
        }

        if (props.title) {
            layout.title = props.title;
        }

        return layout as Partial<Layout>;
    }, [
        props.title,
        props.template,
        props.template_Dark_,
        props.template_Light_,
        theme.palette.mode,
        baseLayout,
    ])

    return (
        <Tooltip title={hover || ""}>
            <Box data-testid={props.testId} className={className}>
                <Suspense fallback={<Skeleton key="skeleton" sx={skelStyle}/>}>
                    <Plot
                        data={data}
                        layout={layout}
                        style={style}
                        useResizeHandler
                    />
                </Suspense>
            </Box>