From 8b2856b9809dd299405037dd7eaeea6deb044989 Mon Sep 17 00:00:00 2001
From: ingawei <ingawei@gmail.com>
Date: Fri, 23 Sep 2022 21:11:36 -0700
Subject: [PATCH] left panel smoller

---
 .../portfolio/portfolio-value-graph.tsx       | 144 +++++++++---------
 .../portfolio/portfolio-value-section.tsx     |  45 ++++--
 web/components/user-page.tsx                  |  23 +--
 3 files changed, 107 insertions(+), 105 deletions(-)

diff --git a/web/components/portfolio/portfolio-value-graph.tsx b/web/components/portfolio/portfolio-value-graph.tsx
index be5c3ef0..df4d0e27 100644
--- a/web/components/portfolio/portfolio-value-graph.tsx
+++ b/web/components/portfolio/portfolio-value-graph.tsx
@@ -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,72 +102,72 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
         )
 
   return (
-    <div
-      className="w-full overflow-hidden"
-      style={{ height: height ?? (!width || width >= 800 ? 200 : 100) }}
-    >
-      <ResponsiveLine
-        margin={{ top: 10, right: 0, left: 0, bottom: 10 }}
-        data={data}
-        xScale={{
-          type: 'time',
-          min: firstPoints[0]?.x,
-          max: endDate,
-        }}
-        yScale={{
-          type: 'linear',
-          stacked: false,
-          min: yMin,
-          max: yMax,
-        }}
-        curve="stepAfter"
-        enablePoints={false}
-        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),
-        }}
-        enableGridX={false}
-        enableGridY={false}
-        enableSlices="x"
-        animate={false}
-        yFormat={(value) => formatMoney(+value)}
-        enableArea={true}
-        areaOpacity={0.1}
-        sliceTooltip={({ slice }) => {
-          slice.points.map((point) =>
-            setGraphDisplayNumber(point.data.yFormatted)
-          )
-          return (
-            <div className="rounded bg-white px-4 py-2 opacity-80">
-              {slice.points.map((point) => (
-                <div
-                  key={point.id}
-                  style={{
-                    color: point.serieColor,
-                    padding: '3px 0',
-                  }}
-                >
-                  <Col>
-                    <div>
-                      <strong>Time</strong> [{point.data.xFormatted}]
-                    </div>
-                    <div>
-                      <strong>{point.serieId}</strong> [{point.data.yFormatted}]
-                    </div>
-                  </Col>
-                </div>
-              ))}
-            </div>
-          )
-        }}
-      ></ResponsiveLine>
+    <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: 40, bottom: 10 }}
+          data={data}
+          xScale={{
+            type: 'time',
+            min: firstPoints[0]?.x,
+            max: endDate,
+          }}
+          yScale={{
+            type: 'linear',
+            stacked: false,
+            min: yMin,
+            max: yMax,
+          }}
+          curve="stepAfter"
+          enablePoints={false}
+          colors={{ datum: 'color' }}
+          axisBottom={{
+            tickValues: 0,
+          }}
+          pointBorderColor="#fff"
+          pointSize={firstPoints.length > 100 ? 0 : 6}
+          axisLeft={{
+            tickValues: numYTickValues,
+            format: '.3s',
+          }}
+          enableGridX={false}
+          enableGridY={true}
+          gridYValues={numYTickValues}
+          enableSlices="x"
+          animate={false}
+          yFormat={(value) => formatMoney(+value)}
+          enableArea={true}
+          areaOpacity={0.1}
+          sliceTooltip={({ slice }) => {
+            slice.points.map((point) =>
+              setGraphDisplayNumber(point.data.yFormatted)
+            )
+            return (
+              <div className="rounded bg-white px-4 py-2 opacity-80">
+                {slice.points.map((point) => (
+                  <div
+                    key={point.id}
+                    className="text-xs font-semibold sm:text-sm"
+                  >
+                    <Col>
+                      <div>
+                        {dayjs(point.data.xFormatted).format('MMM/D/YY')}
+                      </div>
+                      <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
+                        {dayjs(point.data.xFormatted).format('h:mm A')}
+                      </div>
+                    </Col>
+                  </div>
+                ))}
+              </div>
+            )
+          }}
+        ></ResponsiveLine>
+      </div>
     </div>
   )
 })
diff --git a/web/components/portfolio/portfolio-value-section.tsx b/web/components/portfolio/portfolio-value-section.tsx
index e6049f0f..2b26d734 100644
--- a/web/components/portfolio/portfolio-value-section.tsx
+++ b/web/components/portfolio/portfolio-value-section.tsx
@@ -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}
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index fa315772..fd5d04ee 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -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 '}