feat(chart): Add animation for chart heatfield.

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

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,
+  },
+];

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',
+    },
+  }),
+]);