manifold/web/components/contract-prob-graph.tsx

112 lines
3.2 KiB
TypeScript
Raw Normal View History

2021-12-13 01:10:28 +00:00
import { DatumValue } from '@nivo/core'
import { ResponsiveLine } from '@nivo/line'
2021-12-13 06:55:28 +00:00
import dayjs from 'dayjs'
import { Bet } from '../../common/bet'
2022-03-03 05:32:33 +00:00
import { getInitialProbability } from '../../common/calculate'
import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
import { useBetsWithoutAntes } from '../hooks/use-bets'
import { useWindowSize } from '../hooks/use-window-size'
2021-12-12 22:14:52 +00:00
2022-03-03 05:32:33 +00:00
export function ContractProbGraph(props: {
contract: FullContract<DPM | CPMM, Binary>
bets: Bet[]
}) {
2021-12-12 22:14:52 +00:00
const { contract } = props
2022-03-03 05:32:33 +00:00
const { resolutionTime, closeTime } = contract
2021-12-12 22:14:52 +00:00
const bets = useBetsWithoutAntes(contract, props.bets)
2021-12-12 22:14:52 +00:00
2022-03-03 05:32:33 +00:00
const startProb = getInitialProbability(contract)
2021-12-12 22:14:52 +00:00
const times = bets
? [contract.createdTime, ...bets.map((bet) => bet.createdTime)].map(
(time) => new Date(time)
)
: []
const probs = bets ? [startProb, ...bets.map((bet) => bet.probAfter)] : []
2022-02-08 05:43:35 +00:00
const isClosed = !!closeTime && Date.now() > closeTime
const latestTime = dayjs(
2022-02-08 05:43:35 +00:00
resolutionTime && isClosed
? Math.min(resolutionTime, closeTime)
2022-02-08 05:43:35 +00:00
: isClosed
? closeTime
: resolutionTime ?? Date.now()
)
2021-12-16 06:44:04 +00:00
2022-02-08 05:43:35 +00:00
if (resolutionTime || isClosed) {
times.push(latestTime.toDate())
probs.push(probs[probs.length - 1])
} else {
2021-12-16 06:44:04 +00:00
// Add a fake datapoint in future so the line continues horizontally
// to the right.
times.push(latestTime.add(1, 'month').toDate())
2021-12-16 06:44:04 +00:00
probs.push(probs[probs.length - 1])
}
2021-12-13 06:55:28 +00:00
const points = probs.map((prob, i) => ({ x: times[i], y: prob * 100 }))
2021-12-13 01:10:28 +00:00
const data = [{ id: 'Yes', data: points, color: '#11b981' }]
const yTickValues = [0, 25, 50, 75, 100]
2021-12-13 01:10:28 +00:00
const { width } = useWindowSize()
2021-12-16 06:44:04 +00:00
const numXTickValues = !width || width < 800 ? 2 : 5
const hoursAgo = latestTime.subtract(5, 'hours')
const startDate = dayjs(times[0]).isBefore(hoursAgo)
? times[0]
: hoursAgo.toDate()
2021-12-16 06:44:04 +00:00
const lessThanAWeek = dayjs(startDate).add(1, 'week').isAfter(latestTime)
2021-12-13 01:10:28 +00:00
return (
2022-01-18 23:10:21 +00:00
<div
className="w-full"
style={{ height: !width || width >= 800 ? 400 : 250 }}
>
2021-12-13 01:10:28 +00:00
<ResponsiveLine
data={data}
yScale={{ min: 0, max: 100, type: 'linear' }}
yFormat={formatPercent}
gridYValues={yTickValues}
2021-12-13 01:10:28 +00:00
axisLeft={{
tickValues: yTickValues,
2021-12-13 01:10:28 +00:00
format: formatPercent,
}}
xScale={{
type: 'time',
min: startDate,
2021-12-16 06:44:04 +00:00
max: latestTime.toDate(),
}}
2021-12-13 06:55:28 +00:00
xFormat={(d) => formatTime(+d.valueOf(), lessThanAWeek)}
2021-12-13 01:10:28 +00:00
axisBottom={{
tickValues: numXTickValues,
2021-12-13 06:55:28 +00:00
format: (time) => formatTime(+time, lessThanAWeek),
2021-12-13 01:10:28 +00:00
}}
colors={{ datum: 'color' }}
pointSize={bets.length > 100 ? 0 : 10}
2021-12-13 06:55:28 +00:00
pointBorderWidth={1}
2021-12-13 01:10:28 +00:00
pointBorderColor="#fff"
enableSlices="x"
enableGridX={!!width && width >= 800}
2021-12-13 01:10:28 +00:00
enableArea
margin={{ top: 20, right: 28, bottom: 22, left: 40 }}
2021-12-13 01:10:28 +00:00
/>
</div>
)
}
2021-12-12 22:14:52 +00:00
2021-12-13 01:10:28 +00:00
function formatPercent(y: DatumValue) {
return `${Math.round(+y.toString())}%`
2021-12-12 22:14:52 +00:00
}
2021-12-13 06:55:28 +00:00
function formatTime(time: number, includeTime: boolean) {
const d = dayjs(time)
if (d.isSame(Date.now(), 'day')) return d.format('ha')
if (includeTime) return dayjs(time).format('MMM D, ha')
return dayjs(time).format('MMM D')
}