Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 1x 20x 6x 6x 6x 6x 6x 6x 5x 5x 5x 6x 1x 1x 1x 1x 1x 1x 2x 2x 2x 1x | /**
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, input } from '@angular/core';
import { SiChartBaseComponent, PieSeriesOption, echarts } from '@siemens/charts-ng/common';
import { SiCustomLegendComponent } from '@siemens/charts-ng/custom-legend';
import { SiChartLoadingSpinnerComponent } from '@siemens/charts-ng/loading-spinner';
import { PieChart } from 'echarts/charts';
import { LegendComponent } from 'echarts/components';
import { CircleChartData, CircleChartSeries, CircleValueUpdate } from './si-chart-circle.interface';
echarts.use([PieChart, LegendComponent]);
@Component({
selector: 'si-chart-circle',
imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],
templateUrl: '../common/si-chart-base.component.html',
styleUrl: '../common/si-chart-base.component.scss'
})
export class SiChartCircleComponent extends SiChartBaseComponent {
/** The series for the chart. */
readonly series = input<CircleChartSeries[]>();
protected override applyOptions(): void {
this.actualOptions = {
series: [],
legend: [
{
data: []
}
],
tooltip: {
trigger: 'item',
confine: true
}
};
const optionSeries = this.actualOptions.series as PieSeriesOption[];
const offset =
!this.showCustomLegend() && this.subTitle()
? this.getThemeCustomValue(['subTitle', 'legend', 'top'], 0)
: 0;
const top = 32 + offset;
this.series()?.forEach(series => {
const s: PieSeriesOption = { type: 'pie', top, ...series };
optionSeries.push(s);
Iif (this.showLegend()) {
series.data.forEach(data => {
if (data.name) {
this.addLegendItem(data.name);
}
});
}
});
this.applyTitles();
}
protected override applyDataZoom(): void {}
/**
* Update single value of the circle chart.
*/
changeSingleValue(index: number, valueIndex: number, value: number): void {
const optionSeries = this.actualOptions.series as PieSeriesOption[];
const series = optionSeries[index].data!;
(series[valueIndex] as CircleChartData).value = value;
this.updateEChart();
}
/**
* Update multiple values of the circle chart.
*/
changeMultiValues(updateValues: CircleValueUpdate[]): void {
const optionSeries = this.actualOptions.series as PieSeriesOption[];
updateValues.forEach(update => {
const currentSeries = optionSeries[update.seriesIndex].data!;
Iif (!currentSeries) {
return;
}
(currentSeries[update.valueIndex] as CircleChartData).value = update.value;
});
this.updateEChart();
}
}
|