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:
Pico2x 2022-07-03 20:18:12 +01:00 committed by GitHub
parent 7dea9cbfa8
commit 960f8a1b3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 10 deletions

View File

@ -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>
)

View File

@ -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}

View File

@ -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}

View File

@ -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}