diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index ce2bc15c3..b7a220395 100644 --- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx +++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx @@ -10,10 +10,10 @@ import { useLoans } from '../../utils/useLoans' import { useDailyPoolStates, usePool } from '../../utils/usePools' import { Tooltips } from '../Tooltips' import { TooltipContainer, TooltipTitle } from './Tooltip' -import { getRangeNumber } from './utils' +import { getOneDayPerMonth, getRangeNumber } from './utils' type ChartData = { - day: Date + day: Date | string nav: number price: number | null } @@ -120,23 +120,6 @@ function PoolPerformanceChart() { if (truncatedPoolStates && truncatedPoolStates?.length < 1 && poolAge > 0) return No data available - 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 ( @@ -194,8 +177,8 @@ function PoolPerformanceChart() { minTickGap={100000} tickLine={false} type="category" - tick={} - ticks={getOneDayPerMonth()} + tick={} + ticks={getOneDayPerMonth(chartData, 'day')} /> { +export const CustomTick = ({ x, y, payload }: any) => { const theme = useTheme() return ( diff --git a/centrifuge-app/src/components/Charts/utils.ts b/centrifuge-app/src/components/Charts/utils.ts index f69ef6b21..f65faeee3 100644 --- a/centrifuge-app/src/components/Charts/utils.ts +++ b/centrifuge-app/src/components/Charts/utils.ts @@ -1,3 +1,7 @@ +type ChartDataProps = { + [key: string]: any +} + export const getRangeNumber = (rangeValue: string, poolAge?: number) => { if (rangeValue === '30d') { return 30 @@ -21,3 +25,25 @@ export const getRangeNumber = (rangeValue: string, poolAge?: number) => { return 30 } + +export const getOneDayPerMonth = (chartData: ChartDataProps[], key: string): (string | number)[] => { + const seenMonths = new Set() + const result: (string | number)[] = [] + + chartData.forEach((item) => { + const value = item[key] + if (value) { + const date = new Date(value) + if (!isNaN(date.getTime())) { + const monthYear = date.toLocaleString('default', { month: 'short', year: 'numeric' }) + + if (!seenMonths.has(monthYear)) { + seenMonths.add(monthYear) + result.push(date.getTime()) + } + } + } + }) + + return result +} diff --git a/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx index 37c2e3313..ba32d1c80 100644 --- a/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx +++ b/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx @@ -71,7 +71,7 @@ export function CardPortfolioValue({ Overview - + Current portfolio value @@ -79,12 +79,6 @@ export function CardPortfolioValue({ {formatBalance(currentPortfolioValue || 0, config.baseCurrency)} - {/* - Profit - - + {formatBalance(Dec(portfolioValue || 0), config.baseCurrency)} - - */} diff --git a/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx index c723b6942..3ad470446 100644 --- a/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx +++ b/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx @@ -1,8 +1,10 @@ import { Card, Stack, Text } from '@centrifuge/fabric' +import { useMemo } from 'react' import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts' import { formatDate } from '../../utils/date' -import { formatBalance } from '../../utils/formatting' -import { getRangeNumber } from '../Charts/utils' +import { formatBalance, formatBalanceAbbreviated } from '../../utils/formatting' +import { CustomTick } from '../Charts/PoolPerformanceChart' +import { getOneDayPerMonth, getRangeNumber } from '../Charts/utils' import { useDailyPortfolioValue } from './usePortfolio' const chartColor = '#006ef5' @@ -31,17 +33,19 @@ export function PortfolioValue({ rangeValue, address }: { rangeValue: string; ad const rangeNumber = getRangeNumber(rangeValue) const dailyPortfolioValue = useDailyPortfolioValue(address, rangeNumber) - const getXAxisInterval = () => { - if (!rangeNumber) return dailyPortfolioValue ? Math.floor(dailyPortfolioValue.length / 10) : 45 - if (rangeNumber <= 30) return 5 - if (rangeNumber > 30 && rangeNumber <= 90) { - return 14 - } - if (rangeNumber > 90 && rangeNumber <= 180) { - return 30 + const chartData = dailyPortfolioValue?.map((value) => ({ + ...value, + portfolioValue: value.portfolioValue.toNumber(), + })) + + const yAxisDomain = useMemo(() => { + if (chartData?.length) { + const values = chartData.map((data) => data.portfolioValue) + return [Math.min(...values), Math.max(...values)] } - return 45 - } + }, [chartData]) + + if (!chartData?.length) return return ( @@ -51,7 +55,7 @@ export function PortfolioValue({ rangeValue, address }: { rangeValue: string; ad right: 20, bottom: 0, }} - data={dailyPortfolioValue?.reverse()} + data={chartData?.reverse()} > @@ -60,28 +64,30 @@ export function PortfolioValue({ rangeValue, address }: { rangeValue: string; ad - - `${dateInMilliseconds?.toLocaleString('default', { month: 'short' })} ${dateInMilliseconds?.getDate()}` - } + dataKey="dateInMilliseconds" tickLine={false} axisLine={false} style={{ fontSize: '10px', }} dy={4} - interval={getXAxisInterval()} + interval={0} + minTickGap={100000} + type="category" + ticks={getOneDayPerMonth(chartData, 'dateInMilliseconds')} + tick={} /> portfolioValue} + dataKey="portfolioValue" tickCount={10} tickLine={false} axisLine={false} - tickFormatter={(value) => value.toLocaleString()} + tickFormatter={(value) => formatBalanceAbbreviated(value, '', 2)} style={{ fontSize: '10px', }} + domain={yAxisDomain} label={{ value: 'USD', position: 'top',