Toggle weekly leaderboard and daily/weekly/alltime portfolio graph (#616)
* Toggle weekly leaderboard and daily/weekly/alltime portfolio graph * Formatmoney for tooltip value
This commit is contained in:
parent
7dea9cbfa8
commit
960f8a1b3d
|
@ -52,7 +52,7 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
|||
margin={{ top: 20, right: 28, bottom: 22, left: 60 }}
|
||||
xScale={{
|
||||
type: 'time',
|
||||
min: points[0].x,
|
||||
min: points[0]?.x,
|
||||
max: endDate,
|
||||
}}
|
||||
yScale={{
|
||||
|
@ -77,6 +77,7 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
|||
enableGridY={true}
|
||||
enableSlices="x"
|
||||
animate={false}
|
||||
yFormat={(value) => formatMoney(+value)}
|
||||
></ResponsiveLine>
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -13,7 +13,7 @@ export const PortfolioValueSection = memo(
|
|||
}) {
|
||||
const { portfolioHistory } = props
|
||||
const lastPortfolioMetrics = last(portfolioHistory)
|
||||
const [portfolioPeriod] = useState<Period>('allTime')
|
||||
const [portfolioPeriod, setPortfolioPeriod] = useState<Period>('allTime')
|
||||
|
||||
if (portfolioHistory.length === 0 || !lastPortfolioMetrics) {
|
||||
return <div> No portfolio history data yet </div>
|
||||
|
@ -33,9 +33,16 @@ export const PortfolioValueSection = memo(
|
|||
</div>
|
||||
</Col>
|
||||
</div>
|
||||
{
|
||||
//TODO: enable day/week/monthly as data becomes available
|
||||
}
|
||||
<select
|
||||
className="select select-bordered self-start"
|
||||
onChange={(e) => {
|
||||
setPortfolioPeriod(e.target.value as Period)
|
||||
}}
|
||||
>
|
||||
<option value="allTime">All time</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="daily">Daily</option>
|
||||
</select>
|
||||
</Row>
|
||||
<PortfolioValueGraph
|
||||
portfolioHistory={portfolioHistory}
|
||||
|
|
|
@ -38,6 +38,7 @@ import { FollowButton } from './follow-button'
|
|||
import { PortfolioMetrics } from 'common/user'
|
||||
import { ReferralsButton } from 'web/components/referrals-button'
|
||||
import { GroupsButton } from 'web/components/groups/groups-button'
|
||||
import { PortfolioValueSection } from './portfolio/portfolio-value-section'
|
||||
|
||||
export function UserLink(props: {
|
||||
name: string
|
||||
|
@ -75,7 +76,9 @@ export function UserPage(props: {
|
|||
'loading'
|
||||
)
|
||||
const [usersBets, setUsersBets] = useState<Bet[] | 'loading'>('loading')
|
||||
const [, setUsersPortfolioHistory] = useState<PortfolioMetrics[]>([])
|
||||
const [portfolioHistory, setUsersPortfolioHistory] = useState<
|
||||
PortfolioMetrics[]
|
||||
>([])
|
||||
const [commentsByContract, setCommentsByContract] = useState<
|
||||
Map<Contract, Comment[]> | 'loading'
|
||||
>('loading')
|
||||
|
@ -297,9 +300,9 @@ export function UserPage(props: {
|
|||
title: 'Bets',
|
||||
content: (
|
||||
<div>
|
||||
{
|
||||
// TODO: add portfolio-value-section here
|
||||
}
|
||||
<PortfolioValueSection
|
||||
portfolioHistory={portfolioHistory}
|
||||
/>
|
||||
<BetsList
|
||||
user={user}
|
||||
hideBetsBefore={isCurrentUser ? 0 : JUNE_1_2022}
|
||||
|
|
|
@ -67,7 +67,9 @@ export default function Leaderboards(props: {
|
|||
<Col className="mx-4 items-center gap-10 lg:flex-row">
|
||||
{!isLoading ? (
|
||||
<>
|
||||
{period === 'allTime' || period === 'daily' ? ( //TODO: show other periods once they're available
|
||||
{period === 'allTime' ||
|
||||
period == 'weekly' ||
|
||||
period === 'daily' ? ( //TODO: show other periods once they're available
|
||||
<Leaderboard
|
||||
title="🏅 Top bettors"
|
||||
users={topTradersState}
|
||||
|
|
Loading…
Reference in New Issue
Block a user