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() {