Bugfix/negative zero in treemap chart tooltip (#8043)

* Fix negative zero

* Update changelog

CHANGELOG.md

@@ -15,12 +15,14 @@ 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
 - 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`
 - Upgraded `nestjs` from version `11.2.3` to `11.2.6`
 
 ### 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

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})`
             ];