import { useTranslation } from 'next-i18next' import { useTheme } from 'next-themes' import { useMemo } from 'react' import useDimensions from 'react-cool-dimensions' import { Bar, BarChart, Tooltip, XAxis, YAxis } from 'recharts' import { numberCompactFormatter } from 'utils' import { CHART_COLORS } from './LongShortChart' const AccountVolume = ({ data, loading }) => { const { t } = useTranslation('common') const { observe, width, height } = useDimensions() const { theme } = useTheme() const { makerVol, takerVol }: { makerVol: number; takerVol: number } = useMemo(() => { const makerVol: number = data.reduce((a, c) => { const makerVolume = Object.values(c).reduce( (a: number, c: { maker: number }) => a + c.maker, 0 ) return a + makerVolume }, 0) const takerVol: number = data.reduce((a, c) => { const takerVolume = Object.values(c).reduce( (a: number, c: { taker: number }) => a + c.taker, 0 ) return a + takerVolume }, 0) return { makerVol, takerVol } }, [data]) const chartData: Array<{ market: string maker: number taker: number total: number }> | void = useMemo(() => { if (data.length) { const forChart: Array = [] for (const d of data) { const values: any = Object.values(d)[0] const assetVol: any = { market: Object.keys(d)[0], maker: values.maker, taker: values.taker, total: values.maker + values.taker, } forChart.push(assetVol) } return forChart } return [] }, [data]) const renderTooltip = (props) => { const { payload } = props return payload ? (

{t(payload[0]?.payload.market)}

{payload.map((entry, index) => { const { color, name, value } = entry return (

{t(name)}

${numberCompactFormatter.format(value)}

) })}
) : null } return (
{!loading ? (

{t('lifetime-volume')}

${numberCompactFormatter.format(makerVol + takerVol)}

{t('maker')}: ${numberCompactFormatter.format(makerVol)}

|

{t('taker')}: ${numberCompactFormatter.format(takerVol)}

) : (
)} {chartData.length ? ( <>

{t('lifetime-volume-by-asset')}

9 ? `${chartData.length * 50}px` : '500px', }} ref={observe} > 0 ? false : true} dy={10} tick={{ fill: theme === 'Light' ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.35)', fontSize: 10, }} tickLine={false} tickFormatter={(v) => `$${numberCompactFormatter.format(v)}`} type="number" /> 0 ? false : true} dx={-10} tick={{ fill: theme === 'Light' ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.35)', fontSize: 10, }} tickLine={false} type="category" width={80} />
) : loading ? (
) : null}
) } export default AccountVolume