@spike-rabbit/charts-ng 49.0.0 → 49.13.0

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

@@ -0,0 +1,91 @@
+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 SiChartCircleComponent extends SiChartBaseComponent {
+    /** The series for the chart. */
+    series = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "series" }] : /* istanbul ignore next */ []));
+    applyOptions() {
+        this.actualOptions = {
+            series: [],
+            legend: [
+                {
+                    data: []
+                }
+            ],
+            tooltip: {
+                trigger: 'item',
+                confine: true
+            }
+        };
+        const optionSeries = this.actualOptions.series;
+        const offset = !this.showCustomLegend() && this.subTitle()
+            ? this.getThemeCustomValue(['subTitle', 'legend', 'top'], 0)
+            : 0;
+        const top = 32 + offset;
+        this.series()?.forEach(series => {
+            const s = { type: 'pie', top, ...series };
+            optionSeries.push(s);
+            if (this.showLegend()) {
+                series.data.forEach(data => {
+                    if (data.name) {
+                        this.addLegendItem(data.name);
+                    }
+                });
+            }
+        });
+        this.applyTitles();
+    }
+    applyDataZoom() { }
+    /**
+     * Update single value of the circle chart.
+     */
+    changeSingleValue(index, valueIndex, value) {
+        const optionSeries = this.actualOptions.series;
+        const series = optionSeries[index].data;
+        series[valueIndex].value = value;
+        this.updateEChart();
+    }
+    /**
+     * Update multiple values of the circle chart.
+     */
+    changeMultiValues(updateValues) {
+        const optionSeries = this.actualOptions.series;
+        updateValues.forEach(update => {
+            const currentSeries = optionSeries[update.seriesIndex].data;
+            if (!currentSeries) {
+                return;
+            }
+            currentSeries[update.valueIndex].value = update.value;
+        });
+        this.updateEChart();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SiChartCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SiChartCircleComponent, isStandalone: true, selector: "si-chart-circle", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (showCustomLegend() && (title() || subTitle())) {\n  <div 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: SiChartCircleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-chart-circle', 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 }] }] } });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiChartCircleComponent };
+//# sourceMappingURL=spike-rabbit-charts-ng-circle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spike-rabbit-charts-ng-circle.mjs","sources":["../../../../projects/charts-ng/circle/si-chart-circle.component.ts","../../../../projects/charts-ng/common/si-chart-base.component.html","../../../../projects/charts-ng/circle/index.ts","../../../../projects/charts-ng/circle/spike-rabbit-charts-ng-circle.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiChartBaseComponent, PieSeriesOption, 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 { PieChart } from 'echarts/charts';\nimport { LegendComponent } from 'echarts/components';\n\nimport { CircleChartData, CircleChartSeries, CircleValueUpdate } from './si-chart-circle.interface';\n\necharts.use([PieChart, LegendComponent]);\n\n@Component({\n  selector: 'si-chart-circle',\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 SiChartCircleComponent extends SiChartBaseComponent {\n  /** The series for the chart. */\n  readonly series = input<CircleChartSeries[]>();\n\n  protected override applyOptions(): void {\n    this.actualOptions = {\n      series: [],\n      legend: [\n        {\n          data: []\n        }\n      ],\n      tooltip: {\n        trigger: 'item',\n        confine: true\n      }\n    };\n    const optionSeries = this.actualOptions.series as PieSeriesOption[];\n\n    const offset =\n      !this.showCustomLegend() && this.subTitle()\n        ? this.getThemeCustomValue(['subTitle', 'legend', 'top'], 0)\n        : 0;\n    const top = 32 + offset;\n    this.series()?.forEach(series => {\n      const s: PieSeriesOption = { type: 'pie', top, ...series };\n      optionSeries.push(s);\n      if (this.showLegend()) {\n        series.data.forEach(data => {\n          if (data.name) {\n            this.addLegendItem(data.name);\n          }\n        });\n      }\n    });\n\n    this.applyTitles();\n  }\n\n  protected override applyDataZoom(): void {}\n\n  /**\n   * Update single value of the circle chart.\n   */\n  changeSingleValue(index: number, valueIndex: number, value: number): void {\n    const optionSeries = this.actualOptions.series as PieSeriesOption[];\n    const series = optionSeries[index].data!;\n    (series[valueIndex] as CircleChartData).value = value;\n    this.updateEChart();\n  }\n\n  /**\n   * Update multiple values of the circle chart.\n   */\n  changeMultiValues(updateValues: CircleValueUpdate[]): void {\n    const optionSeries = this.actualOptions.series as PieSeriesOption[];\n    updateValues.forEach(update => {\n      const currentSeries = optionSeries[update.seriesIndex].data!;\n      if (!currentSeries) {\n        return;\n      }\n      (currentSeries[update.valueIndex] as CircleChartData).value = 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-circle.component';\nexport * from './si-chart-circle.interface';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}