Feature/improve usability of fire calculator (#1779)

* Improve usability

* Add debounce
* Persist annualInterestRate
* Partially disable date picker

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the usability of the _FIRE_ calculator
+
 ## 1.244.0 - 2023-03-09
 
 ### Added

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

@@ -3,7 +3,6 @@ import type {
   DateRange,
   ViewMode
 } from '@ghostfolio/common/types';
-import { Type } from 'class-transformer';
 import {
   IsBoolean,
   IsIn,
@@ -14,6 +13,10 @@ import {
 } from 'class-validator';
 
 export class UpdateUserSettingDto {
+  @IsNumber()
+  @IsOptional()
+  annualInterestRate?: number;
+
   @IsOptional()
   @IsString()
   baseCurrency?: string;

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

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
+import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { PortfolioReportRule, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
@@ -20,6 +21,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
   public deviceType: string;
   public feeRules: PortfolioReportRule[];
   public fireWealth: Big;
+  public hasImpersonationId: boolean;
   public hasPermissionToCreateOrder: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public isLoading = false;
@@ -33,6 +35,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
+    private impersonationStorageService: ImpersonationStorageService,
     private userService: UserService
   ) {}
 
@@ -70,6 +73,13 @@ export class FirePageComponent implements OnDestroy, OnInit {
         this.changeDetectorRef.markForCheck();
       });
 
+    this.impersonationStorageService
+      .onChangeHasImpersonation()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((impersonationId) => {
+        this.hasImpersonationId = !!impersonationId;
+      });
+
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
@@ -91,6 +101,24 @@ export class FirePageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public onAnnualInterestRateChange(annualInterestRate: number) {
+    this.dataService
+      .putUserSetting({ annualInterestRate })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
+  }
+
   public onRetirementDateChange(retirementDate: Date) {
     this.dataService
       .putUserSetting({

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

@@ -11,15 +11,17 @@
           ></gf-premium-indicator>
         </h4>
         <gf-fire-calculator
+          [annualInterestRate]="user?.settings?.annualInterestRate"
           [colorScheme]="user?.settings?.colorScheme"
           [currency]="user?.settings?.baseCurrency"
           [deviceType]="deviceType"
           [fireWealth]="fireWealth?.toNumber()"
-          [hasPermissionToUpdateUserSettings]="hasPermissionToUpdateUserSettings"
+          [hasPermissionToUpdateUserSettings]="!hasImpersonationId && hasPermissionToUpdateUserSettings"
           [locale]="user?.settings?.locale"
           [projectedTotalAmount]="user?.settings?.projectedTotalAmount"
           [retirementDate]="user?.settings?.retirementDate"
           [savingsRate]="user?.settings?.savingsRate"
+          (annualInterestRateChanged)="onAnnualInterestRateChange($event)"
           (projectedTotalAmountChanged)="onProjectedTotalAmountChange($event)"
           (retirementDateChanged)="onRetirementDateChange($event)"
           (savingsRateChanged)="onSavingsRateChange($event)"
@@ -73,12 +75,14 @@
         ></gf-value>
         per month</span
       >, based on your total assets of
-      <gf-value
+      <span class="font-weight-bold"
+        ><gf-value
           class="d-inline-block"
           [currency]="user?.settings?.baseCurrency"
           [locale]="user?.settings?.locale"
           [value]="fireWealth?.toNumber()"
-      ></gf-value>
+        ></gf-value
+      ></span>
       and a withdrawal rate of 4%.
     </div>
   </div>

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

@@ -1,6 +1,7 @@
 import { ColorScheme, DateRange, ViewMode } from '@ghostfolio/common/types';
 
 export interface UserSettings {
+  annualInterestRate?: number;
   baseCurrency?: string;
   benchmark?: string;
   colorScheme?: ColorScheme;

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

@@ -30,18 +30,27 @@
 
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Retirement Date</mat-label>
+          <div>
+            {{
+              calculatorForm.controls['retirementDate'].value
+                | date : 'MMMM YYYY'
+            }}
+          </div>
           <input
+            class="d-none"
             formControlName="retirementDate"
             matInput
             [matDatepicker]="datepicker"
           />
           <mat-datepicker-toggle
             matIconSuffix
+            [disabled]="hasPermissionToUpdateUserSettings !== true"
             [for]="datepicker"
           ></mat-datepicker-toggle>
           <mat-datepicker
             #datepicker
             startView="multi-year"
+            [disabled]="hasPermissionToUpdateUserSettings !== true"
             (monthSelected)="setMonthAndYear($event, datepicker)"
           >
           </mat-datepicker>

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

@@ -8,4 +8,31 @@
       height: 100%;
     }
   }
+
+  ::ng-deep {
+    .mdc-text-field--disabled {
+      .mdc-floating-label,
+      .mdc-text-field__input {
+        color: inherit;
+      }
+
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__notch,
+      .mdc-notched-outline__trailing {
+        border-color: rgba(var(--dark-disabled-text));
+      }
+    }
+  }
+}
+
+:host-context(.is-dark-theme) {
+  ::ng-deep {
+    .mdc-text-field--disabled {
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__notch,
+      .mdc-notched-outline__trailing {
+        border-color: rgba(var(--dark-disabled-text));
+      }
+    }
+  }
 }

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

@@ -1,7 +1,6 @@
 import 'chartjs-adapter-date-fns';
 
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -39,7 +38,7 @@ import {
   sub
 } from 'date-fns';
 import { isNumber } from 'lodash';
-import { Subject, takeUntil } from 'rxjs';
+import { debounceTime, Subject, takeUntil } from 'rxjs';
 
 import { FireCalculatorService } from './fire-calculator.service';
 
@@ -49,9 +48,8 @@ import { FireCalculatorService } from './fire-calculator.service';
   styleUrls: ['./fire-calculator.component.scss'],
   templateUrl: './fire-calculator.component.html'
 })
-export class FireCalculatorComponent
-  implements AfterViewInit, OnChanges, OnDestroy
-{
+export class FireCalculatorComponent implements OnChanges, OnDestroy {
+  @Input() annualInterestRate = 5;
   @Input() colorScheme: ColorScheme;
   @Input() currency: string;
   @Input() deviceType: string;
@@ -62,6 +60,7 @@ export class FireCalculatorComponent
   @Input() retirementDate: Date;
   @Input() savingsRate = 0;
 
+  @Output() annualInterestRateChanged = new EventEmitter<number>();
   @Output() projectedTotalAmountChanged = new EventEmitter<number>();
   @Output() retirementDateChanged = new EventEmitter<Date>();
   @Output() savingsRateChanged = new EventEmitter<number>();
@@ -100,7 +99,7 @@ export class FireCalculatorComponent
 
     this.calculatorForm.setValue(
       {
-        annualInterestRate: 5,
+        annualInterestRate: this.annualInterestRate,
         paymentPerPeriod: this.savingsRate,
         principalInvestmentAmount: 0,
         projectedTotalAmount: this.projectedTotalAmount,
@@ -117,75 +116,45 @@ export class FireCalculatorComponent
         this.initialize();
       });
 
+    this.calculatorForm
+      .get('annualInterestRate')
+      .valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject))
+      .subscribe((annualInterestRate) => {
+        this.annualInterestRateChanged.emit(annualInterestRate);
+      });
     this.calculatorForm
       .get('paymentPerPeriod')
-      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
+      .valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject))
       .subscribe((savingsRate) => {
         this.savingsRateChanged.emit(savingsRate);
       });
     this.calculatorForm
       .get('projectedTotalAmount')
-      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
+      .valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject))
       .subscribe((projectedTotalAmount) => {
         this.projectedTotalAmountChanged.emit(projectedTotalAmount);
       });
     this.calculatorForm
       .get('retirementDate')
-      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
+      .valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject))
       .subscribe((retirementDate) => {
         this.retirementDateChanged.emit(retirementDate);
       });
   }
 
-  public ngAfterViewInit() {
-    if (isNumber(this.fireWealth) && this.fireWealth >= 0) {
-      setTimeout(() => {
-        // Wait for the chartCanvas
-        this.calculatorForm.patchValue(
-          {
-            paymentPerPeriod: this.getPMT(),
-            principalInvestmentAmount: this.getP(),
-            projectedTotalAmount:
-              Number(this.getProjectedTotalAmount().toFixed(2)) ?? 0,
-            retirementDate:
-              this.getRetirementDate() ?? this.DEFAULT_RETIREMENT_DATE
-          },
-          {
-            emitEvent: false
-          }
-        );
-        this.calculatorForm.get('principalInvestmentAmount').disable();
-
-        this.changeDetectorRef.markForCheck();
-      });
-    }
-
-    if (this.hasPermissionToUpdateUserSettings === true) {
-      this.calculatorForm.get('paymentPerPeriod').enable({ emitEvent: false });
-      this.calculatorForm
-        .get('projectedTotalAmount')
-        .enable({ emitEvent: false });
-      this.calculatorForm.get('retirementDate').enable({ emitEvent: false });
-    } else {
-      this.calculatorForm.get('paymentPerPeriod').disable({ emitEvent: false });
-      this.calculatorForm
-        .get('projectedTotalAmount')
-        .disable({ emitEvent: false });
-      this.calculatorForm.get('retirementDate').disable({ emitEvent: false });
-    }
-  }
-
   public ngOnChanges() {
     this.periodsToRetire = this.getPeriodsToRetire();
+
     if (isNumber(this.fireWealth) && this.fireWealth >= 0) {
       setTimeout(() => {
         // Wait for the chartCanvas
         this.calculatorForm.patchValue(
           {
+            annualInterestRate: this.annualInterestRate,
             principalInvestmentAmount: this.fireWealth,
             paymentPerPeriod: this.savingsRate ?? 0,
             projectedTotalAmount:
-              Number(this.getProjectedTotalAmount().toFixed(2)) ?? 0,
+              Number(this.getProjectedTotalAmount().toFixed(0)) ?? 0,
             retirementDate:
               this.getRetirementDate() ?? this.DEFAULT_RETIREMENT_DATE
           },
@@ -200,18 +169,24 @@ export class FireCalculatorComponent
     }
 
     if (this.hasPermissionToUpdateUserSettings === true) {
+      this.calculatorForm
+        .get('annualInterestRate')
+        .enable({ emitEvent: false });
       this.calculatorForm.get('paymentPerPeriod').enable({ emitEvent: false });
       this.calculatorForm
         .get('projectedTotalAmount')
         .enable({ emitEvent: false });
-      this.calculatorForm.get('retirementDate').enable({ emitEvent: false });
     } else {
+      this.calculatorForm
+        .get('annualInterestRate')
+        .disable({ emitEvent: false });
       this.calculatorForm.get('paymentPerPeriod').disable({ emitEvent: false });
       this.calculatorForm
         .get('projectedTotalAmount')
         .disable({ emitEvent: false });
-      this.calculatorForm.get('retirementDate').disable({ emitEvent: false });
     }
+
+    this.calculatorForm.get('retirementDate').disable({ emitEvent: false });
   }
 
   public setMonthAndYear(