Feature/refactor animation configuration (#1337)

* Refactor animation configuration

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Supported a progressive line animation in the line chart component
+
 ### Changed
 
 - Moved the benchmark comparator from experimental to general availability

apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html

@@ -2,6 +2,7 @@
   <gf-line-chart
     class="mb-4"
     [historicalDataItems]="historicalDataItems"
+    [isAnimated]="true"
     [locale]="locale"
     [showXAxis]="true"
     [showYAxis]="true"

apps/client/src/app/components/home-market/home-market.html

@@ -11,6 +11,7 @@
         yMax="100"
         yMin="0"
         [historicalDataItems]="historicalData"
+        [isAnimated]="true"
         [locale]="user?.settings?.locale"
         [showXAxis]="true"
         [showYAxis]="true"

apps/client/src/app/components/home-overview/home-overview.html

@@ -18,6 +18,7 @@
           unit="%"
           [historicalDataItems]="historicalDataItems"
           [hidden]="historicalDataItems?.length === 0"
+          [isAnimated]="user?.settings?.dateRange === '1d' ? false : true"
           [locale]="user?.settings?.locale"
           [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
           [showGradient]="true"

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html

@@ -25,6 +25,7 @@
       [benchmarkDataItems]="benchmarkDataItems"
       [currency]="SymbolProfile?.currency"
       [historicalDataItems]="historicalDataItems"
+      [isAnimated]="true"
       [locale]="data.locale"
       [showGradient]="true"
       [showXAxis]="true"

libs/ui/src/lib/line-chart/line-chart.component.stories.ts

@@ -230,5 +230,6 @@ Simple.args = {
       date: '2021-03-18',
       value: 86666.03082624623
     }
-  ]
+  ],
+  isAnimated: true
 };

libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -48,7 +48,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() benchmarkLabel = '';
   @Input() currency: string;
   @Input() historicalDataItems: LineChartItem[];
-  @Input() isAnimated = true;
+  @Input() isAnimated = false;
   @Input() locale: string;
   @Input() showGradient = false;
   @Input() showLegend = false;
@@ -67,6 +67,8 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   public chart: Chart;
   public isLoading = true;
 
+  private readonly ANIMATION_DURATION = 1200;
+
   public constructor(private changeDetectorRef: ChangeDetectorRef) {
     Chart.register(
       Filler,
@@ -115,7 +117,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   private initialize() {
     this.isLoading = true;
     const benchmarkPrices = [];
-    const labels = [];
+    const labels: string[] = [];
     const marketPrices = [];
 
     this.historicalDataItems?.forEach((historicalDataItem, index) => {
@@ -164,51 +166,29 @@ 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.options.animation =
+          this.isAnimated &&
+          <unknown>{
+            x: this.getAnimationConfigurationForAxis({ labels, axis: 'x' }),
+            y: this.getAnimationConfigurationForAxis({ labels, axis: 'y' })
+          };
         this.chart.update();
       } else {
         this.chart = new Chart(this.chartCanvas.nativeElement, {
           data,
           options: {
-            animation: this.isAnimated && <unknown>animation,
+            animation:
+              this.isAnimated &&
+              <unknown>{
+                x: this.getAnimationConfigurationForAxis({ labels, axis: 'x' }),
+                y: this.getAnimationConfigurationForAxis({ labels, axis: 'y' })
+              },
             aspectRatio: 16 / 9,
             elements: {
               point: {
@@ -291,6 +271,31 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
     this.isLoading = false;
   }
 
+  private getAnimationConfigurationForAxis({
+    axis,
+    labels
+  }: {
+    axis: 'x' | 'y';
+    labels: string[];
+  }) {
+    const delayBetweenPoints = this.ANIMATION_DURATION / labels.length;
+
+    return {
+      delay(context) {
+        if (context.type !== 'data' || context[`${axis}Started`]) {
+          return 0;
+        }
+
+        context[`${axis}Started`] = true;
+        return context.index * delayBetweenPoints;
+      },
+      duration: delayBetweenPoints,
+      easing: 'linear',
+      from: NaN,
+      type: 'number'
+    };
+  }
+
   private getTooltipPluginConfiguration() {
     return {
       ...getTooltipOptions({