From 295db3a373cc9b1ab54637f44394a7e6e8bf006c Mon Sep 17 00:00:00 2001 From: katty barroso Date: Thu, 8 Aug 2024 11:08:43 -0500 Subject: [PATCH 1/3] Utilize on chain data for token price pool graph --- .../Charts/PoolPerformanceChart.tsx | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index d6c1006169..c693983e04 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 - + 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, price } }) || [], [isSingleTranche, truncatedPoolStates] ) + const today = { + nav: todayAssetValue, + price: todayPrice, + } + const chartData = data.slice(-rangeNumber) const dataUrl: any = React.useMemo(() => { @@ -101,15 +115,6 @@ 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 today = { - nav: todayAssetValue, - price: todayPrice, - } - const getXAxisInterval = () => { if (rangeNumber <= 30) return 5 if (rangeNumber > 30 && rangeNumber <= 90) { @@ -216,9 +221,9 @@ function PoolPerformanceChart() { {name === 'nav' && typeof value === 'number' - ? formatBalance(value, 'USD' || '') + ? formatBalance(value, 'USD') : typeof value === 'number' - ? formatBalance(value, 'USD' || '', 6) + ? formatBalance(value, 'USD', 6) : '-'} From c0378349858b2dde049360ae366e59cc59f32d81 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Tue, 20 Aug 2024 11:05:48 -0500 Subject: [PATCH 2/3] Maintain the same format for months --- .../src/components/Charts/PoolPerformanceChart.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index c693983e04..c612029967 100644 --- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx +++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx @@ -77,7 +77,7 @@ function PoolPerformanceChart() { 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, price } + return { day: new Date(day.timestamp), nav: Number(nav), price: Number(price) } }) || [], [isSingleTranche, truncatedPoolStates] ) @@ -180,12 +180,7 @@ function PoolPerformanceChart() { dataKey="day" tickLine={false} type="category" - tickFormatter={(tick: number) => { - if (data.length > 180) { - return new Date(tick).toLocaleString('en-US', { month: 'short' }) - } - return new Date(tick).toLocaleString('en-US', { day: 'numeric', month: 'short' }) - }} + tickFormatter={(tick: number) => new Date(tick).toLocaleString('en-US', { month: 'short' })} style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }} dy={4} interval={getXAxisInterval()} From 59d18b95e0fa9be6fc395466e1abae1cad482c79 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Tue, 20 Aug 2024 13:55:04 -0500 Subject: [PATCH 3/3] Do not avoid months --- .../Charts/PoolPerformanceChart.tsx | 50 ++++++++++++++----- 1 file changed, 37 insertions(+), 13 deletions(-) diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index c612029967..daf852d18f 100644 --- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx +++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx @@ -115,15 +115,21 @@ function PoolPerformanceChart() { if (truncatedPoolStates && truncatedPoolStates?.length < 1 && poolAge > 0) return No data available - const getXAxisInterval = () => { - if (rangeNumber <= 30) return 5 - if (rangeNumber > 30 && rangeNumber <= 90) { - return 14 - } - if (rangeNumber > 90 && rangeNumber <= 180) { - return 30 - } - return 45 + const getOneDayPerMonth = (): any[] => { + const seenMonths = new Set() + const result: any[] = [] + + chartData.forEach((item) => { + const date = new Date(item.day) + const monthYear = date.toLocaleString('default', { month: 'short', year: 'numeric' }) + + if (!seenMonths.has(monthYear)) { + seenMonths.add(monthYear) + result.push(item.day) + } + }) + + return result } return ( @@ -178,12 +184,13 @@ function PoolPerformanceChart() { new Date(tick).toLocaleString('en-US', { month: 'short' })} - style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }} - dy={4} - interval={getXAxisInterval()} + tick={} + ticks={getOneDayPerMonth()} /> { + const theme = useTheme() + return ( + + + {new Date(payload.value).toLocaleString('en-US', { month: 'short' })} + + + ) +} + export default PoolPerformanceChart