mango-ui-v3/components/stats_page/StatsAssets.tsx

115 lines
3.5 KiB
TypeScript

import { useMemo, useState } from 'react'
import Chart from '../Chart'
import { useTranslation } from 'next-i18next'
import TabButtons from 'components/TabButtons'
export default function StatsAssets({
latestStats,
stats,
loadHistoricalStats,
}) {
const { t } = useTranslation('common')
const [selectedAsset, setSelectedAsset] = useState<string>('BTC')
const selectedStatsData = useMemo(() => {
if (stats?.length) {
return stats.filter((stat) => stat.name === selectedAsset)
}
return []
}, [stats, selectedAsset])
return (
<>
<div className="mb-4 flex flex-row-reverse items-center justify-between md:flex-col md:items-stretch">
<div className="mb-2">
<TabButtons
activeTab={selectedAsset}
tabs={latestStats.map((s) => ({ label: s.name, key: s.name }))}
onClick={setSelectedAsset}
showSymbolIcon
/>
</div>
<div className="flex items-center text-xl text-th-fgd-1">
<img
width="24"
height="24"
src={`/assets/icons/${selectedAsset
.split(/-|\//)[0]
.toLowerCase()}.svg`}
className="mr-2.5"
/>
<h2>{selectedAsset}</h2>
</div>
</div>
<div className="grid grid-flow-col grid-cols-1 grid-rows-4 gap-2 sm:gap-4 md:grid-cols-2 md:grid-rows-2">
<div
className="relative rounded-md border border-th-bkg-3 p-4 md:mb-0"
style={{ height: '330px' }}
>
<Chart
title={t('total-deposits')}
xAxis="time"
yAxis="totalDeposits"
data={selectedStatsData}
labelFormat={(x) =>
x.toLocaleString(undefined, { maximumFractionDigits: 2 })
}
type="area"
loading={loadHistoricalStats}
/>
</div>
<div
className="relative rounded-md border border-th-bkg-3 p-4"
style={{ height: '330px' }}
>
<Chart
title={t('deposit-interest')}
xAxis="time"
yAxis="depositRate"
data={selectedStatsData}
labelFormat={(x) => `${(x * 100).toFixed(5)}%`}
tickFormat={(x) =>
(x * 100).toLocaleString(undefined, { maximumFractionDigits: 4 })
}
type="bar"
loading={loadHistoricalStats}
/>
</div>
<div
className="relative rounded-md border border-th-bkg-3 p-4 md:mb-0"
style={{ height: '330px' }}
>
<Chart
title={t('total-borrows')}
xAxis="time"
yAxis="totalBorrows"
data={selectedStatsData}
labelFormat={(x) =>
x.toLocaleString(undefined, { maximumFractionDigits: 2 })
}
type="area"
loading={loadHistoricalStats}
/>
</div>
<div
className="relative rounded-md border border-th-bkg-3 p-4"
style={{ height: '330px' }}
>
<Chart
title={t('borrow-interest')}
xAxis="time"
yAxis="borrowRate"
data={selectedStatsData}
labelFormat={(x) => `${(x * 100).toFixed(5)}%`}
tickFormat={(x) =>
(x * 100).toLocaleString(undefined, { maximumFractionDigits: 4 })
}
type="bar"
loading={loadHistoricalStats}
/>
</div>
</div>
</>
)
}