Make portfolio graph loading more efficient (#805)
* Make portfolio graph on profile not load extra data * Clean up unused props * Tidy up markup * Enable "daily" option again on portfolio history picker
This commit is contained in:
parent
51ceb62871
commit
3e976eadac
web
|
@ -1,7 +1,6 @@
|
||||||
import { ResponsiveLine } from '@nivo/line'
|
import { ResponsiveLine } from '@nivo/line'
|
||||||
import { PortfolioMetrics } from 'common/user'
|
import { PortfolioMetrics } from 'common/user'
|
||||||
import { formatMoney } from 'common/util/format'
|
import { formatMoney } from 'common/util/format'
|
||||||
import { DAY_MS } from 'common/util/time'
|
|
||||||
import { last } from 'lodash'
|
import { last } from 'lodash'
|
||||||
import { memo } from 'react'
|
import { memo } from 'react'
|
||||||
import { useWindowSize } from 'web/hooks/use-window-size'
|
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: {
|
export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
||||||
portfolioHistory: PortfolioMetrics[]
|
portfolioHistory: PortfolioMetrics[]
|
||||||
height?: number
|
height?: number
|
||||||
period?: string
|
includeTime?: boolean
|
||||||
}) {
|
}) {
|
||||||
const { portfolioHistory, height, period } = props
|
const { portfolioHistory, height, includeTime } = props
|
||||||
|
|
||||||
const { width } = useWindowSize()
|
const { width } = useWindowSize()
|
||||||
|
|
||||||
const portfolioHistoryFiltered = portfolioHistory.filter((p) => {
|
const points = portfolioHistory.map((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) => {
|
|
||||||
return {
|
return {
|
||||||
x: new Date(p.timestamp),
|
x: new Date(p.timestamp),
|
||||||
y: p.balance + p.investmentValue,
|
y: p.balance + p.investmentValue,
|
||||||
|
@ -41,7 +24,6 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
||||||
const numXTickValues = !width || width < 800 ? 2 : 5
|
const numXTickValues = !width || width < 800 ? 2 : 5
|
||||||
const numYTickValues = 4
|
const numYTickValues = 4
|
||||||
const endDate = last(points)?.x
|
const endDate = last(points)?.x
|
||||||
const includeTime = period === 'daily'
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="w-full overflow-hidden"
|
className="w-full overflow-hidden"
|
||||||
|
@ -66,7 +48,7 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
|
||||||
colors={{ datum: 'color' }}
|
colors={{ datum: 'color' }}
|
||||||
axisBottom={{
|
axisBottom={{
|
||||||
tickValues: numXTickValues,
|
tickValues: numXTickValues,
|
||||||
format: (time) => formatTime(+time, includeTime),
|
format: (time) => formatTime(+time, !!includeTime),
|
||||||
}}
|
}}
|
||||||
pointBorderColor="#fff"
|
pointBorderColor="#fff"
|
||||||
pointSize={points.length > 100 ? 0 : 6}
|
pointSize={points.length > 100 ? 0 : 6}
|
||||||
|
|
|
@ -6,70 +6,68 @@ import { Period, getPortfolioHistory } from 'web/lib/firebase/users'
|
||||||
import { Col } from '../layout/col'
|
import { Col } from '../layout/col'
|
||||||
import { Row } from '../layout/row'
|
import { Row } from '../layout/row'
|
||||||
import { PortfolioValueGraph } from './portfolio-value-graph'
|
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(
|
export const PortfolioValueSection = memo(
|
||||||
function PortfolioValueSection(props: {
|
function PortfolioValueSection(props: { userId: string }) {
|
||||||
userId: string
|
const { userId } = props
|
||||||
disableSelector?: boolean
|
|
||||||
}) {
|
|
||||||
const { disableSelector, userId } = props
|
|
||||||
|
|
||||||
const [portfolioPeriod, setPortfolioPeriod] = useState<Period>('weekly')
|
const [portfolioPeriod, setPortfolioPeriod] = useState<Period>('weekly')
|
||||||
const [portfolioHistory, setUsersPortfolioHistory] = useState<
|
const [portfolioHistory, setUsersPortfolioHistory] = useState<
|
||||||
PortfolioMetrics[]
|
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) {
|
if (portfolioHistory.length === 0 || !lastPortfolioMetrics) {
|
||||||
return <></>
|
return <></>
|
||||||
}
|
}
|
||||||
|
|
||||||
// PATCH: If portfolio history started on June 1st, then we label it as "Since June"
|
const { balance, investmentValue } = lastPortfolioMetrics
|
||||||
// instead of "All time"
|
const totalValue = balance + investmentValue
|
||||||
const allTimeLabel =
|
|
||||||
lastPortfolioMetrics.timestamp < Date.parse('2022-06-20T00:00:00.000Z')
|
|
||||||
? 'Since June'
|
|
||||||
: 'All time'
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<Row className="gap-8">
|
<Row className="gap-8">
|
||||||
<div className="mb-4 w-full">
|
<Col className="flex-1 justify-center">
|
||||||
<Col
|
<div className="text-sm text-gray-500">Portfolio value</div>
|
||||||
className={disableSelector ? 'items-center justify-center' : ''}
|
<div className="text-lg">{formatMoney(totalValue)}</div>
|
||||||
>
|
</Col>
|
||||||
<div className="text-sm text-gray-500">Portfolio value</div>
|
<select
|
||||||
<div className="text-lg">
|
className="select select-bordered self-start"
|
||||||
{formatMoney(
|
value={portfolioPeriod}
|
||||||
lastPortfolioMetrics.balance +
|
onChange={(e) => {
|
||||||
lastPortfolioMetrics.investmentValue
|
setPortfolioPeriod(e.target.value as Period)
|
||||||
)}
|
}}
|
||||||
</div>
|
>
|
||||||
</Col>
|
<option value="allTime">All time</option>
|
||||||
</div>
|
<option value="weekly">Last 7d</option>
|
||||||
{!disableSelector && (
|
<option value="daily">Last 24h</option>
|
||||||
<select
|
</select>
|
||||||
className="select select-bordered self-start"
|
|
||||||
value={portfolioPeriod}
|
|
||||||
onChange={(e) => {
|
|
||||||
setPortfolioPeriod(e.target.value as Period)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="allTime">{allTimeLabel}</option>
|
|
||||||
<option value="weekly">Last 7d</option>
|
|
||||||
{/* Note: 'daily' seems to be broken? */}
|
|
||||||
{/* <option value="daily">Last 24h</option> */}
|
|
||||||
</select>
|
|
||||||
)}
|
|
||||||
</Row>
|
</Row>
|
||||||
<PortfolioValueGraph
|
<PortfolioValueGraph
|
||||||
portfolioHistory={portfolioHistory}
|
portfolioHistory={portfolioHistory}
|
||||||
period={portfolioPeriod}
|
includeTime={portfolioPeriod == 'daily'}
|
||||||
/>
|
/>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
|
@ -252,11 +252,12 @@ export async function unfollow(userId: string, unfollowedUserId: string) {
|
||||||
await deleteDoc(followDoc)
|
await deleteDoc(followDoc)
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getPortfolioHistory(userId: string) {
|
export async function getPortfolioHistory(userId: string, since: number) {
|
||||||
return getValues<PortfolioMetrics>(
|
return getValues<PortfolioMetrics>(
|
||||||
query(
|
query(
|
||||||
collectionGroup(db, 'portfolioHistory'),
|
collectionGroup(db, 'portfolioHistory'),
|
||||||
where('userId', '==', userId),
|
where('userId', '==', userId),
|
||||||
|
where('timestamp', '>=', since),
|
||||||
orderBy('timestamp', 'asc')
|
orderBy('timestamp', 'asc')
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user