From 1e4446116b14d6bfedd1b586d3ef4890b1f1e12c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 24 Jan 2022 19:11:59 +0000 Subject: [PATCH] update and migrate to chart.js & react-chartjs new major versions --- package-lock.json | 94 ++++----------- package.json | 4 +- .../Asset/AssetActions/Pool/Graph.tsx | 107 +++++++++--------- 3 files changed, 81 insertions(+), 124 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3f3189e71..13e168635 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "@walletconnect/web3-provider": "^1.7.1", "axios": "^0.24.0", "bignumber.js": "^9.0.2", - "chart.js": "^2.9.4", + "chart.js": "^3.7.0", "classnames": "^2.3.1", "d3": "^7.3.0", "date-fns": "^2.28.0", @@ -42,7 +42,7 @@ "query-string": "^7.1.0", "querystring": "^0.2.1", "react": "^17.0.2", - "react-chartjs-2": "^2.11.2", + "react-chartjs-2": "^4.0.1", "react-clipboard.js": "^2.0.16", "react-data-table-component": "^6.11.7", "react-dom": "^17.0.2", @@ -9724,30 +9724,9 @@ "dev": true }, "node_modules/chart.js": { - "version": "2.9.4", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz", - "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==", - "dependencies": { - "chartjs-color": "^2.1.0", - "moment": "^2.10.2" - } - }, - "node_modules/chartjs-color": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", - "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", - "dependencies": { - "chartjs-color-string": "^0.6.0", - "color-convert": "^1.9.3" - } - }, - "node_modules/chartjs-color-string": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", - "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", - "dependencies": { - "color-name": "^1.0.0" - } + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz", + "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg==" }, "node_modules/check-error": { "version": "1.0.2", @@ -10458,7 +10437,8 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "node_modules/colorette": { "version": "1.4.0", @@ -19979,6 +19959,7 @@ "version": "2.29.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", + "dev": true, "engines": { "node": "*" } @@ -21883,17 +21864,12 @@ } }, "node_modules/react-chartjs-2": { - "version": "2.11.2", - "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.11.2.tgz", - "integrity": "sha512-hcPS9vmRJeAALPPf0uo02BiD8BDm0HNmneJYTZVR74UKprXOpql+Jy1rVuj93rKw0Jfx77mkcRfXPxTe5K83uw==", - "dependencies": { - "lodash": "^4.17.19", - "prop-types": "^15.7.2" - }, + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz", + "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==", "peerDependencies": { - "chart.js": "^2.3", - "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", - "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" + "chart.js": "^3.5.0", + "react": "^16.8.0 || ^17.0.0" } }, "node_modules/react-clipboard.js": { @@ -35769,30 +35745,9 @@ "dev": true }, "chart.js": { - "version": "2.9.4", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz", - "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==", - "requires": { - "chartjs-color": "^2.1.0", - "moment": "^2.10.2" - } - }, - "chartjs-color": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", - "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", - "requires": { - "chartjs-color-string": "^0.6.0", - "color-convert": "^1.9.3" - } - }, - "chartjs-color-string": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", - "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", - "requires": { - "color-name": "^1.0.0" - } + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz", + "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg==" }, "check-error": { "version": "1.0.2", @@ -36341,7 +36296,8 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "colorette": { "version": "1.4.0", @@ -43782,7 +43738,8 @@ "moment": { "version": "2.29.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", - "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", + "dev": true }, "mri": { "version": "1.2.0", @@ -45247,13 +45204,10 @@ } }, "react-chartjs-2": { - "version": "2.11.2", - "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.11.2.tgz", - "integrity": "sha512-hcPS9vmRJeAALPPf0uo02BiD8BDm0HNmneJYTZVR74UKprXOpql+Jy1rVuj93rKw0Jfx77mkcRfXPxTe5K83uw==", - "requires": { - "lodash": "^4.17.19", - "prop-types": "^15.7.2" - } + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz", + "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==", + "requires": {} }, "react-clipboard.js": { "version": "2.0.16", diff --git a/package.json b/package.json index ab0da8d5f..83969af5f 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@walletconnect/web3-provider": "^1.7.1", "axios": "^0.24.0", "bignumber.js": "^9.0.2", - "chart.js": "^2.9.4", + "chart.js": "^3.7.0", "classnames": "^2.3.1", "d3": "^7.3.0", "date-fns": "^2.28.0", @@ -50,7 +50,7 @@ "query-string": "^7.1.0", "querystring": "^0.2.1", "react": "^17.0.2", - "react-chartjs-2": "^2.11.2", + "react-chartjs-2": "^4.0.1", "react-clipboard.js": "^2.0.16", "react-data-table-component": "^6.11.7", "react-dom": "^17.0.2", diff --git a/src/components/Asset/AssetActions/Pool/Graph.tsx b/src/components/Asset/AssetActions/Pool/Graph.tsx index d62e73d11..682defd04 100644 --- a/src/components/Asset/AssetActions/Pool/Graph.tsx +++ b/src/components/Asset/AssetActions/Pool/Graph.tsx @@ -1,4 +1,3 @@ -/* eslint-disable camelcase */ import React, { ChangeEvent, ReactElement, @@ -6,14 +5,24 @@ import React, { useEffect, useState } from 'react' -import { Line, defaults, Bar } from 'react-chartjs-2' import { + Chart as ChartJS, + LinearScale, + CategoryScale, + PointElement, + Tooltip, ChartData, - ChartDataSets, ChartOptions, - ChartTooltipItem, - ChartTooltipOptions + defaults, + ChartDataset, + TooltipOptions, + TooltipItem, + BarElement, + LineElement, + LineController, + BarController } from 'chart.js' +import { Chart } from 'react-chartjs-2' import Loader from '@shared/atoms/Loader' import { formatPrice } from '@shared/Price/PriceUnit' import { useUserPreferences } from '@context/UserPreferences' @@ -28,18 +37,28 @@ import { fetchData, getQueryContext } from '@utils/subgraph' import styles from './Graph.module.css' import Decimal from 'decimal.js' +ChartJS.register( + LineElement, + BarElement, + PointElement, + LinearScale, + CategoryScale, + // Title, + Tooltip, + LineController, + BarController +) + declare type GraphType = 'liquidity' | 'price' | 'volume' // Chart.js global defaults -defaults.global.defaultFontFamily = `'Sharp Sans', -apple-system, BlinkMacSystemFont, -'Segoe UI', Helvetica, Arial, sans-serif` -defaults.global.animation = { easing: 'easeInOutQuart', duration: 1000 } +defaults.font.family = `'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif` +defaults.animation = { easing: 'easeInOutQuart', duration: 1000 } const REFETCH_INTERVAL = 10000 -const lineStyle: Partial = { +const lineStyle: Partial = { fill: false, - lineTension: 0.1, borderWidth: 2, pointBorderWidth: 0, pointRadius: 0, @@ -49,15 +68,10 @@ const lineStyle: Partial = { pointHoverBackgroundColor: '#ff4092' } -const tooltipOptions: Partial = { +const tooltipOptions: Partial = { intersect: false, - titleFontStyle: 'normal', - titleFontSize: 10, - bodyFontSize: 12, - bodyFontStyle: 'bold', displayColors: false, - xPadding: 10, - yPadding: 10, + padding: 10, cornerRadius: 3, borderWidth: 1, caretSize: 7 @@ -73,37 +87,23 @@ function getOptions(locale: string, isDarkMode: boolean): ChartOptions { bottom: 10 } }, - tooltips: { - ...tooltipOptions, - backgroundColor: isDarkMode ? `#141414` : `#fff`, - titleFontColor: isDarkMode ? `#e2e2e2` : `#303030`, - bodyFontColor: isDarkMode ? `#fff` : `#141414`, - borderColor: isDarkMode ? `#41474e` : `#e2e2e2`, - callbacks: { - label: (tooltipItem: ChartTooltipItem) => - `${formatPrice(`${tooltipItem.yLabel}`, locale)} OCEAN` + plugins: { + tooltip: { + ...tooltipOptions, + backgroundColor: isDarkMode ? `#141414` : `#fff`, + titleColor: isDarkMode ? `#e2e2e2` : `#303030`, + bodyColor: isDarkMode ? `#fff` : `#141414`, + borderColor: isDarkMode ? `#41474e` : `#e2e2e2`, + callbacks: { + label: (tooltipItem: TooltipItem) => + `${formatPrice(`${tooltipItem.formattedValue}`, locale)} OCEAN` + } } }, - legend: { - display: false - }, - hover: { - intersect: false, - animationDuration: 0 - }, + hover: { intersect: false }, scales: { - yAxes: [ - { - display: false - // gridLines: { - // drawBorder: false, - // color: isDarkMode ? '#303030' : '#e2e2e2', - // zeroLineColor: isDarkMode ? '#303030' : '#e2e2e2' - // }, - // ticks: { display: false } - } - ], - xAxes: [{ display: false, gridLines: { display: true } }] + y: { display: false }, + x: { display: false } } } } @@ -126,6 +126,7 @@ export default function Graph(): ReactElement { const { locale } = useUserPreferences() const { price, ddo } = useAsset() const darkMode = useDarkMode(false, darkModeConfig) + const [options, setOptions] = useState() const [graphType, setGraphType] = useState('liquidity') const [error, setError] = useState() @@ -214,8 +215,7 @@ export default function Graph(): ReactElement { ...lineStyle, label: 'Liquidity (OCEAN)', data, - borderColor: `#8b98a9`, - pointBackgroundColor: `#8b98a9` + borderColor: `#8b98a9` } ] }) @@ -256,11 +256,14 @@ export default function Graph(): ReactElement { ))} - {graphType === 'volume' ? ( - - ) : ( - - )} + )}