fix(stacked-series-chart): Show stack mode tooltip highlight + proper…

… fix of console error on init. fix(stacked-series-chart): Add task id to TODO & lint. fix(stacked-series-chart): Fix formatting issue.
dynatrace-oss · Feb 10, 2021 · 70ba2b7 · 70ba2b7
1 parent a749694
commit 70ba2b7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 15 deletions.
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
@@ -89,6 +89,16 @@ <h4>Selection Mode</h4>
       <dt-button-group-item value="node">Node</dt-button-group-item>
       <dt-button-group-item value="stack">Stack</dt-button-group-item>
     </dt-button-group>
+    <br />
+    <br />
+    <!-- TODO: APM-282124 Allow clearing the selection on stack mode from the outside -->
+    <button
+      dt-button
+      (click)="clearSelection()"
+      [disabled]="selectionMode === 'stack'"
+    >
+      Clear selection
+    </button>
 
     <pre>{{ selected | json }}</pre>
   </div>

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
@@ -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
@@ -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
@@ -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();
           }