left panel smoller
This commit is contained in:
ingawei
parent
e3520a5650
commit
8b2856b980
|
|
@ -2,16 +2,18 @@ import { ResponsiveLine } from '@nivo/line'
|
|||
import { PortfolioMetrics } from 'common/user'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
import dayjs from 'dayjs'
|
||||
import { connectStorageEmulator } from 'firebase/storage'
|
||||
import { last, set } from 'lodash'
|
||||
import { memo } from 'react'
|
||||
import { useWindowSize } from 'web/hooks/use-window-size'
|
||||
import { nFormatter } from 'web/lib/util/appendNumber'
|
||||
import { formatTime } from 'web/lib/util/time'
|
||||
import { Col } from '../layout/col'
|
||||
|
||||
export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
||||
portfolioHistory: PortfolioMetrics[]
|
||||
mode: 'value' | 'profit'
|
||||
setGraphDisplayNumber: (value: number | string) => void
|
||||
setGraphDisplayNumber: (arg0: number | string | null) => void
|
||||
height?: number
|
||||
includeTime?: boolean
|
||||
}) {
|
||||
|
|
@ -23,11 +25,10 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
|||
let points = portfolioHistory.map((p) => {
|
||||
const { timestamp, balance, investmentValue, totalDeposits } = p
|
||||
const value = balance + investmentValue
|
||||
|
||||
const profit = value - totalDeposits
|
||||
let posProfit = null
|
||||
let negProfit = null
|
||||
|
||||
// const profit = value - totalDeposits
|
||||
if (profit < 0) {
|
||||
negProfit = profit
|
||||
} else {
|
||||
|
|
@ -66,8 +67,8 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
|||
]
|
||||
}
|
||||
const firstPoints = data[0].data
|
||||
// const numXTickValues = !width || width < 800 ? 2 : 5
|
||||
// const numYTickValues = 4
|
||||
// const numYTickValues = !width || width < 800 ? 2 : 4
|
||||
const numYTickValues = 2
|
||||
const endDate = last(firstPoints)?.x
|
||||
|
||||
const firstPointsY = firstPoints
|
||||
|
|
@ -75,7 +76,6 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
|||
return p.y !== null
|
||||
})
|
||||
.map((p) => p.y)
|
||||
// console.log(firstPointsY)
|
||||
|
||||
const yMin =
|
||||
mode === 'value'
|
||||
|
|
@ -102,12 +102,14 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
|||
)
|
||||
|
||||
return (
|
||||
<div className="animate-rapidpulse">
|
||||
<div
|
||||
className="w-full overflow-hidden"
|
||||
style={{ height: height ?? (!width || width >= 800 ? 200 : 100) }}
|
||||
onMouseLeave={() => setGraphDisplayNumber(null)}
|
||||
>
|
||||
<ResponsiveLine
|
||||
margin={{ top: 10, right: 0, left: 0, bottom: 10 }}
|
||||
margin={{ top: 10, right: 0, left: 40, bottom: 10 }}
|
||||
data={data}
|
||||
xScale={{
|
||||
type: 'time',
|
||||
|
|
@ -125,16 +127,16 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
|||
colors={{ datum: 'color' }}
|
||||
axisBottom={{
|
||||
tickValues: 0,
|
||||
format: (time) => formatTime(+time, !!includeTime),
|
||||
}}
|
||||
pointBorderColor="#fff"
|
||||
pointSize={firstPoints.length > 100 ? 0 : 6}
|
||||
axisLeft={{
|
||||
tickValues: 0,
|
||||
format: (value) => formatMoney(value),
|
||||
tickValues: numYTickValues,
|
||||
format: '.3s',
|
||||
}}
|
||||
enableGridX={false}
|
||||
enableGridY={false}
|
||||
enableGridY={true}
|
||||
gridYValues={numYTickValues}
|
||||
enableSlices="x"
|
||||
animate={false}
|
||||
yFormat={(value) => formatMoney(+value)}
|
||||
|
|
@ -149,17 +151,14 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
|||
{slice.points.map((point) => (
|
||||
<div
|
||||
key={point.id}
|
||||
style={{
|
||||
color: point.serieColor,
|
||||
padding: '3px 0',
|
||||
}}
|
||||
className="text-xs font-semibold sm:text-sm"
|
||||
>
|
||||
<Col>
|
||||
<div>
|
||||
<strong>Time</strong> [{point.data.xFormatted}]
|
||||
{dayjs(point.data.xFormatted).format('MMM/D/YY')}
|
||||
</div>
|
||||
<div>
|
||||
<strong>{point.serieId}</strong> [{point.data.yFormatted}]
|
||||
<div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
|
||||
{dayjs(point.data.xFormatted).format('h:mm A')}
|
||||
</div>
|
||||
</Col>
|
||||
</div>
|
||||
|
|
@ -169,5 +168,6 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
|||
}}
|
||||
></ResponsiveLine>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export const PortfolioValueSection = memo(
|
|||
|
||||
const [portfolioPeriod, setPortfolioPeriod] = useState<Period>('weekly')
|
||||
const portfolioHistory = usePortfolioHistory(userId, portfolioPeriod)
|
||||
const [graphMode, setGraphMode] = useState<'profit' | 'value'>('profit')
|
||||
const [graphMode, setGraphMode] = useState<'profit' | 'value'>('value')
|
||||
const [graphDisplayNumber, setGraphDisplayNumber] = useState(null)
|
||||
|
||||
// Remember the last defined portfolio history.
|
||||
|
|
@ -32,16 +32,21 @@ export const PortfolioValueSection = memo(
|
|||
const { balance, investmentValue, totalDeposits } = lastPortfolioMetrics
|
||||
const totalValue = balance + investmentValue
|
||||
const totalProfit = totalValue - totalDeposits
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row className="justify-between">
|
||||
<Row className="gap-4 sm:gap-8 ">
|
||||
<Col>
|
||||
<div className="text-greyscale-4 text-xs sm:text-sm">
|
||||
<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="text-lg text-indigo-600 sm:text-xl">
|
||||
<div className={clsx('text-lg text-indigo-600 sm:text-xl')}>
|
||||
{graphMode === 'value'
|
||||
? graphDisplayNumber
|
||||
? graphDisplayNumber
|
||||
|
|
@ -49,11 +54,29 @@ export const PortfolioValueSection = memo(
|
|||
: formatMoney(totalValue)}
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<div className="text-greyscale-4 text-xs sm:text-sm">Profit</div>
|
||||
<Col
|
||||
className={clsx(
|
||||
'cursor-pointer',
|
||||
graphMode != 'profit'
|
||||
? 'cursor-pointer opacity-40 hover:opacity-80'
|
||||
: ''
|
||||
)}
|
||||
onClick={() => setGraphMode('profit')}
|
||||
>
|
||||
<div className="text-greyscale-6 text-xs sm:text-sm">Profit</div>
|
||||
<div
|
||||
className={clsx(
|
||||
totalProfit > 0 ? 'text-green-500' : 'text-red-600',
|
||||
graphMode === 'profit'
|
||||
? graphDisplayNumber
|
||||
? graphDisplayNumber[2] === '-'
|
||||
? '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'
|
||||
)}
|
||||
>
|
||||
|
|
@ -65,7 +88,7 @@ export const PortfolioValueSection = memo(
|
|||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<GraphToggle setGraphMode={setGraphMode} graphMode={graphMode} />
|
||||
{/* <GraphToggle setGraphMode={setGraphMode} graphMode={graphMode} /> */}
|
||||
</Row>
|
||||
<PortfolioValueGraph
|
||||
portfolioHistory={currPortfolioHistory}
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ export function UserPage(props: { user: User }) {
|
|||
</>
|
||||
)}
|
||||
{(user.website || user.twitterHandle || user.discordHandle) && (
|
||||
<Row className="mb-5 flex-wrap items-center gap-2 sm:gap-4">
|
||||
<Row className="mb-2 flex-wrap items-center gap-2 sm:gap-4">
|
||||
{user.website && (
|
||||
<SiteLink
|
||||
href={
|
||||
|
|
@ -200,27 +200,6 @@ export function UserPage(props: { user: User }) {
|
|||
)}
|
||||
</Row>
|
||||
)}
|
||||
{/* {currentUser?.id === user.id && REFERRAL_AMOUNT > 0 && (
|
||||
<Row
|
||||
className={
|
||||
'mb-5 w-full items-center justify-center gap-2 rounded-md border-2 border-indigo-100 bg-indigo-50 p-2 text-indigo-600'
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<SiteLink href="/referrals">
|
||||
Earn {formatMoney(REFERRAL_AMOUNT)} when you refer a friend!
|
||||
</SiteLink>{' '}
|
||||
You've gotten{' '}
|
||||
<ReferralsButton user={user} currentUser={currentUser} />
|
||||
</span>
|
||||
<ShareIconButton
|
||||
copyPayload={`https://${ENV_CONFIG.domain}?referrer=${currentUser.username}`}
|
||||
toastClassName={'sm:-left-40 -left-40 min-w-[250%]'}
|
||||
buttonClassName={'h-10 w-10'}
|
||||
iconClassName={'h-8 w-8 text-indigo-700'}
|
||||
/>
|
||||
</Row>
|
||||
)} */}
|
||||
<QueryUncontrolledTabs
|
||||
currentPageForAnalytics={'profile'}
|
||||
labelClassName={'pb-2 pt-1 sm:pt-4 '}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user