diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts index 76ca47d017..b7ef8b302b 100644 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts +++ b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts @@ -1,6 +1,7 @@ import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; import { SubscriptionType } from '@ghostfolio/common/enums'; +import { formatMonthAndYear } from '@ghostfolio/common/helper'; import { FireCalculationCompleteEvent, FireWealth, @@ -85,10 +86,10 @@ export class GfFirePageComponent implements OnInit { return ''; } - return new Intl.DateTimeFormat(this.user?.settings?.locale, { - month: 'long', - year: 'numeric' - }).format(new Date(retirementDate)); + return formatMonthAndYear({ + date: new Date(retirementDate), + locale: this.user?.settings?.locale + }); } public ngOnInit() { diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.html b/apps/client/src/app/pages/portfolio/fire/fire-page.html index 97f63f3db6..3bc62dd95f 100644 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.html +++ b/apps/client/src/app/pages/portfolio/fire/fire-page.html @@ -128,50 +128,40 @@ @if (user?.settings?.isExperimentalFeatures) {
- By -   - {{ retirementDateLabel }} - , -   - this is projected to increase to -   - -   - per year -   - or -   - -   - per monthBy {{ retirementDateLabel }}, this is projected to increase to + + per year + or + + per month, assuming a + + annual interest rate. - , assuming a -   - -   - annual interest rate.
} diff --git a/libs/common/src/lib/helper.ts b/libs/common/src/lib/helper.ts index 7787b2a97b..5d1ff538e5 100644 --- a/libs/common/src/lib/helper.ts +++ b/libs/common/src/lib/helper.ts @@ -233,6 +233,19 @@ export function extractNumberFromString({ } } +export function formatMonthAndYear({ + date, + locale +}: { + date: Date; + locale?: string; +}) { + return new Intl.DateTimeFormat(locale, { + month: 'long', + year: 'numeric' + }).format(date); +} + export function getAllActivityTypes(): ActivityType[] { return Object.values(ActivityType); } 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 475f5b0e76..cfa2ee5cd2 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts +++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts @@ -3,7 +3,7 @@ import { transformTickToAbbreviation } from '@ghostfolio/common/chart-helper'; import { primaryColorRgb } from '@ghostfolio/common/config'; -import { getLocale } from '@ghostfolio/common/helper'; +import { formatMonthAndYear, getLocale } from '@ghostfolio/common/helper'; import { FireCalculationCompleteEvent } from '@ghostfolio/common/interfaces'; import { ColorScheme } from '@ghostfolio/common/types'; @@ -215,10 +215,10 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy { return ''; } - return new Intl.DateTimeFormat(this.locale, { - month: 'long', - year: 'numeric' - }).format(retirementDate); + return formatMonthAndYear({ + date: retirementDate, + locale: this.locale + }); } public ngOnChanges() {