left panel smoller

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 = !width || width < 800 ? 2 : 4
-  // const numYTickValues = 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,12 +102,14 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
         )
 
   return (
+    <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: 0, bottom: 10 }}
+          margin={{ top: 10, right: 0, left: 40, bottom: 10 }}
           data={data}
           xScale={{
             type: 'time',
@@ -125,16 +127,16 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
           colors={{ datum: 'color' }}
           axisBottom={{
             tickValues: 0,
-          format: (time) => formatTime(+time, !!includeTime),
           }}
           pointBorderColor="#fff"
           pointSize={firstPoints.length > 100 ? 0 : 6}
           axisLeft={{
-          tickValues: 0,
+            tickValues: numYTickValues,
-          format: (value) => formatMoney(value),
+            format: '.3s',
           }}
           enableGridX={false}
-        enableGridY={false}
+          enableGridY={true}
+          gridYValues={numYTickValues}
           enableSlices="x"
           animate={false}
           yFormat={(value) => formatMoney(+value)}
@@ -149,17 +151,14 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
                 {slice.points.map((point) => (
                   <div
                     key={point.id}
-                  style={{
+                    className="text-xs font-semibold sm:text-sm"
-                    color: point.serieColor,
-                    padding: '3px 0',
-                  }}
                   >
                     <Col>
                       <div>
-                      <strong>Time</strong> [{point.data.xFormatted}]
+                        {dayjs(point.data.xFormatted).format('MMM/D/YY')}
                       </div>
-                    <div>
+                      <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
-                      <strong>{point.serieId}</strong> [{point.data.yFormatted}]
+                        {dayjs(point.data.xFormatted).format('h:mm A')}
                       </div>
                     </Col>
                   </div>
@@ -169,5 +168,6 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
           }}
         ></ResponsiveLine>
       </div>
+    </div>
   )
 })

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="mb-2 justify-between">
           <Row className="gap-4 sm:gap-8">
-            <Col>
+            <Col
-              <div className="text-greyscale-4 text-xs sm:text-sm">
+              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>
+            <Col
-              <div className="text-greyscale-4 text-xs sm:text-sm">Profit</div>
+              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}

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