ebc4bd6bcf
* [Portfolio Graph] Shows a graph of the portfolio value over time * [PortfolioGraph] Fix some nits. * [PortfolioGraph] Comment out portfolio-value-section Hides the component completely for now, so we can land today. My plan would be to land today, wait for the history to build up, and then revert this commit. As opposed to leaving the PR idle for a while, and then have to deal with conflicts. * [PortfolioGraph] Rm duplicate firestore rule
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { PortfolioMetrics } from 'common/user'
|
|
import { formatMoney } from 'common/util/format'
|
|
import { last } from 'lodash'
|
|
import { memo, useState } from 'react'
|
|
import { Period } from 'web/lib/firebase/users'
|
|
import { Col } from '../layout/col'
|
|
import { Row } from '../layout/row'
|
|
import { PortfolioValueGraph } from './portfolio-value-graph'
|
|
|
|
export const PortfolioValueSection = memo(
|
|
function PortfolioValueSection(props: {
|
|
portfolioHistory: PortfolioMetrics[]
|
|
}) {
|
|
const { portfolioHistory } = props
|
|
const lastPortfolioMetrics = last(portfolioHistory)
|
|
const [portfolioPeriod] = useState<Period>('allTime')
|
|
|
|
if (portfolioHistory.length === 0 || !lastPortfolioMetrics) {
|
|
return <div> No portfolio history data yet </div>
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Row className="gap-8">
|
|
<div className="mb-4 w-full">
|
|
<Col>
|
|
<div className="text-sm text-gray-500">Portfolio value</div>
|
|
<div className="text-lg">
|
|
{formatMoney(
|
|
lastPortfolioMetrics.balance +
|
|
lastPortfolioMetrics.investmentValue
|
|
)}
|
|
</div>
|
|
</Col>
|
|
</div>
|
|
{
|
|
//TODO: enable day/week/monthly as data becomes available
|
|
}
|
|
</Row>
|
|
<PortfolioValueGraph
|
|
portfolioHistory={portfolioHistory}
|
|
period={portfolioPeriod}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
)
|