Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@kattylucy
kattylucy committed Sep 11, 2024
1 parent a285056 commit 851f2a8
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 40 deletions.
143 changes: 106 additions & 37 deletions centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { AnchorButton, Box, IconDownload, Select, Shelf, Stack, Tabs, TabsItem, Text } from '@centrifuge/fabric'
import Decimal from 'decimal.js-light'
import * as React from 'react'
import { useParams } from 'react-router'
import { Bar, CartesianGrid, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
Expand All @@ -8,7 +9,7 @@ import { daysBetween, formatDate } from '../../utils/date'
import { formatBalance, formatBalanceAbbreviated } from '../../utils/formatting'
import { useLoans } from '../../utils/useLoans'
import { useDailyPoolStates, usePool } from '../../utils/usePools'
import { Tooltips } from '../Tooltips'
import { Tooltips, tooltipText } from '../Tooltips'
import { TooltipContainer, TooltipTitle } from './Tooltip'
import { getRangeNumber } from './utils'

Expand All @@ -18,6 +19,7 @@ type ChartData = {
juniorTokenPrice: number | null
seniorTokenPrice?: number | null
currency?: string
totalAPY: Decimal
}

type Tranche = {
Expand All @@ -44,6 +46,21 @@ function calculateTranchePrices(pool: any) {
return { juniorTokenPrice, seniorTokenPrice }
}

function getYieldFieldForFilter(tranche: any, filter: string) {
switch (filter) {
case '30d':
return tranche.yield30DaysAnnualized || 0
case '90d':
return tranche.yield90DaysAnnualized || 0
case 'ytd':
return tranche.yieldYTD || 0
case 'all':
return tranche.yieldSinceInception || 0
default:
return 0
}
}

function PoolPerformanceChart() {
const theme = useTheme()
const [selectedTabIndex, setSelectedTabIndex] = React.useState(0)
Expand Down Expand Up @@ -94,11 +111,16 @@ function PoolPerformanceChart() {
const juniorTrancheKey = trancheKeys[0]
const seniorTrancheKey = trancheKeys[1] || null

const juniorTokenPrice = (day.tranches[juniorTrancheKey]?.price as any)?.toFloat() || null
const juniorTokenPrice = (day.tranches[juniorTrancheKey]?.price as any)?.toFloat() || 0
const seniorTokenPrice = seniorTrancheKey
? (day.tranches[seniorTrancheKey]?.price as any)?.toFloat() || null
? (day.tranches[seniorTrancheKey]?.price as any)?.toFloat() || 0
: null

const juniorAPY = getYieldFieldForFilter(day.tranches[juniorTrancheKey], range.value)
const seniorAPY = seniorTrancheKey ? getYieldFieldForFilter(day.tranches[seniorTrancheKey], range.value) : 0

console.log(juniorAPY, seniorAPY)

if (day.timestamp && new Date(day.timestamp).toDateString() === new Date().toDateString()) {
const tranchePrices = calculateTranchePrices(pool)

Expand All @@ -107,6 +129,8 @@ function PoolPerformanceChart() {
nav: todayAssetValue,
juniorTokenPrice: tranchePrices.juniorTokenPrice ?? null,
seniorTokenPrice: tranchePrices.seniorTokenPrice ?? null,
juniorAPY,
seniorAPY,
}
}

Expand All @@ -115,9 +139,11 @@ function PoolPerformanceChart() {
nav: Number(nav),
juniorTokenPrice,
seniorTokenPrice,
juniorAPY,
seniorAPY,
}
}) || [],
[isSingleTranche, truncatedPoolStates, todayAssetValue, todayPrice, pool]
[isSingleTranche, truncatedPoolStates, todayAssetValue, todayPrice, pool, range]

Check warning on line 146 in centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

View workflow job for this annotation

GitHub Actions / build-app 

React Hook React.useMemo has unnecessary dependencies: 'isSingleTranche' and 'todayPrice'. Either exclude them or remove the dependency array

Check warning on line 146 in centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

View workflow job for this annotation

GitHub Actions / ff-prod / build-app 

React Hook React.useMemo has unnecessary dependencies: 'isSingleTranche' and 'todayPrice'. Either exclude them or remove the dependency array
)

const today = {
Expand Down Expand Up @@ -266,6 +292,7 @@ function PoolPerformanceChart() {
if (name === 'nav') label = 'NAV'
else if (name === 'juniorTokenPrice') label = 'Junior Token Price'
else if (name === 'seniorTokenPrice') label = 'Senior Token Price'
else if (name === 'totalAPY') label = 'Total APY'
else label = 'Cash'

return (
Expand All @@ -274,7 +301,7 @@ function PoolPerformanceChart() {
{label}
</Text>
<Text color="textPrimary" variant="label2">
{typeof value === 'number'
{typeof value === 'number' && name !== 'totalAPY'
? formatBalance(
value,
name === 'nav' ? pool.currency.symbol ?? 'USD' : '',
Expand All @@ -299,24 +326,38 @@ function PoolPerformanceChart() {
fill={theme.colors.backgroundTertiary}
yAxisId="left"
/>
<Line
type="monotone"
dataKey="juniorTokenPrice"
stroke={theme.colors.textGold}
strokeWidth={2}
dot={false}
yAxisId="right"
name="juniorTokenPrice"
/>
{chartData.some((d) => d.seniorTokenPrice !== null) && (
{selectedTabIndex === 0 ? (
<>
<Line
type="monotone"
dataKey="juniorTokenPrice"
stroke={theme.colors.textGold}
strokeWidth={2}
dot={false}
yAxisId="right"
name="juniorTokenPrice"
/>
{chartData.some((d) => d.seniorTokenPrice !== null) && (
<Line
type="monotone"
dataKey="seniorTokenPrice"
stroke={theme.colors.backgroundInverted}
strokeWidth={2}
dot={false}
yAxisId="right"
name="seniorTokenPrice"
/>
)}
</>
) : (
<Line
type="monotone"
dataKey="seniorTokenPrice"
dataKey="totalAPY"
stroke={theme.colors.backgroundInverted}
strokeWidth={2}
dot={false}
yAxisId="right"
name="seniorTokenPrice"
name="totalAPY"
/>
)}
</ComposedChart>
Expand All @@ -332,6 +373,7 @@ function PoolPerformanceChart() {
function CustomLegend({
data,
setRange,
selectedTabIndex,
}: {
data: {
currency: string
Expand All @@ -340,19 +382,22 @@ function CustomLegend({
seniorTokenPrice?: number | null
}
setRange: (value: { value: string; label: string }) => void
selectedTabIndex: number
}) {
const Dot = ({ color }: { color: string }) => (
<Box width="8px" height="8px" borderRadius="50%" backgroundColor={color} marginRight="4px" />
)

const buildData = [
{
color: 'backgroundTertiary',
label: `NAV ${data.currency}`,
value: formatBalance(data.nav),
type: 'nav',
show: true,
},
const navObj = {
color: 'backgroundTertiary',
label: `NAV ${data.currency}`,
value: formatBalance(data.nav),
type: 'nav',
show: true,
}

const tokenData = [
navObj,
{
color: 'textGold',
label: 'Junior token price',
Expand All @@ -369,6 +414,19 @@ function CustomLegend({
},
]

const apyData = [
navObj,
{
color: 'textGold',
label: 'APY',
value: data.juniorTokenPrice ?? 0,
type: 'singleTrancheTokenPrice',
show: true,
},
]

const graphData = selectedTabIndex === 0 ? tokenData : apyData

const toggleRange = (e: any) => {
const value = e.target.value
const range = rangeFilters.find((range) => range.value === value)
Expand All @@ -378,18 +436,29 @@ function CustomLegend({
return (
<Box display="flex" justifyContent="space-between" alignItems="center">
<Box display="flex" justifyContent="space-evenly">
{buildData.map((item, index) => {
if (!item.show) return
return (
<Stack key={index} pl={1} display="flex" marginRight="20px">
<Box display="flex" alignItems="center">
<Dot color={item.color} />
<Tooltips type={item.type} label={item.label} />
</Box>
<Text variant="heading1">{item.value}</Text>
</Stack>
)
})}
{graphData.map(
(
item: {
show: boolean
color: string
type: keyof typeof tooltipText
label: string
value: Number | Decimal
},
index: number
) => {
if (!item.show) return

Check warning on line 450 in centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

View workflow job for this annotation

GitHub Actions / build-app 

Array.prototype.map() expects a return value from arrow function

Check warning on line 450 in centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

View workflow job for this annotation

GitHub Actions / ff-prod / build-app 

Array.prototype.map() expects a return value from arrow function
return (
<Stack key={index} pl={1} display="flex" marginRight="20px">
<Box display="flex" alignItems="center">
<Dot color={item.color} />
<Tooltips type={item.type} label={item.label} />
</Box>
<Text variant="heading1">{item.value}</Text>
</Stack>
)
}
)}
</Box>
<Box>
<Select options={rangeFilters} onChange={toggleRange} hideBorder />
Expand Down
2 changes: 1 addition & 1 deletion centrifuge-app/src/components/Charts/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function TooltipContainer({ children }: { children: React.ReactNode }) {
bg="backgroundPage"
p={1}
style={{
boxShadow: '1px 3px 6px rgba(0, 0, 0, .15)',
boxShadow: '1px 3px 6px 0px rgba(0, 0, 0, 0.15)',
}}
minWidth="250px"
gap="4px"
Expand Down
4 changes: 2 additions & 2 deletions fabric/src/theme/tokens/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const colors = {
borderButtonSecondaryHover: gold,
borderButtonSecondaryPressed: gold,
borderButtonSecondaryDisabled: 'transparent',
shadowButtonSecondary: '#A8BFFD35',
shadowButtonSecondary: 'transparent',

backgroundButtonTertiary: 'transparent',
backgroundButtonTertiaryFocus: 'transparent',
Expand Down Expand Up @@ -112,7 +112,7 @@ const colors = {
borderButtonInvertedHover: black,
borderButtonInvertedPressed: black,
borderButtonInvertedDisabled: 'transparent',
shadowButtonInverted: '#E0E7FF',
shadowButtonInverted: 'transparent',
}

export const colorTheme = {
Expand Down

0 comments on commit 851f2a8

Please sign in to comment.