Make graph start from left side for new markets

web/components/answers/answers-graph.tsx

@@ -71,10 +71,11 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
   const yTickValues = [0, 25, 50, 75, 100]
 
   const numXTickValues = isLargeWidth ? 5 : 2
-  const hourAgo = latestTime.subtract(1, 'hours')
+  const startDate = new Date(contract.createdTime)
-  const startDate = dayjs(contract.createdTime).isBefore(hourAgo)
+  const endDate = dayjs(startDate).add(1, 'hour').isAfter(latestTime)
-    ? new Date(contract.createdTime)
+    ? latestTime.add(1, 'hours').toDate()
-    : hourAgo.toDate()
+    : latestTime.toDate()
+  const includeMinute = dayjs(endDate).diff(startDate, 'hours') < 2
 
   const multiYear = !dayjs(startDate).isSame(latestTime, 'year')
   const lessThanAWeek = dayjs(startDate).add(1, 'week').isAfter(latestTime)
@@ -96,14 +97,15 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
         xScale={{
           type: 'time',
           min: startDate,
-          max: latestTime.toDate(),
+          max: endDate,
         }}
         xFormat={(d) =>
           formatTime(+d.valueOf(), multiYear, lessThanAWeek, lessThanAWeek)
         }
         axisBottom={{
           tickValues: numXTickValues,
-          format: (time) => formatTime(+time, multiYear, lessThanAWeek, false),
+          format: (time) =>
+            formatTime(+time, multiYear, lessThanAWeek, includeMinute),
         }}
         colors={[
           '#fca5a5', // red-300
@@ -163,7 +165,11 @@ function formatTime(
 ) {
   const d = dayjs(time)
 
-  if (d.add(1, 'minute').isAfter(Date.now())) return 'Now'
+  if (
+    d.add(1, 'minute').isAfter(Date.now()) &&
+    d.subtract(1, 'minute').isBefore(Date.now())
+  )
+    return 'Now'
 
   let format: string
   if (d.isSame(Date.now(), 'day')) {

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

@@ -58,10 +58,11 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
   const { width } = useWindowSize()
 
   const numXTickValues = !width || width < 800 ? 2 : 5
-  const hoursAgo = latestTime.subtract(1, 'hours')
+  const startDate = times[0]
-  const startDate = dayjs(times[0]).isBefore(hoursAgo)
+  const endDate = dayjs(startDate).add(1, 'hour').isAfter(latestTime)
-    ? times[0]
+    ? latestTime.add(1, 'hours').toDate()
-    : hoursAgo.toDate()
+    : latestTime.toDate()
+  const includeMinute = dayjs(endDate).diff(startDate, 'hours') < 2
 
   // 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
@@ -133,14 +134,15 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
         xScale={{
           type: 'time',
           min: startDate,
-          max: latestTime.toDate(),
+          max: endDate,
         }}
         xFormat={(d) =>
           formatTime(+d.valueOf(), multiYear, lessThanAWeek, lessThanAWeek)
         }
         axisBottom={{
           tickValues: numXTickValues,
-          format: (time) => formatTime(+time, multiYear, lessThanAWeek, false),
+          format: (time) =>
+            formatTime(+time, multiYear, lessThanAWeek, includeMinute),
         }}
         colors={{ datum: 'color' }}
         curve="stepAfter"
@@ -183,7 +185,11 @@ function formatTime(
 ) {
   const d = dayjs(time)
 
-  if (d.add(1, 'minute').isAfter(Date.now())) return 'Now'
+  if (
+    d.add(1, 'minute').isAfter(Date.now()) &&
+    d.subtract(1, 'minute').isBefore(Date.now())
+  )
+    return 'Now'
 
   let format: string
   if (d.isSame(Date.now(), 'day')) {