From 57a75b6c468eee273abb2801704c0f88a4e668ec Mon Sep 17 00:00:00 2001
From: Peter Affenzeller <peter.affenzeller@dynatrace.com>
Date: Thu, 13 Feb 2020 14:05:04 +0100
Subject: [PATCH] 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
---
 .../src/heatfield/chart-heatfield-config.ts   | 45 +++++++++++++++++
 .../core/src/animations/fade-animation.ts     | 48 +++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 components/chart/src/heatfield/chart-heatfield-config.ts
 create mode 100644 components/core/src/animations/fade-animation.ts

diff --git a/components/chart/src/heatfield/chart-heatfield-config.ts b/components/chart/src/heatfield/chart-heatfield-config.ts
new file mode 100644
index 0000000000..a143b9f4ca
--- /dev/null
+++ b/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,
+  },
+];
diff --git a/components/core/src/animations/fade-animation.ts b/components/core/src/animations/fade-animation.ts
new file mode 100644
index 0000000000..a04ec20683
--- /dev/null
+++ b/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',
+    },
+  }),
+]);