mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
update and migrate to chart.js & react-chartjs new major versions
This commit is contained in:
parent
52437616f2
commit
1e4446116b
GPG Key ID:
606EEEF3C479A91F
94
package-lock.json
generated
94
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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<ChartDataSets> = {
|
||||
const lineStyle: Partial<ChartDataset> = {
|
||||
fill: false,
|
||||
lineTension: 0.1,
|
||||
borderWidth: 2,
|
||||
pointBorderWidth: 0,
|
||||
pointRadius: 0,
|
||||
@ -49,15 +68,10 @@ const lineStyle: Partial<ChartDataSets> = {
|
||||
pointHoverBackgroundColor: '#ff4092'
|
||||
}
|
||||
|
||||
const tooltipOptions: Partial<ChartTooltipOptions> = {
|
||||
const tooltipOptions: Partial<TooltipOptions> = {
|
||||
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<any>) =>
|
||||
`${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<ChartOptions>()
|
||||
const [graphType, setGraphType] = useState<GraphType>('liquidity')
|
||||
const [error, setError] = useState<Error>()
|
||||
@ -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 {
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{graphType === 'volume' ? (
|
||||
<Bar height={70} data={graphData} options={options} />
|
||||
) : (
|
||||
<Line height={70} data={graphData} options={options} />
|
||||
)}
|
||||
<Chart
|
||||
type={graphType === 'volume' ? 'bar' : 'line'}
|
||||
width={416}
|
||||
height={80}
|
||||
data={graphData}
|
||||
options={options}
|
||||
redraw
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user