Make portfolio graph on profile not load extra data

web/components/portfolio/portfolio-value-graph.tsx

@@ -1,7 +1,6 @@
 import { ResponsiveLine } from '@nivo/line'
 import { PortfolioMetrics } from 'common/user'
 import { formatMoney } from 'common/util/format'
-import { DAY_MS } from 'common/util/time'
 import { last } from 'lodash'
 import { memo } from 'react'
 import { useWindowSize } from 'web/hooks/use-window-size'
@@ -10,28 +9,12 @@ import { formatTime } from 'web/lib/util/time'
 export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
   portfolioHistory: PortfolioMetrics[]
   height?: number
-  period?: string
+  includeTime?: boolean
 }) {
-  const { portfolioHistory, height, period } = props
-
+  const { portfolioHistory, height, includeTime } = props
   const { width } = useWindowSize()
 
-  const portfolioHistoryFiltered = portfolioHistory.filter((p) => {
-    switch (period) {
-      case 'daily':
-        return p.timestamp > Date.now() - 1 * DAY_MS
-      case 'weekly':
-        return p.timestamp > Date.now() - 7 * DAY_MS
-      case 'monthly':
-        return p.timestamp > Date.now() - 30 * DAY_MS
-      case 'allTime':
-        return true
-      default:
-        return true
-    }
-  })
-
-  const points = portfolioHistoryFiltered.map((p) => {
+  const points = portfolioHistory.map((p) => {
     return {
       x: new Date(p.timestamp),
       y: p.balance + p.investmentValue,
@@ -41,7 +24,6 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
   const numXTickValues = !width || width < 800 ? 2 : 5
   const numYTickValues = 4
   const endDate = last(points)?.x
-  const includeTime = period === 'daily'
   return (
     <div
       className="w-full overflow-hidden"
@@ -66,7 +48,7 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
         colors={{ datum: 'color' }}
         axisBottom={{
           tickValues: numXTickValues,
-          format: (time) => formatTime(+time, includeTime),
+          format: (time) => formatTime(+time, !!includeTime),
         }}
         pointBorderColor="#fff"
         pointSize={points.length > 100 ? 0 : 6}

web/components/portfolio/portfolio-value-section.tsx

@@ -6,6 +6,21 @@ import { Period, getPortfolioHistory } from 'web/lib/firebase/users'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
 import { PortfolioValueGraph } from './portfolio-value-graph'
+import { DAY_MS } from 'common/util/time'
+
+const periodToCutoff = (now: number, period: Period) => {
+  switch (period) {
+    case 'daily':
+      return now - 1 * DAY_MS
+    case 'weekly':
+      return now - 7 * DAY_MS
+    case 'monthly':
+      return now - 30 * DAY_MS
+    case 'allTime':
+    default:
+      return new Date(0)
+  }
+}
 
 export const PortfolioValueSection = memo(
   function PortfolioValueSection(props: {
@@ -18,22 +33,17 @@ export const PortfolioValueSection = memo(
     const [portfolioHistory, setUsersPortfolioHistory] = useState<
       PortfolioMetrics[]
     >([])
-    useEffect(() => {
-      getPortfolioHistory(userId).then(setUsersPortfolioHistory)
-    }, [userId])
-    const lastPortfolioMetrics = last(portfolioHistory)
 
+    useEffect(() => {
+      const cutoff = periodToCutoff(Date.now(), portfolioPeriod).valueOf()
+      getPortfolioHistory(userId, cutoff).then(setUsersPortfolioHistory)
+    }, [portfolioPeriod, userId])
+
+    const lastPortfolioMetrics = last(portfolioHistory)
     if (portfolioHistory.length === 0 || !lastPortfolioMetrics) {
       return <></>
     }
 
-    // PATCH: If portfolio history started on June 1st, then we label it as "Since June"
-    // instead of "All time"
-    const allTimeLabel =
-      lastPortfolioMetrics.timestamp < Date.parse('2022-06-20T00:00:00.000Z')
-        ? 'Since June'
-        : 'All time'
-
     return (
       <div>
         <Row className="gap-8">
@@ -58,7 +68,7 @@ export const PortfolioValueSection = memo(
                 setPortfolioPeriod(e.target.value as Period)
               }}
             >
-              <option value="allTime">{allTimeLabel}</option>
+              <option value="allTime">All time</option>
               <option value="weekly">Last 7d</option>
               {/* Note: 'daily' seems to be broken? */}
               {/* <option value="daily">Last 24h</option> */}
@@ -67,7 +77,7 @@ export const PortfolioValueSection = memo(
         </Row>
         <PortfolioValueGraph
           portfolioHistory={portfolioHistory}
-          period={portfolioPeriod}
+          includeTime={portfolioPeriod == 'daily'}
         />
       </div>
     )

web/lib/firebase/users.ts

@@ -252,11 +252,12 @@ export async function unfollow(userId: string, unfollowedUserId: string) {
   await deleteDoc(followDoc)
 }
 
-export async function getPortfolioHistory(userId: string) {
+export async function getPortfolioHistory(userId: string, since: number) {
   return getValues<PortfolioMetrics>(
     query(
       collectionGroup(db, 'portfolioHistory'),
       where('userId', '==', userId),
+      where('timestamp', '>=', since),
       orderBy('timestamp', 'asc')
     )
   )