Add chart for profit & loss

centrifuge · Sep 27, 2024 · 5f57f06 · 5f57f06
1 parent f33a900
commit 5f57f06
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 12 deletions.
diff --git a/centrifuge-app/src/components/Charts/SimpleBarChart.tsx b/centrifuge-app/src/components/Charts/SimpleBarChart.tsx
@@ -1,11 +1,10 @@
 import { CurrencyMetadata } from '@centrifuge/centrifuge-js'
 import { Text } from '@centrifuge/fabric'
-import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
 import { useTheme } from 'styled-components'
 import { formatDate } from '../../../src/utils/date'
 import { formatBalance, formatBalanceAbbreviated } from '../../../src/utils/formatting'
 import { LoadBoundary } from '../LoadBoundary'
-import { CustomTick } from './PoolPerformanceChart'
 import { TooltipContainer, TooltipTitle } from './Tooltip'
 
 type SimpleBarChartProps = {
@@ -35,27 +34,33 @@ export const SimpleBarChart = ({ currency, data }: SimpleBarChartProps) => {
     return result
   }
 
-  if (!data.length) return
+  if (!data || !data.length) return
   return (
     <LoadBoundary>
       <ResponsiveContainer width="100%" height={200}>
-        <BarChart width={500} height={300} data={data} barSize={16} barGap={16} barCategoryGap="20%">
+        <BarChart width={500} height={300} data={data} barSize={10} barGap={10}>
           <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />
           <XAxis
             dy={4}
             interval={0}
-            minTickGap={100000}
             tickLine={false}
+            axisLine={false}
+            tickMargin={10}
             type="category"
             dataKey="name"
-            ticks={getOneDayPerMonth()}
-            tick={<CustomTick />}
+            // ticks={getOneDayPerMonth()}
+            // tick={<CustomTick />}
+            angle={45}
           />
           <YAxis
             tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 0)}
             tick={{ fontSize: 10, color: theme.colors.textPrimary }}
             tickLine={false}
+            axisLine={false}
+            dataKey="yAxis"
           />
+          <ReferenceLine y={0} stroke={theme.colors.textSecondary} />
+
           <Tooltip
             cursor={false}
             content={({ payload }) => {
@@ -71,7 +76,14 @@ export const SimpleBarChart = ({ currency, data }: SimpleBarChartProps) => {
               }
             }}
           />
-          <Bar dataKey="yAxis" fill={theme.colors.backgroundTertiary} strokeWidth={0} fillOpacity={1} />
+          <Bar
+            dataKey="yAxis"
+            name="yAxis"
+            fill={theme.colors.backgroundTertiary}
+            strokeWidth={0}
+            fillOpacity={1}
+            maxBarSize={20}
+          />
         </BarChart>
       </ResponsiveContainer>
     </LoadBoundary>

diff --git a/centrifuge-app/src/components/Report/BalanceSheet.tsx b/centrifuge-app/src/components/Report/BalanceSheet.tsx
@@ -20,7 +20,7 @@ type Row = TableDataRow & {
 }
 
 export function BalanceSheet({ pool }: { pool: Pool }) {
-  const { startDate, endDate, groupBy, setCsvData, setReportData, reportData } = React.useContext(ReportContext)
+  const { startDate, endDate, groupBy, setCsvData, setReportData } = React.useContext(ReportContext)
 
   const [adjustedStartDate, adjustedEndDate] = React.useMemo(() => {
     const today = new Date()
@@ -241,7 +241,7 @@ export function BalanceSheet({ pool }: { pool: Pool }) {
 
   React.useEffect(() => {
     setReportData(poolStates)
-  }, [assetValuationRecords, trancheRecords])
+  }, [poolStates])
 
   if (!poolStates) {
     return <Spinner mt={2} />

diff --git a/centrifuge-app/src/components/Report/ProfitAndLoss.tsx b/centrifuge-app/src/components/Report/ProfitAndLoss.tsx
@@ -25,7 +25,7 @@ type Row = TableDataRow & {
 }
 
 export function ProfitAndLoss({ pool }: { pool: Pool }) {
-  const { startDate, endDate, groupBy, setCsvData } = React.useContext(ReportContext)
+  const { startDate, endDate, groupBy, setCsvData, setReportData } = React.useContext(ReportContext)
   const { data: poolMetadata } = usePoolMetadata(pool)
 
   const [adjustedStartDate, adjustedEndDate] = React.useMemo(() => {
@@ -334,6 +334,10 @@ export function ProfitAndLoss({ pool }: { pool: Pool }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [profitAndLossRecords, feesRecords, totalProfitRecords])
 
+  React.useEffect(() => {
+    setReportData(poolStates)
+  }, [poolStates])
+
   if (!poolStates) {
     return <Spinner mt={2} />
   }

diff --git a/centrifuge-app/src/components/Report/ReportFilter.tsx b/centrifuge-app/src/components/Report/ReportFilter.tsx
@@ -14,6 +14,7 @@ import {
 import * as React from 'react'
 import { useNavigate } from 'react-router'
 import styled from 'styled-components'
+import { usePoolMetadata } from '../../../src/utils/usePools'
 import { useBasePath } from '../../utils/useBasePath'
 import { SimpleBarChart } from '../Charts/SimpleBarChart'
 import { GroupBy, ReportContext } from './ReportContext'
@@ -42,13 +43,34 @@ export function ReportFilter({ pool }: ReportFilterProps) {
     React.useContext(ReportContext)
   const navigate = useNavigate()
   const basePath = useBasePath()
+  const metadata = usePoolMetadata(pool as Pool)
 
   const transformDataChart = React.useMemo(() => {
+    if (!reportData.length) return
     if (report === 'balance-sheet') {
-      return reportData.map((data: { timestamp: string; netAssetValue: CurrencyBalance }) => ({
+      return reportData.map((data: any) => ({
         name: data.timestamp,
         yAxis: new CurrencyBalance(data.netAssetValue, pool.currency.decimals).toDecimal().toNumber(),
       }))
+    } else if (report === 'profit-and-loss') {
+      return reportData.map((data: any) => {
+        return {
+          name: data.timestamp,
+          yAxis: (metadata?.data?.pool?.asset.class === 'Private credit'
+            ? data.poolState.sumInterestRepaidAmountByPeriod
+                .toDecimal()
+                .add(data.poolState.sumInterestAccruedByPeriod.toDecimal())
+                .add(data.poolState.sumUnscheduledRepaidAmountByPeriod.toDecimal())
+                .sub(data.poolState.sumDebtWrittenOffByPeriod.toDecimal())
+            : data.poolState.sumUnrealizedProfitByPeriod
+                .toDecimal()
+                .add(data.poolState.sumInterestRepaidAmountByPeriod.toDecimal())
+                .add(data.poolState.sumUnscheduledRepaidAmountByPeriod.toDecimal())
+          )
+            .sub(data.poolState.sumPoolFeesChargedAmountByPeriod.toDecimal())
+            .sub(data.poolState.sumPoolFeesAccruedAmountByPeriod.toDecimal()),
+        }
+      })
     }
   }, [report, reportData])