Update savingsRate based on group

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -198,6 +198,15 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
         this.chart.options.scales.x.min = this.daysInMarket
           ? subDays(new Date(), this.daysInMarket).toISOString()
           : undefined;
+
+        if (
+          this.savingsRate &&
+          this.chart.options.plugins.annotation.annotations.savingsRate
+        ) {
+          this.chart.options.plugins.annotation.annotations.savingsRate.value =
+            this.savingsRate;
+        }
+
         this.chart.update();
       } else {
         this.chart = new Chart(this.chartCanvas.nativeElement, {

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -92,6 +92,15 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
       });
   }
 
+  get savingsRate() {
+    const savingsRate =
+      this.hasImpersonationId || this.user.settings.isRestrictedView
+        ? undefined
+        : this.user?.settings?.savingsRate;
+
+    return this.mode === 'year' ? savingsRate * 12 : savingsRate;
+  }
+
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -180,15 +180,15 @@
       <div class="chart-container">
         <gf-investment-chart
           class="h-100"
-          groupBy="month"
           [benchmarkDataItems]="investmentsByGroup"
           [benchmarkDataLabel]="investmentTimelineDataLabel"
           [currency]="user?.settings?.baseCurrency"
           [daysInMarket]="daysInMarket"
+          [groupBy]="mode"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
           [locale]="user?.settings?.locale"
           [range]="user?.settings?.dateRange"
-          [savingsRate]="(hasImpersonationId || user.settings.isRestrictedView) ? undefined : user?.settings?.savingsRate"
+          [savingsRate]="savingsRate"
         ></gf-investment-chart>
       </div>
     </div>

libs/common/src/lib/interfaces/user-settings.interface.ts

@@ -10,5 +10,6 @@ export interface UserSettings {
   isRestrictedView?: boolean;
   language?: string;
   locale?: string;
+  savingsRate?: number;
   viewMode?: ViewMode;
 }