oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

update and migrate to chart.js & react-chartjs new major versions

Browse Source
This commit is contained in:
Matthias Kretschmann 2022-01-24 19:11:59 +00:00
parent 52437616f2
commit 1e4446116b
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 81 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
package-lock.json generated
View File

@ -21,7 +21,7 @@
"@walletconnect/web3-provider": "^1.7.1", "@walletconnect/web3-provider": "^1.7.1",
"axios": "^0.24.0", "axios": "^0.24.0",
"bignumber.js": "^9.0.2", "bignumber.js": "^9.0.2",
"chart.js": "^2.9.4", "chart.js": "^3.7.0",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"d3": "^7.3.0", "d3": "^7.3.0",
"date-fns": "^2.28.0", "date-fns": "^2.28.0",
@ -42,7 +42,7 @@
"query-string": "^7.1.0", "query-string": "^7.1.0",
"querystring": "^0.2.1", "querystring": "^0.2.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-chartjs-2": "^2.11.2", "react-chartjs-2": "^4.0.1",
"react-clipboard.js": "^2.0.16", "react-clipboard.js": "^2.0.16",
"react-data-table-component": "^6.11.7", "react-data-table-component": "^6.11.7",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
@ -9724,30 +9724,9 @@
"dev": true "dev": true
}, },
"node_modules/chart.js": { "node_modules/chart.js": {
"version": "2.9.4", "version": "3.7.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz",
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==", "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg=="
"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"
}
}, },
"node_modules/check-error": { "node_modules/check-error": {
"version": "1.0.2", "version": "1.0.2",
@ -10458,7 +10437,8 @@
"node_modules/color-name": { "node_modules/color-name": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "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": { "node_modules/colorette": {
"version": "1.4.0", "version": "1.4.0",
@ -19979,6 +19959,7 @@
"version": "2.29.1", "version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", "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,
"engines": { "engines": {
"node": "*" "node": "*"
} }
@ -21883,17 +21864,12 @@
} }
}, },
"node_modules/react-chartjs-2": { "node_modules/react-chartjs-2": {
"version": "2.11.2", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.11.2.tgz", "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
"integrity": "sha512-hcPS9vmRJeAALPPf0uo02BiD8BDm0HNmneJYTZVR74UKprXOpql+Jy1rVuj93rKw0Jfx77mkcRfXPxTe5K83uw==", "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
"dependencies": {
"lodash": "^4.17.19",
"prop-types": "^15.7.2"
},
"peerDependencies": { "peerDependencies": {
"chart.js": "^2.3", "chart.js": "^3.5.0",
"react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react": "^16.8.0 || ^17.0.0"
"react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
} }
}, },
"node_modules/react-clipboard.js": { "node_modules/react-clipboard.js": {
@ -35769,30 +35745,9 @@
"dev": true "dev": true
}, },
"chart.js": { "chart.js": {
"version": "2.9.4", "version": "3.7.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz",
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==", "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg=="
"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"
}
}, },
"check-error": { "check-error": {
"version": "1.0.2", "version": "1.0.2",
@ -36341,7 +36296,8 @@
"color-name": { "color-name": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "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": { "colorette": {
"version": "1.4.0", "version": "1.4.0",
@ -43782,7 +43738,8 @@
"moment": { "moment": {
"version": "2.29.1", "version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", "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": { "mri": {
"version": "1.2.0", "version": "1.2.0",
@ -45247,13 +45204,10 @@
} }
}, },
"react-chartjs-2": { "react-chartjs-2": {
"version": "2.11.2", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.11.2.tgz", "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
"integrity": "sha512-hcPS9vmRJeAALPPf0uo02BiD8BDm0HNmneJYTZVR74UKprXOpql+Jy1rVuj93rKw0Jfx77mkcRfXPxTe5K83uw==", "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
"requires": { "requires": {}
"lodash": "^4.17.19",
"prop-types": "^15.7.2"
}
}, },
"react-clipboard.js": { "react-clipboard.js": {
"version": "2.0.16", "version": "2.0.16",

4
package.json
View File

@ -29,7 +29,7 @@
"@walletconnect/web3-provider": "^1.7.1", "@walletconnect/web3-provider": "^1.7.1",
"axios": "^0.24.0", "axios": "^0.24.0",
"bignumber.js": "^9.0.2", "bignumber.js": "^9.0.2",
"chart.js": "^2.9.4", "chart.js": "^3.7.0",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"d3": "^7.3.0", "d3": "^7.3.0",
"date-fns": "^2.28.0", "date-fns": "^2.28.0",
@ -50,7 +50,7 @@
"query-string": "^7.1.0", "query-string": "^7.1.0",
"querystring": "^0.2.1", "querystring": "^0.2.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-chartjs-2": "^2.11.2", "react-chartjs-2": "^4.0.1",
"react-clipboard.js": "^2.0.16", "react-clipboard.js": "^2.0.16",
"react-data-table-component": "^6.11.7", "react-data-table-component": "^6.11.7",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",

107
src/components/Asset/AssetActions/Pool/Graph.tsx
View File

@ -1,4 +1,3 @@
/* eslint-disable camelcase */
import React, { import React, {
ChangeEvent, ChangeEvent,
ReactElement, ReactElement,
@ -6,14 +5,24 @@ import React, {
useEffect, useEffect,
useState useState
} from 'react' } from 'react'
import { Line, defaults, Bar } from 'react-chartjs-2'
import { import {
Chart as ChartJS,
LinearScale,
CategoryScale,
PointElement,
Tooltip,
ChartData, ChartData,
ChartDataSets,
ChartOptions, ChartOptions,
ChartTooltipItem, defaults,
ChartTooltipOptions ChartDataset,
TooltipOptions,
TooltipItem,
BarElement,
LineElement,
LineController,
BarController
} from 'chart.js' } from 'chart.js'
import { Chart } from 'react-chartjs-2'
import Loader from '@shared/atoms/Loader' import Loader from '@shared/atoms/Loader'
import { formatPrice } from '@shared/Price/PriceUnit' import { formatPrice } from '@shared/Price/PriceUnit'
import { useUserPreferences } from '@context/UserPreferences' import { useUserPreferences } from '@context/UserPreferences'
@ -28,18 +37,28 @@ import { fetchData, getQueryContext } from '@utils/subgraph'
import styles from './Graph.module.css' import styles from './Graph.module.css'
import Decimal from 'decimal.js' import Decimal from 'decimal.js'
ChartJS.register(
LineElement,
BarElement,
PointElement,
LinearScale,
CategoryScale,
// Title,
Tooltip,
LineController,
BarController
)
declare type GraphType = 'liquidity' | 'price' | 'volume' declare type GraphType = 'liquidity' | 'price' | 'volume'
// Chart.js global defaults // Chart.js global defaults
defaults.global.defaultFontFamily = `'Sharp Sans', -apple-system, BlinkMacSystemFont, defaults.font.family = `'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif`
'Segoe UI', Helvetica, Arial, sans-serif` defaults.animation = { easing: 'easeInOutQuart', duration: 1000 }
defaults.global.animation = { easing: 'easeInOutQuart', duration: 1000 }
const REFETCH_INTERVAL = 10000 const REFETCH_INTERVAL = 10000
const lineStyle: Partial<ChartDataSets> = { const lineStyle: Partial<ChartDataset> = {
fill: false, fill: false,
lineTension: 0.1,
borderWidth: 2, borderWidth: 2,
pointBorderWidth: 0, pointBorderWidth: 0,
pointRadius: 0, pointRadius: 0,
@ -49,15 +68,10 @@ const lineStyle: Partial<ChartDataSets> = {
pointHoverBackgroundColor: '#ff4092' pointHoverBackgroundColor: '#ff4092'
} }
const tooltipOptions: Partial<ChartTooltipOptions> = { const tooltipOptions: Partial<TooltipOptions> = {
intersect: false, intersect: false,
titleFontStyle: 'normal',
titleFontSize: 10,
bodyFontSize: 12,
bodyFontStyle: 'bold',
displayColors: false, displayColors: false,
xPadding: 10, padding: 10,
yPadding: 10,
cornerRadius: 3, cornerRadius: 3,
borderWidth: 1, borderWidth: 1,
caretSize: 7 caretSize: 7
@ -73,37 +87,23 @@ function getOptions(locale: string, isDarkMode: boolean): ChartOptions {
bottom: 10 bottom: 10
} }
}, },
tooltips: { plugins: {
...tooltipOptions, tooltip: {
backgroundColor: isDarkMode ? `#141414` : `#fff`, ...tooltipOptions,
titleFontColor: isDarkMode ? `#e2e2e2` : `#303030`, backgroundColor: isDarkMode ? `#141414` : `#fff`,
bodyFontColor: isDarkMode ? `#fff` : `#141414`, titleColor: isDarkMode ? `#e2e2e2` : `#303030`,
borderColor: isDarkMode ? `#41474e` : `#e2e2e2`, bodyColor: isDarkMode ? `#fff` : `#141414`,
callbacks: { borderColor: isDarkMode ? `#41474e` : `#e2e2e2`,
label: (tooltipItem: ChartTooltipItem) => callbacks: {
`${formatPrice(`${tooltipItem.yLabel}`, locale)} OCEAN` label: (tooltipItem: TooltipItem<any>) =>
`${formatPrice(`${tooltipItem.formattedValue}`, locale)} OCEAN`
}
} }
}, },
legend: { hover: { intersect: false },
display: false
},
hover: {
intersect: false,
animationDuration: 0
},
scales: { scales: {
yAxes: [ y: { display: false },
{ x: { display: false }
display: false
// gridLines: {
// drawBorder: false,
// color: isDarkMode ? '#303030' : '#e2e2e2',
// zeroLineColor: isDarkMode ? '#303030' : '#e2e2e2'
// },
// ticks: { display: false }
}
],
xAxes: [{ display: false, gridLines: { display: true } }]
} }
} }
} }
@ -126,6 +126,7 @@ export default function Graph(): ReactElement {
const { locale } = useUserPreferences() const { locale } = useUserPreferences()
const { price, ddo } = useAsset() const { price, ddo } = useAsset()
const darkMode = useDarkMode(false, darkModeConfig) const darkMode = useDarkMode(false, darkModeConfig)
const [options, setOptions] = useState<ChartOptions>() const [options, setOptions] = useState<ChartOptions>()
const [graphType, setGraphType] = useState<GraphType>('liquidity') const [graphType, setGraphType] = useState<GraphType>('liquidity')
const [error, setError] = useState<Error>() const [error, setError] = useState<Error>()
@ -214,8 +215,7 @@ export default function Graph(): ReactElement {
...lineStyle, ...lineStyle,
label: 'Liquidity (OCEAN)', label: 'Liquidity (OCEAN)',
data, data,
borderColor: `#8b98a9`, borderColor: `#8b98a9`
pointBackgroundColor: `#8b98a9`
} }
] ]
}) })
@ -256,11 +256,14 @@ export default function Graph(): ReactElement {
))} ))}
</nav> </nav>
{graphType === 'volume' ? ( <Chart
<Bar height={70} data={graphData} options={options} /> type={graphType === 'volume' ? 'bar' : 'line'}
) : ( width={416}
<Line height={70} data={graphData} options={options} /> height={80}
)} data={graphData}
options={options}
redraw
/>
</> </>
)} )}
</div> </div>