|
|
|
@ -38,8 +38,11 @@ import { |
|
|
|
BarElement, |
|
|
|
CategoryScale, |
|
|
|
Chart, |
|
|
|
type ChartData, |
|
|
|
type ChartDataset, |
|
|
|
LinearScale, |
|
|
|
Tooltip |
|
|
|
Tooltip, |
|
|
|
type TooltipOptions |
|
|
|
} from 'chart.js'; |
|
|
|
import 'chartjs-adapter-date-fns'; |
|
|
|
import Color from 'color'; |
|
|
|
@ -98,10 +101,15 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
@ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>; |
|
|
|
|
|
|
|
public calculatorForm = this.formBuilder.group({ |
|
|
|
// @ts-ignore
|
|
|
|
annualInterestRate: new FormControl<number>(undefined), |
|
|
|
// @ts-ignore
|
|
|
|
paymentPerPeriod: new FormControl<number>(undefined), |
|
|
|
// @ts-ignore
|
|
|
|
principalInvestmentAmount: new FormControl<number>(undefined), |
|
|
|
// @ts-ignore
|
|
|
|
projectedTotalAmount: new FormControl<number>(undefined), |
|
|
|
// @ts-ignore
|
|
|
|
retirementDate: new FormControl<Date>(undefined) |
|
|
|
}); |
|
|
|
public chart: Chart<'bar'>; |
|
|
|
@ -148,25 +156,25 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
|
|
|
|
this.calculatorForm |
|
|
|
.get('annualInterestRate') |
|
|
|
.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) |
|
|
|
?.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) |
|
|
|
.subscribe((annualInterestRate) => { |
|
|
|
this.annualInterestRateChanged.emit(annualInterestRate); |
|
|
|
}); |
|
|
|
this.calculatorForm |
|
|
|
.get('paymentPerPeriod') |
|
|
|
.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) |
|
|
|
?.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) |
|
|
|
.subscribe((savingsRate) => { |
|
|
|
this.savingsRateChanged.emit(savingsRate); |
|
|
|
}); |
|
|
|
this.calculatorForm |
|
|
|
.get('projectedTotalAmount') |
|
|
|
.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) |
|
|
|
?.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) |
|
|
|
.subscribe((projectedTotalAmount) => { |
|
|
|
this.projectedTotalAmountChanged.emit(projectedTotalAmount); |
|
|
|
}); |
|
|
|
this.calculatorForm |
|
|
|
.get('retirementDate') |
|
|
|
.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) |
|
|
|
?.valueChanges.pipe(debounceTime(500), takeUntil(this.unsubscribeSubject)) |
|
|
|
.subscribe((retirementDate) => { |
|
|
|
this.retirementDateChanged.emit(retirementDate); |
|
|
|
}); |
|
|
|
@ -194,11 +202,11 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
this.calculatorForm.patchValue( |
|
|
|
{ |
|
|
|
annualInterestRate: |
|
|
|
this.calculatorForm.get('annualInterestRate').value, |
|
|
|
this.calculatorForm.get('annualInterestRate')?.value, |
|
|
|
paymentPerPeriod: this.getPMT(), |
|
|
|
principalInvestmentAmount: this.calculatorForm.get( |
|
|
|
'principalInvestmentAmount' |
|
|
|
).value, |
|
|
|
)?.value, |
|
|
|
projectedTotalAmount: |
|
|
|
Math.round(this.getProjectedTotalAmount()) || 0, |
|
|
|
retirementDate: |
|
|
|
@ -208,7 +216,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
emitEvent: false |
|
|
|
} |
|
|
|
); |
|
|
|
this.calculatorForm.get('principalInvestmentAmount').disable(); |
|
|
|
this.calculatorForm.get('principalInvestmentAmount')?.disable(); |
|
|
|
|
|
|
|
this.changeDetectorRef.markForCheck(); |
|
|
|
}); |
|
|
|
@ -217,34 +225,36 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
if (this.hasPermissionToUpdateUserSettings === true) { |
|
|
|
this.calculatorForm |
|
|
|
.get('annualInterestRate') |
|
|
|
.enable({ emitEvent: false }); |
|
|
|
this.calculatorForm.get('paymentPerPeriod').enable({ emitEvent: false }); |
|
|
|
?.enable({ emitEvent: false }); |
|
|
|
this.calculatorForm.get('paymentPerPeriod')?.enable({ emitEvent: false }); |
|
|
|
this.calculatorForm |
|
|
|
.get('projectedTotalAmount') |
|
|
|
.enable({ emitEvent: false }); |
|
|
|
?.enable({ emitEvent: false }); |
|
|
|
} else { |
|
|
|
this.calculatorForm |
|
|
|
.get('annualInterestRate') |
|
|
|
.disable({ emitEvent: false }); |
|
|
|
this.calculatorForm.get('paymentPerPeriod').disable({ emitEvent: false }); |
|
|
|
?.disable({ emitEvent: false }); |
|
|
|
this.calculatorForm |
|
|
|
.get('paymentPerPeriod') |
|
|
|
?.disable({ emitEvent: false }); |
|
|
|
this.calculatorForm |
|
|
|
.get('projectedTotalAmount') |
|
|
|
.disable({ emitEvent: false }); |
|
|
|
?.disable({ emitEvent: false }); |
|
|
|
} |
|
|
|
|
|
|
|
this.calculatorForm.get('retirementDate').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 retirementDate = this.calculatorForm.get('retirementDate')!.value; |
|
|
|
const newRetirementDate = setMonth( |
|
|
|
setYear(retirementDate, normalizedMonthAndYear.getFullYear()), |
|
|
|
normalizedMonthAndYear.getMonth() |
|
|
|
); |
|
|
|
this.calculatorForm.get('retirementDate').setValue(newRetirementDate); |
|
|
|
this.calculatorForm.get('retirementDate')?.setValue(newRetirementDate); |
|
|
|
datepicker.close(); |
|
|
|
} |
|
|
|
|
|
|
|
@ -270,7 +280,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
|
|
|
|
this.chart.update(); |
|
|
|
} else { |
|
|
|
this.chart = new Chart(this.chartCanvas.nativeElement, { |
|
|
|
this.chart = new Chart<'bar'>(this.chartCanvas.nativeElement, { |
|
|
|
data: chartData, |
|
|
|
options: { |
|
|
|
plugins: { |
|
|
|
@ -280,6 +290,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
callbacks: { |
|
|
|
footer: (items) => { |
|
|
|
const totalAmount = items.reduce( |
|
|
|
// @ts-ignore
|
|
|
|
(a, b) => a + b.parsed.y, |
|
|
|
0 |
|
|
|
); |
|
|
|
@ -312,7 +323,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
return label; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} as TooltipOptions<'bar'> |
|
|
|
}, |
|
|
|
responsive: true, |
|
|
|
scales: { |
|
|
|
@ -345,9 +356,9 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
this.isLoading = false; |
|
|
|
} |
|
|
|
|
|
|
|
private getChartData() { |
|
|
|
private getChartData(): ChartData<'bar'> { |
|
|
|
const currentYear = new Date().getFullYear(); |
|
|
|
const labels = []; |
|
|
|
const labels: number[] = []; |
|
|
|
|
|
|
|
// Principal investment amount
|
|
|
|
const P: number = this.getP(); |
|
|
|
@ -360,6 +371,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
|
|
|
|
// Calculate retirement date
|
|
|
|
// if we want to retire at month x, we need the projectedTotalAmount at month x-1
|
|
|
|
// @ts-ignore
|
|
|
|
const lastPeriodDate = sub(this.getRetirementDate(), { months: 1 }); |
|
|
|
const yearsToRetire = lastPeriodDate.getFullYear() - currentYear; |
|
|
|
|
|
|
|
@ -371,13 +383,13 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
labels.push(year); |
|
|
|
} |
|
|
|
|
|
|
|
const datasetDeposit = { |
|
|
|
const datasetDeposit: ChartDataset<'bar'> = { |
|
|
|
backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, |
|
|
|
data: [], |
|
|
|
label: $localize`Deposit` |
|
|
|
}; |
|
|
|
|
|
|
|
const datasetInterest = { |
|
|
|
const datasetInterest: ChartDataset<'bar'> = { |
|
|
|
backgroundColor: Color( |
|
|
|
`rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})` |
|
|
|
) |
|
|
|
@ -387,7 +399,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
label: $localize`Interest` |
|
|
|
}; |
|
|
|
|
|
|
|
const datasetSavings = { |
|
|
|
const datasetSavings: ChartDataset<'bar'> = { |
|
|
|
backgroundColor: Color( |
|
|
|
`rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})` |
|
|
|
) |
|
|
|
@ -426,12 +438,12 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
} |
|
|
|
|
|
|
|
private getPeriodsToRetire(): number { |
|
|
|
if (this.calculatorForm.get('projectedTotalAmount').value) { |
|
|
|
if (this.calculatorForm.get('projectedTotalAmount')?.value) { |
|
|
|
let periods = this.fireCalculatorService.calculatePeriodsToRetire({ |
|
|
|
P: this.getP(), |
|
|
|
PMT: this.getPMT(), |
|
|
|
r: this.getR(), |
|
|
|
totalAmount: this.calculatorForm.get('projectedTotalAmount').value |
|
|
|
totalAmount: this.calculatorForm.get('projectedTotalAmount')!.value |
|
|
|
}); |
|
|
|
|
|
|
|
if (periods === Infinity) { |
|
|
|
@ -452,13 +464,13 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
private getPMT() { |
|
|
|
return this.calculatorForm.get('paymentPerPeriod').value; |
|
|
|
private getPMT(): number { |
|
|
|
return this.calculatorForm.get('paymentPerPeriod')!.value; |
|
|
|
} |
|
|
|
|
|
|
|
private getProjectedTotalAmount() { |
|
|
|
if (this.calculatorForm.get('projectedTotalAmount').value) { |
|
|
|
return this.calculatorForm.get('projectedTotalAmount').value; |
|
|
|
if (this.calculatorForm.get('projectedTotalAmount')?.value) { |
|
|
|
return this.calculatorForm.get('projectedTotalAmount')!.value; |
|
|
|
} |
|
|
|
|
|
|
|
const { totalAmount } = |
|
|
|
@ -473,10 +485,10 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { |
|
|
|
} |
|
|
|
|
|
|
|
private getR() { |
|
|
|
return this.calculatorForm.get('annualInterestRate').value / 100; |
|
|
|
return this.calculatorForm.get('annualInterestRate')!.value / 100; |
|
|
|
} |
|
|
|
|
|
|
|
private getRetirementDate(): Date { |
|
|
|
private getRetirementDate(): Date | undefined { |
|
|
|
if (this.periodsToRetire === Number.MAX_SAFE_INTEGER) { |
|
|
|
return undefined; |
|
|
|
} |
|
|
|
|
Kenrick Tandrian
6 hours ago
GitHub