open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

portfolio graph: put profit first

Browse Source
This commit is contained in:
mantikoros 2022-09-29 13:51:49 -05:00
parent b7f5c0bf89
commit a6b564ba29
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/components/portfolio/portfolio-value-section.tsx
View File

@ -15,7 +15,7 @@ export const PortfolioValueSection = memo(
const [portfolioPeriod, setPortfolioPeriod] = useState<Period>('weekly')
const portfolioHistory = usePortfolioHistory(userId, portfolioPeriod)
const [graphMode, setGraphMode] = useState<'profit' | 'value'>('value')
const [graphMode, setGraphMode] = useState<'profit' | 'value'>('profit')
const [graphDisplayNumber, setGraphDisplayNumber] = useState<
number | string | null
>(null)
@ -40,24 +40,6 @@ export const PortfolioValueSection = memo(
<>
<Row className="mb-2 justify-between">
<Row className="gap-4 sm:gap-8">
<Col
className={clsx(
'cursor-pointer',
graphMode != 'value' ? 'opacity-40 hover:opacity-80' : ''
)}
onClick={() => setGraphMode('value')}
>
<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>
<Col
className={clsx(
'cursor-pointer',
@ -91,6 +73,25 @@ export const PortfolioValueSection = memo(
: formatMoney(totalProfit)}
</div>
</Col>
<Col
className={clsx(
'cursor-pointer',
graphMode != 'value' ? 'opacity-40 hover:opacity-80' : ''
)}
onClick={() => setGraphMode('value')}
>
<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>
</Row>
</Row>
<PortfolioValueGraph