72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { EmptyObject } from 'types'
|
|
import { MANGO_DATA_API_URL } from 'utils/constants'
|
|
import { formatYAxis } from 'utils/formatting'
|
|
|
|
type PerpLiquidations = {
|
|
[key: string]: {
|
|
liquidated_value: number
|
|
num_liquidations: number
|
|
}
|
|
}
|
|
|
|
const fetchPerpLiquidationsData = async () => {
|
|
try {
|
|
const response = await fetch(
|
|
`${MANGO_DATA_API_URL}/stats/liquidations/perp`,
|
|
)
|
|
const data: null | EmptyObject | PerpLiquidations = await response.json()
|
|
if (data && Object.keys(data).length) {
|
|
const foramttedData = Object.entries(data).map(([key, value]) => {
|
|
return {
|
|
date: `${key}Z`,
|
|
liquidatedValue: value.liquidated_value,
|
|
numLiquidations: value.num_liquidations,
|
|
}
|
|
})
|
|
return foramttedData
|
|
}
|
|
return []
|
|
} catch (e) {
|
|
console.log('Failed to fetch perp liquidations', e)
|
|
return []
|
|
}
|
|
}
|
|
|
|
const PerpLiquidationsChart = () => {
|
|
const { t } = useTranslation('stats')
|
|
const [daysToShow] = useState('30')
|
|
const { data, isInitialLoading } = useQuery(
|
|
['perp-liquidations-data'],
|
|
() => fetchPerpLiquidationsData(),
|
|
{
|
|
cacheTime: 1000 * 60 * 10,
|
|
staleTime: 1000 * 60,
|
|
retry: 3,
|
|
refetchOnWindowFocus: false,
|
|
},
|
|
)
|
|
|
|
return (
|
|
<DetailedAreaOrBarChart
|
|
hideChange
|
|
data={data}
|
|
daysToShow={daysToShow}
|
|
loading={isInitialLoading}
|
|
heightClass="h-[247px]"
|
|
loaderHeightClass="h-[350px]"
|
|
prefix="$"
|
|
tickFormat={(x) => `$${formatYAxis(x)}`}
|
|
title={t('stats:perp-liquidations')}
|
|
xKey="date"
|
|
yKey="liquidatedValue"
|
|
chartType="bar"
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default PerpLiquidationsChart
|