diff --git a/CHANGELOG.md b/CHANGELOG.md index b4ec3dace1..b7f17353c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Localized the number formatting in the chart of the holdings tab on the home page - Moved the performance calculation including dividends (total return) from experimental to general availability - Changed the installation of the dependencies from `npm install` to `npm ci` in the `Dockerfile` - Upgraded `@simplewebauthn/browser` and `@simplewebauthn/server` from version `13.3` to `14.0` @@ -22,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed +- Fixed an issue with the algebraic sign in the tooltip of the chart of the holdings tab on the home page - Fixed the asset profile of the activities after a fee, an interest or a liability with the same symbol in the activities import ### Todo diff --git a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts index 01037f77f4..11c7edbf63 100644 --- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts +++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts @@ -314,23 +314,18 @@ export class GfTreemapChartComponent formatter: (context: GfTreemapScriptableContext) => { const raw = context.raw as GfTreemapDataPoint; - let netPerformancePercentWithCurrencyEffect = round( - raw._data.netPerformancePercentWithCurrencyEffect, - 4 - ); - - if (Math.abs(netPerformancePercentWithCurrencyEffect) === 0) { - netPerformancePercentWithCurrencyEffect = Math.abs( - netPerformancePercentWithCurrencyEffect - ); - } - const name = raw._data.assetProfile.name; const symbol = raw._data.assetProfile.symbol; return [ isUUID(symbol) ? (name ?? symbol) : symbol, - `${netPerformancePercentWithCurrencyEffect > 0 ? '+' : ''}${(netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%` + `${( + raw._data.netPerformancePercentWithCurrencyEffect * 100 + ).toLocaleString(this.locale(), { + maximumFractionDigits: 2, + minimumFractionDigits: 2, + signDisplay: 'exceptZero' + })}%` ]; }, hoverColor: undefined, @@ -402,13 +397,21 @@ export class GfTreemapChartComponent label: (context: TooltipItem<'treemap'>) => { const raw = context.raw as GfTreemapDataPoint; - const allocationInPercentage = `${(raw._data.allocationInPercentage * 100).toFixed(2)}%`; + const allocationInPercentage = `${( + raw._data.allocationInPercentage * 100 + ).toLocaleString(this.locale(), { + maximumFractionDigits: 2, + minimumFractionDigits: 2 + })}%`; const name = getHoldingName(raw._data.assetProfile); - const sign = - raw._data.netPerformancePercentWithCurrencyEffect > 0 ? '+' : ''; - - const netPerformanceInPercentageWithSign = `${sign}${(raw._data.netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%`; + const netPerformanceInPercentageWithSign = `${( + raw._data.netPerformancePercentWithCurrencyEffect * 100 + ).toLocaleString(this.locale(), { + maximumFractionDigits: 2, + minimumFractionDigits: 2, + signDisplay: 'exceptZero' + })}%`; if (raw._data.valueInBaseCurrency !== null) { const value = raw._data.valueInBaseCurrency; @@ -421,11 +424,12 @@ export class GfTreemapChartComponent })} ${this.baseCurrency()}`, '', $localize`Change` + ' (' + $localize`Performance` + ')', - `${sign}${raw._data.netPerformanceWithCurrencyEffect.toLocaleString( + `${raw._data.netPerformanceWithCurrencyEffect.toLocaleString( this.locale(), { maximumFractionDigits: 2, - minimumFractionDigits: 2 + minimumFractionDigits: 2, + signDisplay: 'exceptZero' } )} ${this.baseCurrency()} (${netPerformanceInPercentageWithSign})` ];