diff --git a/common/calculate-metrics.ts b/common/calculate-metrics.ts index 3aad1a9c..b27ac977 100644 --- a/common/calculate-metrics.ts +++ b/common/calculate-metrics.ts @@ -116,12 +116,12 @@ const calculateProfitForPeriod = ( return currentProfit } - const startingProfit = calculateTotalProfit(startingPortfolio) + const startingProfit = calculatePortfolioProfit(startingPortfolio) return currentProfit - startingProfit } -const calculateTotalProfit = (portfolio: PortfolioMetrics) => { +export const calculatePortfolioProfit = (portfolio: PortfolioMetrics) => { return portfolio.investmentValue + portfolio.balance - portfolio.totalDeposits } @@ -129,7 +129,7 @@ export const calculateNewProfit = ( portfolioHistory: PortfolioMetrics[], newPortfolio: PortfolioMetrics ) => { - const allTimeProfit = calculateTotalProfit(newPortfolio) + const allTimeProfit = calculatePortfolioProfit(newPortfolio) const descendingPortfolio = sortBy( portfolioHistory, (p) => p.timestamp diff --git a/web/pages/experimental/home/index.tsx b/web/pages/experimental/home/index.tsx index d56c0c24..a9797a05 100644 --- a/web/pages/experimental/home/index.tsx +++ b/web/pages/experimental/home/index.tsx @@ -25,6 +25,9 @@ import { Title } from 'web/components/title' import { Row } from 'web/components/layout/row' import { ProbChangeTable } from 'web/components/contract/prob-change-table' import { groupPath } from 'web/lib/firebase/groups' +import { usePortfolioHistory } from 'web/hooks/use-portfolio-history' +import { calculatePortfolioProfit } from 'common/calculate-metrics' +import { formatMoney } from 'common/util/format' const Home = () => { const user = useUser() @@ -44,11 +47,13 @@ const Home = () => { - + <Title className="!mb-0" text="Home" /> <EditButton /> </Row> + <DailyProfitAndBalance className="self-end" userId={user?.id} /> + <div className="text-xl text-gray-800">Daily movers</div> <ProbChangeTable userId={user?.id} /> @@ -163,4 +168,37 @@ function EditButton(props: { className?: string }) { ) } +function DailyProfitAndBalance(props: { + userId: string | null | undefined + className?: string +}) { + const { userId, className } = props + const metrics = usePortfolioHistory(userId ?? '', 'daily') ?? [] + const [first, last] = [metrics[0], metrics[metrics.length - 1]] + + if (first === undefined || last === undefined) return null + + const profit = + calculatePortfolioProfit(last) - calculatePortfolioProfit(first) + + const balanceChange = last.balance - first.balance + + return ( + <div className={clsx(className, 'text-lg')}> + <span className={clsx(profit >= 0 ? 'text-green-500' : 'text-red-500')}> + {profit >= 0 ? '+' : '-'} + {formatMoney(profit)} + </span>{' '} + profit and{' '} + <span + className={clsx(balanceChange >= 0 ? 'text-green-500' : 'text-red-500')} + > + {balanceChange >= 0 ? '+' : '-'} + {formatMoney(balanceChange)} + </span>{' '} + balance today + </div> + ) +} + export default Home