Feature/upgrade chart.js dependencies to the latest versions (#4209)

* chore(deps): bump chartjs-chart-treemap from 2.3.1 to 3.1.0

* chore(deps): bump chartjs-plugin-annotation from 2.1.2 to 3.1.0

* chore(deps): bump chart.js from 4.2.0 to 4.4.7

* fix(ts): reinforce chart type safety

* Update changelog

CHANGELOG.md

@@ -12,6 +12,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Extended the asset profile data in the _Financial Modeling Prep_ service
 - Extended the search by `isin` in the _Financial Modeling Prep_ service
 - Switched to _ESLint_’s flat config format
+- Upgraded `chart.js` from version `4.2.0` to `4.4.7`
+- Upgraded `chartjs-chart-treemap` from version `2.3.1` to `3.1.0`
+- Upgraded `chartjs-plugin-annotation` from version `2.1.2` to `3.1.0`
 - Upgraded `eslint` dependencies
 
 ## 2.134.0 - 2025-01-15

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -77,7 +77,7 @@ export class GfPortfolioProportionChartComponent
 
   @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
 
-  public chart: Chart<'pie'>;
+  public chart: Chart<'doughnut'>;
   public isLoading = true;
 
   private readonly OTHER_KEY = 'OTHER';
@@ -257,7 +257,7 @@ export class GfPortfolioProportionChartComponent
       });
     });
 
-    const datasets: ChartConfiguration['data']['datasets'] = [
+    const datasets: ChartConfiguration<'doughnut'>['data']['datasets'] = [
       {
         backgroundColor: chartDataSorted.map(([, item]) => {
           return item.color;
@@ -295,7 +295,7 @@ export class GfPortfolioProportionChartComponent
       datasets[1].data[1] = Number.MAX_SAFE_INTEGER;
     }
 
-    const data: ChartConfiguration['data'] = {
+    const data: ChartConfiguration<'doughnut'>['data'] = {
       datasets,
       labels
     };
@@ -308,7 +308,7 @@ export class GfPortfolioProportionChartComponent
         ) as unknown;
         this.chart.update();
       } else {
-        this.chart = new Chart(this.chartCanvas.nativeElement, {
+        this.chart = new Chart<'doughnut'>(this.chartCanvas.nativeElement, {
           data,
           options: {
             animation: false,

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

@@ -196,7 +196,7 @@ export class GfTreemapChartComponent
       min: Math.min(...negativeNetPerformancePercents)
     };
 
-    const data: ChartConfiguration['data'] = {
+    const data: ChartConfiguration<'treemap'>['data'] = {
       datasets: [
         {
           backgroundColor: (ctx) => {

package-lock.json

@@ -50,10 +50,10 @@
         "bull": "4.16.2",
         "cache-manager": "5.7.6",
         "cache-manager-redis-yet": "5.1.4",
-        "chart.js": "4.2.0",
+        "chart.js": "4.4.7",
         "chartjs-adapter-date-fns": "3.0.0",
-        "chartjs-chart-treemap": "2.3.1",
-        "chartjs-plugin-annotation": "2.1.2",
+        "chartjs-chart-treemap": "3.1.0",
+        "chartjs-plugin-annotation": "3.1.0",
         "chartjs-plugin-datalabels": "2.2.0",
         "cheerio": "1.0.0",
         "class-transformer": "0.5.1",
@@ -14308,15 +14308,15 @@
       "license": "MIT"
     },
     "node_modules/chart.js": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.2.0.tgz",
-      "integrity": "sha512-wbtcV+QKeH0F7gQZaCJEIpsNriFheacouJQTVIjITi3eQA8bTlIBoknz0+dgV79aeKLNMAX+nDslIVE/nJ3rzA==",
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz",
+      "integrity": "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==",
       "license": "MIT",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
       "engines": {
-        "pnpm": "^7.0.0"
+        "pnpm": ">=8"
       }
     },
     "node_modules/chartjs-adapter-date-fns": {
@@ -14330,21 +14330,21 @@
       }
     },
     "node_modules/chartjs-chart-treemap": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/chartjs-chart-treemap/-/chartjs-chart-treemap-2.3.1.tgz",
-      "integrity": "sha512-GW+iODLICIJhNZtHbTtaOjCwRIxmXcquXRKDFMsrkXyqyDeSN1aiVfzNNj6Xjy55soopqRA+YfHqjT2S2zF7lQ==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/chartjs-chart-treemap/-/chartjs-chart-treemap-3.1.0.tgz",
+      "integrity": "sha512-0LJxj4J9sCTHmrXCFlqtoBKMJDcS7VzFeRgNBRZRwU1QSpCXJKTNk5TysPEs5/YW0XYvZoN8u44RqqLf0pAzQw==",
       "license": "MIT",
       "peerDependencies": {
         "chart.js": ">=3.0.0"
       }
     },
     "node_modules/chartjs-plugin-annotation": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-2.1.2.tgz",
-      "integrity": "sha512-kmEp2WtpogwnKKnDPO3iO3mVwvVGtmG5BkZVtAEZm5YzJ9CYxojjYEgk7OTrFbJ5vU098b84UeJRe8kRfNcq5g==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.1.0.tgz",
+      "integrity": "sha512-EkAed6/ycXD/7n0ShrlT1T2Hm3acnbFhgkIEJLa0X+M6S16x0zwj1Fv4suv/2bwayCT3jGPdAtI9uLcAMToaQQ==",
       "license": "MIT",
       "peerDependencies": {
-        "chart.js": ">=3.7.0"
+        "chart.js": ">=4.0.0"
       }
     },
     "node_modules/chartjs-plugin-datalabels": {

package.json

@@ -96,10 +96,10 @@
     "bull": "4.16.2",
     "cache-manager": "5.7.6",
     "cache-manager-redis-yet": "5.1.4",
-    "chart.js": "4.2.0",
+    "chart.js": "4.4.7",
     "chartjs-adapter-date-fns": "3.0.0",
-    "chartjs-chart-treemap": "2.3.1",
-    "chartjs-plugin-annotation": "2.1.2",
+    "chartjs-chart-treemap": "3.1.0",
+    "chartjs-plugin-annotation": "3.1.0",
     "chartjs-plugin-datalabels": "2.2.0",
     "cheerio": "1.0.0",
     "class-transformer": "0.5.1",