From 7f97168aa7e94fa39b8efb178c9db11bc19f07c0 Mon Sep 17 00:00:00 2001
From: vitalymatyushik <vitaly_matyushik@outlook.com>
Date: Tue, 15 Oct 2024 20:10:35 +0200
Subject: [PATCH] Feature/disable text hover effect in tree map chart (#3929)

* Disable text hover effect in tree map chart

* Update changelog
---
 CHANGELOG.md                                   |  1 +
 .../treemap-chart/treemap-chart.component.ts   | 18 +++++++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee0bc11e1..2331f1a8e 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
 
+- Disabled the text hover effect in the chart of the holdings tab on the home page (experimental)
 - Improved the language localization for German (`de`)
 
 ## 2.115.0 - 2024-10-14
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 7099b01fd..7f74a81e1 100644
--- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
+++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
@@ -87,7 +87,7 @@ export class GfTreemapChartComponent
 
     const { endDate, startDate } = getIntervalFromDateRange(this.dateRange);
 
-    const data: ChartConfiguration['data'] = <any>{
+    const data: ChartConfiguration['data'] = {
       datasets: [
         {
           backgroundColor(ctx) {
@@ -170,25 +170,25 @@ export class GfTreemapChartComponent
                 `${netPerformancePercentWithCurrencyEffect > 0 ? '+' : ''}${(ctx.raw._data.netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%`
               ];
             },
+            hoverColor: 'white',
             position: 'top'
           },
           spacing: 1,
           tree: this.holdings
         }
       ]
-    };
+    } as any;
 
     if (this.chartCanvas) {
       if (this.chart) {
         this.chart.data = data;
-        this.chart.options.plugins.tooltip = <unknown>(
-          this.getTooltipPluginConfiguration()
-        );
+        this.chart.options.plugins.tooltip =
+          this.getTooltipPluginConfiguration() as unknown;
         this.chart.update();
       } else {
         this.chart = new Chart(this.chartCanvas.nativeElement, {
           data,
-          options: <unknown>{
+          options: {
             animation: false,
             onClick: (event, activeElements) => {
               try {
@@ -217,7 +217,7 @@ export class GfTreemapChartComponent
             plugins: {
               tooltip: this.getTooltipPluginConfiguration()
             }
-          },
+          } as unknown,
           type: 'treemap'
         });
       }
@@ -239,7 +239,7 @@ export class GfTreemapChartComponent
           const symbol = context.raw._data.symbol;
 
           if (context.raw._data.valueInBaseCurrency !== null) {
-            const value = <number>context.raw._data.valueInBaseCurrency;
+            const value = context.raw._data.valueInBaseCurrency as number;
 
             return [
               `${name ?? symbol}`,
@@ -250,7 +250,7 @@ export class GfTreemapChartComponent
             ];
           } else {
             const percentage =
-              <number>context.raw._data.allocationInPercentage * 100;
+              (context.raw._data.allocationInPercentage as number) * 100;
 
             return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`];
           }