@spike-rabbit/charts-ng 49.0.0 → 49.13.0

package/fesm2022/spike-rabbit-charts-ng-common.mjs

@@ -0,0 +1,2383 @@
+import { TitleComponent, TooltipComponent } from 'echarts/components';
+import * as echarts from 'echarts/core';
+export { echarts };
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
+import * as i0 from '@angular/core';
+import { viewChild, viewChildren, input, model, output, signal, inject, ChangeDetectorRef, NgZone, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SiCustomLegendComponent } from '@spike-rabbit/charts-ng/custom-legend';
+import { SiChartLoadingSpinnerComponent } from '@spike-rabbit/charts-ng/loading-spinner';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+echarts.use([
+    // renderers
+    CanvasRenderer,
+    SVGRenderer,
+    // core components used by all charts
+    TitleComponent,
+    TooltipComponent
+]);
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+const getProp = (style, prop) => {
+    return style.getPropertyValue(prop);
+};
+const candleStickValues = ['open', 'close', 'lowest', 'highest'];
+const tooltipFormatter = (p) => {
+    const params = Array.isArray(p) ? p : [p];
+    const label = params[0]?.axisValueLabel ?? '';
+    let html = label;
+    for (const series of params) {
+        const isCandle = series.componentSubType === 'candlestick';
+        const isPie = series.componentSubType === 'pie';
+        const useName = series.name != series.axisValue;
+        const name = isPie
+            ? series.data.name
+            : useName
+                ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                    series.name || series.seriesName
+                : series.seriesName;
+        const valIndex = (series.encode.value ?? series.encode.y)[0];
+        const value = isCandle
+            ? ''
+            : isPie
+                ? series.percent + '%'
+                : Array.isArray(series.value)
+                    ? series.value[valIndex]
+                    : series.value;
+        html += '<div style="display: flex; align-items: center;">';
+        html += series.marker?.replace('margin-right', 'margin-inline-end');
+        html += `<span style="margin-inline: 4px 8px">${name}</span>`;
+        html += `<span style="margin-inline-start: auto">${value}</span>`;
+        html += '</div>';
+        if (isCandle) {
+            const miniMarker = `<span style="display:inline-block;vertical-align:middle;margin-inline:3px 8px;border-radius:4px;width:4px;height:4px;background:${series.color};"></span>`;
+            for (let i = 0; i < candleStickValues.length; i++) {
+                const v = candleStickValues[i];
+                const idx = series.encode.y[i];
+                html += '<div style="display: flex; align-items: center;">';
+                html += miniMarker;
+                html += `<span style="margin-inline-end: 8px">${v}</span>`;
+                html += `<span style="margin-inline-start: auto">${series.value[idx]}</span>`;
+                html += '</div>';
+            }
+        }
+    }
+    return html;
+};
+const themeElement = {
+    name: 'element',
+    style: () => {
+        const style = window.getComputedStyle(document.documentElement);
+        const elementUi0 = getProp(style, '--element-ui-0');
+        const elementUi0Hover = getProp(style, '--element-ui-0-hover');
+        const elementUi1 = getProp(style, '--element-ui-1');
+        const elementUi2 = getProp(style, '--element-ui-2');
+        const elementUi3 = getProp(style, '--element-ui-3');
+        const elementUi4 = getProp(style, '--element-ui-4');
+        const elementBase1 = getProp(style, '--element-base-1');
+        const elementTextPrimary = getProp(style, '--element-text-primary');
+        const elementTextSecondary = getProp(style, '--element-text-secondary');
+        const elementTextInverse = getProp(style, '--element-text-inverse');
+        // The order of colors is provided by ux.
+        const colorPalettes = {
+            default: [
+                getProp(style, '--element-data-1'), // $siemens-data-petrol,
+                getProp(style, '--element-data-2'), // $siemens-data-turquoise-900,
+                getProp(style, '--element-data-4'), // $siemens-data-turquoise-700,
+                getProp(style, '--element-data-6'), // $siemens-data-interactive-coral-900,
+                getProp(style, '--element-data-5'), // $siemens-data-royal-blue-500,
+                getProp(style, '--element-data-7'), // $siemens-data-purple-700,
+                getProp(style, '--element-data-8'), // $siemens-data-purple-900,
+                getProp(style, '--element-data-9'), // $siemens-data-orchid-700,
+                getProp(style, '--element-data-11'), // $siemens-data-plum-900,
+                getProp(style, '--element-data-12'), // $siemens-data-plum-500
+                getProp(style, '--element-data-13'), // $siemens-data-royal-blue-700,
+                getProp(style, '--element-data-16'), // $siemens-data-sand-700,
+                getProp(style, '--element-data-17'), // $siemens-data-deep-blue-700
+                getProp(style, '--element-data-3'), // $siemens-data-green-700,
+                getProp(style, '--element-data-10'), // $siemens-data-red-700,
+                getProp(style, '--element-data-14'), // $siemens-data-orange-900,
+                getProp(style, '--element-data-15') // $siemens-data-yellow-900,
+            ]
+        };
+        const gradientColors = {
+            default: [
+                getProp(style, '--element-data-1'), // $siemens-data-petrol,
+                getProp(style, '--element-data-2') // $siemens-data-turquoise-900,
+            ]
+        };
+        const axisFontSize = 12;
+        const axisLineHeight = 12;
+        const axisLineColor = elementUi4;
+        const rootFontSizeRaw = getProp(style, 'font-size');
+        const rootFontSize = rootFontSizeRaw.endsWith('px') ? parseInt(rootFontSizeRaw) : 16;
+        // value based on body-2
+        const fontSize = rootFontSize * 0.875;
+        // diverging here by intention
+        const lineHeight = fontSize;
+        const textColor = elementTextPrimary;
+        const candlestickBull = colorPalettes.default[4];
+        const candlestickBear = colorPalettes.default[12];
+        const dataZoomFillerColor = echarts.color.modifyAlpha(elementUi4, 0.4);
+        const dataZoomBrushColor = elementUi0;
+        const dataZoomAreaColor = elementUi4;
+        const dataZoomLineColor = elementUi2;
+        const dataZoomHandleIcon = 'path://M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z';
+        const dataZoomHandleColor = elementUi0;
+        const tooltipBackground = echarts.color.modifyAlpha(elementUi1, 0.8);
+        const rtl = style.direction === 'rtl';
+        // For E2E testing to get rid of font-loading instability.
+        const fontFamily = navigator.webdriver ? 'sans-serif' : undefined;
+        return {
+            textStyle: {
+                fontFamily
+            },
+            richInheritPlainLabel: false,
+            color: colorPalettes.default,
+            gradientColor: gradientColors.default,
+            backgroundColor: 'transparent',
+            animationDuration: 700,
+            title: {
+                left: 0,
+                top: 0,
+                padding: [10, 0, 0, 10],
+                textStyle: {
+                    fontFamily,
+                    lineHeight,
+                    fontSize,
+                    color: textColor
+                },
+                subtextStyle: {
+                    fontFamily,
+                    lineHeight,
+                    fontSize,
+                    color: elementTextSecondary
+                }
+            },
+            legend: {
+                backgroundColor: 'transparent',
+                inactiveColor: elementUi3,
+                left: 'auto',
+                right: 20,
+                top: 35,
+                itemGap: 10,
+                textStyle: {
+                    fontFamily,
+                    color: textColor,
+                    lineHeight,
+                    fontSize
+                },
+                icon: 'circle',
+                pageTextStyle: {
+                    color: textColor
+                },
+                itemStyle: {
+                    borderWidth: 0,
+                    itemGap: 12
+                }
+            },
+            tooltip: {
+                borderWidth: 0,
+                backgroundColor: tooltipBackground,
+                textStyle: {
+                    fontFamily,
+                    color: 'var(--element-text-inverse)',
+                    fontWeight: 400
+                },
+                padding: [8, 12, 8, 12],
+                axisPointer: {
+                    crossStyle: {
+                        color: elementUi3,
+                        width: 1
+                    }
+                },
+                formatter: tooltipFormatter
+            },
+            axisPointer: {
+                label: {
+                    fontFamily,
+                    color: elementTextInverse,
+                    backgroundColor: elementUi1,
+                    lineHeight: axisLineHeight,
+                    fontSize: axisFontSize
+                },
+                lineStyle: {
+                    color: elementUi3,
+                    width: 2
+                },
+                handle: {
+                    color: 'rgba(0,0,0,0)',
+                    margin: 0
+                }
+            },
+            grid: {
+                top: 85,
+                left: 32,
+                right: 32,
+                bottom: 30,
+                containLabel: true
+            },
+            valueAxis: {
+                nameTextStyle: {
+                    fontFamily,
+                    color: elementTextSecondary
+                },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: axisLineColor
+                    }
+                },
+                axisLabel: {
+                    fontFamily,
+                    color: textColor,
+                    lineHeight: axisLineHeight,
+                    fontSize: axisFontSize,
+                    hideOverlap: true
+                },
+                axisTick: {
+                    alignWithLabel: true
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: axisLineColor
+                    }
+                }
+            },
+            timeAxis: {
+                inverse: rtl,
+                nameTextStyle: {
+                    fontFamily,
+                    color: elementTextSecondary
+                },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: axisLineColor
+                    }
+                },
+                axisLabel: {
+                    fontFamily,
+                    color: textColor,
+                    lineHeight: axisLineHeight,
+                    fontSize: axisFontSize,
+                    hideOverlap: true
+                },
+                axisTick: {
+                    show: true,
+                    alignWithLabel: true
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: axisLineColor
+                    }
+                }
+            },
+            categoryAxis: {
+                inverse: rtl,
+                nameTextStyle: {
+                    fontFamily,
+                    color: elementTextSecondary
+                },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: axisLineColor
+                    }
+                },
+                axisLabel: {
+                    fontFamily,
+                    color: textColor,
+                    lineHeight: axisLineHeight,
+                    fontSize: axisFontSize,
+                    hideOverlap: true
+                },
+                axisTick: {
+                    show: true,
+                    alignWithLabel: true
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: axisLineColor
+                    }
+                }
+            },
+            dataZoom: {
+                textStyle: {
+                    fontFamily,
+                    color: textColor,
+                    lineHeight: axisLineHeight,
+                    fontSize: axisFontSize
+                },
+                borderColor: elementUi4,
+                fillerColor: dataZoomFillerColor,
+                handleIcon: dataZoomHandleIcon,
+                handleStyle: {
+                    color: dataZoomHandleColor,
+                    borderColor: elementUi4
+                },
+                moveHandleStyle: {
+                    color: elementUi4,
+                    opacity: 1
+                },
+                brushStyle: {
+                    color: dataZoomBrushColor
+                },
+                dataBackground: {
+                    areaStyle: {
+                        color: dataZoomAreaColor
+                    },
+                    lineStyle: {
+                        color: dataZoomLineColor
+                    }
+                },
+                selectedDataBackground: {
+                    areaStyle: {
+                        color: dataZoomLineColor,
+                        opacity: 0.2
+                    },
+                    lineStyle: {
+                        color: dataZoomLineColor
+                    }
+                },
+                emphasis: {
+                    moveHandleStyle: {
+                        color: elementUi0Hover,
+                        opacity: 1
+                    },
+                    handleStyle: {
+                        color: elementUi0Hover,
+                        borderColor: elementUi4
+                    }
+                }
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        brushStyle: {
+                            color: dataZoomFillerColor
+                        }
+                    }
+                }
+            },
+            // different chart types
+            graph: {
+                color: colorPalettes.default
+            },
+            bar: {
+                barGap: 0,
+                label: {
+                    fontFamily,
+                    color: elementTextSecondary,
+                    fontSize
+                }
+            },
+            line: {
+                areaStyle: {
+                    opacity: 0.3
+                },
+                symbol: 'circle',
+                symbolSize: 4
+            },
+            pie: {
+                radius: [0, '75%'],
+                label: {
+                    distanceToLabelLine: 2,
+                    fontFamily,
+                    formatter: '{d}%',
+                    color: elementTextSecondary,
+                    lineHeight,
+                    fontSize
+                },
+                labelLine: {
+                    length: 15,
+                    length2: 8,
+                    lineStyle: {
+                        color: elementTextSecondary
+                    }
+                },
+                itemStyle: {
+                    borderWidth: 2,
+                    borderColor: elementBase1
+                }
+            },
+            candlestick: {
+                itemStyle: {
+                    color: candlestickBull,
+                    color0: candlestickBear,
+                    borderColor: candlestickBull,
+                    borderColor0: candlestickBear
+                }
+            },
+            gauge: {
+                detail: {
+                    color: elementTextPrimary,
+                    rich: {
+                        value: {
+                            color: elementTextPrimary
+                        },
+                        unit: {
+                            color: elementTextPrimary
+                        }
+                    }
+                },
+                axisLabel: {
+                    fontFamily,
+                    color: elementTextPrimary
+                },
+                axisTick: {
+                    lineStyle: {
+                        color: axisLineColor
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: axisLineColor
+                    }
+                }
+            },
+            sankey: {
+                label: {
+                    fontFamily,
+                    textBorderColor: 'transparent',
+                    color: textColor
+                }
+            },
+            sunburst: {
+                label: {
+                    fontFamily,
+                    textBorderColor: 'transparent',
+                    color: textColor
+                }
+            },
+            simpl: {
+                colorPalettes,
+                dataZoom: {
+                    options: {
+                        height: 36,
+                        bottom: 20
+                    },
+                    grid: {
+                        bottom: 80
+                    }
+                },
+                timeRangeBar: {
+                    height: 32
+                },
+                externalZoomSlider: {
+                    grid: {
+                        bottom: 10
+                    }
+                },
+                legendLeft: {
+                    left: 10,
+                    width: '45%'
+                },
+                legendRight: {
+                    right: 20,
+                    width: '45%'
+                },
+                noTitle: {
+                    grid: {
+                        top: 60
+                    },
+                    legend: {
+                        top: 15
+                    }
+                },
+                subTitle: {
+                    grid: {
+                        top: 110
+                    },
+                    legend: {
+                        top: 65
+                    }
+                },
+                customLegend: {
+                    grid: {
+                        top: 64
+                    }
+                },
+                progress: {
+                    itemWidth: 6,
+                    itemGap: 6,
+                    grey: elementUi4
+                },
+                progressBar: {
+                    labelColor: textColor,
+                    itemWidth: 20,
+                    grid: {
+                        left: 16,
+                        right: 52,
+                        containLabel: true
+                    }
+                },
+                gauge: {
+                    grey: elementUi4,
+                    value: elementTextPrimary,
+                    unit: elementTextSecondary,
+                    defaultColor: elementUi0
+                }
+            }
+        };
+    }
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+const themeSupport = {
+    _defaultTheme: themeElement,
+    _themes: {},
+    registerTheme(theme) {
+        if (theme.name) {
+            this._themes[theme.name] = theme;
+        }
+    },
+    getThemeNames() {
+        return Object.keys(this._themes);
+    },
+    getThemeByName(name) {
+        return this._themes[name];
+    },
+    setDefault(theme) {
+        this._defaultTheme = theme;
+    },
+    getDefault() {
+        return this._defaultTheme;
+    }
+};
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiChartBaseComponent {
+    /**
+     * reference to the wrapper container. Used for setting scroll position, etc.
+     *
+     * @defaultValue
+     * ```
+     * viewChild.required<ElementRef>('chartContainerWrapper')
+     * ```
+     */
+    chartContainerWrapper = viewChild.required('chartContainerWrapper');
+    chartContainer = viewChild('chart', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chartContainer" }] : /* istanbul ignore next */ []));
+    externalZoomSliderContainer = viewChild('externalZoomSlider', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "externalZoomSliderContainer" }] : /* istanbul ignore next */ []));
+    siCustomLegend = viewChildren('siCustomLegend', { ...(ngDevMode ? { debugName: "siCustomLegend" } : /* istanbul ignore next */ {}), read: SiCustomLegendComponent });
+    /**
+     * See [ECharts 5.x Documentation]{@link https://echarts.apache.org/en/option.html}
+     * for all available options.
+     */
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Used to override specific properties set in `options`. */
+    additionalOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "additionalOptions" }] : /* istanbul ignore next */ []));
+    /** The title of the chart. */
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    /** The subtitle of the chart. */
+    subTitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "subTitle" }] : /* istanbul ignore next */ []));
+    /**
+     * Show Echarts legend
+     *
+     * @defaultValue true
+     */
+    showLegend = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+    /**
+     * Enable to show a custom legend.
+     * The custom legend offers additional features such as, scroll bar to avoid legend and chart overlapping,
+     * Left and right alignment of legends based on y-axis, etc and many more.
+     * @defaultValue false
+     */
+    showCustomLegend = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCustomLegend" }] : /* istanbul ignore next */ []));
+    /**
+     * the renderer to use: canvas or svg
+     *
+     * @defaultValue 'canvas'
+     */
+    renderer = input('canvas', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderer" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables the zoom slider below the chart.
+     *
+     * @defaultValue false
+     */
+    zoomSlider = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomSlider" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows data shadow in dataZoom slider, use together with `zoomSlider`.
+     *
+     * @defaultValue true
+     */
+    zoomSliderShadow = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomSliderShadow" }] : /* istanbul ignore next */ []));
+    /**
+     * realtime update mode for zoom slider
+     *
+     * @defaultValue true
+     */
+    zoomSliderRealtime = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomSliderRealtime" }] : /* istanbul ignore next */ []));
+    /**
+     * enable brush mode for zoom slider
+     *
+     * @defaultValue true
+     */
+    zoomSliderBrush = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomSliderBrush" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables zooming inside the chart with the mouse wheel/touch.
+     *
+     * Whether zooming inside the chart is possible with mouse.
+     *
+     * @defaultValue false
+     */
+    zoomInside = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomInside" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of series data points shown in the chart.
+     *
+     * @defaultValue 1000
+     */
+    maxEntries = input(1000, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxEntries" }] : /* istanbul ignore next */ []));
+    /**
+     * No auto dataZoom update) by default. Use together with `autoZoomSeriesIndex`.
+     *
+     * @defaultValue -1
+     */
+    visibleEntries = model(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleEntries" }] : /* istanbul ignore next */ []));
+    /**
+     * No auto dataZoom update) by default. Use together with `autoZoomSeriesIndex`.
+     *
+     * @defaultValue -1
+     */
+    visibleRange = model(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleRange" }] : /* istanbul ignore next */ []));
+    /**
+     * No auto dataZoom update) by default. Use together with `visibleEntries`.
+     *
+     * @defaultValue -1
+     */
+    autoZoomSeriesIndex = input(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoZoomSeriesIndex" }] : /* istanbul ignore next */ []));
+    /** The desired theme to load. */
+    theme = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
+    /** Used to override specific options of loaded `theme`. */
+    themeCustomization = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "themeCustomization" }] : /* istanbul ignore next */ []));
+    /**
+     * The name of the color palette (if any) of the loaded `theme`.
+     *
+     * @defaultValue undefined
+     */
+    palette = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "palette" }] : /* istanbul ignore next */ []));
+    /**
+     * Used to display `axisPointer` line either by click or mouse-move.
+     *
+     * @defaultValue false
+     */
+    axisPointer = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "axisPointer" }] : /* istanbul ignore next */ []));
+    /**
+     * Apply a specific zoom range (see {@link https://echarts.apache.org/en/option.html#dataZoom-inside}).
+     */
+    dataZoomRange = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dataZoomRange" }] : /* istanbul ignore next */ []));
+    /**
+     * The lower limit of the data zoom slider (see {@link https://echarts.apache.org/en/option.html#dataZoom-slider.minValueSpan}).
+     */
+    dataZoomMinValueSpan = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dataZoomMinValueSpan" }] : /* istanbul ignore next */ []));
+    /**
+     * The upper limit of the data zoom slider (see {@link https://echarts.apache.org/en/option.html#dataZoom-slider.maxValueSpan}).
+     */
+    dataZoomMaxValueSpan = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dataZoomMaxValueSpan" }] : /* istanbul ignore next */ []));
+    /**
+     * The data zoom filter mode. (see {@link https://echarts.apache.org/en/option.html#dataZoom-inside.filterMode})
+     *
+     * The value 'filter' will cause the lines to be disconnected to the outside of the chart.
+     *
+     * @defaultValue 'none'
+     */
+    dataZoomFilterMode = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataZoomFilterMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Enable custom legend click actions exposed by the `selectionChanged` event.
+     */
+    customLegendAction = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "customLegendAction" }] : /* istanbul ignore next */ []));
+    /**
+     * Specify selected legend item.
+     *
+     * @defaultValue
+     * ```
+     * { legendItemName: '' }
+     * ```
+     */
+    selectedItem = input({ legendItemName: '' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
+    /**
+     * The height of the ECharts container as decimal.
+     */
+    eChartContainerHeight = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "eChartContainerHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Flag to use external zoom slider
+     *
+     * @defaultValue false
+     */
+    externalZoomSlider = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "externalZoomSlider" }] : /* istanbul ignore next */ []));
+    /** External XAxis Formatter from consumer */
+    externalXAxisFormatter = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "externalXAxisFormatter" }] : /* istanbul ignore next */ []));
+    /**
+     * If true, add consumer-provided time range bar. Use together with `zoomSlider`.
+     * @deprecated The input will be removed in future versions as the time range bar slot is deprecated.
+     *
+     * @defaultValue false
+     */
+    showTimeRangeBar = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTimeRangeBar" }] : /* istanbul ignore next */ []));
+    /** Event emitted when data zoom changes. */
+    dataZoom = output();
+    /** Event emitted when axis pointer moves. */
+    pointer = output();
+    /** Event emitted when selection changes e.g. clicking on a legend item. */
+    selectionChanged = output();
+    /** Event emitted when a chart series is clicked. */
+    chartSeriesClick = output();
+    /** Event emitted when chart grid is resized. */
+    chartGridResized = output();
+    /** Event emitted when custom legend multi-line info changes. */
+    customLegendMultiLineInfoEvent = output();
+    /** Emitted when data zoom changes, indicating the time range in milliseconds, 0 for full range */
+    timeRangeChange = output();
+    /** Allow to override options specific for a chart type. */
+    actualOptions = {};
+    customLegend = [
+        {
+            customLegends: [
+                { list: [], unit: '' },
+                { list: [], unit: '' }
+            ],
+            legendAxis: 'both'
+        }
+    ];
+    /** @internal */
+    chart;
+    extZoomSliderChart;
+    echartElement;
+    eChartExtSliderElement;
+    inProgress = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inProgress" }] : /* istanbul ignore next */ []));
+    backgroundColor = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    textColor = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []));
+    titleColor = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleColor" }] : /* istanbul ignore next */ []));
+    subTitleColor = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subTitleColor" }] : /* istanbul ignore next */ []));
+    selectedSeriesColors = {};
+    unselectedSeriesColors = {};
+    seriesSelectionState = {};
+    containerHeight = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerHeight" }] : /* istanbul ignore next */ []));
+    activeTheme;
+    autoZoomUpdate = true;
+    prevAxisPointer = {};
+    lastValidDataZoom = {};
+    presetDataZoomRange;
+    dataZoomSetupDone = false;
+    requestedDataZoom;
+    measureCanvas;
+    cdRef = inject(ChangeDetectorRef);
+    ngZone = inject(NgZone);
+    curWidth = 0;
+    curHeight = 0;
+    timeBarBottom = signal(50, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeBarBottom" }] : /* istanbul ignore next */ []));
+    timeBarLeft = signal(32, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeBarLeft" }] : /* istanbul ignore next */ []));
+    timeBarRight = signal(32, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeBarRight" }] : /* istanbul ignore next */ []));
+    timeBarHeight = signal(32, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeBarHeight" }] : /* istanbul ignore next */ []));
+    gridCoordinates = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        containerWidth: 0,
+        containerHeight: 0
+    };
+    customLegendsMultiLineInfo = [];
+    extZoomSliderOptions = {
+        animation: false,
+        dataZoom: [
+            { type: 'slider', showDataShadow: false },
+            { type: 'inside', showDataShadow: false }
+        ],
+        grid: [{ left: 32, right: 32, top: 0, height: 0, containLabel: false }],
+        xAxis: [{ type: 'time', axisLine: { onZero: true }, zlevel: 1 }],
+        yAxis: [{ type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false }, show: false }],
+        series: [{ type: 'line', showSymbol: false, lineStyle: { opacity: 0 }, data: [] }]
+    };
+    echartMouseDown = () => this.handleChartMouseDown();
+    echartMouseUp = (event) => this.handleChartMouseUp(event);
+    echartExtSliderMouseDown = () => this.handleExtChartMouseDown();
+    echartExtSliderMouseUp = (event) => this.handleExtChartMouseUp(event);
+    shapePaths = {
+        circle: 'M6 0A6 6 0 1 1 6 12A6 6 0 1 1 6 0Z',
+        rect: 'M0 0H12V12H0Z',
+        roundRect: 'M2 0H10A2 2 0 0 1 12 2V10A2 2 0 0 1 10 12H2A2 2 0 0 1 0 10V2A2 2 0 0 1 2 0Z',
+        triangle: 'M6 0L12 12H0L6 0Z',
+        diamond: 'M6 0L12 6L6 12L0 6L6 0Z',
+        pin: 'M6.00049 0C8.48577 0 10.5005 2.01472 10.5005 4.5C10.5005 5.51817 10.0175 6.461 9.46826 7.31836C8.42358 8.94924 7.16317 10.4497 6.00049 12C4.83781 10.4497 3.57642 8.94924 2.53174 7.31836C1.98255 6.461 1.49951 5.51817 1.49951 4.5C1.49951 2.01472 3.51521 0 6.00049 0Z'
+    };
+    /**
+     * Allow consuming applications to re-draw chart on window resizes.
+     */
+    resize() {
+        if (!this.chart) {
+            return;
+        }
+        const rect = this.chartContainer()?.nativeElement.getBoundingClientRect();
+        const width = Math.floor(rect.width);
+        const height = Math.floor(rect.height);
+        if (width && height && (width !== this.curWidth || height !== this.curHeight)) {
+            this.curWidth = width;
+            this.curHeight = height;
+            this.ngZone.runOutsideAngular(() => {
+                this.chart.resize({ width, height: this.containerHeight() ?? height });
+                if (this.externalZoomSlider()) {
+                    this.extZoomSliderChart.resize();
+                }
+                setTimeout(() => this.checkGridSizeChange());
+            });
+            this.afterChartResize();
+        }
+        this.updateCustomLegendMultiLineInfo();
+    }
+    ngOnChanges(changes) {
+        if (changes.options?.currentValue) {
+            this.actualOptions = this.options();
+        }
+        if (!this.chart) {
+            return;
+        }
+        if (changes.eChartContainerHeight) {
+            this.setContainerHeight();
+        }
+        const selectedLegendItem = changes.selectedItem;
+        if (selectedLegendItem &&
+            !selectedLegendItem.isFirstChange() &&
+            selectedLegendItem.currentValue) {
+            const event = {
+                name: selectedLegendItem.currentValue.legendItemName,
+                type: 'legendToggleSelect'
+            };
+            this.dispatchEChartAction(event);
+        }
+        if (this.customLegendAction() &&
+            changes.options &&
+            !changes.options.isFirstChange() &&
+            !changes.options.currentValue.color.length) {
+            this.actualOptions.color = changes.options.previousValue.color;
+        }
+        if (changes.theme || changes.renderer) {
+            // need to completely redo the chart for the theme change to take effect
+            return this.resetChart();
+        }
+        let updates = 0;
+        let applyAll = false;
+        let skipMerge = false;
+        if (changes.forceAll ||
+            changes.yAxis ||
+            changes.xAxis ||
+            changes.options ||
+            changes.series ||
+            changes.value) {
+            // this is to clean the legend item list
+            if (this.showCustomLegend() && this.customLegend && this.customLegend.length > 0) {
+                this.customLegend.forEach(cl => {
+                    cl.customLegends = [
+                        { list: [], unit: '' },
+                        { list: [], unit: '' }
+                    ];
+                });
+            }
+            this.applyOptions();
+            applyAll = true;
+            skipMerge =
+                changes.series?.previousValue &&
+                    changes.series.currentValue &&
+                    changes.series.currentValue.length < changes.series.previousValue.length;
+            updates++;
+        }
+        if (!applyAll && (changes.title || changes.subTitle)) {
+            // already called when `applyOptions()` has been called
+            this.applyTitles();
+            updates++;
+        }
+        if (applyAll ||
+            changes.forceAll ||
+            changes.zoomSlider ||
+            changes.zoomSliderShadow ||
+            changes.zoomSliderRealtime ||
+            changes.zoomSliderBrush ||
+            changes.zoomInside ||
+            changes.axisPointer ||
+            changes.autoZoomSeriesIndex ||
+            changes.visibleEntries ||
+            changes.visibleRange) {
+            this.applyDataZoom();
+            updates++;
+        }
+        if (applyAll || changes.forceAll || changes.palette || changes.additionalOptions) {
+            this.applyAdditionalOptions();
+            updates++;
+        }
+        if (applyAll) {
+            this.applyStyles();
+            setTimeout(() => this.updateCustomLegendMultiLineInfo());
+        }
+        let skipDz = false;
+        if (updates) {
+            if (changes.dataZoomRange) {
+                this.setDataZoomRange(true);
+                skipDz = true;
+            }
+            const dz = this.actualOptions.dataZoom;
+            let currentDataZoom;
+            if (skipMerge && this.hasDataZoom() && this.hasData() && !skipDz) {
+                // forced updated is required when adding/removing series, see:
+                //   https://github.com/apache/incubator-echarts/issues/6202
+                // in order not to mess up current datazoom, save the current value and add it to options
+                this.saveCurrentDataZoom();
+                if (this.lastValidDataZoom) {
+                    currentDataZoom = dz[0];
+                    const newDataZoom = {};
+                    echarts.util.merge(newDataZoom, dz[0], true);
+                    echarts.util.merge(newDataZoom, this.lastValidDataZoom, true);
+                    dz[0] = newDataZoom;
+                }
+            }
+            this.updateEChart(skipMerge);
+            if (currentDataZoom) {
+                dz[0] = currentDataZoom;
+                this.updateEChart(false, { dataZoom: this.actualOptions.dataZoom });
+            }
+            this.applyColorsToCustomLegends();
+        }
+        if (!skipDz && changes.dataZoomRange) {
+            // this is done after a possible setOptions call to ensure echarts has all the desired states
+            this.setDataZoomRange();
+        }
+        this.cdRef.markForCheck();
+    }
+    ngOnInit() {
+        const canvas = document.createElement('canvas');
+        this.measureCanvas = canvas.getContext('2d');
+        this.measureCanvas.font = '12px "SiemensSans Pro"';
+        const externalXAxisFormatter = this.externalXAxisFormatter();
+        if (this.externalZoomSlider() && externalXAxisFormatter) {
+            const consumerFormatter = externalXAxisFormatter;
+            this.extZoomSliderOptions.xAxis[0].axisLabel = {
+                formatter: (value) => consumerFormatter(value, this.visibleRange())
+            };
+        }
+        this.applyTheme();
+        // this is to clean the legend item list
+        if (this.showCustomLegend() && this.customLegend && this.customLegend.length > 0) {
+            this.customLegend.forEach(cl => {
+                cl.customLegends = [
+                    { list: [], unit: '' },
+                    { list: [], unit: '' }
+                ];
+            });
+        }
+        this.applyOptions();
+        this.applyAdditionalOptions();
+        this.applyDataZoom();
+        this.applyStyles();
+        if (this.customLegendAction()) {
+            this.fetchSeriesColors();
+        }
+    }
+    ngAfterViewInit(skipZoom) {
+        this.ngZone.runOutsideAngular(() => {
+            const chartContainerEl = this.chartContainer().nativeElement;
+            // set current dimension to avoid initial resize() call on chart
+            const rect = chartContainerEl.getBoundingClientRect();
+            this.curWidth = Math.floor(rect.width);
+            this.curHeight = Math.floor(rect.height);
+            const opts = { renderer: this.renderer() };
+            this.chart = echarts.init(chartContainerEl, this.activeTheme, opts);
+            this.echartElement = chartContainerEl;
+            this.getEChartInner()?.addEventListener('mousedown', this.echartMouseDown);
+            this.chart.setOption(this.actualOptions);
+            setTimeout(() => this.checkGridSizeChange());
+            if (this.externalZoomSlider()) {
+                this.extZoomSliderChart = echarts.init(this.externalZoomSliderContainer().nativeElement, this.activeTheme, opts);
+                this.eChartExtSliderElement = this.externalZoomSliderContainer()
+                    .nativeElement;
+                this.getEChartExternalSliderInner()?.addEventListener('mousedown', this.echartExtSliderMouseDown);
+                this.extZoomSliderChart.setOption(this.extZoomSliderOptions);
+                this.extZoomSliderChart.on('datazoom', (event) => this.handleExtDataZoom(event));
+            }
+            this.afterChartInit(skipZoom);
+        });
+        setTimeout(() => {
+            this.resize();
+            this.applyColorsToCustomLegends();
+        });
+    }
+    calculateTextWidth(text) {
+        if (!this.measureCanvas) {
+            return 150;
+        }
+        return Math.ceil(this.measureCanvas.measureText(text).width);
+    }
+    disposeChart() {
+        if (this.chart && !this.chart.isDisposed()) {
+            this.chart.dispose();
+        }
+        if (this.extZoomSliderChart && !this.extZoomSliderChart.isDisposed()) {
+            this.extZoomSliderChart.dispose();
+        }
+    }
+    ngOnDestroy() {
+        this.disposeChart();
+    }
+    /**
+     * Switch theme using echarts api, which does not need reloading the whole chart.
+     */
+    themeSwitch() {
+        if (!this.chart) {
+            return;
+        }
+        this.applyTheme();
+        this.chart.setTheme(this.activeTheme);
+        // Since color palette is set thorugh options, it needs to be set again.
+        this.themeChanged();
+        this.applyPalette();
+        this.applyStyles();
+        this.applyTitles();
+        setTimeout(() => {
+            this.applyColorsToCustomLegends();
+        });
+        this.chart.setOption(this.actualOptions);
+        if (this.externalZoomSlider()) {
+            this.extZoomSliderChart.setTheme(this.activeTheme);
+            this.extZoomSliderChart.setOption(this.extZoomSliderOptions);
+        }
+        this.cdRef.markForCheck();
+    }
+    /**
+     * Re-render the whole chart.
+     * @deprecated The method is deprecated and should not be used directly by the consumer.
+     */
+    resetChart() {
+        this.applyTheme();
+        if (!this.actualOptions) {
+            // this can happen if the SiThemeService fires the theme switch when the chart is not
+            // yet completely initialized
+            return;
+        }
+        this.disposeChart();
+        this.applyPalette();
+        const addOpts = this.additionalOptions();
+        if (addOpts?.palette) {
+            echarts.util.merge(this.actualOptions.palette, addOpts.palette, true);
+        }
+        this.themeChanged();
+        this.applyStyles();
+        this.applyTitles();
+        this.ngAfterViewInit(true); // eslint-disable-line @angular-eslint/no-lifecycle-call
+        this.cdRef.markForCheck();
+    }
+    handleLegendClick(legend) {
+        this.doToggleSeriesVisibility(legend.name, legend.selected, legend);
+        this.cdRef.markForCheck();
+    }
+    handleLegendHover(legend, start) {
+        this.dispatchEChartAction({
+            type: start ? 'highlight' : 'downplay',
+            [legend.alternativeNaming ? 'name' : 'seriesName']: legend.name
+        });
+    }
+    /**
+     * Toggle visibility of a series.
+     */
+    toggleSeriesVisibility(name, visible) {
+        const legendItem = this.findCustomLegendItem(name);
+        this.doToggleSeriesVisibility(name, visible, legendItem);
+        this.cdRef.markForCheck();
+    }
+    doToggleSeriesVisibility(name, visible, legendItem) {
+        if (legendItem) {
+            legendItem.selected = visible;
+        }
+        this.dispatchEChartAction({ type: visible ? 'legendSelect' : 'legendUnSelect', name });
+        if (this.externalZoomSlider()) {
+            this.ngZone.runOutsideAngular(() => {
+                this.extZoomSliderChart.dispatchAction({
+                    type: visible ? 'legendSelect' : 'legendUnSelect',
+                    name
+                });
+            });
+        }
+        const opt = this.getOptionNoClone();
+        if (Array.isArray(opt.legend)) {
+            const selection = {};
+            opt.legend.forEach((l) => Object.assign(selection, l.selected));
+            this.handleSelectionChanged({ selected: selection });
+        }
+    }
+    findCustomLegendItem(name) {
+        if (this.showCustomLegend()) {
+            for (const cl of this.customLegend) {
+                for (const l of cl.customLegends) {
+                    for (const item of l.list) {
+                        if (item.name === name) {
+                            return item;
+                        }
+                    }
+                }
+            }
+        }
+        return undefined;
+    }
+    getValidXAxis() {
+        return undefined;
+    }
+    setZoomMode() { }
+    applyTheme() {
+        // Set default theme if no theme provided
+        const theme = this.theme();
+        if (theme?.style) {
+            this.activeTheme = theme.style();
+        }
+        else if (themeSupport._defaultTheme?.style) {
+            this.activeTheme = themeSupport._defaultTheme.style();
+        }
+        const themeCustomization = this.themeCustomization();
+        if (themeCustomization) {
+            const custom = echarts.util.merge({}, themeCustomization);
+            this.activeTheme = echarts.util.merge(custom, this.activeTheme);
+        }
+    }
+    themeChanged() { }
+    applyOptions() { }
+    applyCustomLegendPosition() {
+        if (this.showLegend() && this.showCustomLegend()) {
+            this.customLegend.forEach(cl => {
+                if (cl.customLegends?.[0].list && cl.customLegends?.[1].list) {
+                    const leftLegend = cl.customLegends[0];
+                    const rightLegend = cl.customLegends[1];
+                    // if we have left and right axis
+                    if (leftLegend.list.length > 0 && rightLegend.list.length > 0) {
+                        cl.legendAxis = 'both';
+                    }
+                    else if (leftLegend.list.length > 0 && rightLegend.list.length === 0) {
+                        // if we have only left axis data
+                        cl.legendAxis = 'left';
+                    }
+                    else if (leftLegend.list.length === 0 && rightLegend.list.length > 0) {
+                        // if we have only right axis data
+                        cl.legendAxis = 'right';
+                    }
+                    else {
+                        cl.legendAxis = 'both';
+                    }
+                }
+                else {
+                    cl.legendAxis = 'both';
+                }
+            });
+            this.cdRef.markForCheck();
+        }
+    }
+    applyAdditionalOptions() {
+        // need to merge palette before the additionalOptions so that overrides work as expected
+        this.applyPalette();
+        if (this.additionalOptions()) {
+            echarts.util.merge(this.actualOptions, this.additionalOptions(), true);
+        }
+    }
+    applyPalette() {
+        const paletteValue = this.palette() ?? 'default';
+        if (paletteValue) {
+            const palette = this.getThemeCustomValue(['colorPalettes', paletteValue], null);
+            if (palette) {
+                this.actualOptions.color = palette;
+                if (this.customLegendAction()) {
+                    this.fetchSeriesColors(palette);
+                }
+            }
+        }
+    }
+    applyDataZoom() {
+        if (!this.actualOptions.grid) {
+            return;
+        }
+        this.actualOptions.dataZoom ??= [];
+        const sliderOptions = {};
+        const dataZoomMinValueSpan = this.dataZoomMinValueSpan();
+        if (dataZoomMinValueSpan) {
+            sliderOptions.minValueSpan = dataZoomMinValueSpan;
+        }
+        const dataZoomMaxValueSpan = this.dataZoomMaxValueSpan();
+        if (dataZoomMaxValueSpan) {
+            sliderOptions.maxValueSpan = dataZoomMaxValueSpan;
+        }
+        sliderOptions.realtime = this.zoomSliderRealtime();
+        sliderOptions.brushSelect = this.zoomSliderBrush();
+        sliderOptions.showDataShadow = this.zoomSliderShadow();
+        sliderOptions.filterMode = this.dataZoomFilterMode();
+        sliderOptions.showDetail = false;
+        // keep external zoom slider in sync, always at index 0
+        Object.assign(this.extZoomSliderOptions.dataZoom[0], sliderOptions);
+        const dz = this.actualOptions.dataZoom;
+        const sliderIdx = dz.findIndex(z => z.type === 'slider');
+        const insideIdx = dz.findIndex(z => z.type === 'inside');
+        const zoomSlider = this.zoomSlider();
+        if (zoomSlider && sliderIdx === -1) {
+            // for the non-external, merge with other options
+            const customOptions = this.getThemeCustomValue(['dataZoom', 'options'], {});
+            const dzSliderOptions = Object.assign({ type: 'slider' }, customOptions, sliderOptions);
+            Object.assign(this.extZoomSliderOptions.dataZoom[0], customOptions);
+            const externalZoomSlider = this.externalZoomSlider();
+            if (externalZoomSlider) {
+                dzSliderOptions.show = false;
+            }
+            dz.push(dzSliderOptions);
+            const gridOptions = externalZoomSlider
+                ? this.getThemeCustomValue(['externalZoomSlider', 'grid'], {})
+                : this.getThemeCustomValue(['dataZoom', 'grid'], {});
+            if (this.showTimeRangeBar()) {
+                const timeBarOptions = this.getThemeCustomValue(['timeRangeBar'], {});
+                if (customOptions.height && customOptions.bottom) {
+                    this.timeBarBottom.set(customOptions.height + customOptions.bottom);
+                }
+                this.timeBarHeight.set(timeBarOptions?.height ?? 32);
+                if (!externalZoomSlider) {
+                    gridOptions.bottom = (gridOptions?.bottom ?? 0) + this.timeBarHeight();
+                }
+            }
+            echarts.util.merge(this.actualOptions.grid, gridOptions, true);
+        }
+        else if (zoomSlider && sliderIdx >= 0) {
+            // update existing
+            const dzSliderOptions = dz[sliderIdx];
+            Object.assign(dzSliderOptions, sliderOptions);
+        }
+        else if (!zoomSlider && sliderIdx >= 0) {
+            dz.splice(sliderIdx, 1);
+        }
+        const zoomInside = this.zoomInside();
+        if (zoomInside && insideIdx === -1) {
+            dz.push({ type: 'inside', filterMode: this.dataZoomFilterMode() });
+        }
+        else if (!zoomInside && insideIdx >= 0) {
+            dz.splice(insideIdx, 1);
+        }
+        if (this.actualOptions.xAxis) {
+            this.handleAxisPointer(this.actualOptions);
+        }
+        this.cdRef.markForCheck();
+    }
+    handleAxisPointer(options) {
+        const axisPointer = this.axisPointer();
+        if (axisPointer !== undefined) {
+            options.axisPointer ??= {};
+        }
+        if (axisPointer === true) {
+            options.axisPointer.triggerOn = 'click';
+        }
+        else if (axisPointer === false) {
+            options.axisPointer.triggerOn = 'mousemove|click';
+        }
+        else if (typeof axisPointer === 'string') {
+            options.axisPointer.triggerOn = axisPointer;
+        }
+        if (Array.isArray(options.xAxis)) {
+            const xAxisArray = options.xAxis;
+            xAxisArray.forEach(axis => this.handleAxisPointerSingleAxis(axis));
+        }
+        else {
+            this.handleAxisPointerSingleAxis(options.xAxis);
+        }
+    }
+    handleAxisPointerSingleAxis(xAxis) {
+        if (this.axisPointer()) {
+            echarts.util.merge(xAxis, { axisPointer: { handle: { show: true } } }, true);
+        }
+        else {
+            echarts.util.merge(xAxis, { axisPointer: { handle: { show: false } } }, true);
+        }
+    }
+    hasDataZoom() {
+        return !!this.actualOptions.dataZoom?.length;
+    }
+    getThemeValue(props, defaultValue, ns) {
+        if (!this.activeTheme) {
+            return defaultValue;
+        }
+        let currentValue = this.activeTheme;
+        if (ns) {
+            currentValue = currentValue[ns];
+        }
+        for (let i = 0; currentValue && i < props.length; i++) {
+            currentValue = currentValue[props[i]];
+        }
+        return currentValue ?? defaultValue;
+    }
+    getThemeCustomValue(props, defaultValue) {
+        return this.getThemeValue(props, defaultValue, 'simpl');
+    }
+    applyTitles() {
+        const title = this.title();
+        const subTitle = this.subTitle();
+        const options = this.actualOptions;
+        if (this.showLegend() && this.showCustomLegend()) {
+            if (options.title) {
+                options.title.show = false;
+            }
+            options.legend?.forEach(legend => {
+                legend.show = false;
+                legend.height = 0;
+            });
+            if (options.grid) {
+                const gridOptions = this.getThemeCustomValue(['customLegend', 'grid'], {});
+                echarts.util.merge(options.grid, gridOptions, true);
+            }
+            this.titleColor.set(this.getThemeValue(['title', 'textStyle', 'color'], null));
+            this.subTitleColor.set(this.getThemeValue(['title', 'subtextStyle', 'color'], this.titleColor));
+            this.textColor.set(this.getThemeValue(['legend', 'textStyle', 'color'], null));
+            this.backgroundColor.set(this.getThemeValue(['backgroundColor'], null));
+        }
+        else if (title || subTitle) {
+            options.title = {
+                text: title,
+                subtext: subTitle
+            };
+            if (subTitle) {
+                this.modifyTopAlignment('subTitle');
+            }
+        }
+        else if (!title && !subTitle && !options.title) {
+            this.modifyTopAlignment('noTitle');
+        }
+    }
+    modifyTopAlignment(key) {
+        const options = this.actualOptions;
+        if (options.grid && !this.options()?.grid) {
+            const gridOptions = this.getThemeCustomValue([key, 'grid'], {});
+            echarts.util.merge(options.grid, gridOptions, true);
+        }
+        if (!this.options()?.legend) {
+            const legendOptions = this.getThemeCustomValue([key, 'legend'], {});
+            options.legend?.forEach(legend => echarts.util.merge(legend, legendOptions, true));
+        }
+    }
+    afterChartInit(skipZoom) {
+        this.chart.on('datazoom', (event) => this.handleDataZoom(event, 'echart'));
+        if (!this.customLegendAction()) {
+            // default generic si-chart behavior
+            this.chart.on('legendselectchanged', (event) => this.handleSelectionChanged(event));
+            this.chart.on('click', (event) => this.handleClickOnChart(event, false));
+        }
+        else {
+            // custom chart behaviour
+            this.chart.on('legendselectchanged', (event) => this.handleSelectionChangedCustom(event));
+            this.chart.on('click', (event) => this.handleClickOnChart(event, true));
+        }
+        this.chart.on('updateaxispointer', (event) => this.handleUpdateAxisPointer(event));
+        if (!skipZoom) {
+            this.setDataZoomRange();
+        }
+        this.cdRef.markForCheck();
+    }
+    afterChartResize() { }
+    getEChartInner() {
+        return this.echartElement.querySelector(':scope > div:first-child');
+    }
+    getEChartExternalSliderInner() {
+        return this.eChartExtSliderElement.querySelector(':scope > div:first-child');
+    }
+    handleExtChartMouseDown() {
+        window.addEventListener('mouseup', this.echartExtSliderMouseUp);
+    }
+    handleExtChartMouseUp(event) {
+        window.removeEventListener('mouseup', this.echartExtSliderMouseUp);
+        const newEvent = new MouseEvent('mouseup', event);
+        setTimeout(() => {
+            this.getEChartExternalSliderInner()?.dispatchEvent(newEvent);
+            this.cdRef.markForCheck();
+        }, 1);
+    }
+    handleChartMouseDown() {
+        window.addEventListener('mouseup', this.echartMouseUp);
+    }
+    handleChartMouseUp(event) {
+        window.removeEventListener('mouseup', this.echartMouseUp);
+        const newEvent = new MouseEvent('mouseup', event);
+        setTimeout(() => {
+            this.getEChartInner()?.dispatchEvent(newEvent);
+            this.cdRef.markForCheck();
+        }, 1);
+    }
+    setDataZoomRange(skipUpdate) {
+        // Checking if we received a valid dataZoomRange Object
+        const dataZoomRange = this.dataZoomRange();
+        if (dataZoomRange && Object.keys(dataZoomRange).length > 0) {
+            // If series has data, then directly dispatch action for the dataZoom event
+            // Else, Store the dataZoomRange values in presetDataZoomRange variable for applying zoom
+            // after data is received in chart
+            // No need to reassign presetDataZoomRange if earlier value is not consumed
+            if (this.hasData()) {
+                const dz = this.getPresetDataZoom(dataZoomRange);
+                if (dz) {
+                    const requested = { ...dataZoomRange };
+                    this.presetDataZoomRange = undefined;
+                    this.updateDataZoom(dz);
+                    if (!skipUpdate) {
+                        this.updateEChart(false, { dataZoom: [dz] });
+                    }
+                    // update user with proper data
+                    setTimeout(() => {
+                        this.ngZone.runOutsideAngular(() => {
+                            this.requestedDataZoom = requested;
+                            this.handleDataZoom(dz, 'setDataZoomRange');
+                        });
+                    });
+                    return;
+                }
+            }
+            this.presetDataZoomRange = dataZoomRange;
+        }
+    }
+    handleDataZoom(event, source) {
+        // events can be batched
+        if (event.batch?.length) {
+            event = event.batch[0];
+        }
+        if (Number.isNaN(event.start) || Number.isNaN(event.end)) {
+            // need to fix to the last valid dataZoom setting, see below
+            this.chart.dispatchAction({ type: 'dataZoom', ...this.lastValidDataZoom });
+            return;
+        }
+        const effectiveOpts = this.getOptionNoClone();
+        // in case of pane by chart area, event.start and event.end are always undefined.
+        // and in case of slider move, they has values in percentage(0-100)
+        // so, to handle in case of pane, we need to get start and end values from datazoom property
+        // following condition will be executed only if autozoom is false; and start and end are undefined(undefined means call is from pane)
+        const dz = effectiveOpts.dataZoom[0];
+        this.autoZoomUpdate = !!dz && dz.end === 100;
+        // Due to chart updates outside Angular, we need to emit events back
+        // inside Angular to activate Angular's change detection.
+        const range = this.getVisibleRange();
+        if (range) {
+            range.source = source ?? event.source;
+            this.calculateVisibleRange(range);
+            if (this.requestedDataZoom) {
+                range.requested = this.requestedDataZoom;
+                this.requestedDataZoom = undefined;
+            }
+            this.ngZone.run(() => {
+                this.dataZoom.emit(range);
+                this.timeRangeChange.emit(dz.start === 0 && dz.end === 100 ? 0 : range.rangeEnd - range.rangeStart);
+            });
+            setTimeout(() => this.checkGridSizeChange());
+            this.presetDataZoomRange = undefined;
+            this.dataZoomSetupDone = true;
+            // sync/store values
+            this.updateDataZoom({ startValue: range.rangeStart, endValue: range.rangeEnd });
+            if (event.source !== 'extSlider') {
+                this.extZoomSliderChart?.dispatchAction({
+                    type: 'dataZoom',
+                    source: 'mainChart',
+                    startValue: range.rangeStart,
+                    endValue: range.rangeEnd
+                });
+            }
+        }
+        this.cdRef.markForCheck();
+    }
+    handleExtDataZoom(event) {
+        if (event.batch?.length) {
+            event = event.batch[0];
+        }
+        if (event.source === 'mainChart') {
+            return;
+        }
+        const zoomModel = this.extZoomSliderChart._model;
+        const range = this.doGetVisibleRange(zoomModel);
+        if (range) {
+            this.calculateVisibleRange(range);
+            this.chart?.dispatchAction({
+                type: 'dataZoom',
+                source: 'extSlider',
+                startValue: range.rangeStart,
+                endValue: range.rangeEnd
+            });
+        }
+    }
+    handleSelectionChanged(event) {
+        this.selectionChanged.emit(event);
+        for (const a in event.selected) {
+            if (event.selected[a] !== false) {
+                return;
+            }
+        }
+        this.saveCurrentDataZoom();
+    }
+    /**
+     * Creates two objects that stores the colors for selected and unselected series. Used only for custom legend actions.
+     */
+    fetchSeriesColors(colorsToBeUSed) {
+        const options = this.actualOptions;
+        if (!options.color?.length && this.activeTheme) {
+            options.color = [...this.activeTheme.color];
+        }
+        if (!colorsToBeUSed && !this.activeTheme) {
+            return;
+        }
+        options.series?.forEach((element, index) => {
+            this.unselectedSeriesColors[element.name] = {
+                color: this.getThemeValue(['legend', 'unselected', 'color'], '#ccc'),
+                index
+            };
+            const colors = colorsToBeUSed ?? this.activeTheme.color;
+            this.selectedSeriesColors[element.name] = { color: colors[index], index };
+        });
+    }
+    /**
+     * Handles legend select event in non echart native way.
+     * @param event -  legend select
+     */
+    handleSelectionChangedCustom(event) {
+        const optionsToChange = this.styleSelectedSeries(event.name, false, event.dataIndex);
+        this.ngZone.runOutsideAngular(() => {
+            this.chart.setOption(optionsToChange);
+            this.chart.dispatchAction({ type: 'legendSelect', name: event.name });
+        });
+    }
+    /**
+     * Handles click on series in non echart native way.
+     * @param event -  click
+     */
+    handleClickOnChart(event, toggleVisibility) {
+        if (event.componentType !== 'series') {
+            return;
+        }
+        if (toggleVisibility) {
+            const optionsToChange = this.styleSelectedSeries(event.seriesName, true, event.dataIndex);
+            this.chart.setOption(optionsToChange);
+        }
+        else {
+            this.ngZone.run(() => this.chartSeriesClick.emit({
+                itemName: event.seriesName,
+                dataIndex: event.dataIndex
+            }));
+        }
+    }
+    /**
+     * Selects or unselects the series based on series state object
+     * @param seriesName -  series to be selected/unselected
+     * @param emit -  if true event is emitted otherwise no event is emitted
+     */
+    styleSelectedSeries(seriesName, emit, seriesDataIndex) {
+        if (this.seriesSelectionState?.[seriesName]) {
+            const elementToStyle = this.actualOptions.series?.find(element => element.name === seriesName);
+            this.seriesSelectionState[seriesName] = false;
+            return this.selectSeries(elementToStyle, emit, seriesDataIndex);
+        }
+        else {
+            const elementToStyle = this.actualOptions.series?.find(element => element.name === seriesName);
+            this.seriesSelectionState[seriesName] = true;
+            return this.unselectSeries(elementToStyle, emit, seriesDataIndex);
+        }
+    }
+    /**
+     * Selects the series
+     * @param element -  to be styled as selected
+     * @param emit -  if true event is emitted otherwise no event is emitted
+     */
+    selectSeries(element, emit, seriesDataIndex) {
+        const options = this.actualOptions;
+        const optionsToChange = { color: options.color, series: [options.series] };
+        const optionsColorIndex = this.selectedSeriesColors[element.name].index;
+        optionsToChange.color[optionsColorIndex] = this.selectedSeriesColors[element.name].color;
+        if (element.areaStyle) {
+            element.areaStyle.opacity = 0.4;
+            optionsToChange.series[this.selectedSeriesColors[element.name].index] = element;
+        }
+        if (emit) {
+            this.chartSeriesClick.emit({
+                itemName: element.name,
+                dataIndex: seriesDataIndex,
+                selected: false,
+                color: this.selectedSeriesColors[element.name].color
+            });
+        }
+        return optionsToChange;
+    }
+    /**
+     * Unselects the series
+     * @param element - to be styled as unselected
+     * @param emit - if true event is emitted otherwise no event is emitted
+     */
+    unselectSeries(element, emit, seriesDataIndex) {
+        const options = this.actualOptions;
+        const optionsToChange = { color: options.color, series: [options.series] };
+        const optionsColorIndex = this.selectedSeriesColors[element.name].index;
+        optionsToChange.color[optionsColorIndex] = this.unselectedSeriesColors[element.name].color;
+        if (element.areaStyle) {
+            element.areaStyle.opacity = 0;
+            optionsToChange.series[this.unselectedSeriesColors[element.name].index] = element;
+        }
+        if (emit) {
+            this.chartSeriesClick.emit({
+                itemName: element.name,
+                dataIndex: seriesDataIndex,
+                selected: true,
+                color: this.selectedSeriesColors[element.name].color
+            });
+        }
+        return optionsToChange;
+    }
+    isValidDataZoomValue(val) {
+        return val !== null && val !== undefined && !Number.isNaN(val);
+    }
+    saveCurrentDataZoom() {
+        const options = this.actualOptions;
+        if (!options.grid || !options.dataZoom) {
+            return;
+        }
+        // When the last item on the legend is disabled, remember the current valid
+        // dataZoom setting. Due to a bug in ECharts it happens
+        // that the zoom slider disappears not to ever reappear again. To work around
+        // the problem, we simply inject the last valid dataZoom settings saved here
+        // once the invalid values (NaN) are detected
+        const currentOpts = this.getOptionNoClone();
+        if (!currentOpts?.dataZoom?.[0]) {
+            return;
+        }
+        const dz = currentOpts.dataZoom[0];
+        if (dz) {
+            this.lastValidDataZoom = {};
+            if (this.isValidDataZoomValue(dz.startValue)) {
+                this.lastValidDataZoom.startValue = dz.startValue;
+            }
+            else if (this.isValidDataZoomValue(dz.start)) {
+                this.lastValidDataZoom.start = dz.start;
+            }
+            if (this.isValidDataZoomValue(dz.endValue)) {
+                this.lastValidDataZoom.endValue = dz.endValue;
+            }
+            else if (this.isValidDataZoomValue(dz.end)) {
+                this.lastValidDataZoom.end = dz.end;
+            }
+        }
+    }
+    /**
+     * Get color by series name.
+     */
+    getSeriesColorBySeriesName(seriesName) {
+        return this.doGetSeriesColorBySeriesName(seriesName).color;
+    }
+    doGetSeriesColorBySeriesName(seriesName) {
+        const ecModel = this.internalGetModel();
+        const ecSeries = ecModel.getSeriesByName(seriesName);
+        if (ecSeries && ecSeries.length > 0) {
+            return { color: ecSeries[0].getData().getVisual('style')?.fill, altName: false };
+        }
+        let ret = { color: undefined, altName: false };
+        ecModel.eachRawSeries((seriesModel) => {
+            const idx = seriesModel.legendVisualProvider?.indexOfName(seriesName) ?? -1;
+            if (idx >= 0) {
+                ret = {
+                    color: seriesModel.legendVisualProvider.getItemVisual(idx, 'style')?.fill,
+                    altName: true
+                };
+            }
+        });
+        return ret;
+    }
+    applyColorsToCustomLegends() {
+        if (!this.showLegend() || !this.showCustomLegend()) {
+            return;
+        }
+        this.customLegend.forEach(cl => {
+            cl.customLegends.forEach(legendAxis => {
+                legendAxis?.list.forEach(legend => {
+                    const color = this.doGetSeriesColorBySeriesName(legend.name);
+                    legend.color = color.color;
+                    legend.alternativeNaming = color.altName;
+                });
+            });
+        });
+        this.cdRef.markForCheck();
+    }
+    handleUpdateAxisPointer(event) {
+        if (event.seriesIndex !== this.prevAxisPointer.seriesIndex ||
+            event.dataIndex !== this.prevAxisPointer.dataIndex) {
+            this.prevAxisPointer.seriesIndex = event.seriesIndex;
+            this.prevAxisPointer.dataIndex = event.dataIndex;
+            if (this.axisPointer() && event.seriesIndex === undefined) {
+                return;
+            }
+            // Due to chart updates outside Angular, we need to emit events back
+            // inside Angular to activate Angular's change detection.
+            this.ngZone.run(() => {
+                this.pointer.emit({
+                    seriesIndex: event.seriesIndex,
+                    dataIndex: event.dataIndex
+                });
+            });
+        }
+    }
+    /**
+     * Get current data zoom range.
+     */
+    getVisibleRange() {
+        return this.doGetVisibleRange(this.internalGetModel());
+    }
+    internalGetModel() {
+        return this.chart._model;
+    }
+    /**
+     * returns the current EChart options, w/o cloning anything. Be very careful
+     * not to change anything in the data structure in it.
+     */
+    getOptionNoClone() {
+        return this.internalGetModel().option;
+    }
+    parsePercent(percent, all) {
+        if (typeof percent === 'string') {
+            if (percent.match(/\d+%/)) {
+                return (parseFloat(percent) / 100) * all;
+            }
+            return parseFloat(percent);
+        }
+        return percent;
+    }
+    doGetVisibleRange(zoomModel) {
+        const effectiveOpts = zoomModel.option;
+        const xAxis = effectiveOpts.xAxis?.[0];
+        const dz = effectiveOpts.dataZoom[0];
+        const rangeStartArray = [];
+        const rangeEndArray = [];
+        for (let i = 0; i < effectiveOpts.xAxis?.length; i++) {
+            const axis = zoomModel.getComponent('xAxis', i);
+            const extent = axis?.axis?.scale?.getExtent();
+            if (extent?.length) {
+                if (this.isValidDataZoomValue(extent[0])) {
+                    rangeStartArray.push(extent[0]);
+                }
+                if (this.isValidDataZoomValue(extent[1])) {
+                    rangeEndArray.push(extent[1]);
+                }
+            }
+        }
+        const rangeStart = rangeStartArray.length ? Math.min(...rangeStartArray) : dz?.startValue;
+        const rangeEnd = rangeEndArray.length ? Math.max(...rangeEndArray) : dz?.endValue;
+        if (!this.isValidDataZoomValue(rangeEnd)) {
+            return;
+        }
+        let gridWidth;
+        if (effectiveOpts.grid && effectiveOpts.grid.length > 0) {
+            const width = this.chart.getWidth();
+            const grid = effectiveOpts.grid[0];
+            gridWidth =
+                width - this.parsePercent(grid.left, width) - this.parsePercent(grid.right, width);
+        }
+        return {
+            rangeType: xAxis.type,
+            rangeStart,
+            rangeEnd,
+            width: gridWidth,
+            autoZoomUpdate: this.autoZoomUpdate
+        };
+    }
+    updateEChart(force = false, options) {
+        if (!this.chart) {
+            return;
+        }
+        let axisDZUpdated = this.updateAxisAndDataZoom(options);
+        options ??= this.actualOptions;
+        const isFilledArray = (v) => Array.isArray(v) && v.length > 0;
+        if (isFilledArray(options.grid) &&
+            isFilledArray(options.xAxis) &&
+            isFilledArray(options.dataZoom)) {
+            // adjust grid for axis labels
+            let max = 0;
+            options.yAxis.forEach((axis) => {
+                if (axis.position !== 'right' && isFilledArray(axis.data)) {
+                    axis.data.forEach((label) => {
+                        const width = this.calculateTextWidth(label);
+                        max = Math.max(max, width);
+                    });
+                }
+            });
+            max += 16; // long text getting truncated, so add some padding
+            const grids = options.grid;
+            grids.forEach(g => (g.left = Math.max(g.left, max)));
+            // update dataZoom if not already set
+            const zoom = options.dataZoom[0];
+            if (!this.isValidDataZoomValue(zoom?.startValue) &&
+                !this.isValidDataZoomValue(zoom?.endValue) &&
+                !this.isValidDataZoomValue(zoom?.end)) {
+                const range = this.getVisibleRange();
+                if (range) {
+                    this.updateDataZoom({ startValue: range.rangeStart, endValue: range.rangeEnd });
+                }
+            }
+            // change in grid/axis requires a full update
+            force = true;
+            axisDZUpdated = true;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.chart.setOption(options, force);
+            this.setZoomMode();
+            if (axisDZUpdated && this.externalZoomSlider()) {
+                this.extZoomSliderChart.setOption(this.extZoomSliderOptions, false);
+            }
+        });
+        setTimeout(() => this.checkGridSizeChange());
+    }
+    updateAxisAndDataZoom(inOptions) {
+        const options = this.actualOptions;
+        if (!options.xAxis) {
+            return false;
+        }
+        const isFull = !inOptions || inOptions === options;
+        inOptions = inOptions ?? {};
+        if (!isFull && !inOptions.series && !options.dataZoom) {
+            return false;
+        }
+        const xAxis = Array.isArray(options.xAxis) ? options.xAxis : [options.xAxis];
+        if (!isFull && !inOptions.xAxis) {
+            // for delta update, make sure we have same-sized axis array
+            inOptions.xAxis = xAxis.map(() => ({}));
+        }
+        const minMax = this.getSeriesMinMax();
+        // extend range if DZ is bigger than actual data
+        const dz = inOptions?.dataZoom?.[0];
+        if (dz?.startValue != null &&
+            (minMax.min === undefined || dz.startValue < minMax.min)) {
+            minMax.min = dz.startValue;
+        }
+        if (dz?.endValue != null &&
+            (minMax.max === undefined || dz.endValue > minMax.max)) {
+            minMax.max = dz.endValue;
+        }
+        // Update all sub chart index to be controlled by the dataZoom
+        let xAxisIndexes = [];
+        xAxis.forEach((axis, index) => {
+            if (axis.gridIndex >= 0) {
+                // set min/max the same on all axis so that datazoom can work
+                axis.min = minMax.min;
+                axis.max = minMax.max;
+                if (!isFull) {
+                    inOptions.xAxis[index].min = minMax.min;
+                    inOptions.xAxis[index].max = minMax.max;
+                }
+                xAxisIndexes.push(index);
+            }
+        });
+        // update dataZoom
+        const effectiveOpts = this.getOptionNoClone();
+        const effectiveXAxis = effectiveOpts.xAxis;
+        if (effectiveXAxis.length > 1) {
+            // 1. find out all visible series
+            // 2. find out valid x index
+            // 3. remove invalid x axis from the xAxisIndex array
+            const validXAxis = this.getValidXAxis();
+            if (validXAxis) {
+                xAxisIndexes = xAxisIndexes.filter(index => validXAxis.has(index));
+            }
+        }
+        if (xAxisIndexes.length) {
+            const allDataZoom = options.dataZoom;
+            allDataZoom.forEach(zoom => (zoom.xAxisIndex = xAxisIndexes));
+            if (!isFull && inOptions.dataZoom) {
+                inOptions.dataZoom.forEach(zoom => (zoom.xAxisIndex = xAxisIndexes));
+            }
+        }
+        // update external slider if required
+        if (this.externalZoomSlider()) {
+            const extSliderAxis = this.extZoomSliderOptions.xAxis[0];
+            if (extSliderAxis.min !== minMax.min || extSliderAxis.max !== minMax.max) {
+                extSliderAxis.min = minMax.min;
+                extSliderAxis.max = minMax.max;
+                this.extZoomSliderOptions.series[0].data = [
+                    [minMax.min, null],
+                    [minMax.max, null]
+                ];
+            }
+        }
+        return true;
+    }
+    /**
+     * Send action to echart.
+     * @see https://echarts.apache.org/en/api.html#action
+     */
+    dispatchEChartAction(action) {
+        if (!this.chart) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.chart.dispatchAction(action);
+        });
+        this.cdRef.markForCheck();
+    }
+    getSeriesMinMax(visibleOnly = false) {
+        const legend = visibleOnly ? this.internalGetModel().getComponent('legend') : undefined;
+        let min;
+        let max;
+        this.actualOptions.series?.forEach(s => {
+            const seriesData = s.data;
+            if (seriesData?.length > 1 && (!legend || legend.isSelected(s.name))) {
+                const start = seriesData[0][0]?.valueOf();
+                const last = seriesData[seriesData.length - 1];
+                // end value is can be undefined sometimes, if we don't have milliseconds as a value, instead
+                // we have value[] array of Date, so to handle that scenario we are taking value[0].valueOf() to
+                // calculate the millisecond value i.e from Date(value[0])
+                const end = last[0]?.valueOf() ?? last.value?.[0]?.valueOf();
+                if (this.isValidDataZoomValue(start) && this.isValidDataZoomValue(end)) {
+                    if (min === undefined || start < min) {
+                        min = start;
+                    }
+                    if (max === undefined || end > max) {
+                        max = end;
+                    }
+                }
+            }
+        });
+        return { min, max };
+    }
+    calculateVisibleRange(range) {
+        const options = this.actualOptions;
+        if (!options.xAxis || !this.hasDataZoom() || !range) {
+            return;
+        }
+        if (!Array.isArray(options.xAxis) && options.xAxis.type === 'category') {
+            this.visibleRange.set(Math.ceil(range.rangeEnd) - Math.floor(range.rangeStart));
+        }
+        else {
+            this.visibleRange.set(Math.round(range.rangeEnd - range.rangeStart));
+        }
+        // once in range mode, disable the entries mode to prevent overriding the user
+        this.visibleEntries.set(-1);
+    }
+    getValueFromSeriesPoint(point) {
+        return Array.isArray(point) ? point : point.value;
+    }
+    calculateZoomStartValue() {
+        const options = this.actualOptions;
+        if (!options.series) {
+            return null;
+        }
+        const seriesData = options.series[this.autoZoomSeriesIndex()]?.data;
+        if (!seriesData) {
+            return null;
+        }
+        if (this.visibleEntries() > -1) {
+            const offset = Math.min(seriesData.length, this.visibleEntries());
+            const data = seriesData[seriesData.length - offset];
+            return data ? this.getValueFromSeriesPoint(data)[0] : null;
+        }
+        else if (this.visibleRange() > -1) {
+            const minMax = this.getSeriesMinMax(true);
+            if (minMax.min && minMax.max) {
+                // make sure startValue is >= the min data value
+                return Math.max(minMax.min, minMax.max - this.visibleRange());
+            }
+            const data = seriesData[seriesData.length - 1];
+            return data ? this.getValueFromSeriesPoint(data)[0] - this.visibleRange() : null;
+        }
+        return null;
+    }
+    hasData() {
+        return this.actualOptions.series?.some(s => s.data?.length > 0) ?? false;
+    }
+    /**
+     * Re-render the chart series data. This method should be called on series data changes.
+     */
+    refreshSeries(isLive = true, dzToSet) {
+        dzToSet ??= this.presetDataZoomRange;
+        const optionsToUpdate = {
+            series: this.actualOptions.series
+        };
+        if (!isLive) {
+            this.updateEChart(false, optionsToUpdate);
+            return;
+        }
+        if (this.hasDataZoom() && this.hasData()) {
+            if (dzToSet) {
+                this.dataZoomSetupDone = true;
+                const dz = this.getPresetDataZoom(dzToSet);
+                if (dz) {
+                    const requested = { ...dzToSet };
+                    this.presetDataZoomRange = undefined;
+                    this.updateDataZoom(dz, optionsToUpdate);
+                    // dispatch the same async. reasoning: the sync here is needed to prevent
+                    // flickering, the async dispatch to ensure a DataZoomEvent is fired so
+                    // that any consumer of this event work as expected
+                    setTimeout(() => {
+                        this.ngZone.runOutsideAngular(() => {
+                            this.requestedDataZoom = requested;
+                            this.handleDataZoom(dz, 'refreshSeries');
+                        });
+                    });
+                }
+            }
+            else if (!this.dataZoomSetupDone) {
+                // need to do this async to have the data in ECharts
+                setTimeout(() => {
+                    if (!this.dataZoomSetupDone && !this.dataZoomRange() && this.chart) {
+                        this.calculateVisibleRange(this.getVisibleRange());
+                    }
+                    this.dataZoomSetupDone = true;
+                });
+            }
+            else if (this.zoomSlider() && this.autoZoomUpdate && this.autoZoomSeriesIndex() !== -1) {
+                // this ensures the slider is at the end and the window size remains stable, showing new data
+                const startValue = this.calculateZoomStartValue();
+                if (this.isValidDataZoomValue(startValue)) {
+                    this.updateDataZoom({ startValue, end: 100 }, optionsToUpdate);
+                }
+                if (isLive) {
+                    this.dispatchEChartAction({ type: 'hideTip' });
+                }
+            }
+            else {
+                // this ensures the current displayed window stays stable as new data arrives
+                const dz = this.getOptionNoClone().dataZoom[0];
+                if (this.isValidDataZoomValue(dz.startValue) &&
+                    this.isValidDataZoomValue(dz.endValue) &&
+                    dz.end !== 100) {
+                    this.updateDataZoom({ startValue: dz.startValue, endValue: dz.endValue }, optionsToUpdate);
+                }
+            }
+        }
+        this.updateEChart(false, optionsToUpdate);
+    }
+    // this ensures DZ is in sync everywhere
+    updateDataZoom(dz, optionsToUpdate) {
+        const options = this.actualOptions;
+        if (options.dataZoom?.[0]) {
+            this.doUpdateDZ(dz, options.dataZoom[0]);
+        }
+        if (optionsToUpdate && optionsToUpdate !== options) {
+            if (Array.isArray(optionsToUpdate.dataZoom)) {
+                this.doUpdateDZ(dz, optionsToUpdate.dataZoom[0]);
+            }
+            else if (optionsToUpdate.dataZoom) {
+                this.doUpdateDZ(dz, optionsToUpdate.dataZoom);
+            }
+            else {
+                optionsToUpdate.dataZoom = [{ ...dz }];
+            }
+        }
+        if (this.externalZoomSlider()) {
+            this.doUpdateDZ(dz, this.extZoomSliderOptions.dataZoom[0]);
+        }
+    }
+    doUpdateDZ(dz, dzOptions) {
+        // make sure only to have value or percent
+        if (this.isValidDataZoomValue(dz.startValue)) {
+            dzOptions.startValue = dz.startValue;
+            dzOptions.start = undefined;
+        }
+        else if (this.isValidDataZoomValue(dz.start)) {
+            dzOptions.start = dz.start;
+            dzOptions.startValue = undefined;
+        }
+        if (this.isValidDataZoomValue(dz.endValue)) {
+            dzOptions.endValue = dz.endValue;
+            dzOptions.end = undefined;
+        }
+        else if (this.isValidDataZoomValue(dz.end)) {
+            dzOptions.end = dz.end;
+            dzOptions.endValue = undefined;
+        }
+    }
+    applyStyles() {
+        const bodyStyle = window.getComputedStyle(document.body);
+        const options = this.actualOptions;
+        options.textStyle = {
+            fontFamily: navigator.webdriver ? 'sans-serif' : bodyStyle.fontFamily,
+            fontSize: bodyStyle.fontSize
+        };
+        this.extZoomSliderOptions.textStyle = options.textStyle;
+    }
+    addLegendItem(name, visible, index = 0, gridIndex = 0, customLegendProp, seriesSymbol) {
+        const options = this.actualOptions;
+        if (!options.legend?.length) {
+            return;
+        }
+        const legend = options.legend[options.legend.length > index ? index : 0];
+        const unitText = customLegendProp ? customLegendProp.unit : undefined;
+        const customLegendItem = {
+            name: '',
+            displayName: '',
+            color: '',
+            selected: false,
+            tooltip: customLegendProp ? customLegendProp.tooltip : '',
+            symbol: this.getPath(seriesSymbol, false)
+        };
+        legend.data?.push({
+            name,
+            icon: this.getPath(seriesSymbol, true)
+        });
+        legend.selected ??= {};
+        if (visible !== null && visible !== undefined) {
+            legend.selected[name] = visible;
+            customLegendItem.selected = visible;
+        }
+        const showCustomLegend = this.showCustomLegend();
+        if (this.showLegend() && showCustomLegend) {
+            if (visible !== false) {
+                customLegendItem.selected = true;
+            }
+            customLegendItem.name = name;
+            customLegendItem.displayName = customLegendProp?.displayName ?? name;
+            if (showCustomLegend) {
+                this.addCustomLegend(customLegendItem, unitText, index, gridIndex);
+            }
+        }
+        this.cdRef.markForCheck();
+    }
+    getPath(seriesSymbol, prefix) {
+        const path = seriesSymbol ? this.shapePaths[seriesSymbol] : this.shapePaths.circle;
+        return prefix ? 'path://' + path : path;
+    }
+    addCustomLegend(customLegendItem, unitText, index, gridIndex = 0) {
+        if (this.actualOptions.legend) {
+            if (!this.customLegend[gridIndex].customLegends) {
+                this.customLegend[gridIndex].customLegends = [
+                    { list: [], unit: '' },
+                    { list: [], unit: '' }
+                ];
+            }
+            // index = 0 means left legend
+            if (index === 0) {
+                if (!this.customLegend[gridIndex]?.customLegends[0]?.list) {
+                    this.customLegend[gridIndex].customLegends[0] = { list: [customLegendItem] };
+                }
+                else {
+                    // legend with same id and name not found
+                    this.customLegend[gridIndex].customLegends[0].list.push(customLegendItem);
+                }
+                this.customLegend[gridIndex].customLegends[0].unit = unitText;
+            }
+            else {
+                // index = 1 means right legend
+                if (!this.customLegend[gridIndex]?.customLegends[1]?.list) {
+                    this.customLegend[gridIndex].customLegends[1] = { list: [customLegendItem] };
+                }
+                else {
+                    this.customLegend[gridIndex].customLegends[1].list.push(customLegendItem);
+                }
+                this.customLegend[gridIndex].customLegends[1].unit = unitText;
+            }
+            this.applyCustomLegendPosition();
+        }
+    }
+    /**
+     * Show loading indicator.
+     */
+    startProgressIndication() {
+        this.inProgress.set(true);
+    }
+    /**
+     * Hide loading indicator.
+     */
+    stopProgressIndication() {
+        this.inProgress.set(false);
+    }
+    /**
+     * Set the data zoom range for the chart in milliseconds.
+     * As an example one hour is the value 3600000.
+     */
+    setTimeRange(range) {
+        const currentDZ = this.getVisibleRange();
+        const minMax = this.getSeriesMinMax(true);
+        if (!currentDZ || minMax.min == null || minMax.max == null) {
+            return;
+        }
+        const mid = (currentDZ.rangeStart + currentDZ.rangeEnd) / 2;
+        const halfRange = range / 2;
+        let start;
+        let end;
+        if (range === 0 || range > minMax.max - minMax.min) {
+            start = minMax.min;
+            end = minMax.max;
+        }
+        else {
+            start = mid - halfRange;
+            end = mid + halfRange;
+            // at start
+            if (start < minMax.min) {
+                start = minMax.min;
+                end = start + range;
+            }
+            // at end. Special case: if already at end, keep end
+            if (end > minMax.max || currentDZ.rangeEnd === minMax.max) {
+                start = minMax.max - range;
+                end = minMax.max;
+            }
+        }
+        this.dispatchEChartAction({ type: 'dataZoom', startValue: start, endValue: end });
+    }
+    addDataInternal(series) {
+        const options = this.actualOptions;
+        series.forEach(update => {
+            const currentSeries = options.series[update.index];
+            if (!currentSeries) {
+                return;
+            }
+            const seriesData = currentSeries.data;
+            seriesData.push(update.data);
+            if (this.maxEntries() > 0 && seriesData.length > this.maxEntries()) {
+                seriesData.splice(0, seriesData.length - this.maxEntries());
+            }
+        });
+        this.refreshSeries();
+    }
+    getPresetDataZoom(range) {
+        let ret;
+        if (range.visibleWidth && this.autoZoomSeriesIndex() !== -1) {
+            this.visibleRange.set(range.visibleWidth);
+            const startValue = this.calculateZoomStartValue();
+            if (this.isValidDataZoomValue(startValue)) {
+                this.autoZoomUpdate = true;
+                ret = { startValue, end: 100 };
+            }
+        }
+        else if (this.isValidDataZoomValue(range.startValue) &&
+            this.isValidDataZoomValue(range.endValue)) {
+            // handling the case when startValue and endValue is given as a fixed time interval
+            ret = {
+                startValue: range.startValue,
+                endValue: range.endValue
+            };
+            this.autoZoomUpdate = false;
+        }
+        else {
+            ret = { ...range };
+        }
+        return ret;
+    }
+    checkGridSizeChange() {
+        if (!this.chart) {
+            return;
+        }
+        const gridRectNew = this.internalGetModel()?.getComponent('grid')?.coordinateSystem?._rect;
+        if (gridRectNew) {
+            const nativeWrapper = this.chartContainerWrapper().nativeElement;
+            gridRectNew.containerWidth = nativeWrapper.offsetWidth;
+            gridRectNew.containerHeight = nativeWrapper.offsetHeight;
+            let isGridResized = false;
+            for (const objKey of Object.keys(this.gridCoordinates)) {
+                if (this.gridSizeItemChanged(gridRectNew[objKey], this.gridCoordinates[objKey])) {
+                    isGridResized = true;
+                    break;
+                }
+            }
+            if (isGridResized) {
+                // update new coordinates and emit event
+                this.gridCoordinates = gridRectNew;
+                this.timeBarLeft.set(this.gridCoordinates.x);
+                this.timeBarRight.set(this.gridCoordinates.containerWidth - this.gridCoordinates.x - this.gridCoordinates.width);
+                if (this.externalZoomSlider() && Array.isArray(this.extZoomSliderOptions?.grid)) {
+                    this.extZoomSliderOptions.grid[0].left = this.timeBarLeft();
+                    this.extZoomSliderOptions.grid[0].right = this.timeBarRight();
+                    this.extZoomSliderChart.setOption({ grid: this.extZoomSliderOptions.grid }, false);
+                }
+                this.ngZone.run(() => this.chartGridResized.emit(this.gridCoordinates));
+            }
+        }
+        this.cdRef.markForCheck();
+    }
+    gridSizeItemChanged(a, b) {
+        return Array.isArray(a)
+            ? a.length !== b.length || a.some((item, index) => item !== b[index])
+            : a !== b;
+    }
+    setContainerHeight() {
+        const newHeight = parseInt(this.eChartContainerHeight(), 10) || null;
+        if (newHeight !== this.containerHeight()) {
+            this.containerHeight.set(newHeight);
+            this.ngZone.runOutsideAngular(() => {
+                this.chart?.resize({ width: this.curWidth, height: newHeight ?? this.curHeight });
+                if (this.externalZoomSlider()) {
+                    this.extZoomSliderChart.resize();
+                }
+            });
+        }
+    }
+    updateCustomLegendMultiLineInfo() {
+        const event = [];
+        this.siCustomLegend().forEach((legend, index) => {
+            event.push({
+                customLegendId: index,
+                isCustomLegendMultilined: legend.customLegendContainer().nativeElement.offsetHeight > 20
+            });
+        });
+        if (event.length !== this.customLegendsMultiLineInfo.length ||
+            event.some((e, index) => e.isCustomLegendMultilined !==
+                this.customLegendsMultiLineInfo[index].isCustomLegendMultilined)) {
+            this.customLegendsMultiLineInfo = event;
+            this.customLegendMultiLineInfoEvent.emit(event);
+        }
+        this.cdRef.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiChartBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiChartBaseComponent, isStandalone: true, selector: "si-chart-base", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, additionalOptions: { classPropertyName: "additionalOptions", publicName: "additionalOptions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showCustomLegend: { classPropertyName: "showCustomLegend", publicName: "showCustomLegend", isSignal: true, isRequired: false, transformFunction: null }, renderer: { classPropertyName: "renderer", publicName: "renderer", isSignal: true, isRequired: false, transformFunction: null }, zoomSlider: { classPropertyName: "zoomSlider", publicName: "zoomSlider", isSignal: true, isRequired: false, transformFunction: null }, zoomSliderShadow: { classPropertyName: "zoomSliderShadow", publicName: "zoomSliderShadow", isSignal: true, isRequired: false, transformFunction: null }, zoomSliderRealtime: { classPropertyName: "zoomSliderRealtime", publicName: "zoomSliderRealtime", isSignal: true, isRequired: false, transformFunction: null }, zoomSliderBrush: { classPropertyName: "zoomSliderBrush", publicName: "zoomSliderBrush", isSignal: true, isRequired: false, transformFunction: null }, zoomInside: { classPropertyName: "zoomInside", publicName: "zoomInside", isSignal: true, isRequired: false, transformFunction: null }, maxEntries: { classPropertyName: "maxEntries", publicName: "maxEntries", isSignal: true, isRequired: false, transformFunction: null }, visibleEntries: { classPropertyName: "visibleEntries", publicName: "visibleEntries", isSignal: true, isRequired: false, transformFunction: null }, visibleRange: { classPropertyName: "visibleRange", publicName: "visibleRange", isSignal: true, isRequired: false, transformFunction: null }, autoZoomSeriesIndex: { classPropertyName: "autoZoomSeriesIndex", publicName: "autoZoomSeriesIndex", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, themeCustomization: { classPropertyName: "themeCustomization", publicName: "themeCustomization", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, axisPointer: { classPropertyName: "axisPointer", publicName: "axisPointer", isSignal: true, isRequired: false, transformFunction: null }, dataZoomRange: { classPropertyName: "dataZoomRange", publicName: "dataZoomRange", isSignal: true, isRequired: false, transformFunction: null }, dataZoomMinValueSpan: { classPropertyName: "dataZoomMinValueSpan", publicName: "dataZoomMinValueSpan", isSignal: true, isRequired: false, transformFunction: null }, dataZoomMaxValueSpan: { classPropertyName: "dataZoomMaxValueSpan", publicName: "dataZoomMaxValueSpan", isSignal: true, isRequired: false, transformFunction: null }, dataZoomFilterMode: { classPropertyName: "dataZoomFilterMode", publicName: "dataZoomFilterMode", isSignal: true, isRequired: false, transformFunction: null }, customLegendAction: { classPropertyName: "customLegendAction", publicName: "customLegendAction", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null }, eChartContainerHeight: { classPropertyName: "eChartContainerHeight", publicName: "eChartContainerHeight", isSignal: true, isRequired: false, transformFunction: null }, externalZoomSlider: { classPropertyName: "externalZoomSlider", publicName: "externalZoomSlider", isSignal: true, isRequired: false, transformFunction: null }, externalXAxisFormatter: { classPropertyName: "externalXAxisFormatter", publicName: "externalXAxisFormatter", isSignal: true, isRequired: false, transformFunction: null }, showTimeRangeBar: { classPropertyName: "showTimeRangeBar", publicName: "showTimeRangeBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showLegend: "showLegendChange", visibleEntries: "visibleEntriesChange", visibleRange: "visibleRangeChange", dataZoom: "dataZoom", pointer: "pointer", selectionChanged: "selectionChanged", chartSeriesClick: "chartSeriesClick", chartGridResized: "chartGridResized", customLegendMultiLineInfoEvent: "customLegendMultiLineInfoEvent", timeRangeChange: "timeRangeChange" }, host: { listeners: { "window:theme-switch": "themeSwitch()" } }, viewQueries: [{ propertyName: "chartContainerWrapper", first: true, predicate: ["chartContainerWrapper"], descendants: true, isSignal: true }, { propertyName: "chartContainer", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "externalZoomSliderContainer", first: true, predicate: ["externalZoomSlider"], descendants: true, isSignal: true }, { propertyName: "siCustomLegend", predicate: ["siCustomLegend"], descendants: true, read: SiCustomLegendComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiChartBaseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-base', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], changeDetection: ChangeDetectionStrategy.Eager, host: {
+                        '(window:theme-switch)': 'themeSwitch()'
+                    }, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"] }]
+        }], propDecorators: { chartContainerWrapper: [{ type: i0.ViewChild, args: ['chartContainerWrapper', { isSignal: true }] }], chartContainer: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], externalZoomSliderContainer: [{ type: i0.ViewChild, args: ['externalZoomSlider', { isSignal: true }] }], siCustomLegend: [{ type: i0.ViewChildren, args: ['siCustomLegend', { ...{
+                            read: SiCustomLegendComponent
+                        }, isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], additionalOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalOptions", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }, { type: i0.Output, args: ["showLegendChange"] }], showCustomLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomLegend", required: false }] }], renderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderer", required: false }] }], zoomSlider: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomSlider", required: false }] }], zoomSliderShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomSliderShadow", required: false }] }], zoomSliderRealtime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomSliderRealtime", required: false }] }], zoomSliderBrush: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomSliderBrush", required: false }] }], zoomInside: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomInside", required: false }] }], maxEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxEntries", required: false }] }], visibleEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleEntries", required: false }] }, { type: i0.Output, args: ["visibleEntriesChange"] }], visibleRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleRange", required: false }] }, { type: i0.Output, args: ["visibleRangeChange"] }], autoZoomSeriesIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoZoomSeriesIndex", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], themeCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeCustomization", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], axisPointer: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisPointer", required: false }] }], dataZoomRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataZoomRange", required: false }] }], dataZoomMinValueSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataZoomMinValueSpan", required: false }] }], dataZoomMaxValueSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataZoomMaxValueSpan", required: false }] }], dataZoomFilterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataZoomFilterMode", required: false }] }], customLegendAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "customLegendAction", required: false }] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }], eChartContainerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "eChartContainerHeight", required: false }] }], externalZoomSlider: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalZoomSlider", required: false }] }], externalXAxisFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalXAxisFormatter", required: false }] }], showTimeRangeBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimeRangeBar", required: false }] }], dataZoom: [{ type: i0.Output, args: ["dataZoom"] }], pointer: [{ type: i0.Output, args: ["pointer"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], chartSeriesClick: [{ type: i0.Output, args: ["chartSeriesClick"] }], chartGridResized: [{ type: i0.Output, args: ["chartGridResized"] }], customLegendMultiLineInfoEvent: [{ type: i0.Output, args: ["customLegendMultiLineInfoEvent"] }], timeRangeChange: [{ type: i0.Output, args: ["timeRangeChange"] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiChartBaseComponent, themeElement, themeSupport };
+//# sourceMappingURL=spike-rabbit-charts-ng-common.mjs.map