87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import { useMemo, useState } from 'react'
|
|
import { PerpStatsItem } from 'types'
|
|
import { formatNumericValue } from 'utils/numbers'
|
|
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
interface GroupedDataItem extends PerpStatsItem {
|
|
intervalStartMillis: number
|
|
}
|
|
|
|
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.funding_rate_hourly = obj.funding_rate_hourly * 100
|
|
groupedData.push(currentGroup)
|
|
} else {
|
|
currentGroup.funding_rate_hourly += obj.funding_rate_hourly * 100
|
|
}
|
|
}
|
|
return groupedData
|
|
}
|
|
|
|
const AverageFundingChart = ({
|
|
loading,
|
|
marketStats,
|
|
}: {
|
|
loading: boolean
|
|
marketStats: PerpStatsItem[]
|
|
}) => {
|
|
const { t } = useTranslation(['common', 'stats', 'trade'])
|
|
const [daysToShow, setDaysToShow] = useState('30')
|
|
|
|
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]"
|
|
suffix="%"
|
|
tickFormat={(x) => formatNumericValue(x, 4)}
|
|
title={t('trade:average-funding', { interval: t(intervalString) })}
|
|
xKey="date_hour"
|
|
yKey="funding_rate_hourly"
|
|
yDecimals={5}
|
|
chartType="bar"
|
|
tooltipDateFormat={daysToShow === '30' ? 'DD MMM YY' : ''}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default AverageFundingChart
|