2021-12-13 01:10:28 +00:00
|
|
|
import { DatumValue } from '@nivo/core'
|
2022-06-22 15:45:15 +00:00
|
|
|
import { ResponsiveLine, SliceTooltipProps } from '@nivo/line'
|
|
|
|
import { BasicTooltip } from '@nivo/tooltip'
|
2021-12-13 06:55:28 +00:00
|
|
|
import dayjs from 'dayjs'
|
2022-04-06 16:45:34 +00:00
|
|
|
import { memo } from 'react'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { Bet } from 'common/bet'
|
|
|
|
import { getInitialProbability } from 'common/calculate'
|
2022-07-02 19:37:59 +00:00
|
|
|
import { BinaryContract, PseudoNumericContract } from 'common/contract'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { useWindowSize } from 'web/hooks/use-window-size'
|
2022-07-02 19:37:59 +00:00
|
|
|
import { formatLargeNumber } from 'common/util/format'
|
2021-12-12 22:14:52 +00:00
|
|
|
|
2022-04-06 16:45:34 +00:00
|
|
|
export const ContractProbGraph = memo(function ContractProbGraph(props: {
|
2022-07-02 19:37:59 +00:00
|
|
|
contract: BinaryContract | PseudoNumericContract
|
2022-03-15 22:27:51 +00:00
|
|
|
bets: Bet[]
|
2022-03-24 17:03:08 +00:00
|
|
|
height?: number
|
2022-03-15 22:27:51 +00:00
|
|
|
}) {
|
2022-03-24 17:03:08 +00:00
|
|
|
const { contract, height } = props
|
2022-07-02 19:37:59 +00:00
|
|
|
const { resolutionTime, closeTime, outcomeType } = contract
|
|
|
|
const isBinary = outcomeType === 'BINARY'
|
|
|
|
const isLogScale = outcomeType === 'PSEUDO_NUMERIC' && contract.isLogScale
|
2021-12-12 22:14:52 +00:00
|
|
|
|
2022-06-10 17:23:27 +00:00
|
|
|
const bets = props.bets.filter((bet) => !bet.isAnte && !bet.isRedemption)
|
2021-12-12 22:14:52 +00:00
|
|
|
|
2022-03-15 22:27:51 +00:00
|
|
|
const startProb = getInitialProbability(contract)
|
|
|
|
|
|
|
|
const times = [
|
|
|
|
contract.createdTime,
|
|
|
|
...bets.map((bet) => bet.createdTime),
|
|
|
|
].map((time) => new Date(time))
|
2022-07-02 19:37:59 +00:00
|
|
|
|
2022-07-19 17:31:11 +00:00
|
|
|
const f: (p: number) => number = isBinary
|
|
|
|
? (p) => p
|
|
|
|
: isLogScale
|
|
|
|
? (p) => p * Math.log10(contract.max - contract.min + 1)
|
|
|
|
: (p) => p * (contract.max - contract.min) + contract.min
|
2022-07-02 19:37:59 +00:00
|
|
|
|
|
|
|
const probs = [startProb, ...bets.map((bet) => bet.probAfter)].map(f)
|
2021-12-16 03:48:09 +00:00
|
|
|
|
2022-02-08 05:43:35 +00:00
|
|
|
const isClosed = !!closeTime && Date.now() > closeTime
|
2022-02-08 04:48:36 +00:00
|
|
|
const latestTime = dayjs(
|
2022-02-08 05:43:35 +00:00
|
|
|
resolutionTime && isClosed
|
2022-02-08 04:48:36 +00:00
|
|
|
? Math.min(resolutionTime, closeTime)
|
2022-02-08 05:43:35 +00:00
|
|
|
: isClosed
|
|
|
|
? closeTime
|
|
|
|
: resolutionTime ?? Date.now()
|
2022-02-08 04:48:36 +00:00
|
|
|
)
|
2021-12-16 06:44:04 +00:00
|
|
|
|
2022-06-17 03:51:48 +00:00
|
|
|
// Add a fake datapoint so the line continues to the right
|
|
|
|
times.push(latestTime.toDate())
|
|
|
|
probs.push(probs[probs.length - 1])
|
2021-12-16 03:48:09 +00:00
|
|
|
|
2022-07-02 19:37:59 +00:00
|
|
|
const quartiles = [0, 25, 50, 75, 100]
|
|
|
|
|
|
|
|
const yTickValues = isBinary
|
|
|
|
? quartiles
|
|
|
|
: quartiles.map((x) => x / 100).map(f)
|
2021-12-13 01:10:28 +00:00
|
|
|
|
2021-12-14 06:56:36 +00:00
|
|
|
const { width } = useWindowSize()
|
|
|
|
|
2021-12-16 06:44:04 +00:00
|
|
|
const numXTickValues = !width || width < 800 ? 2 : 5
|
2022-08-26 06:08:16 +00:00
|
|
|
const startDate = times[0]
|
|
|
|
const endDate = dayjs(startDate).add(1, 'hour').isAfter(latestTime)
|
|
|
|
? latestTime.add(1, 'hours').toDate()
|
|
|
|
: latestTime.toDate()
|
|
|
|
const includeMinute = dayjs(endDate).diff(startDate, 'hours') < 2
|
2021-12-16 03:48:09 +00:00
|
|
|
|
2022-06-22 15:45:15 +00:00
|
|
|
// Minimum number of points for the graph to have. For smooth tooltip movement
|
|
|
|
// On first load, width is undefined, skip adding extra points to let page load faster
|
|
|
|
// This fn runs again once DOM is finished loading
|
|
|
|
const totalPoints = width ? (width > 800 ? 300 : 50) : 1
|
|
|
|
|
|
|
|
const timeStep: number = latestTime.diff(startDate, 'ms') / totalPoints
|
2022-07-02 19:37:59 +00:00
|
|
|
|
2022-06-22 15:45:15 +00:00
|
|
|
const points: { x: Date; y: number }[] = []
|
2022-07-02 19:37:59 +00:00
|
|
|
const s = isBinary ? 100 : 1
|
|
|
|
|
2022-06-23 17:13:13 +00:00
|
|
|
for (let i = 0; i < times.length - 1; i++) {
|
2022-07-19 17:31:11 +00:00
|
|
|
points[points.length] = { x: times[i], y: s * probs[i] }
|
2022-06-22 15:45:15 +00:00
|
|
|
const numPoints: number = Math.floor(
|
|
|
|
dayjs(times[i + 1]).diff(dayjs(times[i]), 'ms') / timeStep
|
|
|
|
)
|
|
|
|
if (numPoints > 1) {
|
|
|
|
const thisTimeStep: number =
|
|
|
|
dayjs(times[i + 1]).diff(dayjs(times[i]), 'ms') / numPoints
|
|
|
|
for (let n = 1; n < numPoints; n++) {
|
|
|
|
points[points.length] = {
|
|
|
|
x: dayjs(times[i])
|
|
|
|
.add(thisTimeStep * n, 'ms')
|
|
|
|
.toDate(),
|
2022-07-19 17:31:11 +00:00
|
|
|
y: s * probs[i],
|
2022-06-22 15:45:15 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-07-02 19:37:59 +00:00
|
|
|
const data = [
|
|
|
|
{ id: 'Yes', data: points, color: isBinary ? '#11b981' : '#5fa5f9' },
|
|
|
|
]
|
2022-06-22 15:45:15 +00:00
|
|
|
|
|
|
|
const multiYear = !dayjs(startDate).isSame(latestTime, 'year')
|
|
|
|
const lessThanAWeek = dayjs(startDate).add(8, 'day').isAfter(latestTime)
|
2021-12-16 06:44:04 +00:00
|
|
|
|
2022-07-02 19:37:59 +00:00
|
|
|
const formatter = isBinary
|
|
|
|
? formatPercent
|
2022-07-19 17:31:11 +00:00
|
|
|
: isLogScale
|
|
|
|
? (x: DatumValue) =>
|
|
|
|
formatLargeNumber(10 ** +x.valueOf() + contract.min - 1)
|
2022-07-02 19:37:59 +00:00
|
|
|
: (x: DatumValue) => formatLargeNumber(+x.valueOf())
|
|
|
|
|
2021-12-13 01:10:28 +00:00
|
|
|
return (
|
2022-01-18 23:10:21 +00:00
|
|
|
<div
|
2022-06-17 03:51:48 +00:00
|
|
|
className="w-full overflow-visible"
|
2022-04-06 16:45:34 +00:00
|
|
|
style={{ height: height ?? (!width || width >= 800 ? 350 : 250) }}
|
2022-01-18 23:10:21 +00:00
|
|
|
>
|
2021-12-13 01:10:28 +00:00
|
|
|
<ResponsiveLine
|
|
|
|
data={data}
|
2022-07-02 19:37:59 +00:00
|
|
|
yScale={
|
|
|
|
isBinary
|
|
|
|
? { min: 0, max: 100, type: 'linear' }
|
2022-07-19 17:31:11 +00:00
|
|
|
: isLogScale
|
|
|
|
? {
|
|
|
|
min: 0,
|
|
|
|
max: Math.log10(contract.max - contract.min + 1),
|
|
|
|
type: 'linear',
|
2022-07-02 19:37:59 +00:00
|
|
|
}
|
2022-07-19 17:31:11 +00:00
|
|
|
: { min: contract.min, max: contract.max, type: 'linear' }
|
2022-07-02 19:37:59 +00:00
|
|
|
}
|
|
|
|
yFormat={formatter}
|
2021-12-16 03:48:09 +00:00
|
|
|
gridYValues={yTickValues}
|
2021-12-13 01:10:28 +00:00
|
|
|
axisLeft={{
|
2021-12-16 03:48:09 +00:00
|
|
|
tickValues: yTickValues,
|
2022-07-02 19:37:59 +00:00
|
|
|
format: formatter,
|
2021-12-13 01:10:28 +00:00
|
|
|
}}
|
2021-12-16 03:48:09 +00:00
|
|
|
xScale={{
|
|
|
|
type: 'time',
|
|
|
|
min: startDate,
|
2022-08-26 06:08:16 +00:00
|
|
|
max: endDate,
|
2021-12-16 03:48:09 +00:00
|
|
|
}}
|
2022-06-22 15:45:15 +00:00
|
|
|
xFormat={(d) =>
|
|
|
|
formatTime(+d.valueOf(), multiYear, lessThanAWeek, lessThanAWeek)
|
|
|
|
}
|
2021-12-13 01:10:28 +00:00
|
|
|
axisBottom={{
|
2021-12-16 03:48:09 +00:00
|
|
|
tickValues: numXTickValues,
|
2022-08-26 06:08:16 +00:00
|
|
|
format: (time) =>
|
|
|
|
formatTime(+time, multiYear, lessThanAWeek, includeMinute),
|
2021-12-13 01:10:28 +00:00
|
|
|
}}
|
|
|
|
colors={{ datum: 'color' }}
|
2022-06-17 03:51:48 +00:00
|
|
|
curve="stepAfter"
|
2022-06-22 15:45:15 +00:00
|
|
|
enablePoints={false}
|
2021-12-13 06:55:28 +00:00
|
|
|
pointBorderWidth={1}
|
2021-12-13 01:10:28 +00:00
|
|
|
pointBorderColor="#fff"
|
|
|
|
enableSlices="x"
|
2021-12-14 06:56:36 +00:00
|
|
|
enableGridX={!!width && width >= 800}
|
2021-12-13 01:10:28 +00:00
|
|
|
enableArea
|
2022-07-19 23:20:03 +00:00
|
|
|
areaBaselineValue={isBinary || isLogScale ? 0 : contract.min}
|
2022-07-22 02:51:20 +00:00
|
|
|
margin={{ top: 20, right: 20, bottom: 25, left: 40 }}
|
2022-06-08 15:12:33 +00:00
|
|
|
animate={false}
|
2022-06-22 15:45:15 +00:00
|
|
|
sliceTooltip={SliceTooltip}
|
2021-12-13 01:10:28 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)
|
2022-04-06 16:45:34 +00:00
|
|
|
})
|
2021-12-12 22:14:52 +00:00
|
|
|
|
2022-06-22 15:45:15 +00:00
|
|
|
const SliceTooltip = ({ slice }: SliceTooltipProps) => {
|
|
|
|
return (
|
|
|
|
<BasicTooltip
|
|
|
|
id={slice.points.map((point) => [
|
|
|
|
<span key="date">
|
|
|
|
<strong>{point.data[`yFormatted`]}</strong> {point.data['xFormatted']}
|
|
|
|
</span>,
|
|
|
|
])}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
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
|
|
|
|
2022-06-22 15:45:15 +00:00
|
|
|
function formatTime(
|
|
|
|
time: number,
|
|
|
|
includeYear: boolean,
|
|
|
|
includeHour: boolean,
|
|
|
|
includeMinute: boolean
|
|
|
|
) {
|
2021-12-13 06:55:28 +00:00
|
|
|
const d = dayjs(time)
|
|
|
|
|
2022-08-26 06:08:16 +00:00
|
|
|
if (
|
|
|
|
d.add(1, 'minute').isAfter(Date.now()) &&
|
|
|
|
d.subtract(1, 'minute').isBefore(Date.now())
|
|
|
|
)
|
|
|
|
return 'Now'
|
2022-06-22 15:45:15 +00:00
|
|
|
|
|
|
|
let format: string
|
|
|
|
if (d.isSame(Date.now(), 'day')) {
|
|
|
|
format = '[Today]'
|
|
|
|
} else if (d.add(1, 'day').isSame(Date.now(), 'day')) {
|
|
|
|
format = '[Yesterday]'
|
|
|
|
} else {
|
|
|
|
format = 'MMM D'
|
|
|
|
}
|
|
|
|
|
|
|
|
if (includeMinute) {
|
|
|
|
format += ', h:mma'
|
|
|
|
} else if (includeHour) {
|
|
|
|
format += ', ha'
|
|
|
|
} else if (includeYear) {
|
|
|
|
format += ', YYYY'
|
|
|
|
}
|
|
|
|
|
|
|
|
return d.format(format)
|
2021-12-13 06:55:28 +00:00
|
|
|
}
|