diff --git a/web/components/answers/answers-graph.tsx b/web/components/answers/answers-graph.tsx index 5bd928e8..d35132be 100644 --- a/web/components/answers/answers-graph.tsx +++ b/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 = dayjs(contract.createdTime).isBefore(hourAgo) - ? new Date(contract.createdTime) - : hourAgo.toDate() + const startDate = new Date(contract.createdTime) + const endDate = dayjs(startDate).add(1, 'hour').isAfter(latestTime) + ? latestTime.add(1, 'hours').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')) { diff --git a/web/components/contract/contract-prob-graph.tsx b/web/components/contract/contract-prob-graph.tsx index 693befbb..ab2393f0 100644 --- a/web/components/contract/contract-prob-graph.tsx +++ b/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 = dayjs(times[0]).isBefore(hoursAgo) - ? times[0] - : hoursAgo.toDate() + 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 // 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')) {