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

re-render fixes

Browse Source
This commit is contained in:
Matthias Kretschmann 2022-01-25 13:42:16 +00:00
parent 7a5651e3a8
commit 5683d7b187
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Asset/AssetActions/Pool/Graph/_utils.ts
View File

@ -27,7 +27,7 @@ export function getOptions(locale: string, isDarkMode: boolean): ChartOptions {
}, },
hover: { intersect: false }, hover: { intersect: false },
scales: { scales: {
y: { display: false }, y: { display: false, beginAtZero: true },
x: { display: false } x: { display: false }
} }
} }

2
src/components/Asset/AssetActions/Pool/Graph/index.module.css
View File

@ -1,5 +1,5 @@
.graphWrap { .graphWrap {
min-height: 90px; min-height: 120px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

23
src/components/Asset/AssetActions/Pool/Graph/index.tsx
View File

@ -1,6 +1,6 @@
import React, { ReactElement, useCallback, useEffect, useState } from 'react' import React, { ReactElement, useCallback, useEffect, useState } from 'react'
import { ChartData, ChartOptions } from 'chart.js' import { ChartData, ChartOptions } from 'chart.js'
import { Chart } from 'react-chartjs-2' import { Bar, Chart, Line } from 'react-chartjs-2'
import Loader from '@shared/atoms/Loader' import Loader from '@shared/atoms/Loader'
import { useUserPreferences } from '@context/UserPreferences' import { useUserPreferences } from '@context/UserPreferences'
import useDarkMode from 'use-dark-mode' import useDarkMode from 'use-dark-mode'
@ -26,7 +26,7 @@ export default function Graph(): ReactElement {
const [error, setError] = useState<Error>() const [error, setError] = useState<Error>()
const [isLoading, setIsLoading] = useState(true) const [isLoading, setIsLoading] = useState(true)
const [dataHistory, setDataHistory] = useState<PoolHistory>() const [dataHistory, setDataHistory] = useState<PoolHistory>()
const [graphData, setGraphData] = useState<ChartData>() const [graphData, setGraphData] = useState<ChartData<any>>()
const [graphFetchInterval, setGraphFetchInterval] = useState<NodeJS.Timeout>() const [graphFetchInterval, setGraphFetchInterval] = useState<NodeJS.Timeout>()
// Helper: fetch pool snapshots data // Helper: fetch pool snapshots data
@ -71,10 +71,10 @@ export default function Graph(): ReactElement {
// 0 Get Graph options // 0 Get Graph options
// //
useEffect(() => { useEffect(() => {
LoggerInstance.log('[pool graph] Fired getOptions() for color scheme.') LoggerInstance.log('[pool graph] Fired getOptions().')
const options = getOptions(locale, darkMode.value) const options = getOptions(locale, darkMode.value)
setOptions(options) setOptions(options)
}, [locale, darkMode.value]) }, [locale, darkMode.value, graphType])
// //
// 1 Fetch all the data on mount // 1 Fetch all the data on mount
@ -112,7 +112,7 @@ export default function Graph(): ReactElement {
volumeCumulative = new Decimal(volumeCumulative) volumeCumulative = new Decimal(volumeCumulative)
.add(item.swapVolume) .add(item.swapVolume)
.toString() .toString()
return baseTokenLiquidityCumulative return volumeCumulative
}) })
let data let data
@ -146,14 +146,11 @@ export default function Graph(): ReactElement {
<> <>
<Nav graphType={graphType} setGraphType={setGraphType} /> <Nav graphType={graphType} setGraphType={setGraphType} />
<Chart {graphType === 'volume' ? (
type={graphType === 'volume' ? 'bar' : 'line'} <Bar width={416} height={120} data={graphData} options={options} />
width={416} ) : (
height={90} <Line width={416} height={120} data={graphData} options={options} />
data={graphData} )}
options={options}
redraw
/>
</> </>
)} )}
</div> </div>