Feature/upgrade chart.js to version 4.2.0 (#1567)

* Upgrade chart.js to version 4.2.0

* Update changelog
pull/1675/head^2
Thomas Kaul 1 year ago committed by GitHub
parent e935a57dec
commit 436f791fa4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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/), 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). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## Unreleased
### Changed
- Upgraded `chart.js` from version `4.0.1` to `4.2.0`
## 1.233.0 - 2023-02-09 ## 1.233.0 - 2023-02-09
### Added ### Added

@ -27,6 +27,7 @@ import { ColorScheme } from '@ghostfolio/common/types';
import { SymbolProfile } from '@prisma/client'; import { SymbolProfile } from '@prisma/client';
import { import {
Chart, Chart,
ChartData,
LineController, LineController,
LineElement, LineElement,
LinearScale, LinearScale,
@ -57,7 +58,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
@ViewChild('chartCanvas') chartCanvas; @ViewChild('chartCanvas') chartCanvas;
public chart: Chart<any>; public chart: Chart<'line'>;
public constructor() { public constructor() {
Chart.register( Chart.register(
@ -89,14 +90,14 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
} }
private initialize() { private initialize() {
const data = { const data: ChartData<'line'> = {
datasets: [ datasets: [
{ {
backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
borderWidth: 2, borderWidth: 2,
data: this.performanceDataItems.map(({ date, value }) => { data: this.performanceDataItems.map(({ date, value }) => {
return { x: parseDate(date), y: value }; return { x: parseDate(date).getTime(), y: value };
}), }),
label: $localize`Portfolio` label: $localize`Portfolio`
}, },
@ -105,7 +106,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`, borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
borderWidth: 2, borderWidth: 2,
data: this.benchmarkDataItems.map(({ date, value }) => { data: this.benchmarkDataItems.map(({ date, value }) => {
return { x: parseDate(date), y: value }; return { x: parseDate(date).getTime(), y: value };
}), }),
label: $localize`Benchmark` label: $localize`Benchmark`
} }

@ -29,6 +29,7 @@ import {
BarController, BarController,
BarElement, BarElement,
Chart, Chart,
ChartData,
LineController, LineController,
LineElement, LineElement,
LinearScale, LinearScale,
@ -62,7 +63,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
@ViewChild('chartCanvas') chartCanvas; @ViewChild('chartCanvas') chartCanvas;
public chart: Chart<any>; public chart: Chart<'bar' | 'line'>;
private investments: InvestmentItem[]; private investments: InvestmentItem[];
private values: LineChartItem[]; private values: LineChartItem[];
@ -142,7 +143,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
}); });
} }
const chartData = { const chartData: ChartData<'line'> = {
labels: this.historicalDataItems.map(({ date }) => { labels: this.historicalDataItems.map(({ date }) => {
return parseDate(date); return parseDate(date);
}), }),
@ -153,7 +154,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
borderWidth: this.groupBy ? 0 : 1, borderWidth: this.groupBy ? 0 : 1,
data: this.investments.map(({ date, investment }) => { data: this.investments.map(({ date, investment }) => {
return { return {
x: parseDate(date), x: parseDate(date).getTime(),
y: this.isInPercent ? investment * 100 : investment y: this.isInPercent ? investment * 100 : investment
}; };
}), }),
@ -173,7 +174,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
borderWidth: 2, borderWidth: 2,
data: this.values.map(({ date, value }) => { data: this.values.map(({ date, value }) => {
return { return {
x: parseDate(date), x: parseDate(date).getTime(),
y: this.isInPercent ? value * 100 : value y: this.isInPercent ? value * 100 : value
}; };
}), }),

@ -61,7 +61,7 @@ export class FireCalculatorComponent
principalInvestmentAmount: new FormControl<number>(undefined), principalInvestmentAmount: new FormControl<number>(undefined),
time: new FormControl<number>(undefined) time: new FormControl<number>(undefined)
}); });
public chart: Chart; public chart: Chart<'bar'>;
public isLoading = true; public isLoading = true;
public projectedTotalAmount: number; public projectedTotalAmount: number;

@ -66,7 +66,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
@ViewChild('chartCanvas') chartCanvas; @ViewChild('chartCanvas') chartCanvas;
public chart: Chart; public chart: Chart<'line'>;
public isLoading = true; public isLoading = true;
private readonly ANIMATION_DURATION = 1200; private readonly ANIMATION_DURATION = 1200;

@ -55,7 +55,7 @@ export class PortfolioProportionChartComponent
@ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>; @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
public chart: Chart; public chart: Chart<'pie'>;
public isLoading = true; public isLoading = true;
private readonly OTHER_KEY = 'OTHER'; private readonly OTHER_KEY = 'OTHER';

@ -92,9 +92,9 @@
"bull": "4.10.2", "bull": "4.10.2",
"cache-manager": "3.4.3", "cache-manager": "3.4.3",
"cache-manager-redis-store": "2.0.0", "cache-manager-redis-store": "2.0.0",
"chart.js": "4.0.1", "chart.js": "4.2.0",
"chartjs-adapter-date-fns": "2.0.1", "chartjs-adapter-date-fns": "3.0.0",
"chartjs-plugin-annotation": "2.1.0", "chartjs-plugin-annotation": "2.1.2",
"chartjs-plugin-datalabels": "2.2.0", "chartjs-plugin-datalabels": "2.2.0",
"cheerio": "1.0.0-rc.12", "cheerio": "1.0.0-rc.12",
"class-transformer": "0.3.2", "class-transformer": "0.3.2",

@ -3511,6 +3511,11 @@
"@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/resolve-uri" "^3.0.3"
"@jridgewell/sourcemap-codec" "^1.4.10" "@jridgewell/sourcemap-codec" "^1.4.10"
"@kurkle/color@^0.3.0":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.1.tgz#ef72bc8022ccf77cdd2715097f062ee591ec145c"
integrity sha512-hW0GwZj06z/ZFUW2Espl7toVDjghJN+EKqyXzPSV8NV89d5BYp5rRMBJoc+aUN0x5OXDMeRQHazejr2Xmqj2tw==
"@leichtgewicht/ip-codec@^2.0.1": "@leichtgewicht/ip-codec@^2.0.1":
version "2.0.4" version "2.0.4"
resolved "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz" resolved "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz"
@ -8617,20 +8622,22 @@ chardet@^0.7.0:
resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz" resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
chart.js@4.0.1: chart.js@4.2.0:
version "4.0.1" version "4.2.0"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.0.1.tgz#93d5d50ac222a5b3b6ac7488e82e1553ac031592" resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.2.0.tgz#dd281b2ce890bff32f3e249cf2972a1e74bc032c"
integrity sha512-5/8/9eBivwBZK81mKvmIwTb2Pmw4D/5h1RK9fBWZLLZ8mCJ+kfYNmV9rMrGoa5Hgy2/wVDBMLSUDudul2/9ihA== integrity sha512-wbtcV+QKeH0F7gQZaCJEIpsNriFheacouJQTVIjITi3eQA8bTlIBoknz0+dgV79aeKLNMAX+nDslIVE/nJ3rzA==
dependencies:
"@kurkle/color" "^0.3.0"
chartjs-adapter-date-fns@2.0.1: chartjs-adapter-date-fns@3.0.0:
version "2.0.1" version "3.0.0"
resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.1.tgz#3d007d4985391362fb15c96310fff8376a434bae" resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz#c25f63c7f317c1f96f9a7c44bd45eeedb8a478e5"
integrity sha512-v3WV9rdnQ05ce3A0ZCjzUekJCAbfm6+3HqSoeY2BIkdMYZoYr/4T+ril1tZyDl869lz6xdNVMXejUFT9YKpw4A== integrity sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==
chartjs-plugin-annotation@2.1.0: chartjs-plugin-annotation@2.1.2:
version "2.1.0" version "2.1.2"
resolved "https://registry.yarnpkg.com/chartjs-plugin-annotation/-/chartjs-plugin-annotation-2.1.0.tgz#c43172d26ec8e7e3bc104932d1a1807bf0c46db7" resolved "https://registry.yarnpkg.com/chartjs-plugin-annotation/-/chartjs-plugin-annotation-2.1.2.tgz#8c307c931fda735a1acf1b606ad0e3fd7d96299b"
integrity sha512-wHxP6mBWrgdldAEbHM5nMaMJ3PuunXgiotVh8natosuZsEqpjU0ZeyvMTBwIkKXLSDncb3faLunl4BI89Vmj/g== integrity sha512-kmEp2WtpogwnKKnDPO3iO3mVwvVGtmG5BkZVtAEZm5YzJ9CYxojjYEgk7OTrFbJ5vU098b84UeJRe8kRfNcq5g==
chartjs-plugin-datalabels@2.2.0: chartjs-plugin-datalabels@2.2.0:
version "2.2.0" version "2.2.0"

Loading…
Cancel
Save