From 960f8a1b3d20e2c6a2829bbd97fb5ba56dad64e0 Mon Sep 17 00:00:00 2001
From: Pico2x <pico2x@gmail.com>
Date: Sun, 3 Jul 2022 20:18:12 +0100
Subject: [PATCH] Toggle weekly leaderboard and daily/weekly/alltime portfolio
 graph (#616)

* Toggle weekly leaderboard and daily/weekly/alltime portfolio graph

* Formatmoney for tooltip value
---
 .../portfolio/portfolio-value-graph.tsx           |  3 ++-
 .../portfolio/portfolio-value-section.tsx         | 15 +++++++++++----
 web/components/user-page.tsx                      | 11 +++++++----
 web/pages/leaderboards.tsx                        |  4 +++-
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/web/components/portfolio/portfolio-value-graph.tsx b/web/components/portfolio/portfolio-value-graph.tsx
index 558fc5f6..50a6b59a 100644
--- a/web/components/portfolio/portfolio-value-graph.tsx
+++ b/web/components/portfolio/portfolio-value-graph.tsx
@@ -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>
   )
diff --git a/web/components/portfolio/portfolio-value-section.tsx b/web/components/portfolio/portfolio-value-section.tsx
index a992e87e..55260bb5 100644
--- a/web/components/portfolio/portfolio-value-section.tsx
+++ b/web/components/portfolio/portfolio-value-section.tsx
@@ -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}
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index ccacca04..d72a2a16 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -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}
diff --git a/web/pages/leaderboards.tsx b/web/pages/leaderboards.tsx
index 44c0a65b..f306493b 100644
--- a/web/pages/leaderboards.tsx
+++ b/web/pages/leaderboards.tsx
@@ -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}