Merge pull request #154 from blockworks-foundation/average-funding-chart
change average funding stats chart to bar and add averaging intervals
This commit is contained in:
saml33
GitHub
commit
5d2f97cdde
|
|
@ -3,7 +3,7 @@ import { useMemo, useState } from 'react'
|
|||
import { formatYAxis } from 'utils/formatting'
|
||||
import { HourlyFundingChartData, PerformanceDataItem } from 'types'
|
||||
import { ContentType } from 'recharts/types/component/Tooltip'
|
||||
import DetailedAreaChart from '@components/shared/DetailedAreaChart'
|
||||
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||||
import { ChartToShow } from './AccountPage'
|
||||
import { IconButton } from '@components/shared/Button'
|
||||
import { ArrowLeftIcon } from '@heroicons/react/20/solid'
|
||||
|
|
@ -73,7 +73,7 @@ const AccountChart = ({
|
|||
</div>
|
||||
</div>
|
||||
<div className="px-6 pt-4">
|
||||
<DetailedAreaChart
|
||||
<DetailedAreaOrBarChart
|
||||
customTooltip={customTooltip}
|
||||
data={chartData}
|
||||
daysToShow={daysToShow}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import {
|
|||
} from 'recharts'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { COLORS } from 'styles/colors'
|
||||
import { formatDateAxis } from '@components/shared/DetailedAreaChart'
|
||||
import { formatDateAxis } from '@components/shared/DetailedAreaOrBarChart'
|
||||
import { formatYAxis } from 'utils/formatting'
|
||||
import ChartRangeButtons from '@components/shared/ChartRangeButtons'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
|
|
|||
|
|
@ -10,10 +10,13 @@ import {
|
|||
Tooltip as RechartsTooltip,
|
||||
ResponsiveContainer,
|
||||
ReferenceLine,
|
||||
BarChart,
|
||||
Bar,
|
||||
Cell,
|
||||
} from 'recharts'
|
||||
import FlipNumbers from 'react-flip-numbers'
|
||||
import ContentBox from '../shared/ContentBox'
|
||||
import SheenLoader from '../shared/SheenLoader'
|
||||
import ContentBox from './ContentBox'
|
||||
import SheenLoader from './SheenLoader'
|
||||
import { COLORS } from '../../styles/colors'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { IconButton } from './Button'
|
||||
|
|
@ -33,7 +36,8 @@ import Tooltip from './Tooltip'
|
|||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
interface DetailedAreaChartProps {
|
||||
interface DetailedAreaOrBarChartProps {
|
||||
chartType?: 'area' | 'bar'
|
||||
customTooltip?: ContentType<number, string>
|
||||
data: any[]
|
||||
daysToShow?: string
|
||||
|
|
@ -54,6 +58,7 @@ interface DetailedAreaChartProps {
|
|||
yDecimals?: number
|
||||
yKey: string
|
||||
showZeroLine?: boolean
|
||||
tooltipDateFormat?: string
|
||||
}
|
||||
|
||||
export const formatDateAxis = (date: string, days: number) => {
|
||||
|
|
@ -64,7 +69,10 @@ export const formatDateAxis = (date: string, days: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
||||
const DetailedAreaOrBarChart: FunctionComponent<
|
||||
DetailedAreaOrBarChartProps
|
||||
> = ({
|
||||
chartType = 'area',
|
||||
customTooltip,
|
||||
data,
|
||||
daysToShow = '1',
|
||||
|
|
@ -85,6 +93,7 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
|||
yDecimals,
|
||||
yKey,
|
||||
showZeroLine,
|
||||
tooltipDateFormat,
|
||||
}) => {
|
||||
const { t } = useTranslation('common')
|
||||
const [mouseData, setMouseData] = useState<any>(null)
|
||||
|
|
@ -237,7 +246,11 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
|||
small ? 'text-xs' : 'text-sm'
|
||||
} text-th-fgd-4`}
|
||||
>
|
||||
{dayjs(mouseData[xKey]).format('DD MMM YY, h:mma')}
|
||||
{dayjs(mouseData[xKey]).format(
|
||||
tooltipDateFormat
|
||||
? tooltipDateFormat
|
||||
: 'DD MMM YY, h:mma'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -296,7 +309,11 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
|||
>
|
||||
{dayjs(
|
||||
filteredData[filteredData.length - 1][xKey]
|
||||
).format('DD MMM YY, h:mma')}
|
||||
).format(
|
||||
tooltipDateFormat
|
||||
? tooltipDateFormat
|
||||
: 'DD MMM YY, h:mma'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -308,116 +325,219 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
|||
>
|
||||
<div className="-mx-6 mt-6 h-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart
|
||||
data={filteredData}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<RechartsTooltip
|
||||
cursor={{
|
||||
strokeOpacity: 0.09,
|
||||
}}
|
||||
content={customTooltip ? customTooltip : <></>}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`gradientArea-${title?.replace(/[^a-zA-Z]/g, '')}`}
|
||||
x1="0"
|
||||
y1={flipGradientCoords ? '1' : '0'}
|
||||
x2="0"
|
||||
y2={flipGradientCoords ? '0' : '1'}
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor={
|
||||
calculateChartChange() >= 0
|
||||
? COLORS.UP[theme]
|
||||
: COLORS.DOWN[theme]
|
||||
}
|
||||
stopOpacity={0.15}
|
||||
/>
|
||||
<stop
|
||||
offset="99%"
|
||||
stopColor={
|
||||
calculateChartChange() >= 0
|
||||
? COLORS.UP[theme]
|
||||
: COLORS.DOWN[theme]
|
||||
}
|
||||
stopOpacity={0}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
type="monotone"
|
||||
dataKey={yKey}
|
||||
stroke={
|
||||
calculateChartChange() >= 0
|
||||
? COLORS.UP[theme]
|
||||
: COLORS.DOWN[theme]
|
||||
}
|
||||
strokeWidth={1.5}
|
||||
fill={`url(#gradientArea-${title?.replace(
|
||||
/[^a-zA-Z]/g,
|
||||
''
|
||||
)})`}
|
||||
/>
|
||||
<XAxis
|
||||
axisLine={false}
|
||||
dataKey={xKey}
|
||||
minTickGap={20}
|
||||
padding={{ left: 20, right: 20 }}
|
||||
tick={{
|
||||
fill: 'var(--fgd-4)',
|
||||
fontSize: 10,
|
||||
}}
|
||||
tickLine={false}
|
||||
tickFormatter={(d) =>
|
||||
formatDateAxis(d, parseInt(daysToShow))
|
||||
}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
dataKey={yKey}
|
||||
minTickGap={20}
|
||||
type="number"
|
||||
domain={
|
||||
domain
|
||||
? domain
|
||||
: ([dataMin, dataMax]) => {
|
||||
const difference = dataMax - dataMin
|
||||
|
||||
if (difference < 0.01) {
|
||||
return [dataMin - 0.001, dataMax + 0.001]
|
||||
} else if (difference < 0.1) {
|
||||
return [dataMin - 0.01, dataMax + 0.01]
|
||||
} else if (difference < 1) {
|
||||
return [dataMin - 0.1, dataMax + 0.11]
|
||||
} else if (difference < 10) {
|
||||
return [dataMin - 1, dataMax + 1]
|
||||
} else {
|
||||
return [dataMin, dataMax]
|
||||
}
|
||||
}
|
||||
}
|
||||
padding={{ top: 20, bottom: 20 }}
|
||||
tick={{
|
||||
fill: 'var(--fgd-4)',
|
||||
fontSize: 10,
|
||||
}}
|
||||
tickFormatter={
|
||||
tickFormat ? (v) => tickFormat(v) : undefined
|
||||
}
|
||||
tickLine={false}
|
||||
/>
|
||||
{showZeroLine ? (
|
||||
<ReferenceLine
|
||||
y={0}
|
||||
stroke="var(--fgd-4)"
|
||||
strokeDasharray="2 2"
|
||||
{chartType === 'area' ? (
|
||||
<AreaChart
|
||||
data={filteredData}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<RechartsTooltip
|
||||
cursor={{
|
||||
strokeOpacity: 0.09,
|
||||
}}
|
||||
content={customTooltip ? customTooltip : <></>}
|
||||
/>
|
||||
) : null}
|
||||
</AreaChart>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`gradientArea-${title?.replace(
|
||||
/[^a-zA-Z]/g,
|
||||
''
|
||||
)}`}
|
||||
x1="0"
|
||||
y1={flipGradientCoords ? '1' : '0'}
|
||||
x2="0"
|
||||
y2={flipGradientCoords ? '0' : '1'}
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor={
|
||||
calculateChartChange() >= 0
|
||||
? COLORS.UP[theme]
|
||||
: COLORS.DOWN[theme]
|
||||
}
|
||||
stopOpacity={0.15}
|
||||
/>
|
||||
<stop
|
||||
offset="99%"
|
||||
stopColor={
|
||||
calculateChartChange() >= 0
|
||||
? COLORS.UP[theme]
|
||||
: COLORS.DOWN[theme]
|
||||
}
|
||||
stopOpacity={0}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
type="monotone"
|
||||
dataKey={yKey}
|
||||
stroke={
|
||||
calculateChartChange() >= 0
|
||||
? COLORS.UP[theme]
|
||||
: COLORS.DOWN[theme]
|
||||
}
|
||||
strokeWidth={1.5}
|
||||
fill={`url(#gradientArea-${title?.replace(
|
||||
/[^a-zA-Z]/g,
|
||||
''
|
||||
)})`}
|
||||
/>
|
||||
<XAxis
|
||||
axisLine={false}
|
||||
dataKey={xKey}
|
||||
minTickGap={20}
|
||||
padding={{ left: 20, right: 20 }}
|
||||
tick={{
|
||||
fill: 'var(--fgd-4)',
|
||||
fontSize: 10,
|
||||
}}
|
||||
tickLine={false}
|
||||
tickFormatter={(d) =>
|
||||
formatDateAxis(d, parseInt(daysToShow))
|
||||
}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
dataKey={yKey}
|
||||
minTickGap={20}
|
||||
type="number"
|
||||
domain={
|
||||
domain
|
||||
? domain
|
||||
: ([dataMin, dataMax]) => {
|
||||
const difference = dataMax - dataMin
|
||||
|
||||
if (difference < 0.01) {
|
||||
return [dataMin - 0.001, dataMax + 0.001]
|
||||
} else if (difference < 0.1) {
|
||||
return [dataMin - 0.01, dataMax + 0.01]
|
||||
} else if (difference < 1) {
|
||||
return [dataMin - 0.1, dataMax + 0.11]
|
||||
} else if (difference < 10) {
|
||||
return [dataMin - 1, dataMax + 1]
|
||||
} else {
|
||||
return [dataMin, dataMax]
|
||||
}
|
||||
}
|
||||
}
|
||||
padding={{ top: 20, bottom: 20 }}
|
||||
tick={{
|
||||
fill: 'var(--fgd-4)',
|
||||
fontSize: 10,
|
||||
}}
|
||||
tickFormatter={
|
||||
tickFormat ? (v) => tickFormat(v) : undefined
|
||||
}
|
||||
tickLine={false}
|
||||
/>
|
||||
{showZeroLine ? (
|
||||
<ReferenceLine
|
||||
y={0}
|
||||
stroke="var(--fgd-4)"
|
||||
strokeDasharray="2 2"
|
||||
/>
|
||||
) : null}
|
||||
</AreaChart>
|
||||
) : (
|
||||
<BarChart
|
||||
data={filteredData}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<RechartsTooltip
|
||||
cursor={{
|
||||
fill: 'var(--bkg-2)',
|
||||
opacity: 0.5,
|
||||
}}
|
||||
content={customTooltip ? customTooltip : <></>}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="greenGradientBar"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor={COLORS.UP[theme]}
|
||||
stopOpacity={1}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor={COLORS.UP[theme]}
|
||||
stopOpacity={0.7}
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="redGradientBar"
|
||||
x1="0"
|
||||
y1="1"
|
||||
x2="0"
|
||||
y2="0"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor={COLORS.DOWN[theme]}
|
||||
stopOpacity={1}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor={COLORS.DOWN[theme]}
|
||||
stopOpacity={0.7}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Bar dataKey={yKey}>
|
||||
{filteredData.map((entry, index) => {
|
||||
return (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={
|
||||
entry[yKey] > 0
|
||||
? 'url(#greenGradientBar)'
|
||||
: 'url(#redGradientBar)'
|
||||
}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Bar>
|
||||
<XAxis
|
||||
dataKey={xKey}
|
||||
axisLine={false}
|
||||
dy={10}
|
||||
minTickGap={20}
|
||||
padding={{ left: 20, right: 20 }}
|
||||
tick={{
|
||||
fill: 'var(--fgd-4)',
|
||||
fontSize: 10,
|
||||
}}
|
||||
tickLine={false}
|
||||
tickFormatter={(v) =>
|
||||
formatDateAxis(v, parseInt(daysToShow))
|
||||
}
|
||||
/>
|
||||
<YAxis
|
||||
dataKey={yKey}
|
||||
interval="preserveStartEnd"
|
||||
axisLine={false}
|
||||
dx={-10}
|
||||
padding={{ top: 20, bottom: 20 }}
|
||||
tick={{
|
||||
fill: 'var(--fgd-4)',
|
||||
fontSize: 10,
|
||||
}}
|
||||
tickLine={false}
|
||||
tickFormatter={
|
||||
tickFormat ? (v) => tickFormat(v) : undefined
|
||||
}
|
||||
type="number"
|
||||
/>
|
||||
<ReferenceLine y={0} stroke={COLORS.BKG4[theme]} />
|
||||
</BarChart>
|
||||
)}
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -439,4 +559,4 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
|
|||
)
|
||||
}
|
||||
|
||||
export default DetailedAreaChart
|
||||
export default DetailedAreaOrBarChart
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
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
|
||||
numHours: number
|
||||
}
|
||||
|
||||
const AverageFundingChart = ({
|
||||
loading,
|
||||
marketStats,
|
||||
}: {
|
||||
loading: boolean
|
||||
marketStats: PerpStatsItem[]
|
||||
}) => {
|
||||
const { t } = useTranslation('common')
|
||||
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,
|
||||
numHours: 1,
|
||||
intervalStartMillis: intervalStartMillis,
|
||||
}
|
||||
currentGroup.funding_rate_hourly = obj.funding_rate_hourly * 100
|
||||
groupedData.push(currentGroup)
|
||||
} else {
|
||||
currentGroup.funding_rate_hourly += obj.funding_rate_hourly * 100
|
||||
currentGroup.numHours++
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < groupedData.length; i++) {
|
||||
const group = groupedData[i]
|
||||
const avgFunding = group.funding_rate_hourly / group.numHours
|
||||
group.funding_rate_hourly = avgFunding
|
||||
}
|
||||
return groupedData
|
||||
}
|
||||
|
||||
const chartData = useMemo(() => {
|
||||
if (!marketStats) return []
|
||||
const interval = daysToShow === '30' ? 24 : daysToShow === '7' ? 6 : 1
|
||||
const groupedData = groupByHourlyInterval(marketStats, interval)
|
||||
return groupedData
|
||||
}, [daysToShow, 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')}
|
||||
xKey="date_hour"
|
||||
yKey="funding_rate_hourly"
|
||||
yDecimals={5}
|
||||
chartType="bar"
|
||||
tooltipDateFormat={daysToShow === '30' ? 'DD MMM YY' : ''}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default AverageFundingChart
|
||||
|
|
@ -2,7 +2,7 @@ import { useTranslation } from 'next-i18next'
|
|||
import { useMemo, useState } from 'react'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { PerpStatsItem } from 'types'
|
||||
import DetailedAreaChart from '@components/shared/DetailedAreaChart'
|
||||
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||||
|
||||
interface OiValueItem {
|
||||
date: string
|
||||
|
|
@ -73,7 +73,7 @@ const MangoPerpStatsCharts = () => {
|
|||
<>
|
||||
{totalFeeValues.length ? (
|
||||
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:pl-6">
|
||||
<DetailedAreaChart
|
||||
<DetailedAreaOrBarChart
|
||||
data={totalFeeValues}
|
||||
daysToShow={feesDaysToShow}
|
||||
setDaysToShow={setFeesDaysToShow}
|
||||
|
|
@ -90,7 +90,7 @@ const MangoPerpStatsCharts = () => {
|
|||
) : null}
|
||||
{totalOpenInterestValues.length ? (
|
||||
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-r">
|
||||
<DetailedAreaChart
|
||||
<DetailedAreaOrBarChart
|
||||
data={totalOpenInterestValues}
|
||||
daysToShow={oiDaysToShow}
|
||||
setDaysToShow={setOiDaysToShow}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,14 @@ 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 { formatNumericValue } from 'utils/numbers'
|
||||
// import { usePerpFundingRate } from '@components/trade/PerpFundingRate'
|
||||
import { PerpStatsItem } from 'types'
|
||||
import { PerpMarket } from '@blockworks-foundation/mango-v4'
|
||||
import DetailedAreaChart from '@components/shared/DetailedAreaChart'
|
||||
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||||
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'
|
||||
|
||||
const PerpMarketDetails = ({
|
||||
|
|
@ -21,76 +24,55 @@ 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 [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 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 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])
|
||||
// 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="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
|
||||
<DetailedAreaChart
|
||||
data={marketStats.concat([
|
||||
{
|
||||
...lastStat,
|
||||
date_hour: dayjs().toISOString(),
|
||||
price: perpMarket?._uiPrice || lastStat.price,
|
||||
},
|
||||
])}
|
||||
daysToShow={priceDaysToShow}
|
||||
setDaysToShow={setPriceDaysToShow}
|
||||
heightClass="h-64"
|
||||
loading={loadingPerpStats}
|
||||
loaderHeightClass="h-[350px]"
|
||||
prefix="$"
|
||||
tickFormat={(x) => formatYAxis(x)}
|
||||
title={t('price')}
|
||||
xKey="date_hour"
|
||||
yKey={'price'}
|
||||
/>
|
||||
</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">
|
||||
<DetailedAreaChart
|
||||
<div className={CHART_WRAPPER_CLASSES}>
|
||||
<DetailedAreaOrBarChart
|
||||
data={marketStats.concat([
|
||||
{
|
||||
...lastStat,
|
||||
|
|
@ -111,8 +93,9 @@ const PerpMarketDetails = ({
|
|||
yKey={'open_interest'}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
|
||||
<DetailedAreaChart
|
||||
{/* 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}
|
||||
|
|
@ -129,7 +112,7 @@ const PerpMarketDetails = ({
|
|||
/>
|
||||
</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">
|
||||
<DetailedAreaChart
|
||||
<DetailedAreaOrBarChart
|
||||
data={instantFundingRateStats}
|
||||
daysToShow={instantFundingDaysToShow}
|
||||
setDaysToShow={setInstantFundingDaysToShow}
|
||||
|
|
@ -144,6 +127,33 @@ const PerpMarketDetails = ({
|
|||
yDecimals={5}
|
||||
showZeroLine
|
||||
/>
|
||||
</div> */}
|
||||
<div className={CHART_WRAPPER_CLASSES}>
|
||||
<AverageFundingChart
|
||||
loading={loadingPerpStats}
|
||||
marketStats={marketStats}
|
||||
/>
|
||||
</div>
|
||||
<div className={CHART_WRAPPER_CLASSES}>
|
||||
<DetailedAreaOrBarChart
|
||||
data={marketStats.concat([
|
||||
{
|
||||
...lastStat,
|
||||
date_hour: dayjs().toISOString(),
|
||||
price: perpMarket?._uiPrice || lastStat.price,
|
||||
},
|
||||
])}
|
||||
daysToShow={priceDaysToShow}
|
||||
setDaysToShow={setPriceDaysToShow}
|
||||
heightClass="h-64"
|
||||
loading={loadingPerpStats}
|
||||
loaderHeightClass="h-[350px]"
|
||||
prefix="$"
|
||||
tickFormat={(x) => formatYAxis(x)}
|
||||
title={t('price')}
|
||||
xKey="date_hour"
|
||||
yKey={'price'}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { formatYAxis } from 'utils/formatting'
|
|||
import useBanksWithBalances from 'hooks/useBanksWithBalances'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import { toUiDecimals } from '@blockworks-foundation/mango-v4'
|
||||
import DetailedAreaChart from '@components/shared/DetailedAreaChart'
|
||||
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||||
|
||||
const TokenStatsCharts = () => {
|
||||
const { t } = useTranslation(['common', 'token', 'trade'])
|
||||
|
|
@ -49,7 +49,7 @@ const TokenStatsCharts = () => {
|
|||
return (
|
||||
<>
|
||||
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-r">
|
||||
<DetailedAreaChart
|
||||
<DetailedAreaOrBarChart
|
||||
data={mangoStats.concat([
|
||||
{
|
||||
date: dayjs().toISOString(),
|
||||
|
|
@ -71,7 +71,7 @@ const TokenStatsCharts = () => {
|
|||
/>
|
||||
</div>
|
||||
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:pl-6">
|
||||
<DetailedAreaChart
|
||||
<DetailedAreaOrBarChart
|
||||
data={mangoStats.concat([
|
||||
{
|
||||
date: dayjs().toISOString(),
|
||||
|
|
@ -93,7 +93,7 @@ const TokenStatsCharts = () => {
|
|||
/>
|
||||
</div>
|
||||
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-r md:pl-6">
|
||||
<DetailedAreaChart
|
||||
<DetailedAreaOrBarChart
|
||||
data={mangoStats.concat([
|
||||
{
|
||||
date: dayjs().toISOString(),
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next'
|
|||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { TokenStatsItem } from 'types'
|
||||
import { formatYAxis } from 'utils/formatting'
|
||||
import DetailedAreaChart from '@components/shared/DetailedAreaChart'
|
||||
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||||
|
||||
const ChartTabs = ({ bank }: { bank: Bank }) => {
|
||||
const { t } = useTranslation('token')
|
||||
|
|
@ -59,7 +59,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
|
|||
/>
|
||||
<div className="h-96 border-t border-th-bkg-3 px-6 py-6">
|
||||
{activeDepositsTab === 'token:deposits' ? (
|
||||
<DetailedAreaChart
|
||||
<DetailedAreaOrBarChart
|
||||
data={statsHistory}
|
||||
daysToShow={depositDaysToShow}
|
||||
setDaysToShow={setDepositDaysToShow}
|
||||
|
|
@ -74,7 +74,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
|
|||
yKey={'total_deposits'}
|
||||
/>
|
||||
) : (
|
||||
<DetailedAreaChart
|
||||
<DetailedAreaOrBarChart
|
||||
data={statsHistory}
|
||||
daysToShow={depositRateDaysToShow}
|
||||
setDaysToShow={setDepositRateDaysToShow}
|
||||
|
|
@ -106,7 +106,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
|
|||
/>
|
||||
<div className="h-96 border-t border-th-bkg-3 px-6 py-6">
|
||||
{activeBorrowsTab === 'token:borrows' ? (
|
||||
<DetailedAreaChart
|
||||
<DetailedAreaOrBarChart
|
||||
data={statsHistory}
|
||||
daysToShow={borrowDaysToShow}
|
||||
setDaysToShow={setBorrowDaysToShow}
|
||||
|
|
@ -121,7 +121,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
|
|||
yKey={'total_borrows'}
|
||||
/>
|
||||
) : (
|
||||
<DetailedAreaChart
|
||||
<DetailedAreaOrBarChart
|
||||
data={statsHistory}
|
||||
daysToShow={borrowRateDaysToShow}
|
||||
setDaysToShow={setBorrowRateDaysToShow}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { formatDateAxis } from '@components/shared/DetailedAreaChart'
|
||||
import { formatDateAxis } from '@components/shared/DetailedAreaOrBarChart'
|
||||
import dayjs from 'dayjs'
|
||||
import { BirdeyePriceResponse } from 'hooks/useBirdeyeMarketPrices'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"activate-volume-alert": "Activate Volume Alert",
|
||||
"amount": "Amount",
|
||||
"average-funding": "Average Funding",
|
||||
"base": "Base",
|
||||
"book": "Book",
|
||||
"buys": "Buys",
|
||||
|
|
@ -21,7 +22,6 @@
|
|||
"grouping": "Grouping",
|
||||
"hide-asks": "Hide Asks",
|
||||
"hide-bids": "Hide Bids",
|
||||
"hourly-funding": "Average Hourly Funding",
|
||||
"in-orders": "In Orders",
|
||||
"init-leverage": "Init Leverage",
|
||||
"instantaneous-funding": "Instantaneous Funding Snapshot",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"activate-volume-alert": "Activate Volume Alert",
|
||||
"amount": "Amount",
|
||||
"average-funding": "Average Funding",
|
||||
"base": "Base",
|
||||
"book": "Book",
|
||||
"buys": "Buys",
|
||||
|
|
@ -21,7 +22,6 @@
|
|||
"grouping": "Grouping",
|
||||
"hide-asks": "Hide Asks",
|
||||
"hide-bids": "Hide Bids",
|
||||
"hourly-funding": "Average Hourly Funding",
|
||||
"in-orders": "In Orders",
|
||||
"init-leverage": "Init Leverage",
|
||||
"instantaneous-funding": "Instantaneous Funding Snapshot",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"activate-volume-alert": "Activate Volume Alert",
|
||||
"amount": "Amount",
|
||||
"average-funding": "Average Funding",
|
||||
"base": "Base",
|
||||
"book": "Book",
|
||||
"buys": "Buys",
|
||||
|
|
@ -21,7 +22,6 @@
|
|||
"grouping": "Grouping",
|
||||
"hide-asks": "Hide Asks",
|
||||
"hide-bids": "Hide Bids",
|
||||
"hourly-funding": "Average Hourly Funding",
|
||||
"in-orders": "In Orders",
|
||||
"init-leverage": "Init Leverage",
|
||||
"instantaneous-funding": "Instantaneous Funding Snapshot",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"activate-volume-alert": "开启交易量警报",
|
||||
"amount": "数量",
|
||||
"average-funding": "Average Funding",
|
||||
"base": "基础",
|
||||
"book": "挂单薄",
|
||||
"buys": "买单",
|
||||
|
|
@ -21,7 +22,6 @@
|
|||
"grouping": "分组",
|
||||
"hide-asks": "隐藏要价",
|
||||
"hide-bids": "隐藏出价",
|
||||
"hourly-funding": "1小时资金费",
|
||||
"in-orders": "在挂单中",
|
||||
"init-leverage": "初始杠杆",
|
||||
"instantaneous-funding": "瞬时资金费率",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"activate-volume-alert": "開啟交易量警報",
|
||||
"amount": "數量",
|
||||
"average-funding": "Average Funding",
|
||||
"base": "基礎",
|
||||
"book": "掛單薄",
|
||||
"buys": "買單",
|
||||
|
|
@ -21,7 +22,6 @@
|
|||
"grouping": "分組",
|
||||
"hide-asks": "隱藏要價",
|
||||
"hide-bids": "隱藏出價",
|
||||
"hourly-funding": "1小時資金費",
|
||||
"in-orders": "在掛單中",
|
||||
"init-leverage": "初始槓桿",
|
||||
"instantaneous-funding": "瞬時資金費率",
|
||||
|
|
|
|||
Loading…
Reference in New Issue