diff --git a/web/components/contract-prob-graph.tsx b/web/components/contract-prob-graph.tsx index 478d7e89..be59d55a 100644 --- a/web/components/contract-prob-graph.tsx +++ b/web/components/contract-prob-graph.tsx @@ -1,5 +1,6 @@ import { DatumValue } from '@nivo/core' import { ResponsiveLine } from '@nivo/line' +import dayjs from 'dayjs' import { useBets } from '../hooks/use-bets' import { Contract } from '../lib/firebase/contracts' @@ -13,10 +14,18 @@ export function ContractProbGraph(props: { contract: Contract }) { const seedProb = seedAmounts.YES ** 2 / (seedAmounts.YES ** 2 + seedAmounts.NO ** 2) + const times = [ + contract.createdTime, + ...bets.map((bet) => bet.createdTime), + ].map((time) => new Date(time)) const probs = [seedProb, ...bets.map((bet) => bet.probAfter)] - const points = probs.map((prob, i) => ({ x: i + 1, y: prob * 100 })) + const points = probs.map((prob, i) => ({ x: times[i], y: prob * 100 })) const data = [{ id: 'Yes', data: points, color: '#11b981' }] + const lessThanAWeek = + times[times.length - 1].getTime() - times[0].getTime() < + 1000 * 60 * 60 * 24 * 7 + const tickValues = [0, 25, 50, 75, 100] return ( @@ -30,17 +39,18 @@ export function ContractProbGraph(props: { contract: Contract }) { tickValues, format: formatPercent, }} + xScale={{ type: 'time' }} + xFormat={(d) => formatTime(+d.valueOf(), lessThanAWeek)} axisBottom={{ - tickValues: [], + format: (time) => formatTime(+time, lessThanAWeek), }} - enableGridX={false} colors={{ datum: 'color' }} - pointSize={12} - pointBorderWidth={2} + pointSize={10} + pointBorderWidth={1} pointBorderColor="#fff" enableSlices="x" enableArea - margin={{ top: 20, right: 10, bottom: 20, left: 40 }} + margin={{ top: 20, right: 22, bottom: 22, left: 40 }} /> ) @@ -49,3 +59,13 @@ export function ContractProbGraph(props: { contract: Contract }) { function formatPercent(y: DatumValue) { return `${Math.round(+y.toString())}%` } + +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') +} diff --git a/web/package-lock.json b/web/package-lock.json index 477d760a..27c389f4 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -12,6 +12,7 @@ "@nivo/line": "0.74.0", "clsx": "1.1.1", "daisyui": "1.16.4", + "dayjs": "^1.10.7", "firebase": "9.6.0", "next": "12.0.4", "react": "17.0.2", @@ -3420,6 +3421,11 @@ "node": ">= 6" } }, + "node_modules/dayjs": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz", + "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==" + }, "node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -10527,6 +10533,11 @@ "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz", "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==" }, + "dayjs": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz", + "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==" + }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", diff --git a/web/package.json b/web/package.json index c74791cd..0ab296b3 100644 --- a/web/package.json +++ b/web/package.json @@ -15,6 +15,7 @@ "@nivo/line": "0.74.0", "clsx": "1.1.1", "daisyui": "1.16.4", + "dayjs": "1.10.7", "firebase": "9.6.0", "next": "12.0.4", "react": "17.0.2",