Feature/refresh the chart of the home page without redrawing it

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Added a periodic refresh of the numbers on the home, analysis and accounts pages while the page is visible, briefly coloring changed values green or red, with a live indicator in the header
+- Added a periodic refresh of the numbers on the home, analysis and accounts pages while the page is visible, briefly coloring changed values green or red, moving the chart of the home page without redrawing it, with a live indicator in the header
 - Added a link to the holdings tab in the holdings table on the overview tab of the home page (experimental)
 
 ### Changed

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -14,6 +14,7 @@ import {
   AssetProfileIdentifier,
   LineChartItem,
   PortfolioPerformance,
+  PortfolioPerformanceResponse,
   PortfolioPosition,
   User
 } from '@ghostfolio/common/interfaces';
@@ -178,11 +179,14 @@ export class GfHomeOverviewComponent implements OnInit {
         }),
         takeUntilDestroyed(this.destroyRef)
       )
-      .subscribe(({ errors, isMarketOpen, performance }) => {
+      .subscribe(({ chart, errors, isMarketOpen, performance }) => {
         this.errors.set(errors ?? []);
         this.isMarketOpen.set(isMarketOpen);
         this.performance.set(performance);
 
+        // Same series: the line chart moves without the drawing animation
+        this.historicalDataItems.set(this.getChartItems(chart));
+
         this.autoRefreshService.markUpdated();
       });
 
@@ -225,6 +229,19 @@ export class GfHomeOverviewComponent implements OnInit {
     });
   }
 
+  private getChartItems(
+    chart?: PortfolioPerformanceResponse['chart']
+  ): LineChartItem[] | null {
+    return (
+      chart?.map(({ date, netPerformanceInPercentageWithCurrencyEffect }) => {
+        return {
+          date,
+          value: (netPerformanceInPercentageWithCurrencyEffect ?? 0) * 100
+        };
+      }) ?? null
+    );
+  }
+
   private update() {
     const userSettings = this.user()?.settings;
 
@@ -255,16 +272,7 @@ export class GfHomeOverviewComponent implements OnInit {
         this.isMarketOpen.set(isMarketOpen);
         this.performance.set(performance);
 
-        this.historicalDataItems.set(
-          chart?.map(
-            ({ date, netPerformanceInPercentageWithCurrencyEffect }) => {
-              return {
-                date,
-                value: (netPerformanceInPercentageWithCurrencyEffect ?? 0) * 100
-              };
-            }
-          ) ?? null
-        );
+        this.historicalDataItems.set(this.getChartItems(chart));
 
         this.precision.set(2);
 

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

@@ -199,6 +199,12 @@ export class GfLineChartComponent
       };
 
       if (this.chart) {
+        // A refresh of the same series (e.g. a background refresh) only moves
+        // the line, the drawing animation is kept for a new series
+        const isRefresh =
+          this.chart.data.labels?.length === labels.length &&
+          this.chart.data.labels?.[0] === labels[0];
+
         this.chart.data = data;
         this.chart.options.plugins ??= {};
         this.chart.options.plugins.tooltip =
@@ -207,7 +213,7 @@ export class GfLineChartComponent
           ? animations
           : undefined;
 
-        this.chart.update();
+        this.chart.update(isRefresh ? 'none' : undefined);
       } else {
         this.chart = new Chart<'line'>(this.chartCanvas.nativeElement, {
           data,