diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index d6c1006169..daf852d18f 100644 --- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx +++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx @@ -62,17 +62,31 @@ function PoolPerformanceChart() { const rangeNumber = getRangeNumber(range.value, poolAge) ?? 100 const isSingleTranche = pool?.tranches.length === 1 + + // querying chain for more accurate data, since data for today from subquery is not necessarily up to date + const todayAssetValue = pool?.nav.total.toDecimal().toNumber() || 0 + const todayPrice = pool?.tranches + ? formatBalance(pool?.tranches[pool.tranches.length - 1].tokenPrice || 0, undefined, 5, 5) + : null + const data: ChartData[] = React.useMemo( () => truncatedPoolStates?.map((day) => { const nav = day.poolState.netAssetValue.toDecimal().toNumber() const price = (isSingleTranche && Object.values(day.tranches)[0].price?.toFloat()) || null - - return { day: new Date(day.timestamp), nav, price } + if (day.timestamp && new Date(day.timestamp).toDateString() === new Date().toDateString()) { + return { day: new Date(day.timestamp), nav: todayAssetValue, price: Number(todayPrice) } + } + return { day: new Date(day.timestamp), nav: Number(nav), price: Number(price) } }) || [], [isSingleTranche, truncatedPoolStates] ) + const today = { + nav: todayAssetValue, + price: todayPrice, + } + const chartData = data.slice(-rangeNumber) const dataUrl: any = React.useMemo(() => { @@ -101,24 +115,21 @@ function PoolPerformanceChart() { if (truncatedPoolStates && truncatedPoolStates?.length < 1 && poolAge > 0) return No data available - // querying chain for more accurate data, since data for today from subquery is not necessarily up to date - const todayAssetValue = pool?.nav.total.toDecimal().toNumber() || 0 - const todayPrice = data.length > 0 ? data[data.length - 1].price : null + const getOneDayPerMonth = (): any[] => { + const seenMonths = new Set() + const result: any[] = [] - const today = { - nav: todayAssetValue, - price: todayPrice, - } + chartData.forEach((item) => { + const date = new Date(item.day) + const monthYear = date.toLocaleString('default', { month: 'short', year: 'numeric' }) - const getXAxisInterval = () => { - if (rangeNumber <= 30) return 5 - if (rangeNumber > 30 && rangeNumber <= 90) { - return 14 - } - if (rangeNumber > 90 && rangeNumber <= 180) { - return 30 - } - return 45 + if (!seenMonths.has(monthYear)) { + seenMonths.add(monthYear) + result.push(item.day) + } + }) + + return result } return ( @@ -173,17 +184,13 @@ function PoolPerformanceChart() { { - if (data.length > 180) { - return new Date(tick).toLocaleString('en-US', { month: 'short' }) - } - return new Date(tick).toLocaleString('en-US', { day: 'numeric', month: 'short' }) - }} - style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }} - dy={4} - interval={getXAxisInterval()} + tick={} + ticks={getOneDayPerMonth()} /> {name === 'nav' && typeof value === 'number' - ? formatBalance(value, 'USD' || '') + ? formatBalance(value, 'USD') : typeof value === 'number' - ? formatBalance(value, 'USD' || '', 6) + ? formatBalance(value, 'USD', 6) : '-'} @@ -275,4 +282,21 @@ function CustomLegend({ ) } +const CustomTick = ({ x, y, payload }: any) => { + const theme = useTheme() + return ( + + + {new Date(payload.value).toLocaleString('en-US', { month: 'short' })} + + + ) +} + export default PoolPerformanceChart