Graph time of bets

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}
+        pointSize={10}
-        pointBorderWidth={2}
+        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 }}
       />
     </div>
   )
@@ -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')
+}

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",

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",