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')}
+
+
+
+ {/* ))} */}