From 719c0776f57451cb05d6007a4cbdca8d4997e9d8 Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Mon, 7 Oct 2024 16:14:55 +0200
Subject: [PATCH] Fix gnosis chart (#2472)
Y axis values should update accordingly to show an increasing value instead of flat values
Ticks should be month only
---
.../Charts/PoolPerformanceChart.tsx | 27 ++---------
centrifuge-app/src/components/Charts/utils.ts | 26 +++++++++++
.../Portfolio/CardPortfolioValue.tsx | 8 +---
.../components/Portfolio/PortfolioValue.tsx | 46 +++++++++++--------
4 files changed, 58 insertions(+), 49 deletions(-)
diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
index ce2bc15c37..b7a2203956 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 f69ef6b21d..f65faeee38 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 37c2e33137..ba32d1c806 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 c723b6942a..3ad4704465 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',