diff --git a/web/components/portfolio/portfolio-value-graph.tsx b/web/components/portfolio/portfolio-value-graph.tsx index d1dae0bd..61a1ce8b 100644 --- a/web/components/portfolio/portfolio-value-graph.tsx +++ b/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 (
formatTime(+time, includeTime), + format: (time) => formatTime(+time, !!includeTime), }} pointBorderColor="#fff" pointSize={points.length > 100 ? 0 : 6} diff --git a/web/components/portfolio/portfolio-value-section.tsx b/web/components/portfolio/portfolio-value-section.tsx index 604873e9..706630b2 100644 --- a/web/components/portfolio/portfolio-value-section.tsx +++ b/web/components/portfolio/portfolio-value-section.tsx @@ -6,70 +6,68 @@ 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: { - userId: string - disableSelector?: boolean - }) { - const { disableSelector, userId } = props + function PortfolioValueSection(props: { userId: string }) { + const { userId } = props const [portfolioPeriod, setPortfolioPeriod] = useState('weekly') 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' + const { balance, investmentValue } = lastPortfolioMetrics + const totalValue = balance + investmentValue return ( -
+ <> -
- -
Portfolio value
-
- {formatMoney( - lastPortfolioMetrics.balance + - lastPortfolioMetrics.investmentValue - )} -
- -
- {!disableSelector && ( - - )} + +
Portfolio value
+
{formatMoney(totalValue)}
+ +
-
+ ) } ) diff --git a/web/lib/firebase/users.ts b/web/lib/firebase/users.ts index 6cfee163..bad13c8c 100644 --- a/web/lib/firebase/users.ts +++ b/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( query( collectionGroup(db, 'portfolioHistory'), where('userId', '==', userId), + where('timestamp', '>=', since), orderBy('timestamp', 'asc') ) )