Skip to content

refactor(charts): explicitly define change detection strategy #2187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
spike-rabbit merged 1 commit into from
Jun 23, 2026
Merged

refactor(charts): explicitly define change detection strategy #2187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions projects/charts-ng/cartesian/si-chart-cartesian.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, input, OnChanges, SimpleChanges } from '@angular/core';
import { ChangeDetectionStrategy, Component, input, OnChanges, SimpleChanges } from '@angular/core';
Comment thread
spliffone marked this conversation as resolved.
import {
echarts,
GridComponentOption,
Expand Down Expand Up @@ -66,7 +66,8 @@ echarts.use([
selector: 'si-chart-cartesian',
imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],
templateUrl: '../common/si-chart-base.component.html',
styleUrl: '../common/si-chart-base.component.scss'
styleUrl: '../common/si-chart-base.component.scss',
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
export class SiChartCartesianComponent extends SiChartBaseComponent implements OnChanges {
/** The series for the chart. */
Expand Down
5 changes: 3 additions & 2 deletions projects/charts-ng/chart/si-chart.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component } from '@angular/core';
import { ChangeDetectionStrategy, Component } from '@angular/core';
Comment thread
spliffone marked this conversation as resolved.
import { echarts, SiChartBaseComponent } from '@siemens/charts-ng/common';
import { SiCustomLegendComponent } from '@siemens/charts-ng/custom-legend';
import { SiChartLoadingSpinnerComponent } from '@siemens/charts-ng/loading-spinner';
Expand Down Expand Up @@ -66,6 +66,7 @@ echarts.use([
selector: 'si-chart',
imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],
templateUrl: '../common/si-chart-base.component.html',
styleUrl: '../common/si-chart-base.component.scss'
styleUrl: '../common/si-chart-base.component.scss',
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
export class SiChartComponent extends SiChartBaseComponent {}
5 changes: 3 additions & 2 deletions projects/charts-ng/circle/si-chart-circle.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, SimpleChange, viewChild } from '@angular/core';
import { ChangeDetectionStrategy, Component, SimpleChange, viewChild } from '@angular/core';
Comment thread
spliffone marked this conversation as resolved.
import { TestBed } from '@angular/core/testing';

import { SiChartCircleComponent } from './si-chart-circle.component';
Expand All @@ -18,7 +18,8 @@ import { CircleChartSeries } from './si-chart-circle.interface';
[title]="title"
[subTitle]="subTitle"
/>
`
`,
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
class TestHostComponent {
readonly chartCircleComponent = viewChild.required(SiChartCircleComponent);
Expand Down
5 changes: 3 additions & 2 deletions projects/charts-ng/circle/si-chart-circle.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, input } from '@angular/core';
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
Comment thread
spliffone marked this conversation as resolved.
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';
Expand All @@ -17,7 +17,8 @@ echarts.use([PieChart, LegendComponent]);
selector: 'si-chart-circle',
imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],
templateUrl: '../common/si-chart-base.component.html',
styleUrl: '../common/si-chart-base.component.scss'
styleUrl: '../common/si-chart-base.component.scss',
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
export class SiChartCircleComponent extends SiChartBaseComponent {
/** The series for the chart. */
Expand Down
2 changes: 2 additions & 0 deletions projects/charts-ng/common/si-chart-base.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Comment thread
spliffone marked this conversation as resolved.
Component,
ElementRef,
Expand Down Expand Up @@ -55,6 +56,7 @@
imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],
templateUrl: './si-chart-base.component.html',
styleUrl: './si-chart-base.component.scss',
changeDetection: ChangeDetectionStrategy.Default,
Comment thread
spliffone marked this conversation as resolved.
host: {
'(window:theme-switch)': 'themeSwitch()'
}
Expand Down Expand Up @@ -389,7 +391,7 @@
}
if (changes.theme || changes.renderer) {
// need to completely redo the chart for the theme change to take effect
return this.resetChart();

Check warning on line 394 in projects/charts-ng/common/si-chart-base.component.ts

View workflow job for this annotation

GitHub Actions / build-and-test / verification 

`resetChart` is deprecated. The method is deprecated and should not be used directly by the consumer
}

let updates = 0;
Expand Down Expand Up @@ -818,7 +820,7 @@
? this.getThemeCustomValue(['externalZoomSlider', 'grid'], {})
: this.getThemeCustomValue(['dataZoom', 'grid'], {});

if (this.showTimeRangeBar()) {

Check warning on line 823 in projects/charts-ng/common/si-chart-base.component.ts

View workflow job for this annotation

GitHub Actions / build-and-test / verification 

`showTimeRangeBar` is deprecated. The input will be removed in future versions as the time range bar slot is deprecated
const timeBarOptions = this.getThemeCustomValue(['timeRangeBar'], {});
if (customOptions.height && customOptions.bottom) {
this.timeBarBottom.set(customOptions.height + customOptions.bottom);
Expand Down
12 changes: 10 additions & 2 deletions projects/charts-ng/custom-legend/si-custom-legend.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,22 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, ElementRef, input, output, viewChild } from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
ElementRef,
input,
output,
viewChild
} from '@angular/core';
Comment thread
spliffone marked this conversation as resolved.

import { CustomLegend, CustomLegendItem } from './si-custom-legend.interface';

@Component({
selector: 'si-custom-legend',
templateUrl: './si-custom-legend.component.html',
styleUrl: './si-custom-legend.component.scss'
styleUrl: './si-custom-legend.component.scss',
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
export class SiCustomLegendComponent {
/** @internal */
Expand Down
4 changes: 3 additions & 1 deletion projects/charts-ng/gauge/si-chart-gauge.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/
import {
booleanAttribute,
ChangeDetectionStrategy,
Component,
Comment thread
spliffone marked this conversation as resolved.
computed,
inject,
Expand All @@ -26,7 +27,8 @@ echarts.use([GaugeChart]);
selector: 'si-chart-gauge',
imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],
templateUrl: '../common/si-chart-base.component.html',
styleUrl: '../common/si-chart-base.component.scss'
styleUrl: '../common/si-chart-base.component.scss',
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
export class SiChartGaugeComponent extends SiChartBaseComponent implements OnChanges {
/** @defaultValue 0 */
Expand Down
5 changes: 3 additions & 2 deletions projects/charts-ng/progress-bar/si-chart-progress-bar.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, input } from '@angular/core';
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
Comment thread
spliffone marked this conversation as resolved.
import {
SiChartBaseComponent,
echarts,
Expand All @@ -24,7 +24,8 @@ echarts.use([BarChart, GridComponent, LegacyGridContainLabel]);
selector: 'si-chart-progress-bar',
imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],
templateUrl: '../common/si-chart-base.component.html',
styleUrl: '../common/si-chart-base.component.scss'
styleUrl: '../common/si-chart-base.component.scss',
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
export class SiChartProgressBarComponent extends SiChartBaseComponent {
/** The series for the chart. */
Expand Down
5 changes: 3 additions & 2 deletions projects/charts-ng/progress/si-chart-progress.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, input } from '@angular/core';
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
Comment thread
spliffone marked this conversation as resolved.
import { SiChartBaseComponent, echarts } from '@siemens/charts-ng/common';
import { SiCustomLegendComponent } from '@siemens/charts-ng/custom-legend';
import { SiChartLoadingSpinnerComponent } from '@siemens/charts-ng/loading-spinner';
Expand All @@ -18,7 +18,8 @@ echarts.use([PieChart, LegendComponent]);
selector: 'si-chart-progress',
imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],
templateUrl: '../common/si-chart-base.component.html',
styleUrl: '../common/si-chart-base.component.scss'
styleUrl: '../common/si-chart-base.component.scss',
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
export class SiChartProgressComponent extends SiChartBaseComponent {
/** The series for the chart. */
Expand Down
5 changes: 3 additions & 2 deletions projects/charts-ng/sankey/si-chart-sankey.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, SimpleChange, viewChild } from '@angular/core';
import { ChangeDetectionStrategy, Component, SimpleChange, viewChild } from '@angular/core';
Comment thread
spliffone marked this conversation as resolved.
import { TestBed } from '@angular/core/testing';
import { SankeySeriesOption } from '@siemens/charts-ng/common';

Expand All @@ -17,7 +17,8 @@ import { SiChartSankeyComponent } from './si-chart-sankey.component';
[title]="title"
[subTitle]="subTitle"
/>
`
`,
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
class TestHostComponent {
readonly chartSankeyComponent = viewChild.required(SiChartSankeyComponent);
Expand Down
5 changes: 3 additions & 2 deletions projects/charts-ng/sankey/si-chart-sankey.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, input } from '@angular/core';
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
Comment thread
spliffone marked this conversation as resolved.
import { SiChartBaseComponent, SankeySeriesOption, echarts } from '@siemens/charts-ng/common';
import { SiCustomLegendComponent } from '@siemens/charts-ng/custom-legend';
import { SiChartLoadingSpinnerComponent } from '@siemens/charts-ng/loading-spinner';
Expand All @@ -14,7 +14,8 @@
selector: 'si-chart-sankey',
imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],
templateUrl: '../common/si-chart-base.component.html',
styleUrl: '../common/si-chart-base.component.scss'
styleUrl: '../common/si-chart-base.component.scss',
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
export class SiChartSankeyComponent extends SiChartBaseComponent {
/** The series for the chart. */
Expand All @@ -31,7 +32,7 @@
const series = this.series();
this.actualOptions = {
series: series ? [{ type: 'sankey', ...series }] : [],
tooltip: { show: this.toolTip() || this.tooltip() }

Check warning on line 35 in projects/charts-ng/sankey/si-chart-sankey.component.ts

View workflow job for this annotation

GitHub Actions / build-and-test / verification 

`toolTip` is deprecated. Use `tooltip` instead
};

this.applyTitles();
Expand Down
5 changes: 3 additions & 2 deletions projects/charts-ng/sunburst/si-chart-sunburst.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, SimpleChange, viewChild } from '@angular/core';
import { ChangeDetectionStrategy, Component, SimpleChange, viewChild } from '@angular/core';
Comment thread
spliffone marked this conversation as resolved.
import { TestBed } from '@angular/core/testing';
import { SunburstSeriesOption } from '@siemens/charts-ng/common';

Expand All @@ -17,7 +17,8 @@ import { SiChartSunburstComponent } from './si-chart-sunburst.component';
[title]="title"
[subTitle]="subTitle"
/>
`
`,
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
class TestHostComponent {
readonly chartSunburstComponent = viewChild.required(SiChartSunburstComponent);
Expand Down
5 changes: 3 additions & 2 deletions projects/charts-ng/sunburst/si-chart-sunburst.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, input } from '@angular/core';
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
Comment thread
spliffone marked this conversation as resolved.
import { SiChartBaseComponent, SunburstSeriesOption, echarts } from '@siemens/charts-ng/common';
import { SiCustomLegendComponent } from '@siemens/charts-ng/custom-legend';
import { SiChartLoadingSpinnerComponent } from '@siemens/charts-ng/loading-spinner';
Expand All @@ -14,7 +14,8 @@
selector: 'si-chart-sunburst',
imports: [SiCustomLegendComponent, SiChartLoadingSpinnerComponent],
templateUrl: '../common/si-chart-base.component.html',
styleUrl: '../common/si-chart-base.component.scss'
styleUrl: '../common/si-chart-base.component.scss',
changeDetection: ChangeDetectionStrategy.Default
Comment thread
spliffone marked this conversation as resolved.
})
export class SiChartSunburstComponent extends SiChartBaseComponent {
/** The series for the chart. */
Expand All @@ -31,7 +32,7 @@
const series = this.series();
this.actualOptions = {
series: series ? [{ type: 'sunburst', ...series }] : [],
tooltip: { show: this.toolTip() || this.tooltip() }

Check warning on line 35 in projects/charts-ng/sunburst/si-chart-sunburst.component.ts

View workflow job for this annotation

GitHub Actions / build-and-test / verification 

`toolTip` is deprecated. Use `tooltip` instead
};

this.applyTitles();
Expand Down
Loading