@siemens/charts-ng 48.9.0 → 49.0.0-rc.1

package/README.md

@@ -35,6 +35,21 @@ import { SiChartsNgModule } from '@siemens/charts-ng';
 export class AppModule {}
 ```
 
+Starting with v49, Element Charts uses separate entry points for each component.
+Import components directly from their specific entry points:
+
+```ts
+import { SiChartCartesianComponent } from '@siemens/charts-ng/cartesian';
+import { SiChartCircleComponent } from '@siemens/charts-ng/circle';
+import { SiChartGaugeComponent } from '@siemens/charts-ng/gauge';
+// ... and other components
+
+@Component({
+  imports: [SiChartCartesianComponent, ...]
+})
+export class AppComponent {}
+```
+
 ### Running unit tests
 
 Run `npm run charts:test` to perform the unit tests via [Karma](https://karma-runner.github.io).

package/cartesian/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/siemens-charts-ng-cartesian.mjs",
+  "typings": "../types/siemens-charts-ng-cartesian.d.ts"
+}

package/chart/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/siemens-charts-ng-chart.mjs",
+  "typings": "../types/siemens-charts-ng-chart.d.ts"
+}

package/circle/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/siemens-charts-ng-circle.mjs",
+  "typings": "../types/siemens-charts-ng-circle.d.ts"
+}

package/common/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/siemens-charts-ng-common.mjs",
+  "typings": "../types/siemens-charts-ng-common.d.ts"
+}

package/custom-legend/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/siemens-charts-ng-custom-legend.mjs",
+  "typings": "../types/siemens-charts-ng-custom-legend.d.ts"
+}

package/fesm2022/siemens-charts-ng-cartesian.mjs

@@ -0,0 +1,375 @@
+import * as i0 from '@angular/core';
+import { input, Component } from '@angular/core';
+import { echarts, SiChartBaseComponent } from '@siemens/charts-ng/common';
+import { SiCustomLegendComponent } from '@siemens/charts-ng/custom-legend';
+import { SiChartLoadingSpinnerComponent } from '@siemens/charts-ng/loading-spinner';
+import { BarChart, LineChart, ScatterChart, CandlestickChart, HeatmapChart } from 'echarts/charts';
+import { LegendComponent, GridComponent, DataZoomComponent, VisualMapComponent, ToolboxComponent, BrushComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, AxisPointerComponent } from 'echarts/components';
+import { LegacyGridContainLabel } from 'echarts/features';
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+echarts.use([
+    BarChart,
+    LineChart,
+    ScatterChart,
+    CandlestickChart,
+    HeatmapChart,
+    LegendComponent,
+    GridComponent,
+    DataZoomComponent,
+    VisualMapComponent,
+    ToolboxComponent,
+    BrushComponent,
+    MarkAreaComponent,
+    MarkLineComponent,
+    MarkPointComponent,
+    AxisPointerComponent,
+    LegacyGridContainLabel
+]);
+class SiChartCartesianComponent extends SiChartBaseComponent {
+    /** The series for the chart. */
+    series = input(...(ngDevMode ? [undefined, { debugName: "series" }] : []));
+    subChartGrids = input(...(ngDevMode ? [undefined, { debugName: "subChartGrids" }] : []));
+    /** The y axis in cartesian(rectangular) coordinate. */
+    yAxis = input(...(ngDevMode ? [undefined, { debugName: "yAxis" }] : []));
+    /** The x axis in cartesian(rectangular) coordinate. */
+    xAxis = input(...(ngDevMode ? [undefined, { debugName: "xAxis" }] : []));
+    /** The content formatter of tooltip's floating layer which supports string template and callback function (see (see {@link https://echarts.apache.org/en/option.html#tooltip.formatter }). */
+    tooltipFormatter = input(...(ngDevMode ? [undefined, { debugName: "tooltipFormatter" }] : []));
+    /**
+     * Used to display the chart as a stacked one.
+     *
+     * @defaultValue false
+     */
+    stacked = input(false, ...(ngDevMode ? [{ debugName: "stacked" }] : []));
+    /** Enable or disable brush zoom mode */
+    zoomMode = input(...(ngDevMode ? [undefined, { debugName: "zoomMode" }] : []));
+    // 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
+                    ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                        series.name || series.seriesName
+                    : series.seriesName;
+            const valIndex = (series.encode.value ?? series.encode.y)[0];
+            const value = isCandle
+                ? ''
+                : isPie
+                    ? series.percent + '%'
+                    : Array.isArray(series.value)
+                        ? series.value[valIndex]
+                        : series.value;
+            html += '<div style="display: flex; align-items: center;">';
+            html += 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',
+                confine: true
+            }
+        };
+        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?.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: "21.0.8", ngImport: i0, type: SiChartCartesianComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChartCartesianComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-cartesian', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"] }]
+        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], subChartGrids: [{ type: i0.Input, args: [{ isSignal: true, alias: "subChartGrids", required: false }] }], yAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxis", required: false }] }], xAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxis", required: false }] }], tooltipFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFormatter", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], zoomMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomMode", required: false }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiChartCartesianComponent };
+//# sourceMappingURL=siemens-charts-ng-cartesian.mjs.map

package/fesm2022/siemens-charts-ng-cartesian.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"siemens-charts-ng-cartesian.mjs","sources":["../../../../projects/charts-ng/cartesian/si-chart-cartesian.component.ts","../../../../projects/charts-ng/common/si-chart-base.component.html","../../../../projects/charts-ng/cartesian/index.ts","../../../../projects/charts-ng/cartesian/siemens-charts-ng-cartesian.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Component, input, OnChanges, SimpleChanges } from '@angular/core';\nimport {\n  echarts,\n  GridComponentOption,\n  LegendComponentOption,\n  TooltipComponentOption,\n  SiChartBaseComponent,\n  ChartXAxis,\n  ChartYAxis,\n  DataZoomRange,\n  SeriesUpdate\n} from '@siemens/charts-ng/common';\nimport {\n  CustomLegend,\n  CustomLegendProps,\n  SiCustomLegendComponent\n} from '@siemens/charts-ng/custom-legend';\nimport { SiChartLoadingSpinnerComponent } from '@siemens/charts-ng/loading-spinner';\nimport { BarChart, LineChart, ScatterChart, CandlestickChart, HeatmapChart } from 'echarts/charts';\nimport {\n  LegendComponent,\n  GridComponent,\n  DataZoomComponent,\n  VisualMapComponent,\n  ToolboxComponent,\n  BrushComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  AxisPointerComponent\n} from 'echarts/components';\nimport { LegacyGridContainLabel } from 'echarts/features';\n\nimport {\n  CartesianChartData,\n  CartesianChartSeries,\n  SubchartGrid\n} from './si-chart-cartesian.interfaces';\n\necharts.use([\n  BarChart,\n  LineChart,\n  ScatterChart,\n  CandlestickChart,\n  HeatmapChart,\n  LegendComponent,\n  GridComponent,\n  DataZoomComponent,\n  VisualMapComponent,\n  ToolboxComponent,\n  BrushComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  AxisPointerComponent,\n  LegacyGridContainLabel\n]);\n\n@Component({\n  selector: 'si-chart-cartesian',\n  imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],\n  templateUrl: '../common/si-chart-base.component.html',\n  styleUrl: '../common/si-chart-base.component.scss'\n})\nexport class SiChartCartesianComponent extends SiChartBaseComponent implements OnChanges {\n  /** The series for the chart. */\n  readonly series = input<CartesianChartSeries[]>();\n  readonly subChartGrids = input<SubchartGrid[]>();\n  /** The y axis in cartesian(rectangular) coordinate. */\n  readonly yAxis = input<ChartYAxis | ChartYAxis[]>();\n  /** The x axis in cartesian(rectangular) coordinate. */\n  readonly xAxis = input<ChartXAxis | ChartXAxis[]>();\n  /** The content formatter of tooltip's floating layer which supports string template and callback function (see (see {@link https://echarts.apache.org/en/option.html#tooltip.formatter }). */\n  readonly tooltipFormatter = input<TooltipComponentOption['formatter']>();\n  /**\n   * Used to display the chart as a stacked one.\n   *\n   * @defaultValue false\n   */\n  readonly stacked = input(false);\n  /** Enable or disable brush zoom mode */\n  readonly zoomMode = input<boolean>();\n\n  // Used to toggle different chart types\n  override ngOnChanges(changes: SimpleChanges): void {\n    if (changes.zoomMode) {\n      this.setZoomMode();\n    }\n    if (changes.stacked) {\n      changes.forceAll = changes.stacked;\n    }\n    if (changes.subChartGrids) {\n      changes.forceAll = changes.subChartGrids;\n    }\n    super.ngOnChanges(changes);\n  }\n\n  private formatTooltip(p: object | object[]): string {\n    const params = Array.isArray(p) ? p : [p];\n    const label: string = params[0]?.axisValueLabel ?? '';\n\n    let html = label;\n    for (const series of params) {\n      const isCandle = series.componentSubType === 'candlestick';\n      const isPie = series.componentSubType === 'pie';\n      const useName = series.name != series.axisValue;\n      const name = isPie\n        ? series.data.name\n        : useName\n          ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n            series.name || series.seriesName\n          : series.seriesName;\n      const valIndex = (series.encode.value ?? series.encode.y)[0];\n      const value = isCandle\n        ? ''\n        : isPie\n          ? series.percent + '%'\n          : Array.isArray(series.value)\n            ? series.value[valIndex]\n            : series.value;\n\n      html += '<div style=\"display: flex; align-items: center;\">';\n      html += this.getSeriesMarkerSvg(name);\n      html += `<span style=\"margin-inline: 4px 8px\">${name}</span>`;\n      html += `<span style=\"margin-inline-start: auto\">${value}</span>`;\n      html += '</div>';\n    }\n    return html;\n  }\n\n  /**\n   * Get the series marker svg by series name.\n   */\n  getSeriesMarkerSvg(seriesName: string): string {\n    const seriesValue = this.actualOptions.series as CartesianChartSeries[];\n    let sym;\n    if (seriesValue) {\n      sym = this.getSeriesMarker(seriesName);\n      const symbol = this.shapePaths[sym as string];\n      const color = this.getSeriesColorBySeriesName(seriesName);\n      return `<svg width=\"12\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path  d=\"${symbol}\" fill=\"${color}\"  />\n            </svg>`;\n    }\n    return '';\n  }\n\n  /**\n   * Get the series marker by series name.\n   */\n  getSeriesMarker(seriesName: string): string {\n    const seriesValue = this.actualOptions.series as CartesianChartSeries[];\n    if (seriesValue) {\n      const seriesMarker = seriesValue.find(ser => ser.name === seriesName);\n      if (seriesMarker && 'symbol' in seriesMarker) {\n        return seriesMarker.symbol as string;\n      }\n    }\n    return 'circle';\n  }\n\n  protected override afterChartInit(skipZoom?: boolean): void {\n    super.afterChartInit(skipZoom);\n    if (this.zoomMode()) {\n      this.setZoomMode();\n    }\n  }\n\n  protected override setZoomMode(): void {\n    this.dispatchEChartAction({\n      type: 'takeGlobalCursor',\n      key: 'dataZoomSelect',\n      dataZoomSelectActive: this.zoomMode()\n    });\n  }\n\n  protected override getValidXAxis(): Set<number> {\n    const validXAxis: Set<number> = new Set<number>();\n    this.series()?.forEach(series => {\n      if (series.visible !== false && series.xAxisIndex !== undefined) {\n        validXAxis.add(series.xAxisIndex);\n      }\n    });\n    return validXAxis;\n  }\n\n  protected override applyOptions(): void {\n    this.actualOptions = {\n      series: [],\n      xAxis: this.xAxis(),\n      grid: this.getGrid(),\n      yAxis: this.yAxis(),\n      toolbox: {\n        showTitle: false,\n        itemSize: 0,\n        feature: {\n          dataZoom: {\n            filterMode: 'none',\n            xAxisIndex: 'all',\n            yAxisIndex: false,\n            icon: {\n              zoom: 'image://',\n              back: 'image://'\n            }\n          }\n        }\n      },\n      legend: [\n        {\n          data: []\n        },\n        {\n          data: []\n        }\n      ],\n      tooltip: {\n        trigger: 'axis',\n        confine: true\n      }\n    };\n    const tooltipFormatter = this.tooltipFormatter();\n    if (tooltipFormatter) {\n      this.actualOptions.tooltip.formatter = tooltipFormatter;\n    } else if (this.hasDifferentMarker()) {\n      this.actualOptions.tooltip.formatter = this.formatTooltip.bind(this);\n    }\n\n    const yAxis = this.yAxis();\n    const yAxisArray = Array.isArray(yAxis) ? yAxis : yAxis ? [yAxis] : [];\n    const numRight = yAxisArray.reduce((acc, cur) => acc + (cur.position === 'right' ? 1 : 0), 0);\n    const numLeft = yAxisArray.length - numRight;\n    const legendLeftOptions = this.getThemeCustomValue(['legendLeft'], {});\n    const legendRightOptions = this.getThemeCustomValue(['legendRight'], {});\n    let leftUnitText: string | undefined;\n    let rightUnitText: string | undefined;\n    const legends = this.actualOptions.legend as LegendComponentOption[];\n    if (numLeft && numRight) {\n      echarts.util.merge(legends[0], legendLeftOptions, true);\n      echarts.util.merge(legends[1], legendRightOptions, true);\n    } else if (Array.isArray(this.yAxis()) && numLeft) {\n      echarts.util.merge(legends[0], { left: legendLeftOptions.left }, true);\n    } else if (numRight) {\n      echarts.util.merge(legends[1], { right: legendRightOptions.right }, true);\n    }\n\n    const subChartGrids = this.subChartGrids();\n    if (subChartGrids) {\n      if (subChartGrids.length !== this.customLegend.length) {\n        const diff = subChartGrids.length - this.customLegend.length;\n        if (diff < 0) {\n          this.customLegend.length = subChartGrids.length;\n        } else {\n          for (let i = 0; i < diff; i++) {\n            // Add default custom legends for all grids\n            const cl: CustomLegend = {\n              customLegends: [\n                { list: [], unit: '' },\n                { list: [], unit: '' }\n              ],\n              legendAxis: 'both'\n            };\n            this.customLegend.push(cl);\n          }\n        }\n      }\n      const margin = 16;\n      // calculate custom legend positions from top according to subcharts.\n      for (let i = 0; i < subChartGrids.length; i++) {\n        if (i === 0) {\n          this.customLegend[i].top = 0;\n        } else {\n          const prevGrid = subChartGrids[i - 1];\n          const subChartTop = (prevGrid.top as number) ?? 0;\n          const subChartHeight = (prevGrid.height as number) ?? 0;\n          this.customLegend[i].top = subChartTop + subChartHeight + margin;\n        }\n      }\n    }\n\n    const seriesValue = this.series();\n    if (seriesValue) {\n      const optionSeries = this.actualOptions.series as CartesianChartSeries[];\n      seriesValue.forEach(series => {\n        const s: any = Object.assign(\n          {\n            stack: this.stacked()\n          },\n          series\n        );\n        if (s.type === 'line' && s.area) {\n          delete s.area;\n          s.areaStyle = {};\n        } else {\n          s.areaStyle ??= null;\n        }\n        delete s.visible;\n\n        if ('symbol' in series && !this.shapePaths[series.symbol as string]) {\n          s.symbol = 'circle';\n        }\n\n        optionSeries.push(s);\n\n        if (this.showLegend() && series.name) {\n          let legendIndex = 0;\n          const axis = yAxisArray[series.yAxisIndex ?? 0];\n          if (axis?.position === 'right') {\n            legendIndex = 1;\n          }\n\n          let customLegendProp: CustomLegendProps | undefined;\n          if (this.showCustomLegend()) {\n            // get left and right axis units from axis array\n            if (axis && (axis.show === undefined || axis.show)) {\n              if ((!leftUnitText || leftUnitText !== axis.name) && axis.position === 'left') {\n                if (axis.name != null) {\n                  // axis.name is the same property name which eChart uses to display axis title,\n                  // hence in case of custom legends units were shown at two places i.e. at axis\n                  // title as well as custom legend unit section. Thus changing the property name\n                  // to customLegendUnit only in case custom legends are used.\n                  axis.customLegendUnit = axis.name;\n                }\n                if (axis.customLegendUnit != null) {\n                  leftUnitText = axis.customLegendUnit;\n                }\n              } else if (\n                (!rightUnitText || rightUnitText !== axis.name) &&\n                axis.position === 'right'\n              ) {\n                if (axis.name != null) {\n                  // axis.name is the same property name which eChart uses to display axis title,\n                  // hence in case of custom legends units were shown at two places i.e. at axis\n                  // title as well as custom legend unit section. Thus changing the property name\n                  // to customLegendUnit only in case custom legends are used.\n                  axis.customLegendUnit = axis.name;\n                }\n                if (axis.customLegendUnit != null) {\n                  rightUnitText = axis.customLegendUnit;\n                }\n              }\n              delete axis.name;\n            }\n\n            const unitText = axis.position === 'right' ? rightUnitText : leftUnitText;\n            customLegendProp = {\n              displayName: s.displayName,\n              tooltip: s.customLegendToolTip,\n              unit: unitText\n            };\n          }\n          // As we have only 1 xAxis per sub chart, xAxisIndex equals grid index.\n          const seriesSymbol = 'symbol' in s ? (s.symbol as string) : 'circle';\n          this.addLegendItem(\n            series.name as string,\n            series.visible,\n            legendIndex,\n            series.xAxisIndex,\n            customLegendProp,\n            seriesSymbol\n          );\n        }\n      });\n    }\n\n    this.applyTitles();\n    if (this.externalZoomSlider()) {\n      this.extZoomSliderOptions.legend = this.actualOptions.legend;\n    }\n  }\n\n  private hasDifferentMarker(): boolean {\n    const seriesValue = this.series();\n    return !!seriesValue?.some(series => 'symbol' in series && series.symbol !== 'circle');\n  }\n\n  private getGrid(): GridComponentOption | GridComponentOption[] {\n    const subChartGrids = this.subChartGrids();\n    if (subChartGrids) {\n      subChartGrids.forEach(g => (g.containLabel = false));\n      return subChartGrids as GridComponentOption[];\n    }\n    return {};\n  }\n\n  override refreshSeries(isLive: boolean = true, dzToSet?: DataZoomRange): void {\n    const seriesValue = this.series();\n    if (!seriesValue) {\n      return;\n    }\n    const optionSeries = this.actualOptions.series as CartesianChartSeries[];\n    seriesValue.forEach((series, i) => {\n      optionSeries[i].data = series.data;\n    });\n    super.refreshSeries(isLive, dzToSet);\n  }\n\n  protected override hasData(): boolean {\n    return this.series()?.some(s => s.visible !== false && s.data && s.data.length > 0) ?? false;\n  }\n\n  protected override handleSelectionChanged(event: any): void {\n    if (event?.selected) {\n      this.series()?.forEach(series => (series.visible = event.selected[series.name!] !== false));\n    }\n    super.handleSelectionChanged(event);\n  }\n\n  /**\n   * Update single chart data entry.\n   */\n  addData(index: number, data: CartesianChartData): void {\n    this.addDataInternal([{ index, data }]);\n  }\n\n  /**\n   * Append charts data entries to the end of the series.\n   */\n  addDataMulti(series: SeriesUpdate<CartesianChartData>[]): void {\n    this.addDataInternal(series);\n  }\n}\n","@if (showCustomLegend() && (title() || subTitle())) {\n  <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-chart-cartesian.component';\nexport * from './si-chart-cartesian.interfaces';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-charts-ng-chart.mjs

@@ -0,0 +1,55 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+import { echarts, SiChartBaseComponent } from '@siemens/charts-ng/common';
+import { SiCustomLegendComponent } from '@siemens/charts-ng/custom-legend';
+import { SiChartLoadingSpinnerComponent } from '@siemens/charts-ng/loading-spinner';
+import { BarChart, LineChart, ScatterChart, CandlestickChart, HeatmapChart, PieChart, GaugeChart, SankeyChart, SunburstChart } from 'echarts/charts';
+import { LegendComponent, GridComponent, DataZoomComponent, VisualMapComponent, ToolboxComponent, BrushComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, AxisPointerComponent } from 'echarts/components';
+import { LegacyGridContainLabel } from 'echarts/features';
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+echarts.use([
+    BarChart,
+    LineChart,
+    ScatterChart,
+    CandlestickChart,
+    HeatmapChart,
+    PieChart,
+    GaugeChart,
+    SankeyChart,
+    SunburstChart,
+    LegendComponent,
+    GridComponent,
+    DataZoomComponent,
+    VisualMapComponent,
+    ToolboxComponent,
+    BrushComponent,
+    MarkAreaComponent,
+    MarkLineComponent,
+    MarkPointComponent,
+    AxisPointerComponent,
+    LegacyGridContainLabel
+]);
+class SiChartComponent extends SiChartBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiChartComponent, isStandalone: true, selector: "si-chart", usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiChartComponent };
+//# sourceMappingURL=siemens-charts-ng-chart.mjs.map

package/fesm2022/siemens-charts-ng-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"siemens-charts-ng-chart.mjs","sources":["../../../../projects/charts-ng/chart/si-chart.component.ts","../../../../projects/charts-ng/common/si-chart-base.component.html","../../../../projects/charts-ng/chart/index.ts","../../../../projects/charts-ng/chart/siemens-charts-ng-chart.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Component } from '@angular/core';\nimport { echarts, SiChartBaseComponent } from '@siemens/charts-ng/common';\nimport { SiCustomLegendComponent } from '@siemens/charts-ng/custom-legend';\nimport { SiChartLoadingSpinnerComponent } from '@siemens/charts-ng/loading-spinner';\nimport {\n  BarChart,\n  LineChart,\n  ScatterChart,\n  CandlestickChart,\n  HeatmapChart,\n  PieChart,\n  GaugeChart,\n  SankeyChart,\n  SunburstChart\n} from 'echarts/charts';\nimport {\n  LegendComponent,\n  GridComponent,\n  DataZoomComponent,\n  VisualMapComponent,\n  ToolboxComponent,\n  BrushComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  AxisPointerComponent\n} from 'echarts/components';\nimport { LegacyGridContainLabel } from 'echarts/features';\n\necharts.use([\n  BarChart,\n  LineChart,\n  ScatterChart,\n  CandlestickChart,\n  HeatmapChart,\n  PieChart,\n  GaugeChart,\n  SankeyChart,\n  SunburstChart,\n  LegendComponent,\n  GridComponent,\n  DataZoomComponent,\n  VisualMapComponent,\n  ToolboxComponent,\n  BrushComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  AxisPointerComponent,\n  LegacyGridContainLabel\n]);\n\n@Component({\n  selector: 'si-chart',\n  imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],\n  templateUrl: '../common/si-chart-base.component.html',\n  styleUrl: '../common/si-chart-base.component.scss'\n})\nexport class SiChartComponent extends SiChartBaseComponent {}\n","@if (showCustomLegend() && (title() || subTitle())) {\n  <div class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-chart.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAAA;;;AAGG;AA8BH,OAAO,CAAC,GAAG,CAAC;IACV,QAAQ;IACR,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,YAAY;IACZ,QAAQ;IACR,UAAU;IACV,WAAW;IACX,aAAa;IACb,eAAe;IACf,aAAa;IACb,iBAAiB;IACjB,kBAAkB;IAClB,gBAAgB;IAChB,cAAc;IACd,iBAAiB;IACjB,iBAAiB;IACjB,kBAAkB;IAClB,oBAAoB;IACpB;AACD,CAAA,CAAC;AAQI,MAAO,gBAAiB,SAAQ,oBAAoB,CAAA;uGAA7C,gBAAgB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9D7B,omEAgEA,EAAA,MAAA,EAAA,CAAA,4/BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDNY,uBAAuB,+PAAE,8BAA8B,EAAA,QAAA,EAAA,0BAAA,EAAA,CAAA,EAAA,CAAA;;2FAItD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,OAAA,EACX,CAAC,uBAAuB,EAAE,8BAA8B,CAAC,EAAA,QAAA,EAAA,omEAAA,EAAA,MAAA,EAAA,CAAA,4/BAAA,CAAA,EAAA;;;AE1DpE;;;AAGG;;ACHH;;AAEG;;;;"}