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 bdd65d1668..64bcec2934 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts +++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts @@ -2,7 +2,7 @@ import { getTooltipOptions, transformTickToAbbreviation } from '@ghostfolio/common/chart-helper'; -import { primaryColorRgb } from '@ghostfolio/common/config'; +import { DEFAULT_CURRENCY, primaryColorRgb } from '@ghostfolio/common/config'; import { formatMonthAndYear, getLocale } from '@ghostfolio/common/helper'; import { FireCalculationCompleteEvent } from '@ghostfolio/common/interfaces'; import { ColorScheme } from '@ghostfolio/common/types'; @@ -53,6 +53,7 @@ import { addDays, addYears, getMonth, + parseISO, setMonth, setYear, startOfMonth, @@ -60,7 +61,7 @@ import { } from 'date-fns'; import { addIcons } from 'ionicons'; import { calendarClearOutline } from 'ionicons/icons'; -import { isNumber } from 'lodash-es'; +import { isNumber, isString } from 'lodash-es'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { debounceTime } from 'rxjs'; @@ -86,16 +87,16 @@ import { FireCalculatorService } from './fire-calculator.service'; templateUrl: './fire-calculator.component.html' }) export class GfFireCalculatorComponent implements OnChanges, OnDestroy { - @Input() annualInterestRate = 0; - @Input() colorScheme?: ColorScheme; - @Input() currency: string; - @Input() deviceType: string; - @Input() fireWealth = 0; - @Input() hasPermissionToUpdateUserSettings: boolean; - @Input() locale = getLocale(); - @Input() projectedTotalAmount = 0; - @Input() retirementDate: Date; - @Input() savingsRate = 0; + @Input() public annualInterestRate?: number = 0; + @Input() public colorScheme?: ColorScheme; + @Input() public currency?: string; + @Input() public deviceType: string; + @Input() public fireWealth = 0; + @Input() public hasPermissionToUpdateUserSettings: boolean; + @Input() public locale?: string = getLocale(); + @Input() public projectedTotalAmount?: number = 0; + @Input() public retirementDate?: Date | string; + @Input() public savingsRate?: number = 0; public calculatorForm = this.formBuilder.group({ annualInterestRate: new FormControl(null), @@ -243,11 +244,13 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { if (isNumber(this.fireWealth) && this.fireWealth >= 0) { this.calculatorForm.setValue( { - annualInterestRate: this.annualInterestRate, - paymentPerPeriod: this.savingsRate, + annualInterestRate: this.annualInterestRate ?? 0, + paymentPerPeriod: this.savingsRate ?? 0, principalInvestmentAmount: this.fireWealth, - projectedTotalAmount: this.projectedTotalAmount, - retirementDate: this.retirementDate ?? this.DEFAULT_RETIREMENT_DATE + projectedTotalAmount: this.projectedTotalAmount ?? 0, + retirementDate: isString(this.retirementDate) + ? parseISO(this.retirementDate) + : (this.retirementDate ?? this.DEFAULT_RETIREMENT_DATE) }, { emitEvent: false @@ -353,7 +356,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { ); return `Total: ${new Intl.NumberFormat(this.locale, { - currency: this.currency, + currency: this.currency ?? DEFAULT_CURRENCY, currencyDisplay: 'code', style: 'currency' }).format(totalAmount)}`; @@ -367,7 +370,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { if (context.parsed.y !== null) { label += new Intl.NumberFormat(this.locale, { - currency: this.currency, + currency: this.currency ?? DEFAULT_CURRENCY, currencyDisplay: 'code', style: 'currency' }).format(context.parsed.y); @@ -510,7 +513,8 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { } else { const today = new Date(); const retirementDate = - this.retirementDate ?? this.DEFAULT_RETIREMENT_DATE; + this.calculatorForm.get('retirementDate')?.value ?? + this.DEFAULT_RETIREMENT_DATE; return ( 12 * (retirementDate.getFullYear() - today.getFullYear()) +