Task/upgrade chartjs-chart-treemap to version 4.2.0 (#7395)

* Update chartjs-chart-treemap to version 4.2.0

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Upgraded `chartjs-chart-treemap` from version `3.1.0` to `4.2.0`
+
 ### Fixed
 
 - Skipped opening the holding detail dialog for cash positions on the allocations page, the analysis page and the portfolio holdings page

libs/ui/src/lib/treemap-chart/interfaces/interfaces.ts

@@ -1,6 +1,6 @@
 import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 
-import { ScriptableContext, TooltipItem } from 'chart.js';
+import { ScriptableContext } from 'chart.js';
 import { TreemapDataPoint } from 'chartjs-chart-treemap';
 
 export interface GetColorParams {
@@ -9,13 +9,10 @@ export interface GetColorParams {
   positiveNetPerformancePercentsRange: { max: number; min: number };
 }
 
-interface GfTreemapDataPoint extends TreemapDataPoint {
+export type GfTreemapDataPoint = TreemapDataPoint & {
   _data: PortfolioPosition;
-}
+};
 
-export interface GfTreemapScriptableContext extends ScriptableContext<'treemap'> {
+export type GfTreemapScriptableContext = ScriptableContext<'treemap'> & {
-  raw: GfTreemapDataPoint;
+  raw: TreemapDataPoint;
-}
+};
-export interface GfTreemapTooltipItem extends TooltipItem<'treemap'> {
-  raw: GfTreemapDataPoint;
-}

libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

@@ -22,7 +22,12 @@ import {
   viewChild
 } from '@angular/core';
 import { Big } from 'big.js';
-import type { ActiveElement, ChartData, TooltipOptions } from 'chart.js';
+import type {
+  ActiveElement,
+  ChartData,
+  TooltipItem,
+  TooltipOptions
+} from 'chart.js';
 import { Chart, LinearScale, Tooltip } from 'chart.js';
 import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
 import { isUUID } from 'class-validator';
@@ -33,8 +38,8 @@ import OpenColor from 'open-color';
 
 import type {
   GetColorParams,
-  GfTreemapScriptableContext,
+  GfTreemapDataPoint,
-  GfTreemapTooltipItem
+  GfTreemapScriptableContext
 } from './interfaces/interfaces';
 
 const { gray, green, red } = OpenColor;
@@ -225,7 +230,9 @@ export class GfTreemapChartComponent
       datasets: [
         {
           backgroundColor: (context: GfTreemapScriptableContext) => {
-            if (!context.raw) {
+            const raw = context.raw as GfTreemapDataPoint;
+
+            if (!raw) {
               return undefined;
             }
 
@@ -233,13 +240,10 @@ export class GfTreemapChartComponent
               getAnnualizedPerformancePercent({
                 daysInMarket: differenceInDays(
                   endDate,
-                  max([
+                  max([raw._data.dateOfFirstActivity ?? new Date(0), startDate])
-                    context.raw._data.dateOfFirstActivity ?? new Date(0),
-                    startDate
-                  ])
                 ),
                 netPerformancePercentage: new Big(
-                  context.raw._data.netPerformancePercentWithCurrencyEffect
+                  raw._data.netPerformancePercentWithCurrencyEffect
                 )
               }).toNumber();
 
@@ -261,7 +265,9 @@ export class GfTreemapChartComponent
           labels: {
             align: 'left',
             color: (context: GfTreemapScriptableContext) => {
-              if (!context.raw) {
+              const raw = context.raw as GfTreemapDataPoint;
+
+              if (!raw) {
                 return undefined;
               }
 
@@ -270,12 +276,12 @@ export class GfTreemapChartComponent
                   daysInMarket: differenceInDays(
                     endDate,
                     max([
-                      context.raw._data.dateOfFirstActivity ?? new Date(0),
+                      raw._data.dateOfFirstActivity ?? new Date(0),
                       startDate
                     ])
                   ),
                   netPerformancePercentage: new Big(
-                    context.raw._data.netPerformancePercentWithCurrencyEffect
+                    raw._data.netPerformancePercentWithCurrencyEffect
                   )
                 }).toNumber();
 
@@ -294,7 +300,9 @@ export class GfTreemapChartComponent
             },
             display: true,
             font: [{ size: 16 }, { lineHeight: 1.5, size: 14 }],
-            formatter: ({ raw }: GfTreemapScriptableContext) => {
+            formatter: (context: GfTreemapScriptableContext) => {
+              const raw = context.raw as GfTreemapDataPoint;
+
               let netPerformancePercentWithCurrencyEffect = round(
                 raw._data.netPerformancePercentWithCurrencyEffect,
                 4
@@ -380,7 +388,9 @@ export class GfTreemapChartComponent
       }),
       // @ts-expect-error: no need to set all attributes in callbacks
       callbacks: {
-        label: ({ raw }: GfTreemapTooltipItem) => {
+        label: (context: TooltipItem<'treemap'>) => {
+          const raw = context.raw as GfTreemapDataPoint;
+
           const allocationInPercentage = `${(raw._data.allocationInPercentage * 100).toFixed(2)}%`;
           const name = raw._data.assetProfile.name;
 

package-lock.json

@@ -54,7 +54,7 @@
         "bull": "4.16.5",
         "chart.js": "4.5.1",
         "chartjs-adapter-date-fns": "3.0.0",
-        "chartjs-chart-treemap": "3.1.0",
+        "chartjs-chart-treemap": "4.2.0",
         "chartjs-plugin-annotation": "3.1.0",
         "chartjs-plugin-datalabels": "2.2.0",
         "cheerio": "1.2.0",
@@ -16124,9 +16124,9 @@
       }
     },
     "node_modules/chartjs-chart-treemap": {
-      "version": "3.1.0",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/chartjs-chart-treemap/-/chartjs-chart-treemap-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/chartjs-chart-treemap/-/chartjs-chart-treemap-4.2.0.tgz",
-      "integrity": "sha512-0LJxj4J9sCTHmrXCFlqtoBKMJDcS7VzFeRgNBRZRwU1QSpCXJKTNk5TysPEs5/YW0XYvZoN8u44RqqLf0pAzQw==",
+      "integrity": "sha512-2ghdKHbknLYEzqD2fRTbACOzEhuH/f7zI5t6dbQ3cAOS+ric4mLjll6Sxsaugy/HFU0KUftJEszYOvtay3wFSQ==",
       "license": "MIT",
       "peerDependencies": {
         "chart.js": ">=3.0.0"

package.json

@@ -98,7 +98,7 @@
     "bull": "4.16.5",
     "chart.js": "4.5.1",
     "chartjs-adapter-date-fns": "3.0.0",
-    "chartjs-chart-treemap": "3.1.0",
+    "chartjs-chart-treemap": "4.2.0",
     "chartjs-plugin-annotation": "3.1.0",
     "chartjs-plugin-datalabels": "2.2.0",
     "cheerio": "1.2.0",