@siemens/charts-ng 47.6.0

package/fesm2022/siemens-charts-ng.mjs

@@ -0,0 +1,3576 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component, viewChild, input, output, viewChildren, model, signal, inject, ChangeDetectorRef, NgZone, HostListener, booleanAttribute, LOCALE_ID, computed, SimpleChange, NgModule } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { BarChart, CandlestickChart, CustomChart, GaugeChart, HeatmapChart, LineChart, PieChart, ScatterChart, SankeyChart, SunburstChart } from 'echarts/charts';
+import { AxisPointerComponent, BrushComponent, DataZoomInsideComponent, DataZoomSliderComponent, DatasetComponent, GridComponent, LegendComponent, LegendScrollComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, PolarComponent, SingleAxisComponent, TitleComponent, ToolboxComponent, TooltipComponent, VisualMapComponent } from 'echarts/components';
+import * as echarts from 'echarts/core';
+export { echarts };
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+echarts.use([
+    // components
+    AxisPointerComponent,
+    BrushComponent,
+    DataZoomInsideComponent,
+    DataZoomSliderComponent,
+    DatasetComponent,
+    GridComponent,
+    LegendComponent,
+    LegendScrollComponent,
+    MarkAreaComponent,
+    MarkLineComponent,
+    MarkPointComponent,
+    PolarComponent,
+    SingleAxisComponent,
+    TitleComponent,
+    ToolboxComponent,
+    TooltipComponent,
+    VisualMapComponent,
+    // chart types
+    BarChart,
+    CandlestickChart,
+    CustomChart,
+    GaugeChart,
+    HeatmapChart,
+    LineChart,
+    PieChart,
+    ScatterChart,
+    SankeyChart,
+    SunburstChart,
+    // renderers
+    CanvasRenderer,
+    SVGRenderer
+]);
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * 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
+                ? (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 elementBase0 = getProp(style, '--element-base-0');
+        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
+            },
+            color: colorPalettes.default,
+            gradientColor: gradientColors.default,
+            backgroundColor: 'transparent',
+            animationDuration: 700,
+            title: {
+                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,
+                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: {
+                    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: {
+                    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
+                    },
+                    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'
+            },
+            pie: {
+                label: {
+                    fontFamily,
+                    formatter: '{d}%',
+                    color: elementTextSecondary,
+                    lineHeight,
+                    fontSize
+                },
+                labelLine: {
+                    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: elementBase0,
+                    value: elementTextPrimary,
+                    unit: elementUi3,
+                    defaultColor: elementUi0
+                }
+            }
+        };
+    }
+};
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * 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 Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiChartLoadingSpinnerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: SiChartLoadingSpinnerComponent, isStandalone: true, selector: "si-chart-loading-spinner", ngImport: i0, template: "<div class=\"loading\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n    <g>\n      <path d=\"M256,156a16,16,0,0,1-16-16V80a16,16,0,0,1,32,0v60A16,16,0,0,1,256,156Z\" />\n      <path\n        d=\"M314.78,175.1a16,16,0,0,1-3.54-22.35l35.27-48.54A16,16,0,1,1,372.39,123l-35.26,48.54A16,16,0,0,1,314.78,175.1Z\"\n      />\n      <path\n        d=\"M351.11,225.1a16,16,0,0,1,10.27-20.16l57.06-18.54a16,16,0,1,1,9.89,30.43l-57.06,18.54A16,16,0,0,1,351.11,225.1Z\"\n      />\n      <path\n        d=\"M351.11,286.9a16,16,0,0,1,20.16-10.27l57.06,18.54a16,16,0,1,1-9.89,30.43l-57.06-18.54A16,16,0,0,1,351.11,286.9Z\"\n      />\n      <path\n        d=\"M314.78,336.9a16,16,0,0,1,22.35,3.54L372.39,389a16,16,0,1,1-25.88,18.81l-35.27-48.54A16,16,0,0,1,314.78,336.9Z\"\n      />\n      <path d=\"M256,356a16,16,0,0,1,16,16v60a16,16,0,0,1-32,0V372A16,16,0,0,1,256,356Z\" />\n      <path\n        d=\"M197.22,336.9a16,16,0,0,1,3.54,22.35l-35.27,48.54A16,16,0,1,1,139.61,389l35.26-48.54A16,16,0,0,1,197.22,336.9Z\"\n      />\n      <path\n        d=\"M160.89,286.9a16,16,0,0,1-10.27,20.16L93.56,325.6a16,16,0,0,1-9.89-30.43l57.06-18.54A16,16,0,0,1,160.89,286.9Z\"\n      />\n      <path\n        d=\"M160.89,225.1a16,16,0,0,1-20.16,10.27L83.67,216.83a16,16,0,1,1,9.89-30.43l57.06,18.54A16,16,0,0,1,160.89,225.1Z\"\n      />\n      <path\n        d=\"M197.22,175.1a16,16,0,0,1-22.35-3.54L139.61,123a16,16,0,1,1,25.88-18.81l35.27,48.54A16,16,0,0,1,197.22,175.1Z\"\n      />\n    </g>\n  </svg>\n</div>\n", styles: ["@keyframes spinner-fade{0%{opacity:1}to{opacity:.05}}.loading{display:block;text-align:center}svg{inline-size:var(--loading-spinner-size, 64px);block-size:var(--loading-spinner-size, 64px)}path{fill:var(--element-ui-2, #656a6f);animation:spinner-fade 1s infinite linear}path:nth-child(1){animation-delay:0s;opacity:1}path:nth-child(2){animation-delay:.1s;opacity:.9}path:nth-child(3){animation-delay:.2s;opacity:.8}path:nth-child(4){animation-delay:.3s;opacity:.7}path:nth-child(5){animation-delay:.4s;opacity:.6}path:nth-child(6){animation-delay:.5s;opacity:.5}path:nth-child(7){animation-delay:.6s;opacity:.4}path:nth-child(8){animation-delay:.7s;opacity:.3}path:nth-child(9){animation-delay:.8s;opacity:.2}path:nth-child(10){animation-delay:.9s;opacity:.1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartLoadingSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loading\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n    <g>\n      <path d=\"M256,156a16,16,0,0,1-16-16V80a16,16,0,0,1,32,0v60A16,16,0,0,1,256,156Z\" />\n      <path\n        d=\"M314.78,175.1a16,16,0,0,1-3.54-22.35l35.27-48.54A16,16,0,1,1,372.39,123l-35.26,48.54A16,16,0,0,1,314.78,175.1Z\"\n      />\n      <path\n        d=\"M351.11,225.1a16,16,0,0,1,10.27-20.16l57.06-18.54a16,16,0,1,1,9.89,30.43l-57.06,18.54A16,16,0,0,1,351.11,225.1Z\"\n      />\n      <path\n        d=\"M351.11,286.9a16,16,0,0,1,20.16-10.27l57.06,18.54a16,16,0,1,1-9.89,30.43l-57.06-18.54A16,16,0,0,1,351.11,286.9Z\"\n      />\n      <path\n        d=\"M314.78,336.9a16,16,0,0,1,22.35,3.54L372.39,389a16,16,0,1,1-25.88,18.81l-35.27-48.54A16,16,0,0,1,314.78,336.9Z\"\n      />\n      <path d=\"M256,356a16,16,0,0,1,16,16v60a16,16,0,0,1-32,0V372A16,16,0,0,1,256,356Z\" />\n      <path\n        d=\"M197.22,336.9a16,16,0,0,1,3.54,22.35l-35.27,48.54A16,16,0,1,1,139.61,389l35.26-48.54A16,16,0,0,1,197.22,336.9Z\"\n      />\n      <path\n        d=\"M160.89,286.9a16,16,0,0,1-10.27,20.16L93.56,325.6a16,16,0,0,1-9.89-30.43l57.06-18.54A16,16,0,0,1,160.89,286.9Z\"\n      />\n      <path\n        d=\"M160.89,225.1a16,16,0,0,1-20.16,10.27L83.67,216.83a16,16,0,1,1,9.89-30.43l57.06,18.54A16,16,0,0,1,160.89,225.1Z\"\n      />\n      <path\n        d=\"M197.22,175.1a16,16,0,0,1-22.35-3.54L139.61,123a16,16,0,1,1,25.88-18.81l35.27,48.54A16,16,0,0,1,197.22,175.1Z\"\n      />\n    </g>\n  </svg>\n</div>\n", styles: ["@keyframes spinner-fade{0%{opacity:1}to{opacity:.05}}.loading{display:block;text-align:center}svg{inline-size:var(--loading-spinner-size, 64px);block-size:var(--loading-spinner-size, 64px)}path{fill:var(--element-ui-2, #656a6f);animation:spinner-fade 1s infinite linear}path:nth-child(1){animation-delay:0s;opacity:1}path:nth-child(2){animation-delay:.1s;opacity:.9}path:nth-child(3){animation-delay:.2s;opacity:.8}path:nth-child(4){animation-delay:.3s;opacity:.7}path:nth-child(5){animation-delay:.4s;opacity:.6}path:nth-child(6){animation-delay:.5s;opacity:.5}path:nth-child(7){animation-delay:.6s;opacity:.4}path:nth-child(8){animation-delay:.7s;opacity:.3}path:nth-child(9){animation-delay:.8s;opacity:.2}path:nth-child(10){animation-delay:.9s;opacity:.1}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiCustomLegendComponent {
+    /** @internal */
+    customLegendContainer = viewChild.required('customLegendContainer');
+    customLegend = input();
+    title = input();
+    subTitle = input();
+    titleColor = input();
+    subTitleColor = input();
+    textColor = input();
+    legendIconClickEvent = output();
+    legendClickEvent = output();
+    legendHoverStartEvent = output();
+    legendHoverEndEvent = output();
+    legendIconClick(legend) {
+        legend.selected = !legend.selected;
+        this.legendIconClickEvent.emit(legend);
+    }
+    legendClick(legend) {
+        legend.selected = !legend.selected;
+        this.legendClickEvent.emit(legend);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCustomLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiCustomLegendComponent, isStandalone: true, selector: "si-custom-legend", inputs: { customLegend: { classPropertyName: "customLegend", publicName: "customLegend", 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 }, titleColor: { classPropertyName: "titleColor", publicName: "titleColor", isSignal: true, isRequired: false, transformFunction: null }, subTitleColor: { classPropertyName: "subTitleColor", publicName: "subTitleColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { legendIconClickEvent: "legendIconClickEvent", legendClickEvent: "legendClickEvent", legendHoverStartEvent: "legendHoverStartEvent", legendHoverEndEvent: "legendHoverEndEvent" }, viewQueries: [{ propertyName: "customLegendContainer", first: true, predicate: ["customLegendContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (customLegend() && customLegend()?.customLegends) {\n  <div #customLegendContainer class=\"legend-container si-body-2\">\n    @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n      @if (legendIndex === 0 && leg && leg.list && leg.list.length > 0) {\n        <div\n          class=\"left-legends legend-item-container\"\n          [class.legend-empty]=\"\n            customLegend()?.legendAxis !== 'left' && customLegend()?.legendAxis !== 'both'\n          \"\n          [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n          [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n        >\n          <div\n            class=\"both-scenario-left-unit-container\"\n            [class.left-scenario-unit-container]=\"customLegend()?.legendAxis === 'left'\"\n          >\n            <span class=\"text-secondary\">{{ leg.unit }}</span>\n          </div>\n          <div\n            class=\"legend-item-container both-scenario-legend-container custom-legend-left\"\n            [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n          >\n            @for (legendItem of leg.list; track legendItem.name) {\n              <div class=\"legend-item\" [class.hidden-legend]=\"!legendItem.selected\">\n                <div\n                  class=\"me-2 mb-2\"\n                  (click)=\"legendIconClick(legendItem)\"\n                  (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n                  (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n                >\n                  <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n                  </svg>\n                </div>\n                <span\n                  class=\"legend-text text-truncate\"\n                  [style.color]=\"textColor()\"\n                  (click)=\"legendClick(legendItem)\"\n                  (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n                  (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n                >\n                  {{ legendItem.displayName }}\n                </span>\n                @if (legendItem.tooltip) {\n                  <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n                    <div class=\"tooltip-arrow\"></div>\n                    <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    }\n\n    @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n      @if (legendIndex === 1 && leg && leg.list && leg.list.length > 0) {\n        <div\n          class=\"right-legends legend-item-container\"\n          [class.legend-empty]=\"\n            customLegend()?.legendAxis !== 'right' && customLegend()?.legendAxis !== 'both'\n          \"\n          [class.legend-single-axis]=\"customLegend()?.legendAxis === 'right'\"\n          [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n        >\n          <div\n            class=\"legend-item-container custom-legend-right legend-item-container-right-floating-inner\"\n          >\n            @for (legendItem of leg.list; track legendItem.name) {\n              <div\n                class=\"legend-item legend-item-right\"\n                [class.hidden-legend]=\"!legendItem.selected\"\n              >\n                <span\n                  class=\"legend-text text-truncate\"\n                  [style.color]=\"textColor()\"\n                  (click)=\"legendClick(legendItem)\"\n                >\n                  {{ legendItem.displayName }}\n                </span>\n                <div class=\"right-legend-circle\" (click)=\"legendIconClick(legendItem)\">\n                  <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n                  </svg>\n                </div>\n                @if (legendItem.tooltip) {\n                  <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n                    <div class=\"tooltip-arrow\"></div>\n                    <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n          <div\n            class=\"both-scenario-right-unit-container\"\n            [class.right-scenario-unit-container]=\"customLegend()?.legendAxis === 'right'\"\n          >\n            <span class=\"right-unit-text text-secondary\">{{ leg.unit }}</span>\n          </div>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [":host{--flex-dir1: row;--flex-dir2: row-reverse;margin:12px;display:flex;flex-direction:column}:host-context(:dir(rtl)){--flex-dir1: row-reverse;--flex-dir2: row}:host-context([dir=rtl]){--flex-dir1: row-reverse;--flex-dir2: row}.legend-container{display:flex;flex-direction:var(--flex-dir1);max-height:40px;flex:1 1 auto}.legend-item-container{width:50%;vertical-align:top;display:flex;flex-wrap:wrap;flex:1 1 100%;flex-direction:var(--flex-dir1);height:fit-content;max-height:40px;max-width:50%;min-width:50%;overflow-y:auto;scrollbar-width:thin}.legend-item-container::-webkit-scrollbar{width:4px;height:6px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container::-webkit-scrollbar-thumb{border-radius:12px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.legend-item-container::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:12px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container .custom-legend-left{flex-direction:var(--flex-dir1);flex:1 1 50%}.legend-item-container .custom-legend-right{flex-direction:var(--flex-dir2);flex:1 1 50%}.legend-item-container-right-floating-inner{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-right:12px;float:left}.legend-single-axis{max-width:100%;min-width:100%}.legend-empty{width:0%}.tooltip{display:none;max-width:375px;word-break:break-word;margin-top:16px;inset-block-start:0;margin-inline-start:-6px}.tooltip-arrow{left:12px}.legend-item{cursor:pointer;margin-right:8px;display:flex;flex-direction:var(--flex-dir1);align-items:center;height:20px;position:initial;width:calc(100% - 12px);max-width:fit-content}.legend-item:hover .tooltip{display:block}.legend-item-right{margin-right:0;margin-left:12px}.right-legend-circle{margin-right:0;margin-left:4px}.legend-text{box-sizing:inherit;display:inline;cursor:pointer}.hidden-legend .right-legend-circle,.hidden-legend div:first-child,.hidden-legend .legend-text{opacity:.4}.both-scenario-left-unit-container,.both-scenario-right-unit-container{min-width:32px;max-width:32px;overflow:hidden}.both-scenario-right-unit-container{max-height:100%}.both-scenario-left-unit-container{min-height:100%}.both-scenario-legend-container{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-left:12px}.right-unit-text{min-width:100%;min-height:100%;padding-left:2px}.left-legends{padding-right:36px}.right-legends{padding-left:28px}.both-legend-container{padding-right:0;padding-left:0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiCustomLegendComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-custom-legend', template: "@if (customLegend() && customLegend()?.customLegends) {\n  <div #customLegendContainer class=\"legend-container si-body-2\">\n    @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n      @if (legendIndex === 0 && leg && leg.list && leg.list.length > 0) {\n        <div\n          class=\"left-legends legend-item-container\"\n          [class.legend-empty]=\"\n            customLegend()?.legendAxis !== 'left' && customLegend()?.legendAxis !== 'both'\n          \"\n          [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n          [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n        >\n          <div\n            class=\"both-scenario-left-unit-container\"\n            [class.left-scenario-unit-container]=\"customLegend()?.legendAxis === 'left'\"\n          >\n            <span class=\"text-secondary\">{{ leg.unit }}</span>\n          </div>\n          <div\n            class=\"legend-item-container both-scenario-legend-container custom-legend-left\"\n            [class.legend-single-axis]=\"customLegend()?.legendAxis === 'left'\"\n          >\n            @for (legendItem of leg.list; track legendItem.name) {\n              <div class=\"legend-item\" [class.hidden-legend]=\"!legendItem.selected\">\n                <div\n                  class=\"me-2 mb-2\"\n                  (click)=\"legendIconClick(legendItem)\"\n                  (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n                  (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n                >\n                  <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n                  </svg>\n                </div>\n                <span\n                  class=\"legend-text text-truncate\"\n                  [style.color]=\"textColor()\"\n                  (click)=\"legendClick(legendItem)\"\n                  (mouseenter)=\"legendHoverStartEvent.emit(legendItem)\"\n                  (mouseleave)=\"legendHoverEndEvent.emit(legendItem)\"\n                >\n                  {{ legendItem.displayName }}\n                </span>\n                @if (legendItem.tooltip) {\n                  <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n                    <div class=\"tooltip-arrow\"></div>\n                    <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    }\n\n    @for (leg of customLegend()?.customLegends; track legendIndex; let legendIndex = $index) {\n      @if (legendIndex === 1 && leg && leg.list && leg.list.length > 0) {\n        <div\n          class=\"right-legends legend-item-container\"\n          [class.legend-empty]=\"\n            customLegend()?.legendAxis !== 'right' && customLegend()?.legendAxis !== 'both'\n          \"\n          [class.legend-single-axis]=\"customLegend()?.legendAxis === 'right'\"\n          [class.both-legend-container]=\"customLegend()?.legendAxis === 'both'\"\n        >\n          <div\n            class=\"legend-item-container custom-legend-right legend-item-container-right-floating-inner\"\n          >\n            @for (legendItem of leg.list; track legendItem.name) {\n              <div\n                class=\"legend-item legend-item-right\"\n                [class.hidden-legend]=\"!legendItem.selected\"\n              >\n                <span\n                  class=\"legend-text text-truncate\"\n                  [style.color]=\"textColor()\"\n                  (click)=\"legendClick(legendItem)\"\n                >\n                  {{ legendItem.displayName }}\n                </span>\n                <div class=\"right-legend-circle\" (click)=\"legendIconClick(legendItem)\">\n                  <svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path [attr.d]=\"legendItem.symbol\" [attr.fill]=\"legendItem.color\" />\n                  </svg>\n                </div>\n                @if (legendItem.tooltip) {\n                  <div class=\"tooltip show bs-tooltip-bottom\" role=\"tooltip\">\n                    <div class=\"tooltip-arrow\"></div>\n                    <div class=\"tooltip-inner\">{{ legendItem.tooltip }}</div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n          <div\n            class=\"both-scenario-right-unit-container\"\n            [class.right-scenario-unit-container]=\"customLegend()?.legendAxis === 'right'\"\n          >\n            <span class=\"right-unit-text text-secondary\">{{ leg.unit }}</span>\n          </div>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [":host{--flex-dir1: row;--flex-dir2: row-reverse;margin:12px;display:flex;flex-direction:column}:host-context(:dir(rtl)){--flex-dir1: row-reverse;--flex-dir2: row}:host-context([dir=rtl]){--flex-dir1: row-reverse;--flex-dir2: row}.legend-container{display:flex;flex-direction:var(--flex-dir1);max-height:40px;flex:1 1 auto}.legend-item-container{width:50%;vertical-align:top;display:flex;flex-wrap:wrap;flex:1 1 100%;flex-direction:var(--flex-dir1);height:fit-content;max-height:40px;max-width:50%;min-width:50%;overflow-y:auto;scrollbar-width:thin}.legend-item-container::-webkit-scrollbar{width:4px;height:6px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container::-webkit-scrollbar-thumb{border-radius:12px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.legend-item-container::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:12px;background-color:var(--element-base-0, #f0f2f5)}.legend-item-container .custom-legend-left{flex-direction:var(--flex-dir1);flex:1 1 50%}.legend-item-container .custom-legend-right{flex-direction:var(--flex-dir2);flex:1 1 50%}.legend-item-container-right-floating-inner{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-right:12px;float:left}.legend-single-axis{max-width:100%;min-width:100%}.legend-empty{width:0%}.tooltip{display:none;max-width:375px;word-break:break-word;margin-top:16px;inset-block-start:0;margin-inline-start:-6px}.tooltip-arrow{left:12px}.legend-item{cursor:pointer;margin-right:8px;display:flex;flex-direction:var(--flex-dir1);align-items:center;height:20px;position:initial;width:calc(100% - 12px);max-width:fit-content}.legend-item:hover .tooltip{display:block}.legend-item-right{margin-right:0;margin-left:12px}.right-legend-circle{margin-right:0;margin-left:4px}.legend-text{box-sizing:inherit;display:inline;cursor:pointer}.hidden-legend .right-legend-circle,.hidden-legend div:first-child,.hidden-legend .legend-text{opacity:.4}.both-scenario-left-unit-container,.both-scenario-right-unit-container{min-width:32px;max-width:32px;overflow:hidden}.both-scenario-right-unit-container{max-height:100%}.both-scenario-left-unit-container{min-height:100%}.both-scenario-legend-container{max-width:calc(100% - 32px);min-width:calc(100% - 32px);padding-left:12px}.right-unit-text{min-width:100%;min-height:100%;padding-left:2px}.left-legends{padding-right:36px}.right-legends{padding-left:28px}.both-legend-container{padding-right:0;padding-left:0}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiChartComponent {
+    /**
+     * reference to the wrapper container. Used for setting scroll position, etc.
+     *
+     * @defaultValue
+     * ```
+     * viewChild.required<ElementRef>('chartContainerWrapper')
+     * ```
+     */
+    chartContainerWrapper = viewChild.required('chartContainerWrapper');
+    chartContainer = viewChild('chart');
+    externalZoomSliderContainer = viewChild('externalZoomSlider');
+    siCustomLegend = viewChildren('siCustomLegend', {
+        read: SiCustomLegendComponent
+    });
+    /**
+     * See [ECharts 5.x Documentation]{@link https://echarts.apache.org/en/option.html}
+     * for all available options.
+     */
+    options = input();
+    /** Used to override specific properties set in `options`. */
+    additionalOptions = input();
+    title = input();
+    subTitle = input();
+    /** @defaultValue true */
+    showLegend = model(true);
+    /** @defaultValue false */
+    showCustomLegend = input(false);
+    /**
+     * the renderer to use: canvas or svg
+     *
+     * @defaultValue 'canvas'
+     */
+    renderer = input('canvas');
+    /**
+     * Enables the zoom slider below the chart.
+     *
+     * @defaultValue false
+     */
+    zoomSlider = input(false);
+    /**
+     * Shows data shadow in dataZoom slider, use together with `zoomSlider`.
+     *
+     * @defaultValue true
+     */
+    zoomSliderShadow = input(true);
+    /**
+     * realtime update mode for zoom slider
+     *
+     * @defaultValue true
+     */
+    zoomSliderRealtime = input(true);
+    /**
+     * enable brush mode for zoom slider
+     *
+     * @defaultValue true
+     */
+    zoomSliderBrush = input(true);
+    /**
+     * Enables zooming inside the chart with the mouse wheel/touch.
+     *
+     * @defaultValue false
+     */
+    zoomInside = input(false);
+    /** @defaultValue 1000 */
+    maxEntries = input(1000);
+    /**
+     * No auto dataZoom update) by default. Use together with `autoZoomSeriesIndex`.
+     *
+     * @defaultValue -1
+     */
+    visibleEntries = model(-1);
+    /**
+     * No auto dataZoom update) by default. Use together with `autoZoomSeriesIndex`.
+     *
+     * @defaultValue -1
+     */
+    visibleRange = model(-1);
+    /**
+     * No auto dataZoom update) by default. Use together with `visibleEntries`.
+     *
+     * @defaultValue -1
+     */
+    autoZoomSeriesIndex = input(-1);
+    /** The desired theme to load. */
+    theme = input();
+    /** Used to override specific options of loaded `theme`. */
+    themeCustomization = input();
+    /**
+     * The name of the color palette (if any) of the loaded `theme`.
+     *
+     * @defaultValue undefined
+     */
+    palette = input();
+    /**
+     * Used to display `axisPointer` line either by click or mouse-move.
+     *
+     * @defaultValue false
+     */
+    axisPointer = input(false);
+    dataZoomRange = input();
+    dataZoomMinValueSpan = input();
+    dataZoomMaxValueSpan = input();
+    /** @defaultValue 'none' */
+    dataZoomFilterMode = input('none');
+    customLegendAction = input();
+    /**
+     * @defaultValue
+     * ```
+     * { legendItemName: '' }
+     * ```
+     */
+    selectedItem = input({ legendItemName: '' });
+    eChartContainerHeight = input();
+    /**
+     * Flag to use external zoom slider
+     *
+     * @defaultValue false
+     */
+    externalZoomSlider = input(false);
+    /** External XAxis Formatter from consumer */
+    externalXAxisFormatter = input();
+    /**
+     * 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);
+    /** Event emitted when data zoom changes. */
+    dataZoom = output();
+    /** Event emitted when axis pointer moves. */
+    pointer = output();
+    selectionChanged = output();
+    chartSeriesClick = output();
+    /** Event emitted when chart grid is resized. */
+    chartGridResized = output();
+    customLegendMultiLineInfoEvent = output();
+    /** Emitted when datazoom 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);
+    backgroundColor = signal('');
+    textColor = signal('');
+    titleColor = signal('');
+    subTitleColor = signal('');
+    selectedSeriesColors = {};
+    unselectedSeriesColors = {};
+    seriesSelectionState = {};
+    containerHeight = signal(null);
+    activeTheme;
+    autoZoomUpdate = true;
+    subscriptions = new Subscription();
+    prevAxisPointer = {};
+    lastValidDataZoom = {};
+    presetDataZoomRange;
+    dataZoomSetupDone = false;
+    requestedDataZoom;
+    measureCanvas;
+    cdRef = inject(ChangeDetectorRef);
+    curWidth = 0;
+    curHeight = 0;
+    timeBarBottom = signal(50);
+    timeBarLeft = signal(32);
+    timeBarRight = signal(32);
+    timeBarHeight = signal(32);
+    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);
+    ngZone = inject(NgZone);
+    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 "Siemens Sans"';
+        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.subscriptions.unsubscribe();
+        this.disposeChart();
+    }
+    /**
+     * Re-render the whole chart.
+     */
+    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) {
+            this.modifyTopAlignment('noTitle');
+        }
+    }
+    modifyTopAlignment(key) {
+        const options = this.actualOptions;
+        if (options.grid) {
+            const gridOptions = this.getThemeCustomValue([key, 'grid'], {});
+            echarts.util.merge(options.grid, gridOptions, true);
+        }
+        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: 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 = 0;
+        let end = 0;
+        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: "19.0.6", ngImport: i0, type: SiChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiChartComponent, isStandalone: true, selector: "si-chart", 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": "resetChart()" } }, 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\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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: { resetChart: [{
+                type: HostListener,
+                args: ['window:theme-switch']
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiChartCartesianComponent extends SiChartComponent {
+    series = input();
+    subChartGrids = input();
+    yAxis = input();
+    xAxis = input();
+    tooltipFormatter = input();
+    /**
+     * Used to display the chart as a stacked one.
+     *
+     * @defaultValue false
+     */
+    stacked = input(false);
+    /** Enable or disable brush zoom mode */
+    zoomMode = input();
+    // Used to toggle different chart types
+    ngOnChanges(changes) {
+        if (changes.zoomMode) {
+            this.setZoomMode();
+        }
+        if (changes.stacked) {
+            changes.forceAll = changes.stacked;
+        }
+        if (changes.subChartGrids) {
+            changes.forceAll = changes.subChartGrids;
+        }
+        super.ngOnChanges(changes);
+    }
+    formatTooltip(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
+                    ? (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 += this.getSeriesMarkerSvg(name);
+            html += `<span style="margin-inline: 4px 8px">${name}</span>`;
+            html += `<span style="margin-inline-start: auto">${value}</span>`;
+            html += '</div>';
+        }
+        return html;
+    }
+    /**
+     * Get the series marker svg by series name.
+     */
+    getSeriesMarkerSvg(seriesName) {
+        const seriesValue = this.actualOptions.series;
+        let sym;
+        if (seriesValue) {
+            sym = this.getSeriesMarker(seriesName);
+            const symbol = this.shapePaths[sym];
+            const color = this.getSeriesColorBySeriesName(seriesName);
+            return `<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+                  <path  d="${symbol}" fill="${color}"  />
+            </svg>`;
+        }
+        return '';
+    }
+    /**
+     * Get the series marker by series name.
+     */
+    getSeriesMarker(seriesName) {
+        const seriesValue = this.actualOptions.series;
+        if (seriesValue) {
+            const seriesMarker = seriesValue.find(ser => ser.name === seriesName);
+            if (seriesMarker && 'symbol' in seriesMarker) {
+                return seriesMarker.symbol;
+            }
+        }
+        return 'circle';
+    }
+    afterChartInit(skipZoom) {
+        super.afterChartInit(skipZoom);
+        if (this.zoomMode()) {
+            this.setZoomMode();
+        }
+    }
+    setZoomMode() {
+        this.dispatchEChartAction({
+            type: 'takeGlobalCursor',
+            key: 'dataZoomSelect',
+            dataZoomSelectActive: this.zoomMode()
+        });
+    }
+    getValidXAxis() {
+        const validXAxis = new Set();
+        this.series()?.forEach(series => {
+            if (series.visible !== false && series.xAxisIndex !== undefined) {
+                validXAxis.add(series.xAxisIndex);
+            }
+        });
+        return validXAxis;
+    }
+    applyOptions() {
+        this.actualOptions = {
+            series: [],
+            xAxis: this.xAxis(),
+            grid: this.getGrid(),
+            yAxis: this.yAxis(),
+            toolbox: {
+                showTitle: false,
+                itemSize: 0,
+                feature: {
+                    dataZoom: {
+                        filterMode: 'none',
+                        xAxisIndex: 'all',
+                        yAxisIndex: false,
+                        icon: {
+                            zoom: 'image://',
+                            back: 'image://'
+                        }
+                    }
+                }
+            },
+            legend: [
+                {
+                    data: []
+                },
+                {
+                    data: []
+                }
+            ],
+            tooltip: {
+                trigger: 'axis'
+            }
+        };
+        const tooltipFormatter = this.tooltipFormatter();
+        if (tooltipFormatter) {
+            this.actualOptions.tooltip.formatter = tooltipFormatter;
+        }
+        else if (this.hasDifferentMarker()) {
+            this.actualOptions.tooltip.formatter = this.formatTooltip.bind(this);
+        }
+        const yAxis = this.yAxis();
+        const yAxisArray = Array.isArray(yAxis) ? yAxis : yAxis ? [yAxis] : [];
+        const numRight = yAxisArray.reduce((acc, cur) => acc + (cur.position === 'right' ? 1 : 0), 0);
+        const numLeft = yAxisArray.length - numRight;
+        const legendLeftOptions = this.getThemeCustomValue(['legendLeft'], {});
+        const legendRightOptions = this.getThemeCustomValue(['legendRight'], {});
+        let leftUnitText;
+        let rightUnitText;
+        const legends = this.actualOptions.legend;
+        if (numLeft && numRight) {
+            echarts.util.merge(legends[0], legendLeftOptions, true);
+            echarts.util.merge(legends[1], legendRightOptions, true);
+        }
+        else if (Array.isArray(this.yAxis()) && numLeft) {
+            echarts.util.merge(legends[0], { left: legendLeftOptions.left }, true);
+        }
+        else if (numRight) {
+            echarts.util.merge(legends[1], { right: legendRightOptions.right }, true);
+        }
+        const subChartGrids = this.subChartGrids();
+        if (subChartGrids) {
+            if (subChartGrids.length !== this.customLegend.length) {
+                const diff = subChartGrids.length - this.customLegend.length;
+                if (diff < 0) {
+                    this.customLegend.length = subChartGrids.length;
+                }
+                else {
+                    for (let i = 0; i < diff; i++) {
+                        // Add default custom legends for all grids
+                        const cl = {
+                            customLegends: [
+                                { list: [], unit: '' },
+                                { list: [], unit: '' }
+                            ],
+                            legendAxis: 'both'
+                        };
+                        this.customLegend.push(cl);
+                    }
+                }
+            }
+            const margin = 16;
+            // calculate custom legend positions from top according to subcharts.
+            for (let i = 0; i < subChartGrids.length; i++) {
+                if (i === 0) {
+                    this.customLegend[i].top = 0;
+                }
+                else {
+                    const prevGrid = subChartGrids[i - 1];
+                    const subChartTop = prevGrid.top ?? 0;
+                    const subChartHeight = prevGrid.height ?? 0;
+                    this.customLegend[i].top = subChartTop + subChartHeight + margin;
+                }
+            }
+        }
+        const seriesValue = this.series();
+        if (seriesValue) {
+            const optionSeries = this.actualOptions.series;
+            seriesValue.forEach(series => {
+                const s = Object.assign({
+                    stack: this.stacked()
+                }, series);
+                if (s.type === 'line' && s.area) {
+                    delete s.area;
+                    s.areaStyle = {};
+                }
+                else {
+                    s.areaStyle ??= null;
+                }
+                delete s.visible;
+                if ('symbol' in series && !this.shapePaths[series.symbol]) {
+                    s.symbol = 'circle';
+                }
+                optionSeries.push(s);
+                if (this.showLegend() && series.name) {
+                    let legendIndex = 0;
+                    const axis = yAxisArray[series.yAxisIndex ?? 0];
+                    if (axis && axis.position === 'right') {
+                        legendIndex = 1;
+                    }
+                    let customLegendProp;
+                    if (this.showCustomLegend()) {
+                        // get left and right axis units from axis array
+                        if (axis && (axis.show === undefined || axis.show)) {
+                            if ((!leftUnitText || leftUnitText !== axis.name) && axis.position === 'left') {
+                                if (axis.name != null) {
+                                    // axis.name is the same property name which eChart uses to display axis title,
+                                    // hence in case of custom legends units were shown at two places i.e. at axis
+                                    // title as well as custom legend unit section. Thus changing the property name
+                                    // to customLegendUnit only in case custom legends are used.
+                                    axis.customLegendUnit = axis.name;
+                                }
+                                if (axis.customLegendUnit != null) {
+                                    leftUnitText = axis.customLegendUnit;
+                                }
+                            }
+                            else if ((!rightUnitText || rightUnitText !== axis.name) &&
+                                axis.position === 'right') {
+                                if (axis.name != null) {
+                                    // axis.name is the same property name which eChart uses to display axis title,
+                                    // hence in case of custom legends units were shown at two places i.e. at axis
+                                    // title as well as custom legend unit section. Thus changing the property name
+                                    // to customLegendUnit only in case custom legends are used.
+                                    axis.customLegendUnit = axis.name;
+                                }
+                                if (axis.customLegendUnit != null) {
+                                    rightUnitText = axis.customLegendUnit;
+                                }
+                            }
+                            delete axis.name;
+                        }
+                        const unitText = axis.position === 'right' ? rightUnitText : leftUnitText;
+                        customLegendProp = {
+                            displayName: s.displayName,
+                            tooltip: s.customLegendToolTip,
+                            unit: unitText
+                        };
+                    }
+                    // As we have only 1 xAxis per sub chart, xAxisIndex equals grid index.
+                    const seriesSymbol = 'symbol' in s ? s.symbol : 'circle';
+                    this.addLegendItem(series.name, series.visible, legendIndex, series.xAxisIndex, customLegendProp, seriesSymbol);
+                }
+            });
+        }
+        this.applyTitles();
+        if (this.externalZoomSlider()) {
+            this.extZoomSliderOptions.legend = this.actualOptions.legend;
+        }
+    }
+    hasDifferentMarker() {
+        const seriesValue = this.series();
+        return !!seriesValue?.some(series => 'symbol' in series && series.symbol !== 'circle');
+    }
+    getGrid() {
+        const subChartGrids = this.subChartGrids();
+        if (subChartGrids) {
+            subChartGrids.forEach(g => (g.containLabel = false));
+            return subChartGrids;
+        }
+        return {};
+    }
+    refreshSeries(isLive = true, dzToSet) {
+        const seriesValue = this.series();
+        if (!seriesValue) {
+            return;
+        }
+        const optionSeries = this.actualOptions.series;
+        seriesValue.forEach((series, i) => {
+            optionSeries[i].data = series.data;
+        });
+        super.refreshSeries(isLive, dzToSet);
+    }
+    hasData() {
+        return this.series()?.some(s => s.visible !== false && s.data && s.data.length > 0) ?? false;
+    }
+    handleSelectionChanged(event) {
+        if (event?.selected) {
+            this.series()?.forEach(series => (series.visible = event.selected[series.name] !== false));
+        }
+        super.handleSelectionChanged(event);
+    }
+    /**
+     * Update single chart data entry.
+     */
+    addData(index, data) {
+        this.addDataInternal([{ index, data }]);
+    }
+    /**
+     * Append charts data entries to the end of the series.
+     */
+    addDataMulti(series) {
+        this.addDataInternal(series);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartCartesianComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiChartCartesianComponent, isStandalone: true, selector: "si-chart-cartesian", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, subChartGrids: { classPropertyName: "subChartGrids", publicName: "subChartGrids", isSignal: true, isRequired: false, transformFunction: null }, yAxis: { classPropertyName: "yAxis", publicName: "yAxis", isSignal: true, isRequired: false, transformFunction: null }, xAxis: { classPropertyName: "xAxis", publicName: "xAxis", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormatter: { classPropertyName: "tooltipFormatter", publicName: "tooltipFormatter", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, zoomMode: { classPropertyName: "zoomMode", publicName: "zoomMode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartCartesianComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-cartesian', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiChartCircleComponent extends SiChartComponent {
+    series = input();
+    applyOptions() {
+        this.actualOptions = {
+            series: [],
+            legend: [
+                {
+                    data: []
+                }
+            ],
+            tooltip: {
+                trigger: 'item',
+                confine: true
+            }
+        };
+        const optionSeries = this.actualOptions.series;
+        const offset = !this.showCustomLegend() && this.subTitle()
+            ? this.getThemeCustomValue(['subTitle', 'legend', 'top'], 0)
+            : 0;
+        const top = 32 + offset;
+        this.series()?.forEach(series => {
+            const s = Object.assign({ type: 'pie', top }, series);
+            optionSeries.push(s);
+            if (this.showLegend()) {
+                series.data.forEach(data => {
+                    if (data.name) {
+                        this.addLegendItem(data.name);
+                    }
+                });
+            }
+        });
+        this.applyTitles();
+    }
+    applyDataZoom() { }
+    /**
+     * Update single value of the circle chart.
+     */
+    changeSingleValue(index, valueIndex, value) {
+        const optionSeries = this.actualOptions.series;
+        const series = optionSeries[index].data;
+        series[valueIndex].value = value;
+        this.updateEChart();
+    }
+    /**
+     * Update multiple values of the circle chart.
+     */
+    changeMultiValues(updateValues) {
+        const optionSeries = this.actualOptions.series;
+        updateValues.forEach(update => {
+            const currentSeries = optionSeries[update.seriesIndex].data;
+            if (!currentSeries) {
+                return;
+            }
+            currentSeries[update.valueIndex].value = update.value;
+        });
+        this.updateEChart();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiChartCircleComponent, isStandalone: true, selector: "si-chart-circle", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartCircleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-circle', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiChartGaugeComponent extends SiChartComponent {
+    /** @defaultValue 0 */
+    minValue = input(0);
+    /** @defaultValue 100 */
+    maxValue = input(100);
+    /** @defaultValue 0 */
+    value = input(0);
+    splitSteps = input();
+    /** @defaultValue true */
+    responsiveSplitSteps = input(true);
+    /** @defaultValue '%' */
+    unit = input('%');
+    /** @defaultValue false */
+    unitsOnSplit = input(false);
+    /**
+     * Custom formatter for axis labels and value.
+     * Takes precedence when specified, i.e. number of decimals, unit etc needs
+     * to be set by the user using this formatter.
+     */
+    labelFormatter = input();
+    /**
+     * Sets the number of decimals.
+     * @deprecated Use `minNumberOfDecimals` and `maxNumberOfDecimals` instead.
+     * @defaultValue undefined */
+    numberOfDecimals = input();
+    /**
+     * Min number of decimals.
+     * @defaultValue 0
+     */
+    minNumberOfDecimals = input(0);
+    /**
+     * Max number of decimals.
+     * @defaultValue 0
+     */
+    maxNumberOfDecimals = input(0);
+    /**
+     * Number of decimals on the axis.
+     * @defaultValue 0
+     */
+    axisNumberOfDecimals = input(0);
+    /** @defaultValue false */
+    hideAxisLabels = input(false, { transform: booleanAttribute });
+    /**
+     * Segments on the arc from 0 (implicit) to 1 (explicit)
+     * E.g. 0.2 means from 0 to 0.2 of the possible range (maxValue - minValue)
+     *
+     * @defaultValue [0.2, 0.8, 1]
+     */
+    segments = input([0.2, 0.8, 1]);
+    /**
+     * Colors for the defined segments.
+     * If there are less colors then segments, the colors will be repeated. Defaults to the standard color palette
+     */
+    colors = input();
+    locale = inject(LOCALE_ID).toString();
+    actualMinNumberOfDecimals = computed(() => this.numberOfDecimals() ?? this.minNumberOfDecimals());
+    actualMaxNumberOfDecimals = computed(() => this.numberOfDecimals() ?? this.maxNumberOfDecimals());
+    numberFormat = computed(() => {
+        const minDecimals = this.actualMinNumberOfDecimals();
+        return new Intl.NumberFormat(this.locale, {
+            minimumFractionDigits: minDecimals,
+            maximumFractionDigits: Math.max(minDecimals, this.actualMaxNumberOfDecimals())
+        });
+    });
+    axisNumberFormat = computed(() => {
+        const decimals = this.axisNumberOfDecimals();
+        return new Intl.NumberFormat(this.locale, {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals
+        });
+    });
+    afterChartInit() {
+        super.afterChartInit();
+        this.applyOptions();
+        this.updateColors();
+        this.refreshSeries();
+    }
+    updateColors() {
+        // gauge doesn't respect color palette, it needs a bit convincing
+        const effectiveOpts = this.getOptionNoClone();
+        const colors = this.colors() ?? effectiveOpts.color;
+        const hasIndicator = !!this.segments().length;
+        let newColors;
+        if (hasIndicator) {
+            newColors = this.segments().map((threshold, index) => {
+                const color = colors[index % colors.length];
+                return [threshold, color];
+            });
+        }
+        else {
+            const colorsValue = this.colors();
+            const dataColor = colorsValue?.length
+                ? colorsValue[0]
+                : this.getThemeCustomValue(['gauge', 'defaultColor'], colors[0]);
+            newColors = [[1, dataColor]];
+        }
+        if (hasIndicator) {
+            this.setAxisLineColor(newColors, this.actualOptions.series[0].axisLine);
+        }
+        this.actualOptions.series[0].axisLine.show = hasIndicator;
+        this.setAxisLineColor(newColors, this.actualOptions.series[2].axisLine);
+        this.refreshSeries();
+    }
+    setAxisLineColor(colors, axisLine) {
+        axisLine.lineStyle = axisLine.lineStyle ?? {};
+        axisLine.lineStyle.color = colors;
+    }
+    getResponsiveConfig() {
+        const marginY = 12;
+        const maxHeight = this.curHeight - marginY;
+        const dim = Math.min(this.curWidth / 2, maxHeight);
+        const top = dim < maxHeight ? this.curHeight / 2 + dim / 2 : maxHeight;
+        if (dim < 150) {
+            const splits = dim < 100 ? 1 : 4;
+            const axisLabelDist = dim < 100 ? -6 : 0;
+            return {
+                outerRadius: dim - 4,
+                center: ['50%', top],
+                progressWidth: 8,
+                indicatorWidth: 1,
+                gap: 2,
+                splits,
+                axisLabelDist,
+                axisFontSize: 12,
+                valueFontSize: 18,
+                unitFontSize: 12
+            };
+        }
+        if (dim < 200) {
+            return {
+                outerRadius: dim - 7,
+                center: ['50%', top],
+                progressWidth: 14,
+                indicatorWidth: 3,
+                gap: 3,
+                splits: 6,
+                axisLabelDist: 12,
+                axisFontSize: 16,
+                valueFontSize: 30,
+                unitFontSize: 14
+            };
+        }
+        return {
+            outerRadius: dim - 12,
+            center: ['50%', top],
+            progressWidth: 24,
+            indicatorWidth: 4,
+            gap: 5,
+            splits: 0,
+            axisLabelDist: 20,
+            axisFontSize: 20,
+            valueFontSize: 48,
+            unitFontSize: 16
+        };
+    }
+    calcValue(value) {
+        // workaround for bug in echarts
+        if (value === this.minValue()) {
+            return value + 0.0001;
+        }
+        return value;
+    }
+    axisLabelFormatter = (value) => {
+        const formatted = this.axisNumberFormat().format(Number(value));
+        return this.unitsOnSplit() ? `${formatted} ${this.unit()}` : formatted;
+    };
+    applyOptions() {
+        const resp = this.getResponsiveConfig();
+        const hasIndicator = !!this.segments().length;
+        const splitNumber = this.responsiveSplitSteps() && resp.splits ? resp.splits : this.splitSteps();
+        const grey = this.getThemeCustomValue(['gauge', 'grey'], '#F0F2F5');
+        const axisColor = this.getThemeCustomValue(['gauge', 'unit'], '#656A6F');
+        const indicator = {
+            type: 'gauge',
+            radius: resp.outerRadius - resp.progressWidth - resp.gap,
+            startAngle: 180,
+            endAngle: 0,
+            min: this.minValue(),
+            max: this.maxValue(),
+            center: resp.center,
+            axisLine: {
+                show: hasIndicator,
+                lineStyle: { width: resp.indicatorWidth }
+            },
+            axisTick: {
+                length: 0,
+                splitNumber: 1,
+                lineStyle: {
+                    width: 2,
+                    color: axisColor
+                }
+            },
+            splitLine: {
+                length: 0,
+                lineStyle: {
+                    width: 1,
+                    color: axisColor
+                }
+            },
+            axisLabel: { show: false }
+        };
+        const labelDistance = resp.axisLabelDist + (hasIndicator ? resp.indicatorWidth + resp.gap : 0);
+        const shade = {
+            type: 'gauge',
+            radius: resp.outerRadius,
+            startAngle: 180,
+            endAngle: 0,
+            min: this.minValue(),
+            max: this.maxValue(),
+            splitNumber,
+            axisTick: { show: false },
+            splitLine: { show: false },
+            title: { show: false },
+            center: resp.center,
+            axisLine: {
+                lineStyle: {
+                    width: resp.progressWidth,
+                    opacity: 0.6,
+                    color: [[1, grey]]
+                }
+            },
+            axisLabel: {
+                show: !this.hideAxisLabels(),
+                distance: labelDistance,
+                color: axisColor,
+                fontSize: resp.axisFontSize,
+                formatter: this.labelFormatter() ?? this.axisLabelFormatter
+            }
+        };
+        const data = {
+            type: 'gauge',
+            silent: false,
+            radius: resp.outerRadius,
+            startAngle: 180,
+            endAngle: 0,
+            min: this.minValue(),
+            max: this.maxValue(),
+            splitNumber,
+            progress: {
+                show: true,
+                itemStyle: { color: 'auto' },
+                width: resp.progressWidth
+            },
+            emphasis: {
+                // This code is added to avoid flickering when the progress is hovered and
+                // when mouse effects are enabled with `silent: false` flag. The issue occurs
+                // because of the progress.itemStyle.color is set to `auto` which tries to
+                // calculate the color dynamically and it conflicts with the mouse hover action
+                // which tries to apply the hover style
+                itemStyle: { color: 'auto' }
+            },
+            pointer: {
+                show: true,
+                length: '0%',
+                itemStyle: {
+                    color: 'auto',
+                    opacity: 0.001
+                }
+            },
+            center: resp.center,
+            axisLine: {
+                show: false,
+                lineStyle: { opacity: 0.6 }
+            },
+            axisTick: { show: false },
+            splitLine: { show: false },
+            axisLabel: { show: false },
+            title: { show: false },
+            detail: {
+                offsetCenter: [0, -0.5 * resp.valueFontSize],
+                valueAnimation: true,
+                formatter: this.valueFormatter(),
+                rich: {
+                    value: {
+                        fontSize: resp.valueFontSize,
+                        lineHeight: resp.valueFontSize,
+                        fontWeight: 'bolder'
+                    },
+                    unit: {
+                        fontSize: resp.unitFontSize,
+                        lineHeight: resp.unitFontSize,
+                        padding: [0, 0, (resp.unitFontSize - resp.valueFontSize) / 2, 0]
+                    }
+                }
+            },
+            data: [{ value: this.calcValue(this.value()) }]
+        };
+        const series = [indicator, shade, data];
+        this.showLegend.set(false);
+        this.actualOptions.series = series;
+        this.applyTitles();
+    }
+    valueFormatter() {
+        return (this.labelFormatter() ??
+            ((value) => {
+                const formattedValue = this.numberFormat().format(value);
+                const unit = this.unit();
+                const formattedUnit = unit
+                    ? unit.length > 5
+                        ? `\n{unit|${unit}}`
+                        : ` {unit|${unit}}`
+                    : '';
+                return `{value|${formattedValue}}${formattedUnit}`;
+            }));
+    }
+    ngOnChanges(changes) {
+        if (this.chart && (changes.palette || changes.colors || changes.segments)) {
+            this.updateColors();
+        }
+        changes.forceAll = new SimpleChange(false, true, false);
+        super.ngOnChanges(changes);
+    }
+    applyDataZoom() { }
+    afterChartResize() {
+        this.applyOptions();
+        this.refreshSeries();
+    }
+    /**
+     * Update gauge chart value.
+     */
+    setValue(value) {
+        const optionSeries = this.actualOptions.series;
+        optionSeries[2].data[0].value = this.calcValue(value);
+        this.refreshSeries();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartGaugeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiChartGaugeComponent, isStandalone: true, selector: "si-chart-gauge", inputs: { minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, splitSteps: { classPropertyName: "splitSteps", publicName: "splitSteps", isSignal: true, isRequired: false, transformFunction: null }, responsiveSplitSteps: { classPropertyName: "responsiveSplitSteps", publicName: "responsiveSplitSteps", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, unitsOnSplit: { classPropertyName: "unitsOnSplit", publicName: "unitsOnSplit", isSignal: true, isRequired: false, transformFunction: null }, labelFormatter: { classPropertyName: "labelFormatter", publicName: "labelFormatter", isSignal: true, isRequired: false, transformFunction: null }, numberOfDecimals: { classPropertyName: "numberOfDecimals", publicName: "numberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, minNumberOfDecimals: { classPropertyName: "minNumberOfDecimals", publicName: "minNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, maxNumberOfDecimals: { classPropertyName: "maxNumberOfDecimals", publicName: "maxNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, axisNumberOfDecimals: { classPropertyName: "axisNumberOfDecimals", publicName: "axisNumberOfDecimals", isSignal: true, isRequired: false, transformFunction: null }, hideAxisLabels: { classPropertyName: "hideAxisLabels", publicName: "hideAxisLabels", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartGaugeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-gauge', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiChartProgressComponent extends SiChartComponent {
+    series = input();
+    /**
+     * How big the data can get in degrees.
+     *
+     * @defaultValue 220
+     */
+    dataAngle = input(220);
+    // item width in % radius
+    itemWidth;
+    // item gap in % radius
+    itemGap;
+    // base radius of an item
+    baseRadius = 98;
+    sizeFactor;
+    // placement chart in % on canvas
+    center;
+    // color of disabled part of item
+    grey;
+    // where the data starts. not very intuitive:
+    // 0° is at 3 o'clock, goes counterclockwise, but series drawing goes clockwise
+    startAngle;
+    afterChartInit() {
+        this.chart.on('legendselectchanged', (params) => {
+            this.updateRadius(params.selected);
+            this.updateEChart();
+        });
+    }
+    themeChanged() {
+        this.applyOptions();
+    }
+    handleSelectionChanged(event) {
+        super.handleSelectionChanged(event);
+        this.updateRadius(event.selected);
+        this.updateEChart();
+    }
+    applyOptions() {
+        this.actualOptions = {
+            series: [],
+            legend: [
+                {
+                    data: []
+                }
+            ]
+        };
+        const dataAngle = this.dataAngle();
+        this.startAngle = dataAngle === 360 ? 90 : 270 - (360 - dataAngle) / 2;
+        this.itemWidth = this.getThemeCustomValue(['progress', 'itemWidth'], 6);
+        this.itemGap = this.getThemeCustomValue(['progress', 'itemGap'], 6);
+        this.grey = this.getThemeCustomValue(['progress', 'grey'], '#E6E6E6');
+        // a factor to change the size of base radius and center related to
+        // dataAngle proportionately
+        this.sizeFactor = 1 - Math.sin((((this.dataAngle() - 180) / 2) * Math.PI) / 180);
+        this.center = 50 + 25 * this.sizeFactor;
+        const seriesValue = this.series();
+        if (seriesValue) {
+            seriesValue.forEach(series => {
+                this.addSeries(series.name, series.percent);
+                if (this.showLegend()) {
+                    this.addLegendItem(series.name);
+                }
+            });
+        }
+        this.applyTitles();
+    }
+    labelFormatter(p) {
+        return p.seriesName + '\n' + Math.round((100 / this.dataAngle()) * p.value) + ' %';
+    }
+    addSeries(name, percent) {
+        const optionSeries = this.actualOptions.series;
+        const index = optionSeries.length;
+        const offset = !this.showCustomLegend() && this.subTitle()
+            ? this.getThemeCustomValue(['subTitle', 'legend', 'top'], 0)
+            : 0;
+        const top = !this.sizeFactor ? 32 + offset : Math.floor(offset / 2);
+        const bottom = !this.sizeFactor ? undefined : -offset;
+        const item = {
+            top,
+            bottom,
+            center: ['50%', this.center + '%'],
+            name,
+            type: 'pie',
+            colorBy: 'series',
+            radius: this.calculateRadius(index),
+            avoidLabelOverlap: false,
+            tooltip: { show: false },
+            startAngle: this.startAngle,
+            label: {
+                show: false,
+                formatter: p => this.labelFormatter(p),
+                position: 'center'
+            },
+            labelLine: {
+                show: false
+            },
+            emphasis: {
+                label: {
+                    show: true,
+                    lineHeight: 30,
+                    fontSize: '30',
+                    fontWeight: 'bold'
+                }
+            },
+            itemStyle: {
+                borderWidth: 0
+            },
+            data: [
+                {
+                    value: 0,
+                    name: 'v' + index,
+                    label: {
+                        lineHeight: 30,
+                        fontSize: 30,
+                        color: 'inherit'
+                    }
+                },
+                {
+                    value: 0,
+                    name: 'a' + index,
+                    itemStyle: { color: this.grey },
+                    emphasis: {
+                        scale: false,
+                        itemStyle: { color: this.grey }
+                    },
+                    cursor: 'default',
+                    label: { show: false }
+                },
+                {
+                    value: 0,
+                    name: 'b' + index,
+                    itemStyle: { color: 'rgba(0,0,0,0)' },
+                    cursor: 'default',
+                    label: { show: false }
+                }
+            ]
+        };
+        this.updateData(item, percent);
+        optionSeries.push(item);
+    }
+    updateData(series, percent) {
+        const angle = (this.dataAngle() * percent) / 100;
+        series.data[0].value = angle;
+        series.data[1].value = this.dataAngle() - angle;
+        series.data[2].value = 360 - this.dataAngle();
+        series.realValue = percent;
+    }
+    calculateRadius(index) {
+        const outerRadius = this.baseRadius - index * (this.itemWidth + this.itemGap);
+        const innerRadius = outerRadius - this.itemWidth;
+        return [innerRadius + '%', outerRadius + '%'];
+    }
+    updateRadius(selected) {
+        let visibleIndex = 0;
+        const optionSeries = this.actualOptions.series;
+        optionSeries.forEach(series => {
+            if (selected[series.name] === false) {
+                return;
+            }
+            series.radius = this.calculateRadius(visibleIndex);
+            visibleIndex++;
+        });
+    }
+    applyDataZoom() { }
+    /**
+     * Update single value of the progress chart.
+     */
+    changeSingleValue(index, percent) {
+        const optionSeries = this.actualOptions.series;
+        this.updateData(optionSeries[index], percent);
+        this.updateEChart();
+    }
+    /**
+     * Update multiple values of the progress chart.
+     */
+    changeMultiValues(updateValues) {
+        const optionSeries = this.actualOptions.series;
+        updateValues.forEach(update => {
+            const currentSeries = optionSeries[update.seriesIndex];
+            if (!currentSeries) {
+                return;
+            }
+            this.updateData(currentSeries, update.percent);
+        });
+        this.updateEChart();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiChartProgressComponent, isStandalone: true, selector: "si-chart-progress", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, dataAngle: { classPropertyName: "dataAngle", publicName: "dataAngle", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-progress', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiChartProgressBarComponent extends SiChartComponent {
+    series = input();
+    /** Used to display the label in inline or above the progress-bar. */
+    labelPosition = input();
+    maxValue = 100;
+    xAxisConfig = { type: 'value', max: this.maxValue };
+    yAxis = {
+        type: 'category',
+        data: [],
+        axisLabel: {
+            show: true,
+            fontSize: 14
+        }
+    };
+    formatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 });
+    labelPositionOption;
+    labelPositionOptionForValue;
+    labelFormatter(p) {
+        return this.formatter.format(this.maxValue - p.value) + ' %';
+    }
+    themeChanged() {
+        this.applyOptions();
+    }
+    applyOptions() {
+        this.showLegend.set(false);
+        const grey = this.getThemeCustomValue(['progress', 'grey'], '#E6E6E6');
+        const labelColor = this.getThemeCustomValue(['progressBar', 'labelColor'], '#000');
+        const itemWidth = this.getThemeCustomValue(['progressBar', 'itemWidth'], 20);
+        if (this.labelPosition() === 'top') {
+            this.yAxis.axisLabel = false;
+            this.labelPositionOption = {
+                position: [0, -16],
+                formatter: '{b}',
+                fontSize: 14,
+                color: labelColor,
+                show: true
+            };
+            this.labelPositionOptionForValue = {
+                position: ['100%', '-80%'],
+                align: 'right',
+                show: true,
+                formatter: p => this.labelFormatter(p),
+                color: labelColor,
+                fontWeight: 700
+            };
+        }
+        else {
+            this.yAxis.axisLabel.show = true;
+            this.labelPositionOption = {
+                show: false
+            };
+            this.labelPositionOptionForValue = {
+                position: 'right',
+                show: true,
+                formatter: p => this.labelFormatter(p),
+                color: labelColor,
+                fontWeight: 700
+            };
+        }
+        this.actualOptions = {
+            series: [],
+            xAxis: this.xAxisConfig,
+            yAxis: this.yAxis,
+            grid: {},
+            tooltip: {}
+        };
+        const categoryAxisOpts = {
+            axisLine: { show: false },
+            axisTick: { show: false },
+            splitLine: { show: false },
+            axisLabel: { show: this.yAxis.axisLabel },
+            inverse: true
+        };
+        const valueAxisOpts = {
+            axisLabel: { show: false },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            splitLine: { show: false }
+        };
+        echarts.util.merge(this.actualOptions.yAxis, categoryAxisOpts, true);
+        echarts.util.merge(this.actualOptions.xAxis, valueAxisOpts, true);
+        this.actualOptions.grid = this.getThemeCustomValue(['progressBar', 'grid'], {});
+        const series = this.series();
+        if (series) {
+            const optionSeries = this.actualOptions.series;
+            this.actualOptions.yAxis.data = series.map(item => item.name);
+            const dataItem = {
+                type: 'bar',
+                stack: 'chart',
+                z: 3,
+                barWidth: itemWidth,
+                label: this.labelPositionOption,
+                data: series.map(item => item.percent)
+            };
+            const fillerItem = {
+                type: 'bar',
+                stack: 'chart',
+                silent: true,
+                label: this.labelPositionOptionForValue,
+                itemStyle: {
+                    color: grey
+                },
+                data: series.map(item => this.maxValue - item.percent)
+            };
+            optionSeries.push(dataItem);
+            optionSeries.push(fillerItem);
+        }
+        this.applyTitles();
+    }
+    applyDataZoom() { }
+    /**
+     * Updates single value of a single progress bar.
+     */
+    changeSingleValue(valueIndex, value) {
+        const optionSeries = this.actualOptions.series;
+        optionSeries[0].data[valueIndex] = value;
+        optionSeries[1].data[valueIndex] = this.maxValue - value;
+        this.updateEChart();
+    }
+    /**
+     * Updates multiple values of a single progress bar.
+     */
+    changeMultiValues(updateValues) {
+        const optionSeries = this.actualOptions.series;
+        updateValues.forEach(update => {
+            const currentDataItem = optionSeries[0].data[update.valueIndex];
+            if (!currentDataItem) {
+                return;
+            }
+            optionSeries[0].data[update.valueIndex] = update.value;
+            optionSeries[1].data[update.valueIndex] = this.maxValue - update.value;
+        });
+        this.updateEChart();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiChartProgressBarComponent, isStandalone: true, selector: "si-chart-progress-bar", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-progress-bar', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiChartSankeyComponent extends SiChartComponent {
+    series = input();
+    /** @defaultValue false */
+    toolTip = input(false);
+    applyOptions() {
+        const series = this.series();
+        this.actualOptions = {
+            series: series ? Object.assign({ type: 'sankey' }, series) : [],
+            tooltip: { show: this.toolTip() }
+        };
+        this.applyTitles();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartSankeyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiChartSankeyComponent, isStandalone: true, selector: "si-chart-sankey", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, toolTip: { classPropertyName: "toolTip", publicName: "toolTip", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartSankeyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-sankey', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiChartSunburstComponent extends SiChartComponent {
+    series = input();
+    /** @defaultValue false */
+    toolTip = input(false);
+    applyOptions() {
+        const series = this.series();
+        this.actualOptions = {
+            series: series ? Object.assign({ type: 'sunburst' }, series) : [],
+            tooltip: { show: this.toolTip() }
+        };
+        this.applyTitles();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartSunburstComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiChartSunburstComponent, isStandalone: true, selector: "si-chart-sunburst", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, toolTip: { classPropertyName: "toolTip", publicName: "toolTip", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartSunburstComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-sunburst', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div\n    class=\"si-title-2 chart-title chart-title-width\"\n    [style.background-color]=\"backgroundColor()\"\n  >\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body-2\" [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"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiChartsNgModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartsNgModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiChartsNgModule, imports: [CommonModule,
+            SiChartCartesianComponent,
+            SiChartCircleComponent,
+            SiChartComponent,
+            SiChartGaugeComponent,
+            SiChartLoadingSpinnerComponent,
+            SiChartProgressBarComponent,
+            SiChartProgressComponent,
+            SiChartSankeyComponent,
+            SiChartSunburstComponent,
+            SiCustomLegendComponent], exports: [SiChartCartesianComponent,
+            SiChartCircleComponent,
+            SiChartComponent,
+            SiChartGaugeComponent,
+            SiChartProgressBarComponent,
+            SiChartProgressComponent,
+            SiChartSankeyComponent,
+            SiChartSunburstComponent,
+            SiCustomLegendComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartsNgModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiChartsNgModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        SiChartCartesianComponent,
+                        SiChartCircleComponent,
+                        SiChartComponent,
+                        SiChartGaugeComponent,
+                        SiChartLoadingSpinnerComponent,
+                        SiChartProgressBarComponent,
+                        SiChartProgressComponent,
+                        SiChartSankeyComponent,
+                        SiChartSunburstComponent,
+                        SiCustomLegendComponent
+                    ],
+                    exports: [
+                        SiChartCartesianComponent,
+                        SiChartCircleComponent,
+                        SiChartComponent,
+                        SiChartGaugeComponent,
+                        SiChartProgressBarComponent,
+                        SiChartProgressComponent,
+                        SiChartSankeyComponent,
+                        SiChartSunburstComponent,
+                        SiCustomLegendComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+// Public API Surface
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiChartCartesianComponent, SiChartCircleComponent, SiChartComponent, SiChartGaugeComponent, SiChartProgressBarComponent, SiChartProgressComponent, SiChartSankeyComponent, SiChartSunburstComponent, SiChartsNgModule, SiCustomLegendComponent, SiChartsNgModule as SimplChartsNgModule, themeElement, themeSupport };
+//# sourceMappingURL=siemens-charts-ng.mjs.map