Fix gnosis chart (#2472)

Y axis values should update accordingly to show an increasing value instead of flat values
Ticks should be month only

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 <Text variant="body2">No data available</Text>
 
-  const getOneDayPerMonth = (): any[] => {
-    const seenMonths = new Set<string>()
-    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 (
     <Stack gap={2}>
       <Stack flexDirection="row" justifyContent="space-between">
@@ -194,8 +177,8 @@ function PoolPerformanceChart() {
                 minTickGap={100000}
                 tickLine={false}
                 type="category"
-                tick={<CustomTick tickCount={getOneDayPerMonth().length} />}
-                ticks={getOneDayPerMonth()}
+                tick={<CustomTick />}
+                ticks={getOneDayPerMonth(chartData, 'day')}
               />
               <YAxis
                 stroke="none"
@@ -287,7 +270,7 @@ function CustomLegend({
   )
 }
 
-const CustomTick = ({ x, y, payload }: any) => {
+export const CustomTick = ({ x, y, payload }: any) => {
   const theme = useTheme()
   return (
     <g transform={`translate(${x},${y})`}>

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<string>()
+  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
+}

centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx

@@ -71,20 +71,14 @@ export function CardPortfolioValue({
           <Text variant="heading2">Overview</Text>
 
           <Shelf gap={1} alignContent="center" height="48px">
-            <Box width="3px" backgroundColor="#1253FF" height="48px" />
+            <Box width="3px" backgroundColor={colors.textGold} height="48px" />
             <Shelf gap={4}>
               <Stack gap="4px">
                 <Text {...headingProps}>Current portfolio value</Text>
                 <TextWithPlaceholder {...balanceProps} isLoading={!currentPortfolioValue}>
                   {formatBalance(currentPortfolioValue || 0, config.baseCurrency)}
                 </TextWithPlaceholder>
               </Stack>
-              {/* <Stack gap="4px">
-                <Text {...headingProps}>Profit</Text>
-                <TextWithPlaceholder {...balanceProps} isLoading={!portfolioValue} color="#519B10">
-                  + {formatBalance(Dec(portfolioValue || 0), config.baseCurrency)}
-                </TextWithPlaceholder>
-              </Stack> */}
             </Shelf>
           </Shelf>
         </Stack>

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 (
     <ResponsiveContainer height={300} maxHeight={300} minHeight={300}>
@@ -51,7 +55,7 @@ export function PortfolioValue({ rangeValue, address }: { rangeValue: string; ad
           right: 20,
           bottom: 0,
         }}
-        data={dailyPortfolioValue?.reverse()}
+        data={chartData?.reverse()}
       >
         <defs>
           <linearGradient id="colorPoolValue" x1="0" y1="0" x2="0" y2="1">
@@ -60,28 +64,30 @@ export function PortfolioValue({ rangeValue, address }: { rangeValue: string; ad
           </linearGradient>
         </defs>
         <CartesianGrid vertical={false} />
-
         <XAxis
-          dataKey={({ dateInMilliseconds }) =>
-            `${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={<CustomTick />}
         />
         <YAxis
-          dataKey={({ portfolioValue }) => 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',