From 4ed62fd5d79f1a32c37e576c0808cdf28e50e68a Mon Sep 17 00:00:00 2001 From: ingawei Date: Mon, 26 Sep 2022 14:35:52 -0700 Subject: [PATCH] cleaning up, no mapping in graph tooltip --- web/components/bets-list.tsx | 2 - web/components/contract/contracts-grid.tsx | 8 -- .../portfolio/portfolio-value-graph.tsx | 132 ++++++++---------- .../portfolio/portfolio-value-section.tsx | 12 +- web/components/user-page.tsx | 12 +- 5 files changed, 71 insertions(+), 95 deletions(-) diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx index 816af4d5..5b97e35a 100644 --- a/web/components/bets-list.tsx +++ b/web/components/bets-list.tsx @@ -155,8 +155,6 @@ export function BetsList(props: { user: User }) { (c) => contractsMetrics[c.id].netPayout ) - // const totalPnl = user.profitCached.allTime - // const totalProfitPercent = (totalPnl / user.totalDeposits) * 100 const investedProfitPercent = ((currentBetsValue - currentInvested) / (currentInvested + 0.1)) * 100 diff --git a/web/components/contract/contracts-grid.tsx b/web/components/contract/contracts-grid.tsx index f229c8bf..7870667a 100644 --- a/web/components/contract/contracts-grid.tsx +++ b/web/components/contract/contracts-grid.tsx @@ -55,13 +55,6 @@ export function ContractsGrid(props: { } if (contracts.length === 0) { - // if (profile) { - // return ( - //

- // This creator does not yet have any markets. - //

- // ) - // } else { return (

No markets found. Why not{' '} @@ -70,7 +63,6 @@ export function ContractsGrid(props: {

) - // } } return ( diff --git a/web/components/portfolio/portfolio-value-graph.tsx b/web/components/portfolio/portfolio-value-graph.tsx index f8622117..6ed5d195 100644 --- a/web/components/portfolio/portfolio-value-graph.tsx +++ b/web/components/portfolio/portfolio-value-graph.tsx @@ -1,5 +1,6 @@ import { ResponsiveLine } from '@nivo/line' import { PortfolioMetrics } from 'common/user' +import { filterDefined } from 'common/util/array' import { formatMoney } from 'common/util/format' import dayjs from 'dayjs' import { last } from 'lodash' @@ -10,103 +11,69 @@ import { Col } from '../layout/col' export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: { portfolioHistory: PortfolioMetrics[] mode: 'value' | 'profit' - setGraphDisplayNumber: (arg0: number | string | null) => void + handleGraphDisplayChange: (arg0: string | number | null) => void height?: number }) { - const { portfolioHistory, height, mode, setGraphDisplayNumber } = props + const { portfolioHistory, height, mode, handleGraphDisplayChange } = props const { width } = useWindowSize() - function getPoints(line: 'value' | 'posProfit' | 'negProfit') { - const points = portfolioHistory.map((p) => { - const { timestamp, balance, investmentValue, totalDeposits } = p - const value = balance + investmentValue + const valuePoints = getPoints('value', portfolioHistory) + const posProfitPoints = getPoints('posProfit', portfolioHistory) + const negProfitPoints = getPoints('negProfit', portfolioHistory) - const profit = value - totalDeposits - let posProfit = null - let negProfit = null - if (profit < 0) { - negProfit = profit - } else { - posProfit = profit - } - - return { - x: new Date(timestamp), - y: - line === 'value' - ? value - : line === 'posProfit' - ? posProfit - : negProfit, - } - }) - return points - } + const valuePointsY = valuePoints.map((p) => p.y) + const posProfitPointsY = posProfitPoints.map((p) => p.y) + const negProfitPointsY = negProfitPoints.map((p) => p.y) let data if (mode === 'value') { - data = [{ id: 'value', data: getPoints('value'), color: '#4f46e5' }] + data = [{ id: 'value', data: valuePoints, color: '#4f46e5' }] } else { data = [ { id: 'negProfit', - data: getPoints('negProfit'), + data: negProfitPoints, color: '#dc2626', }, { id: 'posProfit', - data: getPoints('posProfit'), + data: posProfitPoints, color: '#14b8a6', }, ] } - const firstPoints = data[0].data const numYTickValues = 2 const endDate = last(data[0].data)?.x - const firstPointsY = firstPoints - .map((p) => p.y) - .filter((y) => { - return y !== null - }) - const yMin = mode === 'value' - ? Math.min(...firstPointsY) + ? Math.min(...filterDefined(valuePointsY)) : Math.min( - ...firstPointsY, - ...data[1].data - .filter((p) => { - return p.y !== null - }) - .map((p) => p.y) + ...filterDefined(negProfitPointsY), + ...filterDefined(posProfitPointsY) ) const yMax = mode === 'value' - ? Math.max(...firstPointsY) + ? Math.max(...filterDefined(valuePointsY)) : Math.max( - ...firstPointsY, - ...data[1].data - .filter((p) => { - return p.y !== null - }) - .map((p) => p.y) + ...filterDefined(negProfitPointsY), + ...filterDefined(posProfitPointsY) ) return (
= 800 ? 200 : 100) }} - onMouseLeave={() => setGraphDisplayNumber(null)} + onMouseLeave={() => handleGraphDisplayChange(null)} > 100 ? 0 : 6} + pointSize={valuePoints.length > 100 ? 0 : 6} axisLeft={{ tickValues: numYTickValues, format: '.3s', @@ -136,24 +103,23 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: { enableArea={true} areaOpacity={0.1} sliceTooltip={({ slice }) => { - slice.points.map((point) => - setGraphDisplayNumber(point.data.yFormatted) - ) + handleGraphDisplayChange(slice.points[0].data.yFormatted) return (
- {slice.points.map((point) => ( -
- -
{dayjs(point.data.xFormatted).format('MMM/D/YY')}
-
- {dayjs(point.data.xFormatted).format('h:mm A')} -
- -
- ))} +
+ +
+ {dayjs(slice.points[0].data.xFormatted).format('MMM/D/YY')} +
+
+ {dayjs(slice.points[0].data.xFormatted).format('h:mm A')} +
+ +
+ {/* ))} */}
) }} @@ -161,3 +127,29 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
) }) + +export function getPoints( + line: 'value' | 'posProfit' | 'negProfit', + portfolioHistory: PortfolioMetrics[] +) { + const points = portfolioHistory.map((p) => { + const { timestamp, balance, investmentValue, totalDeposits } = p + const value = balance + investmentValue + + const profit = value - totalDeposits + let posProfit = null + let negProfit = null + if (profit < 0) { + negProfit = profit + } else { + posProfit = profit + } + + return { + x: new Date(timestamp), + y: + line === 'value' ? value : line === 'posProfit' ? posProfit : negProfit, + } + }) + return points +} diff --git a/web/components/portfolio/portfolio-value-section.tsx b/web/components/portfolio/portfolio-value-section.tsx index a23b3c83..ec364c8d 100644 --- a/web/components/portfolio/portfolio-value-section.tsx +++ b/web/components/portfolio/portfolio-value-section.tsx @@ -16,8 +16,10 @@ export const PortfolioValueSection = memo( const [portfolioPeriod, setPortfolioPeriod] = useState('weekly') const portfolioHistory = usePortfolioHistory(userId, portfolioPeriod) const [graphMode, setGraphMode] = useState<'profit' | 'value'>('value') - const [graphDisplayNumber, setGraphDisplayNumber] = useState(null) - const handleGraphDisplayChange = (num) => { + const [graphDisplayNumber, setGraphDisplayNumber] = useState< + number | string | null + >(null) + const handleGraphDisplayChange = (num: string | number | null) => { setGraphDisplayNumber(num) } @@ -70,7 +72,7 @@ export const PortfolioValueSection = memo( className={clsx( graphMode === 'profit' ? graphDisplayNumber - ? graphDisplayNumber[2] === '-' + ? graphDisplayNumber.toString().includes('-') ? 'text-red-600' : 'text-teal-500' : totalProfit > 0 @@ -90,13 +92,11 @@ export const PortfolioValueSection = memo( - {/* */} { - // const claimedMana = router.query['claimed-mana'] === 'yes' + const claimedMana = router.query['claimed-mana'] === 'yes' + setShowConfetti(claimedMana) const query = { ...router.query } if (query.claimedMana || query.show) { delete query['claimed-mana'] @@ -218,14 +219,6 @@ export function UserPage(props: { user: User }) { ), }, - // { - // title: 'Stats', - // content: ( - // - // - // - // ), - // }, ]} /> @@ -263,6 +256,7 @@ export function ProfilePrivateStats(props: { const showLoansModel = router.query['show'] === 'loans' setShowLoansModal(showLoansModel) + // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return ( <>