2022-09-26 23:01:13 +00:00
|
|
|
import clsx from 'clsx'
|
2022-06-24 17:14:20 +00:00
|
|
|
import { formatMoney } from 'common/util/format'
|
|
|
|
import { last } from 'lodash'
|
2022-10-04 08:18:22 +00:00
|
|
|
import { memo, useState } from 'react'
|
2022-08-28 23:03:00 +00:00
|
|
|
import { usePortfolioHistory } from 'web/hooks/use-portfolio-history'
|
2022-06-24 17:14:20 +00:00
|
|
|
import { Col } from '../layout/col'
|
|
|
|
import { Row } from '../layout/row'
|
2022-10-04 08:18:22 +00:00
|
|
|
import { GraphMode, PortfolioGraph } from './portfolio-value-graph'
|
|
|
|
import { SizedContainer } from 'web/components/sized-container'
|
2022-06-24 17:14:20 +00:00
|
|
|
|
|
|
|
export const PortfolioValueSection = memo(
|
2022-08-27 08:09:01 +00:00
|
|
|
function PortfolioValueSection(props: { userId: string }) {
|
|
|
|
const { userId } = props
|
2022-08-12 03:44:51 +00:00
|
|
|
|
2022-10-04 08:18:22 +00:00
|
|
|
const portfolioHistory = usePortfolioHistory(userId, 'allTime')
|
|
|
|
const [graphMode, setGraphMode] = useState<GraphMode>('profit')
|
2022-09-26 23:01:13 +00:00
|
|
|
const [graphDisplayNumber, setGraphDisplayNumber] = useState<
|
|
|
|
number | string | null
|
|
|
|
>(null)
|
2022-10-04 08:18:22 +00:00
|
|
|
const handleGraphDisplayChange = (p: { y: number } | undefined) => {
|
|
|
|
setGraphDisplayNumber(p != null ? formatMoney(p.y) : null)
|
2022-09-26 23:01:13 +00:00
|
|
|
}
|
2022-08-27 08:09:01 +00:00
|
|
|
|
2022-10-04 08:18:22 +00:00
|
|
|
const lastPortfolioMetrics = last(portfolioHistory)
|
|
|
|
if (!portfolioHistory || !lastPortfolioMetrics) {
|
2022-07-19 09:54:05 +00:00
|
|
|
return <></>
|
|
|
|
}
|
|
|
|
|
2022-09-07 04:24:56 +00:00
|
|
|
const { balance, investmentValue, totalDeposits } = lastPortfolioMetrics
|
2022-08-27 08:09:01 +00:00
|
|
|
const totalValue = balance + investmentValue
|
2022-09-07 04:24:56 +00:00
|
|
|
const totalProfit = totalValue - totalDeposits
|
2022-06-24 17:14:20 +00:00
|
|
|
return (
|
2022-08-27 08:09:01 +00:00
|
|
|
<>
|
2022-09-26 23:01:13 +00:00
|
|
|
<Row className="mb-2 justify-between">
|
2022-10-05 20:40:26 +00:00
|
|
|
<Row className="gap-2">
|
2022-09-26 23:01:13 +00:00
|
|
|
<Col
|
|
|
|
className={clsx(
|
2022-10-05 20:40:26 +00:00
|
|
|
'w-24 cursor-pointer sm:w-28 ',
|
2022-09-26 23:01:13 +00:00
|
|
|
graphMode != 'profit'
|
|
|
|
? 'cursor-pointer opacity-40 hover:opacity-80'
|
|
|
|
: ''
|
|
|
|
)}
|
2022-10-04 08:18:22 +00:00
|
|
|
onClick={() => {
|
|
|
|
setGraphMode('profit')
|
|
|
|
setGraphDisplayNumber(null)
|
|
|
|
}}
|
2022-09-26 23:01:13 +00:00
|
|
|
>
|
|
|
|
<div className="text-greyscale-6 text-xs sm:text-sm">Profit</div>
|
|
|
|
<div
|
|
|
|
className={clsx(
|
|
|
|
graphMode === 'profit'
|
|
|
|
? graphDisplayNumber
|
|
|
|
? graphDisplayNumber.toString().includes('-')
|
|
|
|
? 'text-red-600'
|
|
|
|
: 'text-teal-500'
|
|
|
|
: totalProfit > 0
|
|
|
|
? 'text-teal-500'
|
|
|
|
: 'text-red-600'
|
|
|
|
: totalProfit > 0
|
|
|
|
? 'text-teal-500'
|
|
|
|
: 'text-red-600',
|
|
|
|
'text-lg sm:text-xl'
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{graphMode === 'profit'
|
|
|
|
? graphDisplayNumber
|
|
|
|
? graphDisplayNumber
|
|
|
|
: formatMoney(totalProfit)
|
|
|
|
: formatMoney(totalProfit)}
|
|
|
|
</div>
|
|
|
|
</Col>
|
2022-09-29 18:53:43 +00:00
|
|
|
|
|
|
|
<Col
|
|
|
|
className={clsx(
|
2022-10-05 20:40:26 +00:00
|
|
|
'w-24 cursor-pointer sm:w-28',
|
2022-09-29 18:53:43 +00:00
|
|
|
graphMode != 'value' ? 'opacity-40 hover:opacity-80' : ''
|
|
|
|
)}
|
2022-10-04 08:18:22 +00:00
|
|
|
onClick={() => {
|
|
|
|
setGraphMode('value')
|
|
|
|
setGraphDisplayNumber(null)
|
|
|
|
}}
|
2022-09-29 18:53:43 +00:00
|
|
|
>
|
|
|
|
<div className="text-greyscale-6 text-xs sm:text-sm">
|
|
|
|
Portfolio value
|
|
|
|
</div>
|
|
|
|
<div className={clsx('text-lg text-indigo-600 sm:text-xl')}>
|
|
|
|
{graphMode === 'value'
|
|
|
|
? graphDisplayNumber
|
|
|
|
? graphDisplayNumber
|
|
|
|
: formatMoney(totalValue)
|
|
|
|
: formatMoney(totalValue)}
|
|
|
|
</div>
|
|
|
|
</Col>
|
2022-09-26 23:01:13 +00:00
|
|
|
</Row>
|
2022-06-24 17:14:20 +00:00
|
|
|
</Row>
|
2022-10-04 08:18:22 +00:00
|
|
|
<SizedContainer fullHeight={200} mobileHeight={100}>
|
|
|
|
{(width, height) => (
|
|
|
|
<PortfolioGraph
|
|
|
|
mode={graphMode}
|
|
|
|
history={portfolioHistory}
|
|
|
|
width={width}
|
|
|
|
height={height}
|
|
|
|
onMouseOver={handleGraphDisplayChange}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</SizedContainer>
|
2022-08-27 08:09:01 +00:00
|
|
|
</>
|
2022-06-24 17:14:20 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
)
|