@j2inn/fin5-ui-utils 5.2.2-beta.9 → 6.0.1

package/dist_es/react/components/charts/line-bar/Chart.js

@@ -1,416 +1,416 @@
-/*
- * Copyright (c) 2025, J2 Innovations. All Rights Reserved
- */
-import * as am5 from '@amcharts/amcharts5';
-import * as am5xy from '@amcharts/amcharts5/xy';
-import { debounce } from 'lodash';
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { createUseStyles, useTheme } from 'react-jss';
-const useStyles = createUseStyles({
-    root: {
-        width: '100%',
-        height: '100%',
-    },
-});
-/**
- * Returns a color palette selecting some colors from the theme.
- * @param theme The theme
- * @returns An array of colors
- */
-const getDefaultChartColors = (theme) => {
-    return {
-        interfaceColors: {
-            text: theme.textColor,
-        },
-        series: [
-            theme.palette.lime,
-            theme.palette.cyan,
-            theme.palette.orange,
-            theme.palette.blue,
-            theme.palette.volcano,
-            theme.palette.green,
-            theme.palette.purple,
-            theme.palette.magenta,
-            theme.palette.grey,
-            theme.palette.gold,
-            theme.palette.red,
-            theme.palette.yellow,
-        ],
-    };
-};
-const buildYRenderer = (root, opposite = false, gridSettings) => {
-    const yRenderer = am5xy.AxisRendererY.new(root, {
-        strokeOpacity: 0,
-        forceHidden: true,
-        opposite,
-    });
-    yRenderer.grid.template.setAll({
-        strokeOpacity: 1,
-        ...gridSettings,
-    });
-    yRenderer.labels.template.setAll({
-        fontSize: '0.7rem',
-    });
-    return yRenderer;
-};
-const buildValueAxis = (root, chart, axes, chartSeriesProps, unitPlacement, gridSettings, valueAxisSettings) => {
-    const unit = chartSeriesProps.unit ?? '';
-    const cachedAxis = axes.get(unit);
-    if (cachedAxis) {
-        return cachedAxis;
-    }
-    const opposite = (chartSeriesProps.axisPlacement ?? AxisPlacement.left) ==
-        AxisPlacement.right;
-    const renderer = buildYRenderer(root, opposite, gridSettings);
-    const axisToSync = axes.values().next()?.value;
-    const axis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
-        renderer: renderer,
-        numberFormat: unitPlacement == UnitPlacement.axis && unit
-            ? `#' ${unit}'`
-            : undefined,
-        marginTop: unitPlacement == UnitPlacement.top ? 15 : 0,
-        syncWithAxis: axisToSync,
-        visible: chartSeriesProps.hideAxis
-            ? !chartSeriesProps.hideAxis
-            : true,
-        ...valueAxisSettings,
-    }));
-    if (unitPlacement == UnitPlacement.top) {
-        addUnitTextLabels(root, chart, unit, opposite);
-    }
-    axes.set(unit, axis);
-    return axis;
-};
-const addUnitTextLabels = (root, chart, unit, opposite) => {
-    if (unit) {
-        const unitTextStyle = {
-            ignoreFormatting: true,
-            fontSize: '0.7rem',
-            height: 18,
-            marginBottom: 15,
-            position: 'absolute',
-        };
-        const x = am5.percent(!opposite ? 0 : 100);
-        const centerX = am5.percent(!opposite ? 0 : 100);
-        chart.children.unshift(am5.Label.new(root, {
-            text: `[${unit}]`,
-            x: x,
-            centerX: centerX,
-            ...unitTextStyle,
-        }));
-    }
-};
-const buildLabelText = (unit, numberFormat) => `[bold]{name}[/]: {valueY.formatNumber(${numberFormat ? `"${numberFormat}"` : ''})}${unit ? ` ${unit}` : ''}\n{valueX.formatDate("d MMM HH:mm")}`;
-const addLineSeries = (data, root, chart, xAxis, yAxes, dateField, unitPlacement, legendRef, gridSettings, valueAxisSettings, translateLabel, lineSeriesSettings, tooltipSettings) => {
-    data.forEach((lineSeries) => {
-        const lineYAxis = buildValueAxis(root, chart, yAxes, lineSeries, unitPlacement, gridSettings, valueAxisSettings);
-        const series = chart.series.push(am5xy.LineSeries.new(root, {
-            name: lineSeries.dis ??
-                translateLabel?.(lineSeries.seriesName) ??
-                lineSeries.seriesName,
-            xAxis: xAxis,
-            yAxis: lineYAxis,
-            valueYField: 'value',
-            valueXField: dateField,
-            fill: lineSeries.strokeSettings?.stroke,
-            tooltip: am5.Tooltip.new(root, {
-                labelText: buildLabelText(lineSeries.unit, '#.##'),
-            }),
-            ...lineSeriesSettings,
-            ...lineSeries.strokeSettings,
-        }));
-        if (tooltipSettings) {
-            series.get('tooltip')?.label.setAll(tooltipSettings);
-        }
-        if (lineSeries.strokeSettings) {
-            series.strokes.template.setAll(lineSeries.strokeSettings);
-            series.fills.template.setAll(lineSeries.strokeSettings);
-        }
-        series.data.setAll(lineSeries.data);
-        legendRef.current?.data.push(series);
-    });
-};
-const addBarSeries = (data, root, chart, xAxis, yAxes, dateField, unitPlacement, stacked = false, legendRef, gridSettings, valueAxisSettings, translateLabel, barSeriesSettings, columnSettings, tooltipSettings) => {
-    data.forEach((barSeries) => {
-        const seriesName = barSeries.seriesName;
-        // Setup Y axes, one on the left and one on the right
-        const barYAxis = buildValueAxis(root, chart, yAxes, barSeries, unitPlacement, gridSettings, valueAxisSettings);
-        const seriesOptions = {
-            name: translateLabel?.(seriesName) ?? barSeries.dis ?? seriesName,
-            xAxis: xAxis,
-            yAxis: barYAxis,
-            stacked: stacked,
-            tooltip: am5.Tooltip.new(root, {
-                labelText: buildLabelText(barSeries.unit),
-            }),
-            valueYField: 'value',
-            valueXField: dateField,
-        };
-        if (barSeries.stroke) {
-            seriesOptions.fill = barSeries.stroke;
-        }
-        const series = chart.series.push(am5xy.ColumnSeries.new(root, {
-            ...seriesOptions,
-            ...barSeriesSettings,
-        }));
-        series.columns.template.setAll({
-            ...columnSettings,
-        });
-        if (tooltipSettings) {
-            series.columns.template
-                .get('tooltip')
-                ?.label.setAll(tooltipSettings);
-        }
-        series.data.setAll(barSeries.data);
-        legendRef.current?.data.push(series);
-    });
-};
-const addRanges = (root, axis, rangesData) => {
-    rangesData?.forEach((rangeData) => {
-        addRange(root, axis, rangeData, rangeData.placeBelow);
-    });
-};
-const addRange = (root, axis, rangeData, shifted = false) => {
-    const rangeDataItem = axis.makeDataItem({
-        value: rangeData.startValue,
-        endValue: rangeData.endValue,
-        isRange: true,
-    });
-    axis.createAxisRange(rangeDataItem);
-    const axisFill = rangeDataItem.get('axisFill');
-    axisFill?.setAll({
-        fill: rangeData.color,
-        fillOpacity: 0,
-        visible: true,
-    });
-    const label = rangeDataItem.get('label');
-    label?.setAll({
-        text: rangeData.showText ? rangeData.text : '',
-        fill: rangeData.foreground,
-        html: rangeData.html,
-        fontSize: '0.8rem',
-        height: 24,
-        location: 0,
-        centerX: 0,
-        tooltipText: rangeData.tooltip,
-        layer: -1,
-        background: am5.Rectangle.new(root, {
-            fill: rangeData.color,
-            fillOpacity: rangeData.opacity ?? 0.2,
-            strokeWidth: 1,
-            stroke: rangeData.foreground,
-        }),
-    });
-    axisFill?.events.on('boundschanged', (e) => {
-        label?.setAll({
-            width: e.target.width(),
-            maxWidth: e.target.width(),
-            oversizedBehavior: 'truncate',
-            y: shifted ? 24 : 0,
-        });
-    });
-};
-const setupLegend = (root, chart, legendPlacement, legendSettings, legendLabelsSettings, legendMarkersSettings) => {
-    const legendItem = am5.Legend.new(root, {
-        paddingTop: legendPlacement == LegendPlacement.bottom ? 20 : 0,
-        paddingBottom: legendPlacement == LegendPlacement.top ? 20 : 0,
-        forceHidden: legendPlacement == LegendPlacement.hidden,
-        layout: legendPlacement == LegendPlacement.left ||
-            legendPlacement == LegendPlacement.right
-            ? root.verticalLayout
-            : root.gridLayout,
-        ...legendSettings,
-    });
-    // Setup legend
-    const legend = legendPlacement == LegendPlacement.left ||
-        legendPlacement == LegendPlacement.top
-        ? chart.children.unshift(legendItem)
-        : chart.children.push(legendItem);
-    legend.labels.template.setAll({
-        fontSize: '0.8rem',
-        ...legendLabelsSettings,
-    });
-    legend.valueLabels.template.setAll({
-        forceHidden: true,
-    });
-    legend.markers.template.setAll({
-        width: 12,
-        height: 12,
-        ...legendMarkersSettings,
-    });
-    if (legendMarkersSettings?.rounded) {
-        legend.markerRectangles.template.setAll({
-            cornerRadiusTL: 100,
-            cornerRadiusTR: 100,
-            cornerRadiusBL: 100,
-            cornerRadiusBR: 100,
-        });
-    }
-    return legend;
-};
-export var UnitPlacement;
-(function (UnitPlacement) {
-    UnitPlacement["none"] = "none";
-    UnitPlacement["top"] = "top";
-    UnitPlacement["axis"] = "axis";
-})(UnitPlacement || (UnitPlacement = {}));
-export var AxisPlacement;
-(function (AxisPlacement) {
-    AxisPlacement["left"] = "left";
-    AxisPlacement["right"] = "right";
-})(AxisPlacement || (AxisPlacement = {}));
-export var LegendPlacement;
-(function (LegendPlacement) {
-    LegendPlacement["top"] = "top";
-    LegendPlacement["bottom"] = "bottom";
-    LegendPlacement["left"] = "left";
-    LegendPlacement["right"] = "right";
-    LegendPlacement["hidden"] = "hidden";
-})(LegendPlacement || (LegendPlacement = {}));
-/**
- * Customizable stacked column and line chart component based on amcharts5
- *
- * This component wraps some of the chart configuration trying to make it more react-friendly
- */
-export const Chart = ({ DOMtargetId, baseInterval, barSeriesData, stackedBarSeriesData, lineSeriesData, rangesData, dateField, colorPalette, numberFormat, chartThemes, chartSettings, legendSettings, legendLabelsSettings, legendMarkersSettings, dateAxisSettings, dateAxisRendererSettings, valueAxisSettings, gridSettings, barSeriesSettings, lineSeriesSettings, columnSettings, tooltipSettings, cursor = false, unitPlacement = UnitPlacement.none, legendPlacement = LegendPlacement.bottom, translateLabel, }) => {
-    // Colors configuration
-    const theme = useTheme();
-    const colors = { ...getDefaultChartColors(theme), ...colorPalette };
-    // Chart lifecycle
-    const [id, setId] = useState(DOMtargetId ?? `amchart-${Math.random()}`);
-    const containerRef = useRef(null);
-    const rootRef = useRef(null);
-    const chartRef = useRef(null);
-    const legendRef = useRef(null);
-    useEffect(() => {
-        if (DOMtargetId && DOMtargetId !== id) {
-            setId(DOMtargetId);
-        }
-    }, [DOMtargetId]);
-    // Chart setup
-    useLayoutEffect(() => {
-        const root = am5.Root.new(id);
-        root.autoResize = false;
-        // Setup amcharts theme
-        if (chartThemes) {
-            root.setThemes(chartThemes.map((t) => t.new(root)));
-        }
-        // Setup interface colors, see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
-        if (colors.interfaceColors) {
-            // Remap settings to use amcharts Color objects
-            for (const setting in colors.interfaceColors) {
-                const color = colors.interfaceColors[setting];
-                // Apply defined interfaceColor on the chart
-                root.interfaceColors.set(setting, am5.color(color));
-            }
-        }
-        // Setup chart settings
-        const chart = root.container.children.push(am5xy.XYChart.new(root, {
-            layout: legendPlacement == LegendPlacement.left ||
-                legendPlacement == LegendPlacement.right
-                ? root.horizontalLayout
-                : root.verticalLayout,
-            paddingLeft: 0,
-            paddingRight: 0,
-            paddingBottom: 0,
-            paddingTop: legendPlacement == LegendPlacement.top ||
-                unitPlacement == UnitPlacement.top
-                ? 35
-                : 10,
-            ...chartSettings,
-        }));
-        // Setup cursor
-        if (cursor) {
-            chart.set('cursor', am5xy.XYCursor.new(root, {}));
-        }
-        // Setup series colors
-        if (colors?.series) {
-            chart.get('colors')?.set('colors', colors.series.map((c) => am5.color(c)));
-        }
-        const legend = setupLegend(root, chart, legendPlacement, legendSettings, legendLabelsSettings, legendMarkersSettings);
-        rootRef.current = root;
-        chartRef.current = chart;
-        legendRef.current = legend;
-        // Clean up before component removal from the DOM
-        return () => {
-            legendRef.current?.dispose();
-            legendRef.current = null;
-            chartRef.current?.dispose();
-            chartRef.current = null;
-            root?.dispose();
-            rootRef.current = null;
-        };
-    }, [id, colors, chartThemes, chartSettings, legendSettings]);
-    // Set data
-    useEffect(() => {
-        const root = rootRef.current;
-        const chart = chartRef.current;
-        if (chart && root) {
-            chart.series.clear();
-            if (barSeriesData?.length == 0 &&
-                stackedBarSeriesData?.length == 0 &&
-                lineSeriesData?.length == 0) {
-                return;
-            }
-            // Setup axes
-            const xRenderer = am5xy.AxisRendererX.new(root, {
-                strokeWidth: 0,
-                minGridDistance: 30,
-                ...dateAxisRendererSettings,
-            });
-            const xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
-                baseInterval,
-                renderer: xRenderer,
-                ...dateAxisSettings,
-            }));
-            xRenderer.grid.template.setAll({
-                strokeWidth: 0,
-                forceHidden: true,
-            });
-            xRenderer.labels.template.setAll({
-                location: 0.5,
-                fontSize: '0.7rem',
-                textAlign: 'center',
-            });
-            xAxis.data.setAll(Array.prototype.concat(stackedBarSeriesData ?? [], lineSeriesData ?? [], barSeriesData ?? []));
-            addRanges(root, xAxis, rangesData);
-            const yAxes = new Map();
-            if (barSeriesData) {
-                addBarSeries(barSeriesData, root, chart, xAxis, yAxes, dateField, unitPlacement, false, legendRef, gridSettings, valueAxisSettings, translateLabel, barSeriesSettings, columnSettings, tooltipSettings);
-            }
-            if (stackedBarSeriesData) {
-                addBarSeries(stackedBarSeriesData, root, chart, xAxis, yAxes, dateField, unitPlacement, true, legendRef, gridSettings, valueAxisSettings, translateLabel, barSeriesSettings, columnSettings, tooltipSettings);
-            }
-            if (lineSeriesData) {
-                addLineSeries(lineSeriesData, root, chart, xAxis, yAxes, dateField, unitPlacement, legendRef, gridSettings, valueAxisSettings, translateLabel, lineSeriesSettings, tooltipSettings);
-            }
-        }
-    }, [
-        stackedBarSeriesData,
-        barSeriesData,
-        lineSeriesData,
-        chartRef.current,
-        colors?.series,
-        barSeriesSettings,
-        lineSeriesSettings,
-    ]);
-    useEffect(() => {
-        if (numberFormat) {
-            rootRef.current?.numberFormatter.set('numberFormat', numberFormat);
-        }
-    }, [rootRef.current, numberFormat]);
-    useEffect(() => {
-        let resizeObserver;
-        if (containerRef.current) {
-            const onResize = debounce(() => rootRef.current?.resize(), 100);
-            resizeObserver = new ResizeObserver(onResize);
-            resizeObserver.observe(containerRef.current);
-        }
-        return () => resizeObserver?.disconnect();
-    }, [containerRef.current, rootRef.current]);
-    const classes = useStyles();
-    return typeof id === 'string' ? (React.createElement("div", { id: id, className: classes.root })) : (
-    // If the DOM target is an HTML element, do not render another div. The chart will be attached to the existing element.
-    React.createElement(React.Fragment, null));
-};
+/*
+ * Copyright (c) 2025, J2 Innovations. All Rights Reserved
+ */
+import * as am5 from '@amcharts/amcharts5';
+import * as am5xy from '@amcharts/amcharts5/xy';
+import { debounce } from 'lodash';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createUseStyles, useTheme } from 'react-jss';
+const useStyles = createUseStyles({
+    root: {
+        width: '100%',
+        height: '100%',
+    },
+});
+/**
+ * Returns a color palette selecting some colors from the theme.
+ * @param theme The theme
+ * @returns An array of colors
+ */
+const getDefaultChartColors = (theme) => {
+    return {
+        interfaceColors: {
+            text: theme.textColor,
+        },
+        series: [
+            theme.palette.lime,
+            theme.palette.cyan,
+            theme.palette.orange,
+            theme.palette.blue,
+            theme.palette.volcano,
+            theme.palette.green,
+            theme.palette.purple,
+            theme.palette.magenta,
+            theme.palette.grey,
+            theme.palette.gold,
+            theme.palette.red,
+            theme.palette.yellow,
+        ],
+    };
+};
+const buildYRenderer = (root, opposite = false, gridSettings) => {
+    const yRenderer = am5xy.AxisRendererY.new(root, {
+        strokeOpacity: 0,
+        forceHidden: true,
+        opposite,
+    });
+    yRenderer.grid.template.setAll({
+        strokeOpacity: 1,
+        ...gridSettings,
+    });
+    yRenderer.labels.template.setAll({
+        fontSize: '0.7rem',
+    });
+    return yRenderer;
+};
+const buildValueAxis = (root, chart, axes, chartSeriesProps, unitPlacement, gridSettings, valueAxisSettings) => {
+    const unit = chartSeriesProps.unit ?? '';
+    const cachedAxis = axes.get(unit);
+    if (cachedAxis) {
+        return cachedAxis;
+    }
+    const opposite = (chartSeriesProps.axisPlacement ?? AxisPlacement.left) ==
+        AxisPlacement.right;
+    const renderer = buildYRenderer(root, opposite, gridSettings);
+    const axisToSync = axes.values().next()?.value;
+    const axis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+        renderer: renderer,
+        numberFormat: unitPlacement == UnitPlacement.axis && unit
+            ? `#' ${unit}'`
+            : undefined,
+        marginTop: unitPlacement == UnitPlacement.top ? 15 : 0,
+        syncWithAxis: axisToSync,
+        visible: chartSeriesProps.hideAxis
+            ? !chartSeriesProps.hideAxis
+            : true,
+        ...valueAxisSettings,
+    }));
+    if (unitPlacement == UnitPlacement.top) {
+        addUnitTextLabels(root, chart, unit, opposite);
+    }
+    axes.set(unit, axis);
+    return axis;
+};
+const addUnitTextLabels = (root, chart, unit, opposite) => {
+    if (unit) {
+        const unitTextStyle = {
+            ignoreFormatting: true,
+            fontSize: '0.7rem',
+            height: 18,
+            marginBottom: 15,
+            position: 'absolute',
+        };
+        const x = am5.percent(!opposite ? 0 : 100);
+        const centerX = am5.percent(!opposite ? 0 : 100);
+        chart.children.unshift(am5.Label.new(root, {
+            text: `[${unit}]`,
+            x: x,
+            centerX: centerX,
+            ...unitTextStyle,
+        }));
+    }
+};
+const buildLabelText = (unit, numberFormat) => `[bold]{name}[/]: {valueY.formatNumber(${numberFormat ? `"${numberFormat}"` : ''})}${unit ? ` ${unit}` : ''}\n{valueX.formatDate("d MMM HH:mm")}`;
+const addLineSeries = (data, root, chart, xAxis, yAxes, dateField, unitPlacement, legendRef, gridSettings, valueAxisSettings, translateLabel, lineSeriesSettings, tooltipSettings) => {
+    data.forEach((lineSeries) => {
+        const lineYAxis = buildValueAxis(root, chart, yAxes, lineSeries, unitPlacement, gridSettings, valueAxisSettings);
+        const series = chart.series.push(am5xy.LineSeries.new(root, {
+            name: lineSeries.dis ??
+                translateLabel?.(lineSeries.seriesName) ??
+                lineSeries.seriesName,
+            xAxis: xAxis,
+            yAxis: lineYAxis,
+            valueYField: 'value',
+            valueXField: dateField,
+            fill: lineSeries.strokeSettings?.stroke,
+            tooltip: am5.Tooltip.new(root, {
+                labelText: buildLabelText(lineSeries.unit, '#.##'),
+            }),
+            ...lineSeriesSettings,
+            ...lineSeries.strokeSettings,
+        }));
+        if (tooltipSettings) {
+            series.get('tooltip')?.label.setAll(tooltipSettings);
+        }
+        if (lineSeries.strokeSettings) {
+            series.strokes.template.setAll(lineSeries.strokeSettings);
+            series.fills.template.setAll(lineSeries.strokeSettings);
+        }
+        series.data.setAll(lineSeries.data);
+        legendRef.current?.data.push(series);
+    });
+};
+const addBarSeries = (data, root, chart, xAxis, yAxes, dateField, unitPlacement, stacked = false, legendRef, gridSettings, valueAxisSettings, translateLabel, barSeriesSettings, columnSettings, tooltipSettings) => {
+    data.forEach((barSeries) => {
+        const seriesName = barSeries.seriesName;
+        // Setup Y axes, one on the left and one on the right
+        const barYAxis = buildValueAxis(root, chart, yAxes, barSeries, unitPlacement, gridSettings, valueAxisSettings);
+        const seriesOptions = {
+            name: translateLabel?.(seriesName) ?? barSeries.dis ?? seriesName,
+            xAxis: xAxis,
+            yAxis: barYAxis,
+            stacked: stacked,
+            tooltip: am5.Tooltip.new(root, {
+                labelText: buildLabelText(barSeries.unit),
+            }),
+            valueYField: 'value',
+            valueXField: dateField,
+        };
+        if (barSeries.stroke) {
+            seriesOptions.fill = barSeries.stroke;
+        }
+        const series = chart.series.push(am5xy.ColumnSeries.new(root, {
+            ...seriesOptions,
+            ...barSeriesSettings,
+        }));
+        series.columns.template.setAll({
+            ...columnSettings,
+        });
+        if (tooltipSettings) {
+            series.columns.template
+                .get('tooltip')
+                ?.label.setAll(tooltipSettings);
+        }
+        series.data.setAll(barSeries.data);
+        legendRef.current?.data.push(series);
+    });
+};
+const addRanges = (root, axis, rangesData) => {
+    rangesData?.forEach((rangeData) => {
+        addRange(root, axis, rangeData, rangeData.placeBelow);
+    });
+};
+const addRange = (root, axis, rangeData, shifted = false) => {
+    const rangeDataItem = axis.makeDataItem({
+        value: rangeData.startValue,
+        endValue: rangeData.endValue,
+        isRange: true,
+    });
+    axis.createAxisRange(rangeDataItem);
+    const axisFill = rangeDataItem.get('axisFill');
+    axisFill?.setAll({
+        fill: rangeData.color,
+        fillOpacity: 0,
+        visible: true,
+    });
+    const label = rangeDataItem.get('label');
+    label?.setAll({
+        text: rangeData.showText ? rangeData.text : '',
+        fill: rangeData.foreground,
+        html: rangeData.html,
+        fontSize: '0.8rem',
+        height: 24,
+        location: 0,
+        centerX: 0,
+        tooltipText: rangeData.tooltip,
+        layer: -1,
+        background: am5.Rectangle.new(root, {
+            fill: rangeData.color,
+            fillOpacity: rangeData.opacity ?? 0.2,
+            strokeWidth: 1,
+            stroke: rangeData.foreground,
+        }),
+    });
+    axisFill?.events.on('boundschanged', (e) => {
+        label?.setAll({
+            width: e.target.width(),
+            maxWidth: e.target.width(),
+            oversizedBehavior: 'truncate',
+            y: shifted ? 24 : 0,
+        });
+    });
+};
+const setupLegend = (root, chart, legendPlacement, legendSettings, legendLabelsSettings, legendMarkersSettings) => {
+    const legendItem = am5.Legend.new(root, {
+        paddingTop: legendPlacement == LegendPlacement.bottom ? 20 : 0,
+        paddingBottom: legendPlacement == LegendPlacement.top ? 20 : 0,
+        forceHidden: legendPlacement == LegendPlacement.hidden,
+        layout: legendPlacement == LegendPlacement.left ||
+            legendPlacement == LegendPlacement.right
+            ? root.verticalLayout
+            : root.gridLayout,
+        ...legendSettings,
+    });
+    // Setup legend
+    const legend = legendPlacement == LegendPlacement.left ||
+        legendPlacement == LegendPlacement.top
+        ? chart.children.unshift(legendItem)
+        : chart.children.push(legendItem);
+    legend.labels.template.setAll({
+        fontSize: '0.8rem',
+        ...legendLabelsSettings,
+    });
+    legend.valueLabels.template.setAll({
+        forceHidden: true,
+    });
+    legend.markers.template.setAll({
+        width: 12,
+        height: 12,
+        ...legendMarkersSettings,
+    });
+    if (legendMarkersSettings?.rounded) {
+        legend.markerRectangles.template.setAll({
+            cornerRadiusTL: 100,
+            cornerRadiusTR: 100,
+            cornerRadiusBL: 100,
+            cornerRadiusBR: 100,
+        });
+    }
+    return legend;
+};
+export var UnitPlacement;
+(function (UnitPlacement) {
+    UnitPlacement["none"] = "none";
+    UnitPlacement["top"] = "top";
+    UnitPlacement["axis"] = "axis";
+})(UnitPlacement || (UnitPlacement = {}));
+export var AxisPlacement;
+(function (AxisPlacement) {
+    AxisPlacement["left"] = "left";
+    AxisPlacement["right"] = "right";
+})(AxisPlacement || (AxisPlacement = {}));
+export var LegendPlacement;
+(function (LegendPlacement) {
+    LegendPlacement["top"] = "top";
+    LegendPlacement["bottom"] = "bottom";
+    LegendPlacement["left"] = "left";
+    LegendPlacement["right"] = "right";
+    LegendPlacement["hidden"] = "hidden";
+})(LegendPlacement || (LegendPlacement = {}));
+/**
+ * Customizable stacked column and line chart component based on amcharts5
+ *
+ * This component wraps some of the chart configuration trying to make it more react-friendly
+ */
+export const Chart = ({ DOMtargetId, baseInterval, barSeriesData, stackedBarSeriesData, lineSeriesData, rangesData, dateField, colorPalette, numberFormat, chartThemes, chartSettings, legendSettings, legendLabelsSettings, legendMarkersSettings, dateAxisSettings, dateAxisRendererSettings, valueAxisSettings, gridSettings, barSeriesSettings, lineSeriesSettings, columnSettings, tooltipSettings, cursor = false, unitPlacement = UnitPlacement.none, legendPlacement = LegendPlacement.bottom, translateLabel, }) => {
+    // Colors configuration
+    const theme = useTheme();
+    const colors = { ...getDefaultChartColors(theme), ...colorPalette };
+    // Chart lifecycle
+    const [id, setId] = useState(DOMtargetId ?? `amchart-${Math.random()}`);
+    const containerRef = useRef(null);
+    const rootRef = useRef(null);
+    const chartRef = useRef(null);
+    const legendRef = useRef(null);
+    useEffect(() => {
+        if (DOMtargetId && DOMtargetId !== id) {
+            setId(DOMtargetId);
+        }
+    }, [DOMtargetId]);
+    // Chart setup
+    useLayoutEffect(() => {
+        const root = am5.Root.new(id);
+        root.autoResize = false;
+        // Setup amcharts theme
+        if (chartThemes) {
+            root.setThemes(chartThemes.map((t) => t.new(root)));
+        }
+        // Setup interface colors, see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
+        if (colors.interfaceColors) {
+            // Remap settings to use amcharts Color objects
+            for (const setting in colors.interfaceColors) {
+                const color = colors.interfaceColors[setting];
+                // Apply defined interfaceColor on the chart
+                root.interfaceColors.set(setting, am5.color(color));
+            }
+        }
+        // Setup chart settings
+        const chart = root.container.children.push(am5xy.XYChart.new(root, {
+            layout: legendPlacement == LegendPlacement.left ||
+                legendPlacement == LegendPlacement.right
+                ? root.horizontalLayout
+                : root.verticalLayout,
+            paddingLeft: 0,
+            paddingRight: 0,
+            paddingBottom: 0,
+            paddingTop: legendPlacement == LegendPlacement.top ||
+                unitPlacement == UnitPlacement.top
+                ? 35
+                : 10,
+            ...chartSettings,
+        }));
+        // Setup cursor
+        if (cursor) {
+            chart.set('cursor', am5xy.XYCursor.new(root, {}));
+        }
+        // Setup series colors
+        if (colors?.series) {
+            chart.get('colors')?.set('colors', colors.series.map((c) => am5.color(c)));
+        }
+        const legend = setupLegend(root, chart, legendPlacement, legendSettings, legendLabelsSettings, legendMarkersSettings);
+        rootRef.current = root;
+        chartRef.current = chart;
+        legendRef.current = legend;
+        // Clean up before component removal from the DOM
+        return () => {
+            legendRef.current?.dispose();
+            legendRef.current = null;
+            chartRef.current?.dispose();
+            chartRef.current = null;
+            root?.dispose();
+            rootRef.current = null;
+        };
+    }, [id, colors, chartThemes, chartSettings, legendSettings]);
+    // Set data
+    useEffect(() => {
+        const root = rootRef.current;
+        const chart = chartRef.current;
+        if (chart && root) {
+            chart.series.clear();
+            if (barSeriesData?.length == 0 &&
+                stackedBarSeriesData?.length == 0 &&
+                lineSeriesData?.length == 0) {
+                return;
+            }
+            // Setup axes
+            const xRenderer = am5xy.AxisRendererX.new(root, {
+                strokeWidth: 0,
+                minGridDistance: 30,
+                ...dateAxisRendererSettings,
+            });
+            const xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
+                baseInterval,
+                renderer: xRenderer,
+                ...dateAxisSettings,
+            }));
+            xRenderer.grid.template.setAll({
+                strokeWidth: 0,
+                forceHidden: true,
+            });
+            xRenderer.labels.template.setAll({
+                location: 0.5,
+                fontSize: '0.7rem',
+                textAlign: 'center',
+            });
+            xAxis.data.setAll(Array.prototype.concat(stackedBarSeriesData ?? [], lineSeriesData ?? [], barSeriesData ?? []));
+            addRanges(root, xAxis, rangesData);
+            const yAxes = new Map();
+            if (barSeriesData) {
+                addBarSeries(barSeriesData, root, chart, xAxis, yAxes, dateField, unitPlacement, false, legendRef, gridSettings, valueAxisSettings, translateLabel, barSeriesSettings, columnSettings, tooltipSettings);
+            }
+            if (stackedBarSeriesData) {
+                addBarSeries(stackedBarSeriesData, root, chart, xAxis, yAxes, dateField, unitPlacement, true, legendRef, gridSettings, valueAxisSettings, translateLabel, barSeriesSettings, columnSettings, tooltipSettings);
+            }
+            if (lineSeriesData) {
+                addLineSeries(lineSeriesData, root, chart, xAxis, yAxes, dateField, unitPlacement, legendRef, gridSettings, valueAxisSettings, translateLabel, lineSeriesSettings, tooltipSettings);
+            }
+        }
+    }, [
+        stackedBarSeriesData,
+        barSeriesData,
+        lineSeriesData,
+        chartRef.current,
+        colors?.series,
+        barSeriesSettings,
+        lineSeriesSettings,
+    ]);
+    useEffect(() => {
+        if (numberFormat) {
+            rootRef.current?.numberFormatter.set('numberFormat', numberFormat);
+        }
+    }, [rootRef.current, numberFormat]);
+    useEffect(() => {
+        let resizeObserver;
+        if (containerRef.current) {
+            const onResize = debounce(() => rootRef.current?.resize(), 100);
+            resizeObserver = new ResizeObserver(onResize);
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => resizeObserver?.disconnect();
+    }, [containerRef.current, rootRef.current]);
+    const classes = useStyles();
+    return typeof id === 'string' ? (React.createElement("div", { id: id, className: classes.root })) : (
+    // If the DOM target is an HTML element, do not render another div. The chart will be attached to the existing element.
+    React.createElement(React.Fragment, null));
+};
 //# sourceMappingURL=Chart.js.map