From f2d19360aa1824921b5a0b68970b1474c4b82e47 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Wed, 15 Dec 2021 21:48:09 -0600
Subject: [PATCH] Improve chart's time axis to be over at least 8 hours, and
 extend up to now.

---
 web/components/contract-prob-graph.tsx | 27 +++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/web/components/contract-prob-graph.tsx b/web/components/contract-prob-graph.tsx
index 1f000142..8711fc81 100644
--- a/web/components/contract-prob-graph.tsx
+++ b/web/components/contract-prob-graph.tsx
@@ -20,6 +20,12 @@ export function ContractProbGraph(props: { contract: Contract }) {
     ...bets.map((bet) => bet.createdTime),
   ].map((time) => new Date(time))
   const probs = [seedProb, ...bets.map((bet) => bet.probAfter)]
+
+  // Add a fake datapoint in future so the line continues horizontally
+  // to the right.
+  times.push(dayjs().add(1, 'day').toDate())
+  probs.push(probs[probs.length - 1])
+
   const points = probs.map((prob, i) => ({ x: times[i], y: prob * 100 }))
   const data = [{ id: 'Yes', data: points, color: '#11b981' }]
 
@@ -27,25 +33,36 @@ export function ContractProbGraph(props: { contract: Contract }) {
     times[times.length - 1].getTime() - times[0].getTime() <
     1000 * 60 * 60 * 24 * 7
 
-  const tickValues = [0, 25, 50, 75, 100]
+  const yTickValues = [0, 25, 50, 75, 100]
 
   const { width } = useWindowSize()
 
+  const numXTickValues = !width || width < 800 ? 4 : 8
+  const now = dayjs()
+  const hoursAgo = now.subtract(8, 'hours')
+  const startDate = dayjs(times[0]).isBefore(hoursAgo)
+    ? times[0]
+    : hoursAgo.toDate()
+
   return (
     <div className="w-full" style={{ height: 400 }}>
       <ResponsiveLine
         data={data}
         yScale={{ min: 0, max: 100, type: 'linear' }}
         yFormat={formatPercent}
-        gridYValues={tickValues}
+        gridYValues={yTickValues}
         axisLeft={{
-          tickValues,
+          tickValues: yTickValues,
           format: formatPercent,
         }}
-        xScale={{ type: 'time' }}
+        xScale={{
+          type: 'time',
+          min: startDate,
+          max: now.toDate(),
+        }}
         xFormat={(d) => formatTime(+d.valueOf(), lessThanAWeek)}
         axisBottom={{
-          tickValues: !width || width < 800 ? 4 : 8,
+          tickValues: numXTickValues,
           format: (time) => formatTime(+time, lessThanAWeek),
         }}
         colors={{ datum: 'color' }}