From be28acbbdcace25690839f0b5448bb32c909554d Mon Sep 17 00:00:00 2001 From: Viktor Baranov Date: Thu, 10 Jun 2021 12:48:58 +0300 Subject: [PATCH] Migration to Chart.js 3.0 --- CHANGELOG.md | 1 + .../js/lib/coin_balance_history_chart.js | 31 ++-- .../assets/js/lib/history_chart.js | 144 ++++++++++-------- .../assets/js/pages/stakes/utils.js | 18 ++- apps/block_scout_web/assets/package-lock.json | 94 +++++------- apps/block_scout_web/assets/package.json | 5 +- 6 files changed, 154 insertions(+), 139 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8412fd3c2d..02c0bfc8ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ - [#3888](https://github.com/blockscout/blockscout/pull/3888) - EIP-1967 contract proxy pattern detection fix ### Chore +- [#4268](https://github.com/blockscout/blockscout/pull/4268) - Migration to Chart.js 3.0 - [#4253](https://github.com/blockscout/blockscout/pull/4253) - Elixir 1.11.4, npm audit fix - [#4231](https://github.com/blockscout/blockscout/pull/4231) - Transactions stats: get min/max blocks in one query - [#4157](https://github.com/blockscout/blockscout/pull/4157) - Fix internal docs generation diff --git a/apps/block_scout_web/assets/js/lib/coin_balance_history_chart.js b/apps/block_scout_web/assets/js/lib/coin_balance_history_chart.js index b922f0856d..2b60f1726a 100644 --- a/apps/block_scout_web/assets/js/lib/coin_balance_history_chart.js +++ b/apps/block_scout_web/assets/js/lib/coin_balance_history_chart.js @@ -1,7 +1,10 @@ import $ from 'jquery' -import Chart from 'chart.js' +import { Chart, Filler, LineController, LineElement, PointElement, LinearScale, TimeScale, Title, Tooltip } from 'chart.js' +import 'chartjs-adapter-moment' import humps from 'humps' +Chart.register(Filler, LineController, LineElement, PointElement, LinearScale, TimeScale, Title, Tooltip) + export function createCoinBalanceHistoryChart (el) { const $chartContainer = $('[data-chart-container]') const $chartLoading = $('[data-chart-loading-message]') @@ -32,30 +35,40 @@ export function createCoinBalanceHistoryChart (el) { datasets: [{ label: 'coin balance', data: coinBalanceHistoryData, - lineTension: 0 + lineTension: 0, + cubicInterpolationMode: 'monotone', + fill: true }] }, - options: { + plugins: { legend: { display: false - }, + } + }, + interaction: { + intersect: false, + mode: 'index' + }, + options: { scales: { - xAxes: [{ + x: { type: 'time', time: { unit: 'day', + tooltipFormat: 'YYYY-MM-DD', stepSize: stepSize } - }], - yAxes: [{ + }, + y: { + type: 'linear', ticks: { beginAtZero: true }, - scaleLabel: { + title: { display: true, labelString: window.localized.Ether } - }] + } } } }) diff --git a/apps/block_scout_web/assets/js/lib/history_chart.js b/apps/block_scout_web/assets/js/lib/history_chart.js index 8b844a682c..4ae2ed75ea 100644 --- a/apps/block_scout_web/assets/js/lib/history_chart.js +++ b/apps/block_scout_web/assets/js/lib/history_chart.js @@ -1,11 +1,48 @@ import $ from 'jquery' -import Chart from 'chart.js' +import { Chart, LineController, LineElement, PointElement, LinearScale, TimeScale, Title, Tooltip } from 'chart.js' +import 'chartjs-adapter-moment' import humps from 'humps' import numeral from 'numeral' import moment from 'moment' import { formatUsdValue } from '../lib/currency' import sassVariables from '../../css/app.scss' +Chart.register(LineController, LineElement, PointElement, LinearScale, TimeScale, Title, Tooltip) + +const grid = { + display: false, + drawBorder: false, + drawOnChartArea: false +} + +function xAxe (fontColor) { + return { + grid: grid, + type: 'time', + time: { + unit: 'day', + tooltipFormat: 'YYYY-MM-DD', + stepSize: 14 + }, + ticks: { + color: fontColor + } + } +} + +const padding = { + left: 20, + right: 20 +} + +const legend = { + display: false +} + +function formatValue (val) { + return `${numeral(val).format('0,0')}` +} + const config = { type: 'line', responsive: true, @@ -14,81 +51,63 @@ const config = { }, options: { layout: { - padding: { - left: 20, - right: 20 - } + padding: padding }, - legend: { - display: false + interaction: { + intersect: false, + mode: 'index' }, scales: { - xAxes: [{ - gridLines: { - display: false, - drawBorder: false - }, - type: 'time', - time: { - unit: 'day', - stepSize: 14 - }, - ticks: { - fontColor: sassVariables.dashboardBannerChartAxisFontColor - } - }], - yAxes: [{ - id: 'price', - gridLines: { - display: false, - drawBorder: false - }, + x: xAxe(sassVariables.dashboardBannerChartAxisFontColor), + price: { + position: 'left', + grid: grid, ticks: { beginAtZero: true, callback: (value, _index, _values) => `$${numeral(value).format('0,0.00')}`, maxTicksLimit: 4, - fontColor: sassVariables.dashboardBannerChartAxisFontColor + color: sassVariables.dashboardBannerChartAxisFontColor } - }, { - id: 'marketCap', - gridLines: { - display: false, - drawBorder: false - }, + }, + marketCap: { + position: 'right', + grid: grid, ticks: { callback: (_value, _index, _values) => '', maxTicksLimit: 6, - drawOnChartArea: false + drawOnChartArea: false, + color: sassVariables.dashboardBannerChartAxisFontColor } - }, { - id: 'numTransactions', + }, + numTransactions: { position: 'right', - gridLines: { - display: false, - drawBorder: false - }, + grid: grid, ticks: { beginAtZero: true, - callback: (value, _index, _values) => `${numeral(value).format('0,0')}`, + callback: (value, _index, _values) => formatValue(value), maxTicksLimit: 4, - fontColor: sassVariables.dashboardBannerChartAxisFontColor + color: sassVariables.dashboardBannerChartAxisFontColor } - }] + } }, - tooltips: { - mode: 'index', - intersect: false, - callbacks: { - label: ({ datasetIndex, yLabel }, { datasets }) => { - const label = datasets[datasetIndex].label - if (datasets[datasetIndex].yAxisID === 'price') { - return `${label}: ${formatUsdValue(yLabel)}` - } else if (datasets[datasetIndex].yAxisID === 'marketCap') { - return `${label}: ${formatUsdValue(yLabel)}` - } else if (datasets[datasetIndex].yAxisID === 'numTransactions') { - return `${label}: ${yLabel}` - } else { - return yLabel + plugins: { + legend: legend, + tooltip: { + mode: 'index', + intersect: false, + callbacks: { + label: (context) => { + const { label } = context.dataset + const { formattedValue, parsed } = context + if (context.dataset.yAxisID === 'price') { + return `${label}: ${formatUsdValue(parsed.y)}` + } else if (context.dataset.yAxisID === 'marketCap') { + return `${label}: ${formatUsdValue(parsed.y)}` + } else if (context.dataset.yAxisID === 'numTransactions') { + return `${label}: ${formattedValue}` + } else { + return formattedValue + } } } } @@ -151,11 +170,7 @@ const mcapLineColor = sassVariables.dashboardLineColorMarket class MarketHistoryChart { constructor (el, availableSupply, _marketHistoryData, dataConfig) { - const axes = config.options.scales.yAxes.reduce(function (solution, elem) { - solution[elem.id] = elem - return solution - }, - {}) + const axes = config.options.scales let priceActivated = true let marketCapActivated = true @@ -165,6 +180,7 @@ class MarketHistoryChart { yAxisID: 'price', data: [], fill: false, + cubicInterpolationMode: 'monotone', pointRadius: 0, backgroundColor: priceLineColor, borderColor: priceLineColor @@ -181,6 +197,7 @@ class MarketHistoryChart { yAxisID: 'marketCap', data: [], fill: false, + cubicInterpolationMode: 'monotone', pointRadius: 0, backgroundColor: mcapLineColor, borderColor: mcapLineColor @@ -196,6 +213,7 @@ class MarketHistoryChart { label: window.localized['Tx/day'], yAxisID: 'numTransactions', data: [], + cubicInterpolationMode: 'monotone', fill: false, pointRadius: 0, backgroundColor: sassVariables.dashboardLineColorTransactions, diff --git a/apps/block_scout_web/assets/js/pages/stakes/utils.js b/apps/block_scout_web/assets/js/pages/stakes/utils.js index 375330eba5..084fd360cb 100644 --- a/apps/block_scout_web/assets/js/pages/stakes/utils.js +++ b/apps/block_scout_web/assets/js/pages/stakes/utils.js @@ -1,7 +1,9 @@ import $ from 'jquery' -import Chart from 'chart.js' +import { ArcElement, Chart, DoughnutController } from 'chart.js' import { openErrorModal, openSuccessModal, openWarningModal } from '../../lib/modals' +Chart.register(ArcElement, DoughnutController) + export async function makeContractCall (call, store, gasLimit, callbackFunc) { const state = store.getState() const from = state.account @@ -69,7 +71,8 @@ export async function makeContractCall (call, store, gasLimit, callbackFunc) { callbackFunc('Transaction reverted') } } else { - callbackFunc(`Your transaction wasn't processed in ${maxWaitBlocks} blocks. Please, try again with the increased gas price or fixed nonce (use Reset Account feature of MetaMask).`) + const msg = `Your transaction wasn't processed in ${maxWaitBlocks} blocks. Please, try again with the increased gas price or fixed nonce (use Reset Account feature of MetaMask).` + callbackFunc(msg) } } catch (e) { callbackFunc(e.message) @@ -98,12 +101,11 @@ export function setupChart ($canvas, self, total) { }] }, options: { - cutoutPercentage: 80, - legend: { - display: false - }, - tooltips: { - enabled: false + cutout: '80%', + plugins: { + legend: { + display: false + } } } }) diff --git a/apps/block_scout_web/assets/package-lock.json b/apps/block_scout_web/assets/package-lock.json index afcef10e57..f1d900c1a9 100644 --- a/apps/block_scout_web/assets/package-lock.json +++ b/apps/block_scout_web/assets/package-lock.json @@ -12,7 +12,8 @@ "awesomplete": "^1.1.5", "bignumber.js": "^9.0.0", "bootstrap": "^4.3.1", - "chart.js": "^2.9.3", + "chart.js": "^3.3.2", + "chartjs-adapter-moment": "^1.0.0", "clipboard": "^2.0.4", "core-js": "^2.6.12", "crypto-browserify": "^3.12.0", @@ -23,7 +24,7 @@ "humps": "^2.0.1", "jquery": "^3.4.0", "lodash": "^4.17.19", - "moment": "^2.24.0", + "moment": "^2.29.1", "nanomorph": "^5.4.0", "numeral": "^2.0.6", "os-browserify": "^0.3.0", @@ -3871,29 +3872,17 @@ "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" - } + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.3.2.tgz", + "integrity": "sha512-H0hSO7xqTIrwxoACqnSoNromEMfXvfuVnrbuSt2TuXfBDDofbnto4zuZlRtRvC73/b37q3wGAWZyUU41QPvNbA==" }, - "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" + "node_modules/chartjs-adapter-moment": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.0.tgz", + "integrity": "sha512-PqlerEvQcc5hZLQ/NQWgBxgVQ4TRdvkW3c/t+SUEQSj78ia3hgLkf2VZ2yGJtltNbEEFyYGm+cA6XXevodYvWA==", + "peerDependencies": { + "chart.js": "^3.0.0", + "moment": "^2.10.2" } }, "node_modules/check-error": { @@ -4103,6 +4092,7 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -4110,12 +4100,14 @@ "node_modules/color-convert/node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true }, "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/colord": { "version": "2.0.1", @@ -10988,9 +10980,9 @@ "integrity": "sha512-qYvlv/exQ4+svI3UOvPUpLDF0OMX5euvUH0Ny4N5QyRyhNdgAgUrVH3iUINSzEPLvx0kbo/Bp28GJKIqvE7URw==" }, "node_modules/moment": { - "version": "2.25.3", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.25.3.tgz", - "integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg==", + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", "engines": { "node": "*" } @@ -20597,30 +20589,15 @@ "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" - } + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.3.2.tgz", + "integrity": "sha512-H0hSO7xqTIrwxoACqnSoNromEMfXvfuVnrbuSt2TuXfBDDofbnto4zuZlRtRvC73/b37q3wGAWZyUU41QPvNbA==" }, - "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" - } + "chartjs-adapter-moment": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.0.tgz", + "integrity": "sha512-PqlerEvQcc5hZLQ/NQWgBxgVQ4TRdvkW3c/t+SUEQSj78ia3hgLkf2VZ2yGJtltNbEEFyYGm+cA6XXevodYvWA==", + "requires": {} }, "check-error": { "version": "1.0.2", @@ -20800,6 +20777,7 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, "requires": { "color-name": "1.1.3" }, @@ -20807,14 +20785,16 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true } } }, "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 }, "colord": { "version": "2.0.1", @@ -26316,9 +26296,9 @@ "integrity": "sha512-qYvlv/exQ4+svI3UOvPUpLDF0OMX5euvUH0Ny4N5QyRyhNdgAgUrVH3iUINSzEPLvx0kbo/Bp28GJKIqvE7URw==" }, "moment": { - "version": "2.25.3", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.25.3.tgz", - "integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg==" + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" }, "ms": { "version": "2.1.2", diff --git a/apps/block_scout_web/assets/package.json b/apps/block_scout_web/assets/package.json index 70af1d828d..1f4924fea8 100644 --- a/apps/block_scout_web/assets/package.json +++ b/apps/block_scout_web/assets/package.json @@ -24,7 +24,8 @@ "awesomplete": "^1.1.5", "bignumber.js": "^9.0.0", "bootstrap": "^4.3.1", - "chart.js": "^2.9.3", + "chart.js": "^3.3.2", + "chartjs-adapter-moment": "^1.0.0", "clipboard": "^2.0.4", "core-js": "^2.6.12", "crypto-browserify": "^3.12.0", @@ -35,7 +36,7 @@ "humps": "^2.0.1", "jquery": "^3.4.0", "lodash": "^4.17.19", - "moment": "^2.24.0", + "moment": "^2.29.1", "nanomorph": "^5.4.0", "numeral": "^2.0.6", "os-browserify": "^0.3.0",