From 0d59aa5f9312caee609726d21b32b315fbb6178a Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 16 Feb 2025 10:00:05 +0100
Subject: [PATCH] Extend tooltip

* allocation
* change
* performance
---
 .../treemap-chart/treemap-chart.component.ts  | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

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 c89b8d815..8c5ee94de 100644
--- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
+++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
@@ -342,33 +342,42 @@ export class GfTreemapChartComponent
       }),
       callbacks: {
         label: (context) => {
+          const allocationInPercentage = `${((context.raw._data.allocationInPercentage as number) * 100).toFixed(2)}%`;
           const name = context.raw._data.name;
+          const sign =
+            context.raw._data.netPerformancePercentWithCurrencyEffect > 0
+              ? '+'
+              : '';
           const symbol = context.raw._data.symbol;
 
+          const netPerformanceInPercentageWithSign = `${sign}${(context.raw._data.netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%`;
+
           if (context.raw._data.valueInBaseCurrency !== null) {
             const value = context.raw._data.valueInBaseCurrency as number;
-            const sign =
-              context.raw._data.netPerformanceWithCurrencyEffect > 0 ? '+' : '';
 
             return [
-              `${name ?? symbol}`,
+              `${name ?? symbol} (${allocationInPercentage})`,
               `${value.toLocaleString(this.locale, {
                 maximumFractionDigits: 2,
                 minimumFractionDigits: 2
               })} ${this.baseCurrency}`,
+              '',
+              $localize`Change` + ' (' + $localize`Performance` + ')',
               `${sign}${context.raw._data.netPerformanceWithCurrencyEffect.toLocaleString(
                 this.locale,
                 {
                   maximumFractionDigits: 2,
                   minimumFractionDigits: 2
                 }
-              )} (${sign}${(context.raw._data.netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%)`
+              )} ${this.baseCurrency} (${netPerformanceInPercentageWithSign})`
             ];
           } else {
-            const percentage =
-              (context.raw._data.allocationInPercentage as number) * 100;
-
-            return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`];
+            return [
+              `${name ?? symbol} (${allocationInPercentage})`,
+              '',
+              $localize`Performance`,
+              netPerformanceInPercentageWithSign
+            ];
           }
         },
         title: () => {