Feature/persist savings rate (#849)

* Persist savings rate

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Reused the value component in the _Ghostfolio in Numbers_ section of the about page
+- Persisted the savings rate in the _FIRE_ calculator
 - Upgraded `yahoo-finance2` from version `2.3.0` to `2.3.1`
 
 ## 1.139.0 - 18.04.2022

apps/api/src/app/user/update-user-setting.dto.ts

@@ -12,4 +12,8 @@ export class UpdateUserSettingDto {
   @IsString()
   @IsOptional()
   locale?: string;
+
+  @IsNumber()
+  @IsOptional()
+  savingsRate?: number;
 }

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

@@ -68,6 +68,13 @@ export class FirePageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public onSavingsRateChange(savingsRate: number) {
+    this.dataService
+      .putUserSetting({ savingsRate })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {});
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

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

@@ -41,7 +41,7 @@
               [value]="withdrawalRatePerMonth?.toNumber()"
             ></gf-value>
             per month</span
-          >, based on your investment of
+          >, based on your total assets of
           <gf-value
             class="d-inline-block"
             [currency]="user?.settings?.baseCurrency"
@@ -60,6 +60,8 @@
       [deviceType]="deviceType"
       [fireWealth]="fireWealth?.toNumber()"
       [locale]="user?.settings?.locale"
+      [savingsRate]="user?.settings?.savingsRate"
+      (savingsRateChanged)="onSavingsRateChange($event)"
     ></gf-fire-calculator>
   </div>
 </div>

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -5,9 +5,11 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
   OnChanges,
   OnDestroy,
+  Output,
   ViewChild
 } from '@angular/core';
 import { FormBuilder, FormControl } from '@angular/forms';
@@ -40,6 +42,9 @@ export class FireCalculatorComponent
   @Input() deviceType: string;
   @Input() fireWealth: number;
   @Input() locale: string;
+  @Input() savingsRate = 0;
+
+  @Output() savingsRateChanged = new EventEmitter<number>();
 
   @ViewChild('chartCanvas') chartCanvas;
 
@@ -73,7 +78,7 @@ export class FireCalculatorComponent
 
     this.calculatorForm.setValue({
       annualInterestRate: 5,
-      paymentPerPeriod: 500,
+      paymentPerPeriod: this.savingsRate,
       principalInvestmentAmount: 0,
       time: 10
     });
@@ -83,15 +88,28 @@ export class FireCalculatorComponent
       .subscribe(() => {
         this.initialize();
       });
+
+    this.calculatorForm
+      .get('paymentPerPeriod')
+      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((savingsRate) => {
+        this.savingsRateChanged.emit(savingsRate);
+      });
   }
 
   public ngAfterViewInit() {
     if (isNumber(this.fireWealth) && this.fireWealth >= 0) {
       setTimeout(() => {
         // Wait for the chartCanvas
-        this.calculatorForm.patchValue({
+        this.calculatorForm.patchValue(
-          principalInvestmentAmount: this.fireWealth
+          {
-        });
+            principalInvestmentAmount: this.fireWealth,
+            paymentPerPeriod: this.savingsRate ?? 0
+          },
+          {
+            emitEvent: false
+          }
+        );
         this.calculatorForm.get('principalInvestmentAmount').disable();
 
         this.changeDetectorRef.markForCheck();
@@ -103,9 +121,15 @@ export class FireCalculatorComponent
     if (isNumber(this.fireWealth) && this.fireWealth >= 0) {
       setTimeout(() => {
         // Wait for the chartCanvas
-        this.calculatorForm.patchValue({
+        this.calculatorForm.patchValue(
-          principalInvestmentAmount: this.fireWealth
+          {
-        });
+            principalInvestmentAmount: this.fireWealth,
+            paymentPerPeriod: this.savingsRate ?? 0
+          },
+          {
+            emitEvent: false
+          }
+        );
         this.calculatorForm.get('principalInvestmentAmount').disable();
 
         this.changeDetectorRef.markForCheck();
@@ -152,7 +176,7 @@ export class FireCalculatorComponent
                       0
                     );
 
-                    return `Total Amount: ${new Intl.NumberFormat(this.locale, {
+                    return `Total: ${new Intl.NumberFormat(this.locale, {
                       currency: this.currency,
                       currencyDisplay: 'code',
                       style: 'currency'