CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4268 from blockscout/vb-chartjs-3

Browse Source 
Migration to Chart.js 3.x
pull/4267/head
Victor Baranov 4 years ago committed by GitHub
parent 903bf923d4 be28acbbdc
commit f66d560950
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 154 additions and 139 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      CHANGELOG.md
  2. 31
      apps/block_scout_web/assets/js/lib/coin_balance_history_chart.js
  3. 144
      apps/block_scout_web/assets/js/lib/history_chart.js
  4. 18
      apps/block_scout_web/assets/js/pages/stakes/utils.js
  5. 94
      apps/block_scout_web/assets/package-lock.json
  6. 5
      apps/block_scout_web/assets/package.json

1
CHANGELOG.md
Unescape View File

@ -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

31
apps/block_scout_web/assets/js/lib/coin_balance_history_chart.js
Unescape View File

@ -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
}
}]
}
}
}
})

144
apps/block_scout_web/assets/js/lib/history_chart.js
Unescape View File

@ -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,

18
apps/block_scout_web/assets/js/pages/stakes/utils.js
Unescape View File

@ -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
}
}
}
})

94
apps/block_scout_web/assets/package-lock.json generated
Unescape View File

@ -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",

5
apps/block_scout_web/assets/package.json
Unescape View File

@ -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",

Write Preview
Loading…
Cancel
Save