Feature/harmonize setting of default locale (#3032)

* Harmonize setting of default locale

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Harmonized the setting of a default locale in various components
 - Set the parser to `angular` in the `prettier` options
 
 ## 2.54.0 - 2024-02-19

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -1,3 +1,5 @@
+import { getLocale } from '@ghostfolio/common/helper';
+
 import {
   ChangeDetectionStrategy,
   Component,
@@ -27,7 +29,7 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
   @Input() hasPermissionToOpenDetails = true;
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() showActions: boolean;
   @Input() showBalance = true;
   @Input() showFooter = true;

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts

@@ -7,6 +7,7 @@ import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
 import {
   getBackgroundColor,
   getDateFormatString,
+  getLocale,
   getTextColor,
   parseDate
 } from '@ghostfolio/common/helper';
@@ -51,7 +52,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   @Input() colorScheme: ColorScheme;
   @Input() daysInMarket: number;
   @Input() isLoading: boolean;
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() performanceDataItems: LineChartItem[];
   @Input() user: User;
 

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -9,6 +9,7 @@ import {
   DATE_FORMAT,
   getBackgroundColor,
   getDateFormatString,
+  getLocale,
   getTextColor,
   parseDate
 } from '@ghostfolio/common/helper';
@@ -65,7 +66,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() historicalDataItems: LineChartItem[] = [];
   @Input() isInPercent = false;
   @Input() isLoading = false;
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() range: DateRange = 'max';
   @Input() savingsRate = 0;
 

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts

@@ -1,4 +1,5 @@
 import {
+  getLocale,
   getNumberFormatDecimal,
   getNumberFormatGroup
 } from '@ghostfolio/common/helper';
@@ -31,7 +32,7 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
   @Input() isAllTimeHigh: boolean;
   @Input() isAllTimeLow: boolean;
   @Input() isLoading: boolean;
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() performance: PortfolioPerformance;
   @Input() showDetails: boolean;
   @Input() unit: string;

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts

@@ -1,4 +1,4 @@
-import { getDateFnsLocale } from '@ghostfolio/common/helper';
+import { getDateFnsLocale, getLocale } from '@ghostfolio/common/helper';
 import { PortfolioSummary } from '@ghostfolio/common/interfaces';
 
 import {
@@ -23,7 +23,7 @@ export class PortfolioSummaryComponent implements OnChanges, OnInit {
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;
   @Input() language: string;
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() summary: PortfolioSummary;
 
   @Output() emergencyFundChanged = new EventEmitter<number>();

apps/client/src/app/components/position/position.component.ts

@@ -1,4 +1,5 @@
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
+import { getLocale } from '@ghostfolio/common/helper';
 import { Position } from '@ghostfolio/common/interfaces';
 
 import {
@@ -20,7 +21,7 @@ export class PositionComponent implements OnDestroy, OnInit {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
   @Input() isLoading: boolean;
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() position: Position;
   @Input() range: string;
 

apps/client/src/app/components/positions/positions.component.ts

@@ -1,3 +1,4 @@
+import { getLocale } from '@ghostfolio/common/helper';
 import { Position } from '@ghostfolio/common/interfaces';
 
 import {
@@ -18,7 +19,7 @@ export class PositionsComponent implements OnChanges, OnInit {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
   @Input() hasPermissionToCreateOrder: boolean;
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() positions: Position[];
   @Input() range: string;
 

apps/client/src/app/components/world-map-chart/world-map-chart.component.ts

@@ -1,4 +1,4 @@
-import { getNumberFormatGroup } from '@ghostfolio/common/helper';
+import { getLocale, getNumberFormatGroup } from '@ghostfolio/common/helper';
 
 import {
   ChangeDetectionStrategy,
@@ -21,7 +21,7 @@ export class WorldMapChartComponent implements OnChanges, OnDestroy, OnInit {
   @Input() countries: { [code: string]: { name?: string; value: number } };
   @Input() format: string;
   @Input() isInPercent = false;
-  @Input() locale: string;
+  @Input() locale = getLocale();
 
   public isLoading = true;
   public svgMapElement;

libs/common/src/lib/chart-helper.ts

@@ -6,6 +6,7 @@ import {
   DATE_FORMAT_MONTHLY,
   DATE_FORMAT_YEARLY,
   getBackgroundColor,
+  getLocale,
   getTextColor
 } from './helper';
 import { ColorScheme, GroupBy } from './types';
@@ -30,7 +31,7 @@ export function getTooltipOptions({
   colorScheme,
   currency = '',
   groupBy,
-  locale = '',
+  locale = getLocale(),
   unit = ''
 }: {
   colorScheme?: ColorScheme;

libs/common/src/lib/helper.ts

@@ -217,9 +217,7 @@ export function getEmojiFlag(aCountryCode: string) {
 }
 
 export function getLocale() {
-  return navigator.languages?.length
+  return navigator.language ?? locale;
-    ? navigator.languages[0]
-    : navigator.language ?? locale;
 }
 
 export function getNumberFormatDecimal(aLocale?: string) {
@@ -230,7 +228,7 @@ export function getNumberFormatDecimal(aLocale?: string) {
   }).value;
 }
 
-export function getNumberFormatGroup(aLocale?: string) {
+export function getNumberFormatGroup(aLocale = getLocale()) {
   const formatObject = new Intl.NumberFormat(aLocale).formatToParts(9999.99);
 
   return formatObject.find((object) => {

libs/ui/src/lib/account-balances/account-balances.component.ts

@@ -1,3 +1,4 @@
+import { getLocale } from '@ghostfolio/common/helper';
 import { AccountBalancesResponse } from '@ghostfolio/common/interfaces';
 
 import {
@@ -25,7 +26,7 @@ import { Subject } from 'rxjs';
 export class AccountBalancesComponent implements OnChanges, OnDestroy, OnInit {
   @Input() accountBalances: AccountBalancesResponse['balances'];
   @Input() accountId: string;
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() showActions = true;
 
   @Output() accountBalanceDeleted = new EventEmitter<string>();

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -1,6 +1,6 @@
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
-import { getDateFormatString } from '@ghostfolio/common/helper';
+import { getDateFormatString, getLocale } from '@ghostfolio/common/helper';
 import { UniqueAsset } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';
 
@@ -40,7 +40,7 @@ export class ActivitiesTableComponent
   @Input() hasPermissionToCreateActivity: boolean;
   @Input() hasPermissionToExportActivities: boolean;
   @Input() hasPermissionToOpenDetails = true;
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() pageIndex: number;
   @Input() pageSize = DEFAULT_PAGE_SIZE;
   @Input() showActions = true;

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -1,4 +1,4 @@
-import { resolveMarketCondition } from '@ghostfolio/common/helper';
+import { getLocale, resolveMarketCondition } from '@ghostfolio/common/helper';
 import { Benchmark, User } from '@ghostfolio/common/interfaces';
 
 import {
@@ -16,7 +16,7 @@ import {
 })
 export class BenchmarkComponent implements OnChanges {
   @Input() benchmarks: Benchmark[];
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() user: User;
 
   public displayedColumns = ['name', 'date', 'change', 'marketCondition'];

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -3,6 +3,7 @@ import {
   transformTickToAbbreviation
 } from '@ghostfolio/common/chart-helper';
 import { primaryColorRgb } from '@ghostfolio/common/config';
+import { getLocale } from '@ghostfolio/common/helper';
 import { ColorScheme } from '@ghostfolio/common/types';
 
 import {
@@ -55,7 +56,7 @@ export class FireCalculatorComponent implements OnChanges, OnDestroy {
   @Input() deviceType: string;
   @Input() fireWealth: number;
   @Input() hasPermissionToUpdateUserSettings: boolean;
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() projectedTotalAmount = 0;
   @Input() retirementDate: Date;
   @Input() savingsRate = 0;

libs/ui/src/lib/holdings-table/holdings-table.component.ts

@@ -1,3 +1,4 @@
+import { getLocale } from '@ghostfolio/common/helper';
 import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
 
 import {
@@ -29,7 +30,7 @@ export class HoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() hasPermissionToOpenDetails = true;
   @Input() hasPermissionToShowValues = true;
   @Input() holdings: PortfolioPosition[];
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() pageSize = Number.MAX_SAFE_INTEGER;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;

libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -3,14 +3,11 @@ import {
   getTooltipPositionerMapTop,
   getVerticalHoverLinePlugin
 } from '@ghostfolio/common/chart-helper';
-import {
+import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
-  locale,
-  primaryColorRgb,
-  secondaryColorRgb
-} from '@ghostfolio/common/config';
 import {
   getBackgroundColor,
   getDateFormatString,
+  getLocale,
   getTextColor
 } from '@ghostfolio/common/helper';
 import { LineChartItem } from '@ghostfolio/common/interfaces';
@@ -51,7 +48,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() currency: string;
   @Input() historicalDataItems: LineChartItem[];
   @Input() isAnimated = false;
-  @Input() locale: string;
+  @Input() locale = getLocale();
   @Input() showGradient = false;
   @Input() showLegend = false;
   @Input() showLoader = true;
@@ -106,10 +103,6 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
         this.changeDetectorRef.markForCheck();
       });
     }
-
-    if (!this.locale) {
-      this.locale = locale;
-    }
   }
 
   public ngOnDestroy() {

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -1,6 +1,6 @@
 import { getTooltipOptions } from '@ghostfolio/common/chart-helper';
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
-import { getTextColor } from '@ghostfolio/common/helper';
+import { getLocale, getTextColor } from '@ghostfolio/common/helper';
 import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
 import { ColorScheme } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
@@ -41,7 +41,7 @@ export class PortfolioProportionChartComponent
   @Input() cursor: string;
   @Input() isInPercent = false;
   @Input() keys: string[] = [];
-  @Input() locale = '';
+  @Input() locale = getLocale();
   @Input() maxItems?: number;
   @Input() showLabels = false;
   @Input() positions: {

libs/ui/src/lib/value/value.component.ts

@@ -21,7 +21,7 @@ export class ValueComponent implements OnChanges {
   @Input() isCurrency = false;
   @Input() isDate = false;
   @Input() isPercent = false;
-  @Input() locale: string | undefined;
+  @Input() locale = getLocale();
   @Input() position = '';
   @Input() precision: number | undefined;
   @Input() size: 'large' | 'medium' | 'small' = 'small';
@@ -129,11 +129,6 @@ export class ValueComponent implements OnChanges {
     this.formattedValue = '';
     this.isNumber = false;
     this.isString = false;
-
-    if (!this.locale) {
-      this.locale = getLocale();
-    }
-
     this.useAbsoluteValue = false;
   }
 }