2022-08-14 22:43:15 -07:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2023-02-11 04:40:23 -08:00
|
|
|
import { useMemo, useState } from 'react'
|
2022-10-10 14:15:35 -07:00
|
|
|
import dynamic from 'next/dynamic'
|
2023-01-19 02:42:39 -08:00
|
|
|
import { formatYAxis } from 'utils/formatting'
|
2023-02-23 16:28:49 -08:00
|
|
|
import { PerformanceDataItem } from 'types'
|
2022-10-10 14:15:35 -07:00
|
|
|
const DetailedAreaChart = dynamic(
|
|
|
|
() => import('@components/shared/DetailedAreaChart'),
|
|
|
|
{ ssr: false }
|
|
|
|
)
|
2022-08-14 22:43:15 -07:00
|
|
|
|
2022-08-15 17:16:21 -07:00
|
|
|
const AccountChart = ({
|
|
|
|
chartToShow,
|
2023-02-11 04:40:23 -08:00
|
|
|
data,
|
2022-08-14 22:43:15 -07:00
|
|
|
hideChart,
|
2022-08-15 17:16:21 -07:00
|
|
|
yKey,
|
2022-08-14 22:43:15 -07:00
|
|
|
}: {
|
2022-08-15 17:16:21 -07:00
|
|
|
chartToShow: string
|
2023-02-11 04:40:23 -08:00
|
|
|
data: PerformanceDataItem[]
|
2022-08-14 22:43:15 -07:00
|
|
|
hideChart: () => void
|
2022-08-15 17:16:21 -07:00
|
|
|
yKey: string
|
2022-08-14 22:43:15 -07:00
|
|
|
}) => {
|
|
|
|
const { t } = useTranslation('common')
|
2022-11-29 21:30:18 -08:00
|
|
|
const [daysToShow, setDaysToShow] = useState<string>('1')
|
2023-01-15 21:13:34 -08:00
|
|
|
|
2023-02-25 16:22:39 -08:00
|
|
|
const chartData = useMemo(() => {
|
2023-02-11 04:40:23 -08:00
|
|
|
if (!data.length) return []
|
2023-01-15 21:13:34 -08:00
|
|
|
if (chartToShow === 'cumulative-interest-value') {
|
2023-02-11 04:40:23 -08:00
|
|
|
data.map((d) => ({
|
2023-01-15 21:13:34 -08:00
|
|
|
interest_value:
|
|
|
|
d.borrow_interest_cumulative_usd + d.deposit_interest_cumulative_usd,
|
|
|
|
time: d.time,
|
|
|
|
}))
|
|
|
|
}
|
2023-02-11 04:40:23 -08:00
|
|
|
return data
|
2023-02-25 16:22:39 -08:00
|
|
|
}, [data, chartToShow])
|
2022-11-20 16:50:25 -08:00
|
|
|
|
2022-08-14 22:43:15 -07:00
|
|
|
return (
|
|
|
|
<DetailedAreaChart
|
2023-02-11 04:40:23 -08:00
|
|
|
data={chartData}
|
2022-08-14 22:43:15 -07:00
|
|
|
daysToShow={daysToShow}
|
2023-01-08 20:58:01 -08:00
|
|
|
heightClass="h-[calc(100vh-200px)]"
|
2023-01-19 16:56:22 -08:00
|
|
|
loaderHeightClass="h-[calc(100vh-116px)]"
|
2022-08-14 22:43:15 -07:00
|
|
|
hideChart={hideChart}
|
2022-12-06 03:58:22 -08:00
|
|
|
prefix="$"
|
2023-02-11 04:40:23 -08:00
|
|
|
setDaysToShow={setDaysToShow}
|
2023-01-19 02:42:39 -08:00
|
|
|
tickFormat={(x) => `$${formatYAxis(x)}`}
|
2022-08-15 17:16:21 -07:00
|
|
|
title={t(chartToShow)}
|
2022-08-14 22:43:15 -07:00
|
|
|
xKey="time"
|
2022-08-15 17:16:21 -07:00
|
|
|
yKey={yKey}
|
2022-08-14 22:43:15 -07:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-08-15 17:16:21 -07:00
|
|
|
export default AccountChart
|