@spike-rabbit/charts-ng 49.0.1 → 49.13.0

package/fesm2022/spike-rabbit-charts-ng-progress-bar.mjs

@@ -0,0 +1,170 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { echarts, SiChartBaseComponent } from '@spike-rabbit/charts-ng/common';
+import { SiCustomLegendComponent } from '@spike-rabbit/charts-ng/custom-legend';
+import { SiChartLoadingSpinnerComponent } from '@spike-rabbit/charts-ng/loading-spinner';
+import { BarChart } from 'echarts/charts';
+import { GridComponent } from 'echarts/components';
+import { LegacyGridContainLabel } from 'echarts/features';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+echarts.use([BarChart, GridComponent, LegacyGridContainLabel]);
+class SiChartProgressBarComponent extends SiChartBaseComponent {
+    /** The series for the chart. */
+    series = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "series" }] : /* istanbul ignore next */ []));
+    /** Used to display the label in inline or above the progress-bar. */
+    labelPosition = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    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: "22.0.5", ngImport: i0, type: SiChartProgressBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiChartProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-progress-bar', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], changeDetection: ChangeDetectionStrategy.Eager, 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 }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiChartProgressBarComponent };
+//# sourceMappingURL=spike-rabbit-charts-ng-progress-bar.mjs.map

package/fesm2022/spike-rabbit-charts-ng-progress-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spike-rabbit-charts-ng-progress-bar.mjs","sources":["../../../../projects/charts-ng/progress-bar/si-chart-progress-bar.component.ts","../../../../projects/charts-ng/common/si-chart-base.component.html","../../../../projects/charts-ng/progress-bar/index.ts","../../../../projects/charts-ng/progress-bar/spike-rabbit-charts-ng-progress-bar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport {\n  SiChartBaseComponent,\n  echarts,\n  BarSeriesOption,\n  ChartXAxis,\n  ChartYAxis\n} from '@spike-rabbit/charts-ng/common';\nimport { SiCustomLegendComponent } from '@spike-rabbit/charts-ng/custom-legend';\nimport { SiChartLoadingSpinnerComponent } from '@spike-rabbit/charts-ng/loading-spinner';\nimport { BarChart } from 'echarts/charts';\nimport { GridComponent } from 'echarts/components';\nimport { LegacyGridContainLabel } from 'echarts/features';\n\nimport { ProgressBarChartSeries, ProgressBarValueUpdate } from './si-chart-progress-bar.interface';\n\necharts.use([BarChart, GridComponent, LegacyGridContainLabel]);\n\n@Component({\n  selector: 'si-chart-progress-bar',\n  imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],\n  templateUrl: '../common/si-chart-base.component.html',\n  styleUrl: '../common/si-chart-base.component.scss',\n  changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class SiChartProgressBarComponent extends SiChartBaseComponent {\n  /** The series for the chart. */\n  readonly series = input<ProgressBarChartSeries[]>();\n  /** Used to display the label in inline or above the progress-bar. */\n  readonly labelPosition = input<string>();\n\n  private maxValue = 100;\n  private xAxisConfig: ChartXAxis = { type: 'value', max: this.maxValue };\n  private yAxis: ChartYAxis = {\n    type: 'category',\n    data: [],\n    axisLabel: {\n      show: true,\n      fontSize: 14\n    }\n  };\n\n  private readonly formatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 });\n  private labelPositionOption: BarSeriesOption['label'];\n  private labelPositionOptionForValue: BarSeriesOption['label'];\n\n  private labelFormatter(p: any): string {\n    return this.formatter.format(this.maxValue - p.value) + ' %';\n  }\n\n  protected override themeChanged(): void {\n    this.applyOptions();\n  }\n\n  protected override applyOptions(): void {\n    this.showLegend.set(false);\n    const grey = this.getThemeCustomValue(['progress', 'grey'], '#E6E6E6');\n    const labelColor = this.getThemeCustomValue(['progressBar', 'labelColor'], '#000');\n    const itemWidth = this.getThemeCustomValue(['progressBar', 'itemWidth'], 20);\n\n    if (this.labelPosition() === 'top') {\n      this.yAxis.axisLabel = false;\n      this.labelPositionOption = {\n        position: [0, -16],\n        formatter: '{b}',\n        fontSize: 14,\n        color: labelColor,\n        show: true\n      };\n      this.labelPositionOptionForValue = {\n        position: ['100%', '-80%'],\n        align: 'right',\n        show: true,\n        formatter: p => this.labelFormatter(p),\n        color: labelColor,\n        fontWeight: 700\n      };\n    } else {\n      this.yAxis.axisLabel.show = true;\n      this.labelPositionOption = {\n        show: false\n      };\n      this.labelPositionOptionForValue = {\n        position: 'right',\n        show: true,\n        formatter: p => this.labelFormatter(p),\n        color: labelColor,\n        fontWeight: 700\n      };\n    }\n\n    this.actualOptions = {\n      series: [],\n      xAxis: this.xAxisConfig,\n      yAxis: this.yAxis,\n      grid: {},\n      tooltip: {}\n    };\n    const categoryAxisOpts = {\n      axisLine: { show: false },\n      axisTick: { show: false },\n      splitLine: { show: false },\n      axisLabel: { show: this.yAxis.axisLabel },\n      inverse: true\n    };\n\n    const valueAxisOpts = {\n      axisLabel: { show: false },\n      axisLine: { show: false },\n      axisTick: { show: false },\n      splitLine: { show: false }\n    };\n\n    echarts.util.merge(this.actualOptions.yAxis, categoryAxisOpts, true);\n    echarts.util.merge(this.actualOptions.xAxis, valueAxisOpts, true);\n\n    this.actualOptions.grid = this.getThemeCustomValue(['progressBar', 'grid'], {});\n\n    const series = this.series();\n    if (series) {\n      const optionSeries = this.actualOptions.series as BarSeriesOption[];\n      (this.actualOptions.yAxis as any).data = series.map(item => item.name);\n\n      const dataItem: BarSeriesOption = {\n        type: 'bar',\n        stack: 'chart',\n        z: 3,\n        barWidth: itemWidth,\n        label: this.labelPositionOption,\n        data: series.map(item => item.percent)\n      };\n\n      const fillerItem: BarSeriesOption = {\n        type: 'bar',\n        stack: 'chart',\n        silent: true,\n        label: this.labelPositionOptionForValue,\n        itemStyle: {\n          color: grey\n        },\n        data: series.map(item => this.maxValue - item.percent)\n      };\n\n      optionSeries.push(dataItem);\n      optionSeries.push(fillerItem);\n    }\n\n    this.applyTitles();\n  }\n\n  protected override applyDataZoom(): void {}\n\n  /**\n   * Updates single value of a single progress bar.\n   */\n  changeSingleValue(valueIndex: number, value: number): void {\n    const optionSeries = this.actualOptions.series as BarSeriesOption[];\n    optionSeries[0].data![valueIndex] = value;\n    optionSeries[1].data![valueIndex] = this.maxValue - value;\n    this.updateEChart();\n  }\n\n  /**\n   * Updates multiple values of a single progress bar.\n   */\n  changeMultiValues(updateValues: ProgressBarValueUpdate[]): void {\n    const optionSeries = this.actualOptions.series as BarSeriesOption[];\n    updateValues.forEach(update => {\n      const currentDataItem = optionSeries[0].data![update.valueIndex];\n      if (!currentDataItem) {\n        return;\n      }\n      optionSeries[0].data![update.valueIndex] = update.value;\n      optionSeries[1].data![update.valueIndex] = this.maxValue - update.value;\n    });\n\n    this.updateEChart();\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 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-chart-progress-bar.component';\nexport * from './si-chart-progress-bar.interface';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,220 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { echarts, SiChartBaseComponent } from '@spike-rabbit/charts-ng/common';
+import { SiCustomLegendComponent } from '@spike-rabbit/charts-ng/custom-legend';
+import { SiChartLoadingSpinnerComponent } from '@spike-rabbit/charts-ng/loading-spinner';
+import { PieChart } from 'echarts/charts';
+import { LegendComponent } from 'echarts/components';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+echarts.use([PieChart, LegendComponent]);
+class SiChartProgressComponent extends SiChartBaseComponent {
+    /** The series for the chart. */
+    series = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "series" }] : /* istanbul ignore next */ []));
+    /**
+     * How big the data can get in degrees.
+     *
+     * @defaultValue 220
+     */
+    dataAngle = input(220, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataAngle" }] : /* istanbul ignore next */ []));
+    // 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: "22.0.5", ngImport: i0, type: SiChartProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 class=\"si-h5 chart-title chart-title-width\" [style.background-color]=\"backgroundColor()\">\n    <div class=\"chart-title-text\" [style.color]=\"titleColor()\">{{ title() }}</div>\n    @if (subTitle()) {\n      <div class=\"si-body\" [style.color]=\"subTitleColor()\">{{ subTitle() }}</div>\n    }\n  </div>\n}\n\n<div\n  #chartContainerWrapper\n  class=\"chart-container-wrapper\"\n  [class.chart-scroll]=\"containerHeight()\"\n  [attr.tabindex]=\"containerHeight() ? '0' : null\"\n>\n  <div class=\"chart-container\" [style.height.px]=\"containerHeight()\">\n    @if (showCustomLegend()) {\n      @for (cl of customLegend; track $index) {\n        <si-custom-legend\n          #siCustomLegend\n          class=\"custom-legend\"\n          [style.top.px]=\"cl.top\"\n          [title]=\"title()\"\n          [subTitle]=\"subTitle()\"\n          [customLegend]=\"cl\"\n          [style.background-color]=\"backgroundColor()\"\n          [titleColor]=\"titleColor()\"\n          [subTitleColor]=\"subTitleColor()\"\n          [textColor]=\"textColor()\"\n          (legendIconClickEvent)=\"handleLegendClick($event)\"\n          (legendClickEvent)=\"handleLegendClick($event)\"\n          (legendHoverStartEvent)=\"handleLegendHover($event, true)\"\n          (legendHoverEndEvent)=\"handleLegendHover($event, false)\"\n        />\n      }\n    }\n    <div #chart class=\"echart-container\" [style.height.px]=\"containerHeight()\"></div>\n  </div>\n</div>\n@if (externalZoomSlider()) {\n  <div\n    #externalZoomSlider\n    class=\"external-zoom-container\"\n    [class.has-time-range-bar]=\"showTimeRangeBar()\"\n    [style.--time-bar-height.px]=\"timeBarHeight()\"\n  ></div>\n}\n\n@if (showTimeRangeBar() && zoomSlider()) {\n  <div\n    class=\"time-range-bar\"\n    [style.bottom.px]=\"timeBarBottom()\"\n    [style.padding-left.px]=\"timeBarLeft()\"\n    [style.padding-right.px]=\"timeBarRight()\"\n  >\n    <ng-content select=\"[slot=timeRangeBar]\" />\n  </div>\n}\n\n@if (inProgress()) {\n  <div class=\"progress-container\">\n    <si-chart-loading-spinner />\n  </div>\n}\n", styles: [":host{block-size:100%;position:relative;display:flex!important;flex-direction:column;inline-size:100%}.chart-container-wrapper{display:flex;flex:1 0 0;inline-size:inherit;overflow:hidden}.chart-scroll{overflow-y:auto}.chart-container{position:relative;display:flex;flex:1 0 0;overflow:hidden}.echart-container{flex:1 0 0;inline-size:100%;min-block-size:var(--si-chart-min-height, 200px);overflow:hidden}.custom-legend{position:absolute;z-index:2;inline-size:100%}.chart-title{padding-block:12px 8px;padding-inline-start:24px}.external-zoom-container{display:flex;flex:1 0 0;inline-size:inherit;max-block-size:112px}.external-zoom-container.has-time-range-bar{max-block-size:calc(112px + var(--time-bar-height))}.tooltip-inner{max-inline-size:375px;min-inline-size:375px;color:#162938;font-size:18px;background-color:#162938}.time-range-bar{position:absolute;inset-inline:0;z-index:2}.progress-container{position:absolute;inset:0;pointer-events:none;z-index:100;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: SiCustomLegendComponent, selector: "si-custom-legend", inputs: ["customLegend", "title", "subTitle", "titleColor", "subTitleColor", "textColor"], outputs: ["legendIconClickEvent", "legendClickEvent", "legendHoverStartEvent", "legendHoverEndEvent"] }, { kind: "component", type: SiChartLoadingSpinnerComponent, selector: "si-chart-loading-spinner" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiChartProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-progress', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], changeDetection: ChangeDetectionStrategy.Eager, 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 }] }], dataAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataAngle", required: false }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiChartProgressComponent };
+//# sourceMappingURL=spike-rabbit-charts-ng-progress.mjs.map

package/fesm2022/spike-rabbit-charts-ng-progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spike-rabbit-charts-ng-progress.mjs","sources":["../../../../projects/charts-ng/progress/si-chart-progress.component.ts","../../../../projects/charts-ng/common/si-chart-base.component.html","../../../../projects/charts-ng/progress/index.ts","../../../../projects/charts-ng/progress/spike-rabbit-charts-ng-progress.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiChartBaseComponent, echarts } from '@spike-rabbit/charts-ng/common';\nimport { SiCustomLegendComponent } from '@spike-rabbit/charts-ng/custom-legend';\nimport { SiChartLoadingSpinnerComponent } from '@spike-rabbit/charts-ng/loading-spinner';\nimport { PieSeriesOption } from 'echarts';\nimport { PieChart } from 'echarts/charts';\nimport { LegendComponent } from 'echarts/components';\n\nimport { ProgressChartSeries, ProgressValueUpdate } from './si-chart-progress.interface';\n\necharts.use([PieChart, LegendComponent]);\n\n@Component({\n  selector: 'si-chart-progress',\n  imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],\n  templateUrl: '../common/si-chart-base.component.html',\n  styleUrl: '../common/si-chart-base.component.scss',\n  changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class SiChartProgressComponent extends SiChartBaseComponent {\n  /** The series for the chart. */\n  readonly series = input<ProgressChartSeries[]>();\n\n  /**\n   * How big the data can get in degrees.\n   *\n   * @defaultValue 220\n   */\n  readonly dataAngle = input(220);\n\n  // item width in % radius\n  private itemWidth!: number;\n\n  // item gap in % radius\n  private itemGap!: number;\n\n  // base radius of an item\n  private baseRadius = 98;\n\n  private sizeFactor!: number;\n\n  // placement chart in % on canvas\n  private center!: number;\n\n  // color of disabled part of item\n  private grey!: string;\n\n  // where the data starts. not very intuitive:\n  // 0° is at 3 o'clock, goes counterclockwise, but series drawing goes clockwise\n  private startAngle!: number;\n\n  protected override afterChartInit(): void {\n    this.chart.on('legendselectchanged', (params: any) => {\n      this.updateRadius(params.selected);\n      this.updateEChart();\n    });\n  }\n\n  protected override themeChanged(): void {\n    this.applyOptions();\n  }\n\n  protected override handleSelectionChanged(event: any): void {\n    super.handleSelectionChanged(event);\n    this.updateRadius(event.selected);\n    this.updateEChart();\n  }\n\n  protected override applyOptions(): void {\n    this.actualOptions = {\n      series: [],\n      legend: [\n        {\n          data: []\n        }\n      ]\n    };\n\n    const dataAngle = this.dataAngle();\n    this.startAngle = dataAngle === 360 ? 90 : 270 - (360 - dataAngle) / 2;\n    this.itemWidth = this.getThemeCustomValue(['progress', 'itemWidth'], 6);\n    this.itemGap = this.getThemeCustomValue(['progress', 'itemGap'], 6);\n    this.grey = this.getThemeCustomValue(['progress', 'grey'], '#E6E6E6');\n\n    // a factor to change the size of base radius and center related to\n    // dataAngle proportionately\n    this.sizeFactor = 1 - Math.sin((((this.dataAngle() - 180) / 2) * Math.PI) / 180);\n    this.center = 50 + 25 * this.sizeFactor;\n\n    const seriesValue = this.series();\n    if (seriesValue) {\n      seriesValue.forEach(series => {\n        this.addSeries(series.name, series.percent);\n        if (this.showLegend()) {\n          this.addLegendItem(series.name);\n        }\n      });\n    }\n\n    this.applyTitles();\n  }\n\n  private labelFormatter(p: any): string {\n    return p.seriesName + '\\n' + Math.round((100 / this.dataAngle()) * p.value) + ' %';\n  }\n\n  private addSeries(name: string, percent: number): void {\n    const optionSeries = this.actualOptions.series as PieSeriesOption[];\n    const index = optionSeries.length;\n\n    const offset =\n      !this.showCustomLegend() && this.subTitle()\n        ? this.getThemeCustomValue(['subTitle', 'legend', 'top'], 0)\n        : 0;\n    const top = !this.sizeFactor ? 32 + offset : Math.floor(offset / 2);\n    const bottom = !this.sizeFactor ? undefined : -offset;\n\n    const item: PieSeriesOption = {\n      top,\n      bottom,\n      center: ['50%', this.center + '%'],\n      name,\n      type: 'pie',\n      colorBy: 'series',\n      radius: this.calculateRadius(index),\n      avoidLabelOverlap: false,\n      tooltip: { show: false },\n      startAngle: this.startAngle,\n      label: {\n        show: false,\n        formatter: p => this.labelFormatter(p),\n        position: 'center'\n      },\n      labelLine: {\n        show: false\n      },\n      emphasis: {\n        label: {\n          show: true,\n          lineHeight: 30,\n          fontSize: '30',\n          fontWeight: 'bold'\n        }\n      },\n      itemStyle: {\n        borderWidth: 0\n      },\n      data: [\n        {\n          value: 0,\n          name: 'v' + index,\n          label: {\n            lineHeight: 30,\n            fontSize: 30,\n            color: 'inherit'\n          }\n        },\n        {\n          value: 0,\n          name: 'a' + index,\n          itemStyle: { color: this.grey },\n          emphasis: {\n            scale: false,\n            itemStyle: { color: this.grey }\n          },\n          cursor: 'default',\n          label: { show: false }\n        },\n        {\n          value: 0,\n          name: 'b' + index,\n          itemStyle: { color: 'rgba(0,0,0,0)' },\n          cursor: 'default',\n          label: { show: false }\n        }\n      ]\n    };\n\n    this.updateData(item, percent);\n    optionSeries.push(item);\n  }\n\n  private updateData(series: any, percent: number): void {\n    const angle = (this.dataAngle() * percent) / 100;\n    series.data[0].value = angle;\n    series.data[1].value = this.dataAngle() - angle;\n    series.data[2].value = 360 - this.dataAngle();\n    series.realValue = percent;\n  }\n\n  private calculateRadius(index: number): string[] {\n    const outerRadius = this.baseRadius - index * (this.itemWidth + this.itemGap);\n    const innerRadius = outerRadius - this.itemWidth;\n    return [innerRadius + '%', outerRadius + '%'];\n  }\n\n  private updateRadius(selected: any): void {\n    let visibleIndex = 0;\n    const optionSeries = this.actualOptions.series as PieSeriesOption[];\n    optionSeries.forEach(series => {\n      if (selected[series.name!] === false) {\n        return;\n      }\n      series.radius = this.calculateRadius(visibleIndex);\n      visibleIndex++;\n    });\n  }\n\n  protected override applyDataZoom(): void {}\n\n  /**\n   * Update single value of the progress chart.\n   */\n  changeSingleValue(index: number, percent: number): void {\n    const optionSeries = this.actualOptions.series as PieSeriesOption[];\n    this.updateData(optionSeries[index], percent);\n    this.updateEChart();\n  }\n\n  /**\n   * Update multiple values of the progress chart.\n   */\n  changeMultiValues(updateValues: ProgressValueUpdate[]): void {\n    const optionSeries = this.actualOptions.series as PieSeriesOption[];\n    updateValues.forEach(update => {\n      const currentSeries = optionSeries[update.seriesIndex];\n      if (!currentSeries) {\n        return;\n      }\n      this.updateData(currentSeries, update.percent);\n    });\n\n    this.updateEChart();\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 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-chart-progress.component';\nexport * from './si-chart-progress.interface';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,52 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { echarts, SiChartBaseComponent } from '@spike-rabbit/charts-ng/common';
+import { SiCustomLegendComponent } from '@spike-rabbit/charts-ng/custom-legend';
+import { SiChartLoadingSpinnerComponent } from '@spike-rabbit/charts-ng/loading-spinner';
+import { SankeyChart } from 'echarts/charts';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+echarts.use([SankeyChart]);
+class SiChartSankeyComponent extends SiChartBaseComponent {
+    /** The series for the chart. */
+    series = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "series" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Use `tooltip` instead.
+     * @defaultValue false
+     */
+    toolTip = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolTip" }] : /* istanbul ignore next */ []));
+    /** @defaultValue false */
+    tooltip = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    applyOptions() {
+        const series = this.series();
+        this.actualOptions = {
+            series: series ? [{ type: 'sankey', ...series }] : [],
+            tooltip: { show: this.toolTip() || this.tooltip() }
+        };
+        this.applyTitles();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiChartSankeyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiChartSankeyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-sankey', imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent], changeDetection: ChangeDetectionStrategy.Eager, 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 }] }], toolTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolTip", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiChartSankeyComponent };
+//# sourceMappingURL=spike-rabbit-charts-ng-sankey.mjs.map

package/fesm2022/spike-rabbit-charts-ng-sankey.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spike-rabbit-charts-ng-sankey.mjs","sources":["../../../../projects/charts-ng/sankey/si-chart-sankey.component.ts","../../../../projects/charts-ng/common/si-chart-base.component.html","../../../../projects/charts-ng/sankey/index.ts","../../../../projects/charts-ng/sankey/spike-rabbit-charts-ng-sankey.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiChartBaseComponent, SankeySeriesOption, echarts } from '@spike-rabbit/charts-ng/common';\nimport { SiCustomLegendComponent } from '@spike-rabbit/charts-ng/custom-legend';\nimport { SiChartLoadingSpinnerComponent } from '@spike-rabbit/charts-ng/loading-spinner';\nimport { SankeyChart } from 'echarts/charts';\n\necharts.use([SankeyChart]);\n\n@Component({\n  selector: 'si-chart-sankey',\n  imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],\n  templateUrl: '../common/si-chart-base.component.html',\n  styleUrl: '../common/si-chart-base.component.scss',\n  changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class SiChartSankeyComponent extends SiChartBaseComponent {\n  /** The series for the chart. */\n  readonly series = input<SankeySeriesOption>();\n  /**\n   * @deprecated Use `tooltip` instead.\n   * @defaultValue false\n   */\n  readonly toolTip = input(false);\n  /** @defaultValue false */\n  readonly tooltip = input(false);\n\n  protected override applyOptions(): void {\n    const series = this.series();\n    this.actualOptions = {\n      series: series ? [{ type: 'sankey', ...series }] : [],\n      tooltip: { show: this.toolTip() || this.tooltip() }\n    };\n\n    this.applyTitles();\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 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-chart-sankey.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAAA;;;AAGG;AAOH,OAAO,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC;AASpB,MAAO,sBAAuB,SAAQ,oBAAoB,CAAA;;AAErD,IAAA,MAAM,GAAG,KAAK;0FAAsB;AAC7C;;;AAGG;IACM,OAAO,GAAG,KAAK,CAAC,KAAK;gFAAC;;IAEtB,OAAO,GAAG,KAAK,CAAC,KAAK;gFAAC;IAEZ,YAAY,GAAA;AAC7B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;QAC5B,IAAI,CAAC,aAAa,GAAG;AACnB,YAAA,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAE,CAAC,GAAG,EAAE;AACrD,YAAA,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE;SAClD;QAED,IAAI,CAAC,WAAW,EAAE;IACpB;uGAnBW,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBnC,omEAgEA,EAAA,MAAA,EAAA,CAAA,4/BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDlDY,uBAAuB,+PAAE,8BAA8B,EAAA,QAAA,EAAA,0BAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,KAAA,EAAA,CAAA;;2FAKtD,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,uBAAuB,EAAE,8BAA8B,CAAC,EAAA,eAAA,EAGjD,uBAAuB,CAAC,KAAK,EAAA,QAAA,EAAA,omEAAA,EAAA,MAAA,EAAA,CAAA,4/BAAA,CAAA,EAAA;;;AEjBhD;;;AAGG;;ACHH;;AAEG;;;;"}