From d158d0c326567600dbddfed0c90b1d18de33a28c Mon Sep 17 00:00:00 2001
From: Uday R <82779467+uday-rana@users.noreply.github.com>
Date: Fri, 11 Oct 2024 14:13:40 -0400
Subject: [PATCH] Feature/Extend tooltip in treemap chart component by name
 (#3907)

* Extend tooltip in treemap chart component by name

* Update changelog
---
 CHANGELOG.md                                   |  4 ++++
 .../treemap-chart/treemap-chart.component.ts   | 18 +++++++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d334d6b08..388fd9772 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added the name to the tooltip of the chart of the holdings tab on the home page (experimental)
+
 ### Fixed
 
 - Considered the language of the user settings on login with _Security Token_
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 b278180ea..0e694f6dc 100644
--- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
+++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
@@ -227,16 +227,24 @@ export class GfTreemapChartComponent
       }),
       callbacks: {
         label: (context) => {
+          const name = context.raw._data.name;
+          const symbol = context.raw._data.symbol;
+
           if (context.raw._data.valueInBaseCurrency !== null) {
             const value = <number>context.raw._data.valueInBaseCurrency;
-            return `${value.toLocaleString(this.locale, {
-              maximumFractionDigits: 2,
-              minimumFractionDigits: 2
-            })} ${this.baseCurrency}`;
+
+            return [
+              `${name ?? symbol}`,
+              `${value.toLocaleString(this.locale, {
+                maximumFractionDigits: 2,
+                minimumFractionDigits: 2
+              })} ${this.baseCurrency}`
+            ];
           } else {
             const percentage =
               <number>context.raw._data.allocationInPercentage * 100;
-            return `${percentage.toFixed(2)}%`;
+
+            return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`];
           }
         },
         title: () => {