Bugfix/Add useGrouping option for locale string formatting

apps/api/src/models/rules/emergency-fund/emergency-fund-coverage.ts

@@ -53,7 +53,8 @@ export class EmergencyFundCoverage extends Rule<Settings> {
     const placeholders = {
       baseCurrency: ruleSettings.baseCurrency,
       emergencyFund: this.emergencyFundInBaseCurrency.toLocaleString(
-        ruleSettings.locale
+        ruleSettings.locale,
+        { useGrouping: true }
       )
     };
 

apps/api/src/models/rules/liquidity/buying-power.ts

@@ -44,7 +44,8 @@ export class BuyingPower extends Rule<Settings> {
           placeholders: {
             baseCurrency: ruleSettings.baseCurrency,
             thresholdMin: ruleSettings.thresholdMin.toLocaleString(
-              ruleSettings.locale
+              ruleSettings.locale,
+              { useGrouping: true }
             )
           }
         }),
@@ -59,7 +60,8 @@ export class BuyingPower extends Rule<Settings> {
         placeholders: {
           baseCurrency: ruleSettings.baseCurrency,
           thresholdMin: ruleSettings.thresholdMin.toLocaleString(
-            ruleSettings.locale
+            ruleSettings.locale,
+            { useGrouping: true }
           )
         }
       }),

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

@@ -123,7 +123,8 @@ export function getTooltipOptions<T extends ChartType>({
           if (currency) {
             label += `${yPoint.toLocaleString(locale, {
               maximumFractionDigits: 2,
-              minimumFractionDigits: 2
+              minimumFractionDigits: 2,
+              useGrouping: true
             })} ${currency}`;
           } else if (unit) {
             label += `${yPoint.toFixed(2)} ${unit}`;

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

@@ -258,7 +258,8 @@ export class GfLineChartComponent
                       if (typeof tickValue === 'number') {
                         return tickValue.toLocaleString(this.locale, {
                           maximumFractionDigits: 2,
-                          minimumFractionDigits: 2
+                          minimumFractionDigits: 2,
+                          useGrouping: true
                         });
                       }
 

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

@@ -496,7 +496,8 @@ export class GfPortfolioProportionChartComponent
               `${name ?? symbol}`,
               `${value.toLocaleString(this.locale, {
                 maximumFractionDigits: 2,
-                minimumFractionDigits: 2
+                minimumFractionDigits: 2,
+                useGrouping: true
               })} ${this.baseCurrency ?? ''} (${percentage.toFixed(2)}%)`
             ];
           }

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

@@ -324,6 +324,7 @@ export class GfTreemapChartComponent
                 ).toLocaleString(this.locale(), {
                   maximumFractionDigits: 2,
                   minimumFractionDigits: 2,
+                  useGrouping: true,
                   signDisplay: 'exceptZero'
                 })}%`
               ];
@@ -401,7 +402,8 @@ export class GfTreemapChartComponent
             raw._data.allocationInPercentage * 100
           ).toLocaleString(this.locale(), {
             maximumFractionDigits: 2,
-            minimumFractionDigits: 2
+            minimumFractionDigits: 2,
+            useGrouping: true
           })}%`;
           const name = getHoldingName(raw._data.assetProfile);
 
@@ -410,6 +412,7 @@ export class GfTreemapChartComponent
           ).toLocaleString(this.locale(), {
             maximumFractionDigits: 2,
             minimumFractionDigits: 2,
+            useGrouping: true,
             signDisplay: 'exceptZero'
           })}%`;
 
@@ -420,7 +423,8 @@ export class GfTreemapChartComponent
               `${name} (${allocationInPercentage})`,
               `${value?.toLocaleString(this.locale(), {
                 maximumFractionDigits: 2,
-                minimumFractionDigits: 2
+                minimumFractionDigits: 2,
+                useGrouping: true
               })} ${this.baseCurrency()}`,
               '',
               $localize`Change` + ' (' + $localize`Performance` + ')',
@@ -429,7 +433,8 @@ export class GfTreemapChartComponent
                 {
                   maximumFractionDigits: 2,
                   minimumFractionDigits: 2,
-                  signDisplay: 'exceptZero'
+                  signDisplay: 'exceptZero',
+                  useGrouping: true
                 }
               )} ${this.baseCurrency()} (${netPerformanceInPercentageWithSign})`
             ];

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

@@ -83,7 +83,8 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy {
 
     return {
       maximumFractionDigits: digits,
-      minimumFractionDigits: digits
+      minimumFractionDigits: digits,
+      useGrouping: true
     };
   });