add perp volume chart
This commit is contained in:
saml33
parent
a8e590514b
commit
1be8cd7cd7
|
|
@ -3,8 +3,6 @@ import dayjs from 'dayjs'
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { formatYAxis } from 'utils/formatting'
|
||||
// import { formatNumericValue } from 'utils/numbers'
|
||||
// import { usePerpFundingRate } from '@components/trade/PerpFundingRate'
|
||||
import { PerpStatsItem } from 'types'
|
||||
import { PerpMarket } from '@blockworks-foundation/mango-v4'
|
||||
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||||
|
|
@ -12,6 +10,7 @@ import AverageFundingChart from './AverageFundingChart'
|
|||
|
||||
const CHART_WRAPPER_CLASSES = 'col-span-2 border-b border-th-bkg-3 py-4 px-6'
|
||||
import PerpMarketParams from './PerpMarketParams'
|
||||
import PerpVolumeChart from './PerpVolumeChart'
|
||||
|
||||
const PerpMarketDetails = ({
|
||||
marketStats,
|
||||
|
|
@ -24,53 +23,22 @@ const PerpMarketDetails = ({
|
|||
const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
|
||||
const [priceDaysToShow, setPriceDaysToShow] = useState('30')
|
||||
const [oiDaysToShow, setOiDaysToShow] = useState('30')
|
||||
// const [hourlyFundingeDaysToShow, setHourlyFundingDaysToShow] = useState('30')
|
||||
// const [instantFundingDaysToShow, setInstantFundingDaysToShow] = useState('30')
|
||||
// const rate = usePerpFundingRate()
|
||||
|
||||
const lastStat = useMemo(() => {
|
||||
if (!marketStats.length) return undefined
|
||||
return marketStats[marketStats.length - 1]
|
||||
}, [marketStats])
|
||||
|
||||
// const fundingRate = useMemo(() => {
|
||||
// if (!lastStat) return 0
|
||||
// if (rate?.isSuccess) {
|
||||
// const marketRate = rate?.data?.find(
|
||||
// (r) => r.market_index === perpMarket?.perpMarketIndex
|
||||
// )
|
||||
// return marketRate?.funding_rate_hourly
|
||||
// }
|
||||
// return lastStat.instantaneous_funding_rate
|
||||
// }, [rate, lastStat])
|
||||
|
||||
// const perpHourlyStats = useMemo(() => {
|
||||
// const latestStat = { ...lastStat } as PerpStatsItem
|
||||
// latestStat.instantaneous_funding_rate = fundingRate ? fundingRate : 0
|
||||
// latestStat.date_hour = dayjs().toISOString()
|
||||
// if (marketStats) {
|
||||
// const perpHourly = marketStats.concat([latestStat])
|
||||
// return perpHourly.map((stat) => ({
|
||||
// ...stat,
|
||||
// funding_rate_hourly: stat.funding_rate_hourly * 100,
|
||||
// }))
|
||||
// }
|
||||
// }, [marketStats, fundingRate])
|
||||
|
||||
// const instantFundingRateStats = useMemo(() => {
|
||||
// if (marketStats) {
|
||||
// return marketStats.map((stat) => ({
|
||||
// ...stat,
|
||||
// instantaneous_funding_rate: stat.instantaneous_funding_rate * 100,
|
||||
// }))
|
||||
// }
|
||||
// return []
|
||||
// }, [marketStats])
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2">
|
||||
{marketStats?.length && lastStat ? (
|
||||
<>
|
||||
<div className={CHART_WRAPPER_CLASSES}>
|
||||
<PerpVolumeChart
|
||||
loading={loadingPerpStats}
|
||||
marketStats={marketStats}
|
||||
/>
|
||||
</div>
|
||||
<div className={CHART_WRAPPER_CLASSES}>
|
||||
<DetailedAreaOrBarChart
|
||||
data={marketStats.concat([
|
||||
|
|
@ -93,41 +61,6 @@ const PerpMarketDetails = ({
|
|||
yKey={'open_interest'}
|
||||
/>
|
||||
</div>
|
||||
{/* old funding charts */}
|
||||
{/* <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
|
||||
<DetailedAreaOrBarChart
|
||||
data={perpHourlyStats ? perpHourlyStats : []}
|
||||
daysToShow={hourlyFundingeDaysToShow}
|
||||
setDaysToShow={setHourlyFundingDaysToShow}
|
||||
heightClass="h-64"
|
||||
loading={loadingPerpStats}
|
||||
loaderHeightClass="h-[350px]"
|
||||
suffix="%"
|
||||
tickFormat={(x) => formatNumericValue(x, 4)}
|
||||
title={t('trade:hourly-funding')}
|
||||
xKey="date_hour"
|
||||
yKey={'funding_rate_hourly'}
|
||||
yDecimals={5}
|
||||
showZeroLine
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
|
||||
<DetailedAreaOrBarChart
|
||||
data={instantFundingRateStats}
|
||||
daysToShow={instantFundingDaysToShow}
|
||||
setDaysToShow={setInstantFundingDaysToShow}
|
||||
heightClass="h-64"
|
||||
loading={loadingPerpStats}
|
||||
loaderHeightClass="h-[350px]"
|
||||
suffix="%"
|
||||
tickFormat={(x) => formatNumericValue(x, 4)}
|
||||
title={t('trade:instantaneous-funding')}
|
||||
xKey="date_hour"
|
||||
yKey={'instantaneous_funding_rate'}
|
||||
yDecimals={5}
|
||||
showZeroLine
|
||||
/>
|
||||
</div> */}
|
||||
<div className={CHART_WRAPPER_CLASSES}>
|
||||
<AverageFundingChart
|
||||
loading={loadingPerpStats}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
import { useMemo, useState } from 'react'
|
||||
import { PerpStatsItem } from 'types'
|
||||
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { formatYAxis } from 'utils/formatting'
|
||||
|
||||
interface GroupedDataItem extends PerpStatsItem {
|
||||
intervalStartMillis: number
|
||||
}
|
||||
|
||||
const PerpVolumeChart = ({
|
||||
loading,
|
||||
marketStats,
|
||||
}: {
|
||||
loading: boolean
|
||||
marketStats: PerpStatsItem[]
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'stats', 'trade'])
|
||||
const [daysToShow, setDaysToShow] = useState('30')
|
||||
|
||||
const groupByHourlyInterval = (
|
||||
data: PerpStatsItem[],
|
||||
intervalDurationHours: number
|
||||
) => {
|
||||
const intervalMillis = intervalDurationHours * 60 * 60 * 1000
|
||||
const groupedData = []
|
||||
let currentGroup: GroupedDataItem | null = null
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const obj = data[i]
|
||||
const date = new Date(obj.date_hour)
|
||||
const intervalStartMillis =
|
||||
Math.floor(date.getTime() / intervalMillis) * intervalMillis
|
||||
if (
|
||||
!currentGroup ||
|
||||
currentGroup.intervalStartMillis !== intervalStartMillis
|
||||
) {
|
||||
currentGroup = {
|
||||
...obj,
|
||||
intervalStartMillis: intervalStartMillis,
|
||||
}
|
||||
currentGroup.quote_volume = obj.quote_volume
|
||||
groupedData.push(currentGroup)
|
||||
} else {
|
||||
currentGroup.quote_volume += obj.quote_volume
|
||||
}
|
||||
}
|
||||
return groupedData
|
||||
}
|
||||
|
||||
const [interval, intervalString] = useMemo(() => {
|
||||
if (daysToShow === '30') {
|
||||
return [24, 'stats:daily']
|
||||
} else if (daysToShow === '7') {
|
||||
return [6, 'stats:six-hourly']
|
||||
} else {
|
||||
return [1, 'stats:hourly']
|
||||
}
|
||||
}, [daysToShow])
|
||||
|
||||
const chartData = useMemo(() => {
|
||||
if (!marketStats) return []
|
||||
const groupedData = groupByHourlyInterval(marketStats, interval)
|
||||
return groupedData
|
||||
}, [daysToShow, interval, marketStats])
|
||||
|
||||
return (
|
||||
<DetailedAreaOrBarChart
|
||||
data={chartData}
|
||||
daysToShow={daysToShow}
|
||||
setDaysToShow={setDaysToShow}
|
||||
heightClass="h-64"
|
||||
loading={loading}
|
||||
loaderHeightClass="h-[350px]"
|
||||
prefix="$"
|
||||
tickFormat={(x) => formatYAxis(x)}
|
||||
title={t('trade:volume', { interval: t(intervalString) })}
|
||||
xKey="date_hour"
|
||||
yKey="quote_volume"
|
||||
// yDecimals={5}
|
||||
chartType="bar"
|
||||
tooltipDateFormat={daysToShow === '30' ? 'DD MMM YY' : ''}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default PerpVolumeChart
|
||||
Loading…
Reference in New Issue