Toggle weekly leaderboard and daily/weekly/alltime portfolio graph (#616)

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

* Formatmoney for tooltip value

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

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>
-          {
+          <select
-            //TODO: enable day/week/monthly as data becomes available
+            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}

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>
-                    {
+                    <PortfolioValueSection
-                      // TODO: add portfolio-value-section here
+                      portfolioHistory={portfolioHistory}
-                    }
+                    />
                     <BetsList
                       user={user}
                       hideBetsBefore={isCurrentUser ? 0 : JUNE_1_2022}

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}