Feature/upgrade chart.js to version 4.0.1 (#1503)

* Upgrade chart.js to version 4.0.1 (including plugins) * Migrate border attributes * Update changelog
1 year ago · a51b210f79
parent 285f2220f3
commit a51b210f79
6 changed files with 50 additions and 32 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+## Unreleased
+
+### Changed
+
+- Upgraded `chart.js` from version `3.8.0` to `4.0.1`
+
 ## 1.217.0 - 2022-12-10

 ### Added
--- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
+++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
@ -159,10 +159,12 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
            responsive: true,
            scales: {
              x: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                  width: 1
+                },
                display: true,
                grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
-                  borderWidth: 1,
                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                  display: false
                },
@ -173,12 +175,14 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
                }
              },
              y: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                  display: false
+                },
                display: true,
                grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
-                  display: false,
-                  drawBorder: false
+                  display: false
                },
                position: 'right',
                ticks: {
--- a/apps/client/src/app/components/investment-chart/investment-chart.component.ts
+++ b/apps/client/src/app/components/investment-chart/investment-chart.component.ts
@ -261,10 +261,12 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
            responsive: true,
            scales: {
              x: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                  width: this.groupBy ? 0 : 1
+                },
                display: true,
                grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
-                  borderWidth: this.groupBy ? 0 : 1,
                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                  display: false
                },
@ -279,12 +281,14 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                }
              },
              y: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                  display: false
+                },
                display: !this.isInPercent,
                grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
-                  display: false,
-                  drawBorder: false
+                  display: false
                },
                position: 'right',
                ticks: {
--- a/libs/ui/src/lib/line-chart/line-chart.component.ts
+++ b/libs/ui/src/lib/line-chart/line-chart.component.ts
@ -212,9 +212,11 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
            },
            scales: {
              x: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
+                },
                display: this.showXAxis,
                grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                  display: false
                },
@ -225,9 +227,11 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
                type: 'time'
              },
              y: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
+                },
                display: this.showYAxis,
                grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                  display: false
                },
--- a/package.json
+++ b/package.json
@ -94,10 +94,10 @@
    "bull": "4.8.5",
    "cache-manager": "3.4.3",
    "cache-manager-redis-store": "2.0.0",
-    "chart.js": "3.8.0",
-    "chartjs-adapter-date-fns": "2.0.0",
-    "chartjs-plugin-annotation": "2.0.0",
-    "chartjs-plugin-datalabels": "2.0.0",
+    "chart.js": "4.0.1",
+    "chartjs-adapter-date-fns": "2.0.1",
+    "chartjs-plugin-annotation": "2.1.0",
+    "chartjs-plugin-datalabels": "2.2.0",
    "cheerio": "1.0.0-rc.12",
    "class-transformer": "0.3.2",
    "class-validator": "0.13.1",
--- a/yarn.lock
+++ b/yarn.lock
@ -7338,25 +7338,25 @@ chardet@^0.7.0:
  resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==

-chart.js@3.8.0:
-  version "3.8.0"
-  resolved "https://registry.npmjs.org/chart.js/-/chart.js-3.8.0.tgz"
-  integrity sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg==
+chart.js@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.0.1.tgz#93d5d50ac222a5b3b6ac7488e82e1553ac031592"
+  integrity sha512-5/8/9eBivwBZK81mKvmIwTb2Pmw4D/5h1RK9fBWZLLZ8mCJ+kfYNmV9rMrGoa5Hgy2/wVDBMLSUDudul2/9ihA==

-chartjs-adapter-date-fns@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz"
-  integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==
+chartjs-adapter-date-fns@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.1.tgz#3d007d4985391362fb15c96310fff8376a434bae"
+  integrity sha512-v3WV9rdnQ05ce3A0ZCjzUekJCAbfm6+3HqSoeY2BIkdMYZoYr/4T+ril1tZyDl869lz6xdNVMXejUFT9YKpw4A==

-chartjs-plugin-annotation@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-2.0.0.tgz"
-  integrity sha512-Gd8X+uaWuD63qHSf4R9SvFIdHbxmP1RBsKfdlQt7oFgsyDYjqP2y0WrbEs1UoE7OXJDm8lfZes2tQQNhEL/EZw==
+chartjs-plugin-annotation@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-annotation/-/chartjs-plugin-annotation-2.1.0.tgz#c43172d26ec8e7e3bc104932d1a1807bf0c46db7"
+  integrity sha512-wHxP6mBWrgdldAEbHM5nMaMJ3PuunXgiotVh8natosuZsEqpjU0ZeyvMTBwIkKXLSDncb3faLunl4BI89Vmj/g==

-chartjs-plugin-datalabels@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz"
-  integrity sha512-WBsWihphzM0Y8fmQVm89+iy99mmgejmj5/jcsYqwxSioLRL/zqJ4Scv/eXq5ZqvG3TpojlGzZLeaOaSvDm7fwA==
+chartjs-plugin-datalabels@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz#369578e131d743c2e34b5fbe2d3f9335f6639b8f"
+  integrity sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==

 check-more-types@^2.24.0:
  version "2.24.0"