diff --git a/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.html b/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.html index c8610d3dcc..329c678f75 100644 --- a/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.html +++ b/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.html @@ -89,6 +89,16 @@

Selection Mode

Node Stack +
+
+ +
{{ selected | json }}
diff --git a/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.ts b/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.ts index 55c6afd0c0..192111e855 100644 --- a/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.ts +++ b/apps/dev/src/stacked-series-chart/stacked-series-chart-demo.component.ts @@ -33,7 +33,7 @@ import { stackedSeriesChartDemoData } from './stacked-series-chart-demo-data'; export class StackedSeriesChartDemo { selectionMode: DtStackedSeriesChartSelectionMode = 'node'; selectable: boolean = true; - selected: [DtStackedSeriesChartSeries, DtStackedSeriesChartNode] = [ + selected: [DtStackedSeriesChartSeries?, DtStackedSeriesChartNode?] = [ stackedSeriesChartDemoData[3], stackedSeriesChartDemoData[3].nodes[1], ]; @@ -56,4 +56,8 @@ export class StackedSeriesChartDemo { ? stackedSeriesChartDemoData : [stackedSeriesChartDemoData[3]]; } + + clearSelection(): void { + this.selected = []; + } } diff --git a/libs/barista-components/stacked-series-chart/src/stacked-series-chart-column.scss b/libs/barista-components/stacked-series-chart/src/stacked-series-chart-column.scss index a3b343951a..15724637f0 100644 --- a/libs/barista-components/stacked-series-chart/src/stacked-series-chart-column.scss +++ b/libs/barista-components/stacked-series-chart/src/stacked-series-chart-column.scss @@ -86,6 +86,7 @@ See stacked-series-chart.layout.md left: -$selected-size; top: 0; bottom: 0; + pointer-events: none; } } } diff --git a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.ts b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.ts index f04f4673ea..0f868fea31 100644 --- a/libs/barista-components/stacked-series-chart/src/stacked-series-chart.ts +++ b/libs/barista-components/stacked-series-chart/src/stacked-series-chart.ts @@ -24,6 +24,7 @@ import { Input, NgZone, OnDestroy, + OnInit, Optional, Output, QueryList, @@ -95,7 +96,7 @@ const TICK_COLUMN_SPACING = 80; '[style.--dt-stacked-series-chart-grid-gap]': '_gridGap', }, }) -export class DtStackedSeriesChart implements OnDestroy { +export class DtStackedSeriesChart implements OnDestroy, OnInit { /** Array of series with their nodes. */ @Input() get series(): DtStackedSeriesChartSeries[] { @@ -336,7 +337,9 @@ export class DtStackedSeriesChart implements OnDestroy { */ private readonly _sanitizer: DomSanitizer, @Optional() @SkipSelf() private readonly _theme: DtTheme, - ) { + ) {} + + ngOnInit(): void { if (this._theme) { this._theme._stateChanges .pipe(takeUntil(this._destroy$)) @@ -350,19 +353,8 @@ export class DtStackedSeriesChart implements OnDestroy { merge(this._shouldUpdateTicks, this._resizer.change()) .pipe( tap(() => { - // HOTFIX: This If-statement is there to limit the error/exeption for now - // that would normally happen here. - // A deeper look into the root cause should be done - // - // Reproduce: - // Remove this if statement, run the demos app (`npm run demos `) and - // got the "stacked-series-chart-column-example". - // - // PR that initially introduced this issue: - // https://github.com/dynatrace-oss/barista/pull/1916/files - // Issue on angular: https://github.com/angular/angular/issues/32756 if (this.labelAxisMode === 'auto' && this.mode === 'column') { - // Recalculate every time the size changes + // Recalculate every time the size changes only if we are on these modes this._isAnyLabelOverflowing(); this._changeDetectorRef.detectChanges(); }