feat(chart): Add animation for chart heatfield.

Part of #476
Create reusable fade animation
Fade in heatfield overlay
Animate scale of heatfield marker and heatfield backdrop

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

@@ -57,7 +57,7 @@
     <a class="dt-link">View problem details</a>
   </dt-chart-heatfield>
   <dt-chart-heatfield
-    [start]="1564546530000"
+    [start]="1564546730000"
     [end]="1564546960000"
     color="main"
   >

libs/barista-components/chart/src/heatfield/chart-heatfield-config.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ConnectedPosition } from '@angular/cdk/overlay';
+
+/** Distance between heatfield backdrop and heatfield marker */
+export const DT_HEATFIELD_TOP_OFFSET = 16;
+
+/** Possible heatfield overlay positions */
+export const DT_HEATFIELD_OVERLAY_POSITIONS: ConnectedPosition[] = [
+  {
+    originX: 'center',
+    originY: 'top',
+    overlayX: 'center',
+    overlayY: 'bottom',
+    offsetY: -8,
+  },
+  {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'top',
+    offsetX: 8,
+  },
+  {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'top',
+    offsetX: -8,
+  },
+];

libs/barista-components/chart/src/heatfield/chart-heatfield.html

@@ -15,14 +15,13 @@
   [cdkConnectedOverlayOpen]="_isValidStartEndRange && active"
   [cdkConnectedOverlayPositions]="_positions"
 >
-  <div class="dt-chart-heatfield-overlay">
+  <div [@fade]="_overlayAnimationState" class="dt-chart-heatfield-overlay">
     <ng-content></ng-content>
   </div>
 </ng-template>
 
 <div
   class="dt-chart-heatfield-backdrop"
   #backdrop
-  [style.visibility]="_isValidStartEndRange && active ? 'visible' : 'hidden'"
   [style.height.px]="_boundingBox && _boundingBox.height"
 ></div>

libs/barista-components/chart/src/heatfield/chart-heatfield.scss

@@ -2,6 +2,9 @@
 @import '../../../core/src/style/overlay';
 @import './chart-heatfield-theme';
 
+$animation-duration: 150ms;
+$animation-delay: 40ms;
+
 .dt-chart-heatfield-marker {
   height: 8px;
   outline: 2px solid #ffffff;
@@ -13,14 +16,25 @@
   width: 100%;
   display: block;
   z-index: 1;
+  transform-origin: top;
+  transition: transform $animation-duration ease-in-out $animation-delay;
 }
 
 .dt-chart-heatfield-marker.dt-chart-heatfield-active {
-  height: 12px;
+  transform: scaleY(1.5);
+  transition: transform 50ms ease-in-out;
 }
 
 .dt-chart-heatfield-backdrop {
   position: absolute;
+  transform-origin: top;
+  transform: scaleY(0);
+  transition: transform $animation-duration ease-out;
+}
+
+.dt-chart-heatfield-active + .dt-chart-heatfield-backdrop {
+  transform: scaleY(1);
+  transition: transform $animation-duration ease-out $animation-delay;
 }
 
 .dt-chart-heatfield-overlay {

libs/barista-components/chart/src/heatfield/chart-heatfield.spec.ts

@@ -35,6 +35,7 @@ import {
   TestBed,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
   DtChart,
   DtChartHeatfield,
@@ -57,7 +58,7 @@ describe('DtChartHeatfield', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [DtChartModule, DtThemingModule],
+      imports: [NoopAnimationsModule, DtChartModule, DtThemingModule],
       declarations: [SingleHeatfield, MultipleHeatfield, DummyChart],
     });
 

libs/barista-components/chart/src/heatfield/chart-heatfield.ts

@@ -32,6 +32,7 @@ import {
 import {
   CanColor,
   Constructor,
+  dtFadeAnimation,
   isDefined,
   mixinColor,
   _readKeyCode,
@@ -40,31 +41,10 @@ import { clamp, round } from 'lodash';
 import { Subject } from 'rxjs';
 import { PlotBackgroundInfo } from '../utils';
 
-const DT_HEATFIELD_TOP_OFFSET = 16;
-
-const DT_HEATFIELD_OVERLAY_POSITIONS: ConnectedPosition[] = [
-  {
-    originX: 'center',
-    originY: 'top',
-    overlayX: 'center',
-    overlayY: 'bottom',
-    offsetY: -8,
-  },
-  {
-    originX: 'end',
-    originY: 'top',
-    overlayX: 'start',
-    overlayY: 'top',
-    offsetX: 8,
-  },
-  {
-    originX: 'start',
-    originY: 'top',
-    overlayX: 'end',
-    overlayY: 'top',
-    offsetX: -8,
-  },
-];
+import {
+  DT_HEATFIELD_TOP_OFFSET,
+  DT_HEATFIELD_OVERLAY_POSITIONS,
+} from './chart-heatfield-config';
 
 /** Event object emitted by DtOption when selected or deselected. */
 export class DtChartHeatfieldActiveChange {
@@ -94,6 +74,7 @@ export const _DtHeatfieldMixinBase = mixinColor<
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.Emulated,
   inputs: ['color'],
+  animations: [dtFadeAnimation],
 })
 export class DtChartHeatfield extends _DtHeatfieldMixinBase
   implements CanColor<DtChartHeatfieldThemePalette>, OnDestroy {
@@ -102,6 +83,9 @@ export class DtChartHeatfield extends _DtHeatfieldMixinBase
     DtChartHeatfieldActiveChange
   >();
 
+  /** @internal The current state of the animation. */
+  _overlayAnimationState: 'void' | 'fadeIn' = 'void';
+
   private _start: number;
 
   /** Start on the xAxis of the chart for the heatfield */
@@ -141,6 +125,7 @@ export class DtChartHeatfield extends _DtHeatfieldMixinBase
     const coercedValue = coerceBooleanProperty(val);
     if (this._active !== coercedValue) {
       this._active = coercedValue;
+      this._overlayAnimationState = coercedValue ? 'fadeIn' : 'void';
       this.activeChange.next(new DtChartHeatfieldActiveChange(this));
       this._changeDetectorRef.markForCheck();
     }
@@ -233,6 +218,8 @@ export class DtChartHeatfield extends _DtHeatfieldMixinBase
    * @internal
    */
   _toggleActive(): void {
+    this._overlayAnimationState =
+      this._overlayAnimationState === 'fadeIn' ? 'void' : 'fadeIn';
     this.active = !this.active;
   }
 

libs/barista-components/core/src/animations/fade-animation.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  animate,
+  AnimationTriggerMetadata,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+
+/**
+ * Reusable fade animation with default parameters that can be overridden
+ * by the animation trigger property binding
+ * Default animation:
+ * _triggerProperty: 'void' | 'state-name' = 'void'
+ * Override params:
+ * _triggerProperty = { value: 'void', params: { duration: '300ms', easing: 'ease-out' }}
+ */
+export const dtFadeAnimation: AnimationTriggerMetadata = trigger('fade', [
+  state('void', style({ opacity: 0 })),
+  transition(':enter', [animate('{{ duration }} {{ easing }}')], {
+    params: {
+      duration: '150ms',
+      easing: 'ease-in-out',
+    },
+  }),
+  transition(':leave', [animate('{{ duration }} {{ easing }}')], {
+    params: {
+      duration: '150ms',
+      easing: 'ease-in-out',
+    },
+  }),
+]);

libs/barista-components/core/src/animations/index.ts

@@ -15,3 +15,4 @@
  */
 
 export * from './error-animations';
+export * from './fade-animation';