diff --git a/CHANGELOG.md b/CHANGELOG.md index 59c2229d7..49d2b2129 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/api/src/app/user/update-user-setting.dto.ts b/apps/api/src/app/user/update-user-setting.dto.ts index b09e904df..b97dd287e 100644 --- a/apps/api/src/app/user/update-user-setting.dto.ts +++ b/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; } diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts index 30faa2230..bd4175f93 100644 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts +++ b/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(); diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.html b/apps/client/src/app/pages/portfolio/fire/fire-page.html index ebbfccb64..0aa0962e4 100644 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.html +++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html @@ -41,7 +41,7 @@ [value]="withdrawalRatePerMonth?.toNumber()" > per month, based on your investment of + >, based on your total assets of diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts index dc194206c..256bdd6a1 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts +++ b/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(); @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({ - principalInvestmentAmount: this.fireWealth - }); + this.calculatorForm.patchValue( + { + 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({ - principalInvestmentAmount: this.fireWealth - }); + this.calculatorForm.patchValue( + { + 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'