Bugfix/localize number formatting in tooltip of time series charts (#8325)

* Localize number formatting

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Localized the number formatting in the tooltip of the line chart, the investment chart and the benchmark comparator
 - Deprecated the `api/v1/symbol` endpoints in favor of the `api/v1/symbols` endpoints
 - Upgraded `@internationalized/number` from version `3.6.8` to `3.6.9`
 

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

@@ -0,0 +1,49 @@
+import { getTooltipOptions } from './chart-helper';
+
+describe('getTooltipOptions', () => {
+  const getLabel = ({
+    currency,
+    locale,
+    unit,
+    y
+  }: {
+    currency?: string;
+    locale: string;
+    unit?: string;
+    y: number;
+  }) => {
+    const { callbacks } = getTooltipOptions({
+      currency,
+      locale,
+      unit,
+      colorScheme: 'LIGHT'
+    });
+
+    return (callbacks?.label as (context: unknown) => string)({
+      dataset: { label: 'Performance' },
+      parsed: { y, x: 0 }
+    });
+  };
+
+  it('formats the value with the locale for a currency', () => {
+    expect(getLabel({ currency: 'EUR', locale: 'en-US', y: 1234.5 })).toBe(
+      'Performance: 1,234.50 EUR'
+    );
+  });
+
+  it('formats the value with the locale for a unit', () => {
+    expect(getLabel({ locale: 'fr', unit: '%', y: 0.86 })).toBe(
+      'Performance: 0,86 %'
+    );
+  });
+
+  it('formats the value with the locale and grouping for a unit', () => {
+    expect(getLabel({ locale: 'de', unit: '%', y: 1234.5 })).toBe(
+      'Performance: 1.234,50 %'
+    );
+  });
+
+  it('formats the value with the locale without a unit', () => {
+    expect(getLabel({ locale: 'de', y: 1234.5 })).toBe('Performance: 1.234,50');
+  });
+});

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

@@ -120,16 +120,18 @@ export function getTooltipOptions<T extends ChartType>({
         const yPoint = (context.parsed as Point).y;
 
         if (yPoint !== null) {
+          const value = yPoint.toLocaleString(locale, {
+            maximumFractionDigits: 2,
+            minimumFractionDigits: 2,
+            useGrouping: true
+          });
+
           if (currency) {
-            label += `${yPoint.toLocaleString(locale, {
+            label += `${value} ${currency}`;
-              maximumFractionDigits: 2,
-              minimumFractionDigits: 2,
-              useGrouping: true
-            })} ${currency}`;
           } else if (unit) {
-            label += `${yPoint.toFixed(2)} ${unit}`;
+            label += `${value} ${unit}`;
           } else {
-            label += yPoint.toFixed(2);
+            label += value;
           }
         }
 

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

@@ -287,7 +287,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
       colorScheme: this.colorScheme,
       currency: this.isInPercentage ? undefined : this.currency,
       groupBy: this.groupBy,
-      locale: this.isInPercentage ? undefined : this.locale,
+      locale: this.locale,
       unit: this.isInPercentage ? '%' : undefined
     });
   }