diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fd496db67..be440b73a9 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/libs/common/src/lib/chart-helper.spec.ts b/libs/common/src/lib/chart-helper.spec.ts new file mode 100644 index 0000000000..29508fa5bb --- /dev/null +++ b/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'); + }); +}); diff --git a/libs/common/src/lib/chart-helper.ts b/libs/common/src/lib/chart-helper.ts index 72b629556a..179a3b4f1e 100644 --- a/libs/common/src/lib/chart-helper.ts +++ b/libs/common/src/lib/chart-helper.ts @@ -120,16 +120,18 @@ export function getTooltipOptions({ 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, { - maximumFractionDigits: 2, - minimumFractionDigits: 2, - useGrouping: true - })} ${currency}`; + label += `${value} ${currency}`; } else if (unit) { - label += `${yPoint.toFixed(2)} ${unit}`; + label += `${value} ${unit}`; } else { - label += yPoint.toFixed(2); + label += value; } } diff --git a/libs/ui/src/lib/investment-chart/investment-chart.component.ts b/libs/ui/src/lib/investment-chart/investment-chart.component.ts index 054bcfdbd8..add1d0b0bc 100644 --- a/libs/ui/src/lib/investment-chart/investment-chart.component.ts +++ b/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 }); }