Feature/extend fire calculator by retirement date (#1748)

* Extend fire calculator by retirement date

* Update changelog

---------

Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>

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

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

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

@@ -17,12 +17,6 @@
           <span class="ml-2" matTextSuffix>{{ currency }}</span>
         </mat-form-field>
 
-        <mat-form-field appearance="outline" class="w-100">
-          <mat-label i18n>Investment Horizon</mat-label>
-          <input formControlName="time" matInput type="number" />
-          <span class="ml-2" i18n matTextSuffix>years</span>
-        </mat-form-field>
-
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Annual Interest Rate</mat-label>
           <input
@@ -34,15 +28,35 @@
           <div class="ml-2" matTextSuffix>%</div>
         </mat-form-field>
 
-        <gf-value
-          i18n
-          size="large"
-          [currency]="currency"
-          [isCurrency]="true"
-          [locale]="locale"
-          [value]="projectedTotalAmount"
-          >Projected Total Amount</gf-value
-        >
+        <mat-form-field appearance="outline" class="w-100">
+          <mat-label i18n>Retirement Date</mat-label>
+          <input
+            formControlName="retirementDate"
+            matInput
+            [matDatepicker]="datepicker"
+          />
+          <mat-datepicker-toggle
+            matIconSuffix
+            [for]="datepicker"
+          ></mat-datepicker-toggle>
+          <mat-datepicker
+            #datepicker
+            startView="multi-year"
+            (monthSelected)="setMonthAndYear($event, datepicker)"
+          >
+          </mat-datepicker>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="w-100">
+          <mat-label i18n>Projected Total Amount</mat-label>
+          <input
+            formControlName="projectedTotalAmount"
+            matInput
+            step="100"
+            type="number"
+          />
+          <span class="ml-2" matTextSuffix>{{ currency }}</span>
+        </mat-form-field>
       </form>
     </div>
     <div class="col-md-9 text-center">

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

@@ -13,6 +13,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { FormBuilder, FormControl } from '@angular/forms';
+import { MatDatepicker } from '@angular/material/datepicker';
 import {
   getTooltipOptions,
   transformTickToAbbreviation
@@ -28,17 +29,25 @@ import {
   Tooltip
 } from 'chart.js';
 import * as Color from 'color';
-import { getMonth } from 'date-fns';
+import {
+  add,
+  addYears,
+  getMonth,
+  setMonth,
+  setYear,
+  startOfMonth,
+  sub
+} from 'date-fns';
 import { isNumber } from 'lodash';
 import { Subject, takeUntil } from 'rxjs';
 
 import { FireCalculatorService } from './fire-calculator.service';
 
 @Component({
-  selector: 'gf-fire-calculator',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './fire-calculator.component.html',
-  styleUrls: ['./fire-calculator.component.scss']
+  selector: 'gf-fire-calculator',
+  styleUrls: ['./fire-calculator.component.scss'],
+  templateUrl: './fire-calculator.component.html'
 })
 export class FireCalculatorComponent
   implements AfterViewInit, OnChanges, OnDestroy
@@ -49,8 +58,12 @@ export class FireCalculatorComponent
   @Input() fireWealth: number;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() locale: string;
+  @Input() projectedTotalAmount = 0;
+  @Input() retirementDate: Date;
   @Input() savingsRate = 0;
 
+  @Output() projectedTotalAmountChanged = new EventEmitter<number>();
+  @Output() retirementDateChanged = new EventEmitter<Date>();
   @Output() savingsRateChanged = new EventEmitter<number>();
 
   @ViewChild('chartCanvas') chartCanvas;
@@ -59,13 +72,17 @@ export class FireCalculatorComponent
     annualInterestRate: new FormControl<number>(undefined),
     paymentPerPeriod: new FormControl<number>(undefined),
     principalInvestmentAmount: new FormControl<number>(undefined),
-    time: new FormControl<number>(undefined)
+    projectedTotalAmount: new FormControl<number>(undefined),
+    retirementDate: new FormControl<Date>(undefined)
   });
   public chart: Chart<'bar'>;
   public isLoading = true;
-  public projectedTotalAmount: number;
+  public periodsToRetire = 0;
 
   private readonly CONTRIBUTION_PERIOD = 12;
+  private readonly DEFAULT_RETIREMENT_DATE = startOfMonth(
+    addYears(new Date(), 10)
+  );
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -86,7 +103,8 @@ export class FireCalculatorComponent
         annualInterestRate: 5,
         paymentPerPeriod: this.savingsRate,
         principalInvestmentAmount: 0,
-        time: 10
+        projectedTotalAmount: this.projectedTotalAmount,
+        retirementDate: this.retirementDate ?? this.DEFAULT_RETIREMENT_DATE
       },
       {
         emitEvent: false
@@ -105,6 +123,18 @@ export class FireCalculatorComponent
       .subscribe((savingsRate) => {
         this.savingsRateChanged.emit(savingsRate);
       });
+    this.calculatorForm
+      .get('projectedTotalAmount')
+      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((projectedTotalAmount) => {
+        this.projectedTotalAmountChanged.emit(projectedTotalAmount);
+      });
+    this.calculatorForm
+      .get('retirementDate')
+      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((retirementDate) => {
+        this.retirementDateChanged.emit(retirementDate);
+      });
   }
 
   public ngAfterViewInit() {
@@ -113,8 +143,12 @@ export class FireCalculatorComponent
         // Wait for the chartCanvas
         this.calculatorForm.patchValue(
           {
-            principalInvestmentAmount: this.fireWealth,
-            paymentPerPeriod: this.savingsRate ?? 0
+            paymentPerPeriod: this.getPMT(),
+            principalInvestmentAmount: this.getP(),
+            projectedTotalAmount:
+              Number(this.getProjectedTotalAmount().toFixed(2)) ?? 0,
+            retirementDate:
+              this.getRetirementDate() ?? this.DEFAULT_RETIREMENT_DATE
           },
           {
             emitEvent: false
@@ -128,19 +162,32 @@ export class FireCalculatorComponent
 
     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(
           {
             principalInvestmentAmount: this.fireWealth,
-            paymentPerPeriod: this.savingsRate ?? 0
+            paymentPerPeriod: this.savingsRate ?? 0,
+            projectedTotalAmount:
+              Number(this.getProjectedTotalAmount().toFixed(2)) ?? 0,
+            retirementDate:
+              this.getRetirementDate() ?? this.DEFAULT_RETIREMENT_DATE
           },
           {
             emitEvent: false
@@ -154,11 +201,32 @@ export class FireCalculatorComponent
 
     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 setMonthAndYear(
+    normalizedMonthAndYear: Date,
+    datepicker: MatDatepicker<Date>
+  ) {
+    const retirementDate = this.calculatorForm.get('retirementDate').value;
+    const newRetirementDate = setMonth(
+      setYear(retirementDate, normalizedMonthAndYear.getFullYear()),
+      normalizedMonthAndYear.getMonth()
+    );
+    this.calculatorForm.get('retirementDate').setValue(newRetirementDate);
+    datepicker.close();
+  }
+
   public ngOnDestroy() {
     this.chart?.destroy();
 
@@ -261,17 +329,22 @@ export class FireCalculatorComponent
     const labels = [];
 
     // Principal investment amount
-    const P: number =
-      this.calculatorForm.get('principalInvestmentAmount').value || 0;
+    const P: number = this.getP();
 
     // Payment per period
-    const PMT = this.calculatorForm.get('paymentPerPeriod').value;
+    const PMT = this.getPMT();
 
     // Annual interest rate
-    const r: number = this.calculatorForm.get('annualInterestRate').value / 100;
+    const r: number = this.getR();
+
+    // Calculate retirement date
+    // if we want to retire at month x, we need the projectedTotalAmount at month x-1
+    const lastPeriodDate = sub(this.getRetirementDate(), { months: 1 });
+    const yearsToRetire = lastPeriodDate.getFullYear() - currentYear;
 
     // Time
-    const t = this.calculatorForm.get('time').value;
+    // +1 to take into account the current year
+    const t = yearsToRetire + 1;
 
     for (let year = currentYear; year < currentYear + t; year++) {
       labels.push(year);
@@ -308,7 +381,7 @@ export class FireCalculatorComponent
     for (let period = 1; period <= t; period++) {
       const periodInMonths =
         period * this.CONTRIBUTION_PERIOD - monthsPassedInCurrentYear;
-      const { interest, principal, totalAmount } =
+      const { interest, principal } =
         this.fireCalculatorService.calculateCompoundInterest({
           P,
           periodInMonths,
@@ -319,10 +392,6 @@ export class FireCalculatorComponent
       datasetDeposit.data.push(this.fireWealth);
       datasetInterest.data.push(interest.toNumber());
       datasetSavings.data.push(principal.minus(this.fireWealth).toNumber());
-
-      if (period === t) {
-        this.projectedTotalAmount = totalAmount.toNumber();
-      }
     }
 
     return {
@@ -330,4 +399,67 @@ export class FireCalculatorComponent
       datasets: [datasetDeposit, datasetSavings, datasetInterest]
     };
   }
+
+  private getP() {
+    return this.fireWealth || 0;
+  }
+
+  private getPeriodsToRetire(): number {
+    if (this.projectedTotalAmount) {
+      const periods = this.fireCalculatorService.calculatePeriodsToRetire({
+        P: this.getP(),
+        totalAmount: this.projectedTotalAmount,
+        PMT: this.getPMT(),
+        r: this.getR()
+      });
+
+      return periods;
+    } else {
+      const today = new Date();
+      const retirementDate =
+        this.retirementDate ?? this.DEFAULT_RETIREMENT_DATE;
+
+      return (
+        12 * (retirementDate.getFullYear() - today.getFullYear()) +
+        retirementDate.getMonth() -
+        today.getMonth()
+      );
+    }
+  }
+
+  private getPMT() {
+    return this.savingsRate ?? 0;
+  }
+
+  private getProjectedTotalAmount() {
+    if (this.projectedTotalAmount) {
+      return this.projectedTotalAmount || 0;
+    } else {
+      const { totalAmount } =
+        this.fireCalculatorService.calculateCompoundInterest({
+          P: this.getP(),
+          periodInMonths: this.periodsToRetire,
+          PMT: this.getPMT(),
+          r: this.getR()
+        });
+
+      return totalAmount.toNumber();
+    }
+  }
+
+  private getR() {
+    return this.calculatorForm.get('annualInterestRate').value / 100;
+  }
+
+  private getRetirementDate(): Date {
+    const monthsToRetire = this.periodsToRetire % 12;
+    const yearsToRetire = Math.floor(this.periodsToRetire / 12);
+
+    return startOfMonth(
+      add(new Date(), {
+        months: monthsToRetire,
+        years: yearsToRetire
+      })
+    );
+  }
 }

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

@@ -2,11 +2,11 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { GfValueModule } from '../value';
 import { FireCalculatorComponent } from './fire-calculator.component';
 import { FireCalculatorService } from './fire-calculator.service';
 
@@ -16,8 +16,8 @@ import { FireCalculatorService } from './fire-calculator.service';
   imports: [
     CommonModule,
     FormsModule,
-    GfValueModule,
     MatButtonModule,
+    MatDatepickerModule,
     MatFormFieldModule,
     MatInputModule,
     NgxSkeletonLoaderModule,

libs/ui/src/lib/fire-calculator/fire-calculator.service.spec.ts

@@ -0,0 +1,69 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import Big from 'big.js';
+
+import { FireCalculatorService } from './fire-calculator.service';
+
+describe('FireCalculatorService', () => {
+  let fireCalculatorService: FireCalculatorService;
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [FireCalculatorService]
+    }).compile();
+
+    fireCalculatorService = module.get<FireCalculatorService>(
+      FireCalculatorService
+    );
+  });
+
+  describe('Test periods to retire', () => {
+    it('should return the correct amount of periods to retire with no interst rate', async () => {
+      const r = 0;
+      const P = 1000;
+      const totalAmount = 1900;
+      const PMT = 100;
+
+      const periodsToRetire = fireCalculatorService.calculatePeriodsToRetire({
+        P,
+        r,
+        PMT,
+        totalAmount
+      });
+
+      expect(periodsToRetire).toBe(9);
+    });
+
+    it('should return the 0 when total amount is 0', async () => {
+      const r = 0.05;
+      const P = 100000;
+      const totalAmount = 0;
+      const PMT = 10000;
+
+      const periodsToRetire = fireCalculatorService.calculatePeriodsToRetire({
+        P,
+        r,
+        PMT,
+        totalAmount
+      });
+
+      expect(periodsToRetire).toBe(0);
+    });
+
+    it('should return the correct amount of periods to retire with interst rate', async () => {
+      const r = 0.05;
+      const P = 598478.96;
+      const totalAmount = 812399.66;
+      const PMT = 6000;
+      const expectedPeriods = 24;
+
+      const periodsToRetire = fireCalculatorService.calculatePeriodsToRetire({
+        P,
+        r,
+        PMT,
+        totalAmount
+      });
+
+      expect(Math.round(periodsToRetire)).toBe(expectedPeriods);
+    });
+  });
+});

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

@@ -40,4 +40,36 @@ export class FireCalculatorService {
       totalAmount
     };
   }
+
+  public calculatePeriodsToRetire({
+    P,
+    PMT,
+    r,
+    totalAmount
+  }: {
+    P: number;
+    PMT: number;
+    r: number;
+    totalAmount: number;
+  }) {
+    if (r == 0) {
+      // No compound interest
+      return (totalAmount - P) / PMT;
+    } else if (totalAmount <= P) {
+      return 0;
+    }
+
+    const periodInterest = new Big(r).div(this.COMPOUND_PERIOD);
+    const numerator1: number = Math.log10(
+      new Big(totalAmount).plus(new Big(PMT).div(periodInterest)).toNumber()
+    );
+    const numerator2: number = Math.log10(
+      new Big(P).plus(new Big(PMT).div(periodInterest)).toNumber()
+    );
+    const denominator: number = Math.log10(
+      new Big(1).plus(periodInterest).toNumber()
+    );
+
+    return (numerator1 - numerator2) / denominator;
+  }
 }