|
|
|
|
@ -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
|
|
|
|
|
})
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
Robbert Coeckelbergh
2 years ago
committed by
GitHub