fix(chart): Fixes an issue with the overlay of the selection area not

updating.

Fixes #608

apps/components-e2e/src/components/chart/selection-area/selection-area.e2e.ts

@@ -38,6 +38,7 @@ import {
   selectionArea,
   timestamp,
   timestampSelection,
+  setTimeframeButton,
 } from './selection-area.po';
 
 fixture('Selection Area')
@@ -141,6 +142,17 @@ test('should increase the selection by dragging the left handle', async (testCon
     .match(/Jul 31 \d{2}:15 — \d{2}:23/g);
 });
 
+test('should create a range and update the overlay when updating the range value programmatically', async (testController: TestController) => {
+  await createRange(520, { x: 310, y: 100 }, testController);
+
+  await testController
+    .expect(overlayText.textContent)
+    .match(/Jul 31 \d{2}:17 — \d{2}:23/g)
+    .click(setTimeframeButton, { speed: 0.3 })
+    .expect(overlayText.textContent)
+    .match(/Jul 31 \d{2}:15 — \d{2}:25/g);
+});
+
 test('should create a timestamp when it was clicked on a certain point of the screen', async (testController: TestController) => {
   await createTimestamp(
     { x: 400, y: 100 },

apps/components-e2e/src/components/chart/selection-area/selection-area.html

@@ -24,3 +24,7 @@
     </button>
   </dt-chart-range>
 </dt-chart>
+
+<button (click)="setTimeframe()" id="dt-chart-set-time-frame">
+  set timeframe
+</button>

apps/components-e2e/src/components/chart/selection-area/selection-area.po.ts

@@ -54,6 +54,8 @@ export const closeButton = overlay
   .child('button')
   .withAttribute('aria-label', /close/gim);
 
+export const setTimeframeButton = Selector('#dt-chart-set-time-frame');
+
 /** Creates a selection from the starting point with the provided width */
 export function createRange(
   width: number,

apps/components-e2e/src/components/chart/selection-area/selection-area.ts

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { DtE2EChartBase } from '../chart-base';
 import { DataService } from '../../../services/data.service';
+import { DtChartRange } from '@dynatrace/barista-components/chart';
 
 @Component({
   selector: 'dt-e2e-selection-area',
@@ -31,6 +32,8 @@ import { DataService } from '../../../services/data.service';
   ],
 })
 export class DtE2ESelectionArea extends DtE2EChartBase {
+  @ViewChild(DtChartRange, { static: false }) dtChartRange: DtChartRange;
+
   constructor(dataService: DataService) {
     super(dataService);
   }
@@ -42,4 +45,9 @@ export class DtE2ESelectionArea extends DtE2EChartBase {
   valueChanges(_value: number | [number, number]): void {
     // emits when the value changes
   }
+
+  // Set the time frame programmatically to a specific value
+  setTimeframe(): void {
+    this.dtChartRange.value = [1_564_546_551_309, 1_564_547_120_036];
+  }
 }

apps/dev/src/chart/chart-demo.component.html

@@ -90,7 +90,7 @@
     (valueChanges)="onTimeframeChanges($event)"
   ></dt-chart-timestamp>
 </dt-chart>
-
+<button (click)="setTimeframe()">set timeframe</button>
 <button (click)="switchData()">change</button>
 
 <dt-chart

apps/dev/src/chart/chart-demo.component.ts

@@ -94,4 +94,12 @@ export class ChartDemo {
   seriesVisibilityChanged(event: DtChartSeriesVisibilityChangeEvent): void {
     console.log(event);
   }
+
+  setTimeframe(): void {
+    this.lastTimeframe = [
+      this.lastTimeframe[0] - 100_000,
+      this.lastTimeframe[1] + 100_000,
+    ];
+    this.dtChartRange.value = this.lastTimeframe;
+  }
 }

components/chart/src/selection-area/selection-area.ts

@@ -40,6 +40,7 @@ import {
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {
   _addCssClass,
@@ -185,6 +186,7 @@ export class DtChartSelectionArea implements AfterContentInit, OnDestroy {
     private _viewportRuler: ViewportRuler,
     private _platform: Platform,
     private _overlayContainer: OverlayContainer,
+    private _changeDetectorRef: ChangeDetectorRef,
     // tslint:disable-next-line: no-any
     @Inject(DOCUMENT) private _document: any,
     @Optional() private _viewportResizer: DtViewportResizer,
@@ -449,6 +451,7 @@ export class DtChartSelectionArea implements AfterContentInit, OnDestroy {
       this._overlayRef.updatePositionStrategy(
         this._calculateOverlayPosition(ref, viewportOffset),
       );
+      this._changeDetectorRef.markForCheck();
     } else {
       this._createOverlay<T>(template, ref, viewRef, viewportOffset, value);
     }