From ea3638a745ae02bd17a4bf2bce3a08c6f1937c9e Mon Sep 17 00:00:00 2001
From: yksolanki9 <yashsolanki1709@gmail.com>
Date: Sat, 8 Oct 2022 14:42:53 +0530
Subject: [PATCH] Add progressive line animation

---
 .../lib/line-chart/line-chart.component.ts    | 38 +++++++++++++++++--
 1 file changed, 34 insertions(+), 4 deletions(-)

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 5d9632790..ef09edfa0 100644
--- a/libs/ui/src/lib/line-chart/line-chart.component.ts
+++ b/libs/ui/src/lib/line-chart/line-chart.component.ts
@@ -164,21 +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: this.isAnimated && {
-              duration: 1000,
-              easing: 'easeOutCubic'
-            },
+            animation: this.isAnimated && <unknown>animation,
             aspectRatio: 16 / 9,
             elements: {
               point: {