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

Code before:
const Metric = (props: MetricProps) => {
    const {
        width = "100%",
        height,
        showValue = true
    } = props;
    const value = useDynamicProperty(props.value, props.defaultValue, 0)
    const threshold = useDynamicProperty(props.threshold, props.defaultThreshold, undefined)
    const delta = useDynamicProperty(props.delta, props.defaultDelta, undefined)
    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 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 [
            {
                domain: {x: [0, 1], y: [0, 1]},
                value: value,
                type: "indicator",
                mode: "gauge" + (showValue ? "+number" : "") + (delta !== undefined ? "+delta" : ""),
                number: {
                    prefix: extractPrefix(props.format),
                    suffix: extractSuffix(props.format),
                    valueformat: sprintfToD3Converter(props.format),
                },
                delta: {
                    reference: typeof value === 'number' && typeof delta === 'number' ? value - delta : undefined,
                    prefix: extractPrefix(props.deltaFormat),
                    suffix: extractSuffix(props.deltaFormat),
                    valueformat: sprintfToD3Converter(props.deltaFormat)
                },
                gauge: {
                    axis: {
                        range: [

Review comment (suggestion):
```suggestion
            console.info(`Error parsing color_map value (metric).\n${(e as Error).message || e}`);
```

Code after:

const Metric = (props: MetricProps) => {
    const {
        width = "100%",
        height,
        showValue = true
    } = props;
    const value = useDynamicProperty(props.value, props.defaultValue, 0)
    const threshold = useDynamicProperty(props.threshold, props.defaultThreshold, undefined)
    const delta = useDynamicProperty(props.delta, props.defaultDelta, undefined)
    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 colorMap = useMemo(() => {
        try {
            const obj = props.colorMap ? JSON.parse(props.colorMap) : null;
            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.color !== null)
            }
        } catch (e) {
            console.info(`Error parsing color_map value (metric).\n${(e as Error).message || e}`);
        }
        return undefined;
    }, [props.colorMap, props.max])

    const data = useMemo(() => {
        const mode = (props.type === "none") ? [] : ["gauge"];
        showValue && mode.push("number");
        (delta !== undefined) && mode.push("delta");
        return [
            {
                domain: {x: [0, 1], y: [0, 1]},
                value: value,
                type: "indicator",
                mode: mode.join("+"),
                number: {
                    prefix: extractPrefix(props.format),
                    suffix: extractSuffix(props.format),
                    valueformat: sprintfToD3Converter(props.format),
                },
                delta: {
                    reference: typeof value === 'number' && typeof delta === 'number' ? value - delta : undefined,
                    prefix: extractPrefix(props.deltaFormat),
                    suffix: extractSuffix(props.deltaFormat),
                    valueformat: sprintfToD3Converter(props.deltaFormat)