From 44dfd2bd483c33584d770e2dd69d40dd28eb2d7d Mon Sep 17 00:00:00 2001
From: Yash Solanki <yashsolanki1709@gmail.com>
Date: Sat, 8 Oct 2022 17:17:48 +0530
Subject: [PATCH] Add animation to line chart (#1328)

---
 .../lib/line-chart/line-chart.component.ts    | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/libs/ui/src/lib/line-chart/line-chart.component.ts b/libs/ui/src/lib/line-chart/line-chart.component.ts
index 7c0318d3e..ef09edfa0 100644
--- a/libs/ui/src/lib/line-chart/line-chart.component.ts
+++ b/libs/ui/src/lib/line-chart/line-chart.component.ts
@@ -48,6 +48,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() benchmarkLabel = '';
   @Input() currency: string;
   @Input() historicalDataItems: LineChartItem[];
+  @Input() isAnimated = true;
   @Input() locale: string;
   @Input() showGradient = false;
   @Input() showLegend = false;
@@ -163,18 +164,51 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
       ]
     };
 
+    const animationDuration = 1000;
+
+    const delayBetweenPoints = animationDuration / labels.length;
+    const animation = {
+      x: {
+        type: 'number',
+        easing: 'linear',
+        duration: delayBetweenPoints,
+        from: NaN,
+        delay(ctx) {
+          if (ctx.type !== 'data' || ctx.xStarted) {
+            return 0;
+          }
+          ctx.xStarted = true;
+          return ctx.index * delayBetweenPoints;
+        }
+      },
+      y: {
+        type: 'number',
+        easing: 'linear',
+        duration: delayBetweenPoints,
+        from: 0,
+        delay(ctx) {
+          if (ctx.type !== 'data' || ctx.yStarted) {
+            return 0;
+          }
+          ctx.yStarted = true;
+          return ctx.index * delayBetweenPoints;
+        }
+      }
+    };
+
     if (this.chartCanvas) {
       if (this.chart) {
         this.chart.data = data;
         this.chart.options.plugins.tooltip = <unknown>(
           this.getTooltipPluginConfiguration()
         );
+        this.chart.options.animation = this.isAnimated && <unknown>animation;
         this.chart.update();
       } else {
         this.chart = new Chart(this.chartCanvas.nativeElement, {
           data,
           options: {
-            animation: false,
+            animation: this.isAnimated && <unknown>animation,
             aspectRatio: 16 / 9,
             elements: {
               point: {