Continue tweaking time selection handling to be perfect

web/components/charts/contract/binary.tsx

@@ -6,7 +6,7 @@ import { Bet } from 'common/bet'
 import { getInitialProbability, getProbability } from 'common/calculate'
 import { BinaryContract } from 'common/contract'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
-import { MARGIN_X, MARGIN_Y, getDateRange } from '../helpers'
+import { MARGIN_X, MARGIN_Y, MAX_DATE, getDateRange } from '../helpers'
 import { SingleValueHistoryChart } from '../generic-charts'
 import { useElementWidth } from 'web/hooks/use-element-width'
 
@@ -30,21 +30,22 @@ export const BinaryContractChart = (props: {
   height?: number
 }) => {
   const { contract, bets } = props
-  const [start, end] = getDateRange(contract)
+  const [contractStart, contractEnd] = getDateRange(contract)
   const betPoints = useMemo(() => getBetPoints(bets), [bets])
   const data = useMemo(
     () => [
-      getStartPoint(contract, start),
+      getStartPoint(contract, contractStart),
       ...betPoints,
-      getEndPoint(contract, end),
+      getEndPoint(contract, contractEnd ?? MAX_DATE),
     ],
-    [contract, betPoints, start, end]
+    [contract, betPoints, contractStart, contractEnd]
   )
+  const visibleRange = [contractStart, contractEnd ?? Date.now()]
   const isMobile = useIsMobile(800)
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0
   const height = props.height ?? (isMobile ? 150 : 250)
-  const xScale = scaleTime([start, end], [0, width - MARGIN_X])
+  const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
   const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
   return (
     <div ref={containerRef}>

web/components/charts/contract/choice.tsx

@@ -7,7 +7,7 @@ import { Answer } from 'common/answer'
 import { FreeResponseContract, MultipleChoiceContract } from 'common/contract'
 import { getOutcomeProbability } from 'common/calculate'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
-import { MARGIN_X, MARGIN_Y, getDateRange } from '../helpers'
+import { MARGIN_X, MARGIN_Y, MAX_DATE, getDateRange } from '../helpers'
 import { MultiPoint, MultiValueHistoryChart } from '../generic-charts'
 import { useElementWidth } from 'web/hooks/use-element-width'
 
@@ -129,7 +129,7 @@ export const ChoiceContractChart = (props: {
   height?: number
 }) => {
   const { contract, bets } = props
-  const [start, end] = getDateRange(contract)
+  const [contractStart, contractEnd] = getDateRange(contract)
   const answers = useMemo(
     () => getTrackedAnswers(contract, CATEGORY_COLORS.length),
     [contract]
@@ -137,17 +137,19 @@ export const ChoiceContractChart = (props: {
   const betPoints = useMemo(() => getBetPoints(answers, bets), [answers, bets])
   const data = useMemo(
     () => [
-      getStartPoint(answers, start),
+      getStartPoint(answers, contractStart),
       ...betPoints,
-      getEndPoint(answers, contract, end),
+      getEndPoint(answers, contract, contractEnd ?? MAX_DATE),
     ],
-    [answers, contract, betPoints, start, end]
+    [answers, contract, betPoints, contractStart, contractEnd]
   )
+  const visibleRange = [contractStart, contractEnd ?? Date.now()]
+
   const isMobile = useIsMobile(800)
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0
   const height = props.height ?? (isMobile ? 150 : 250)
-  const xScale = scaleTime([start, end], [0, width - MARGIN_X])
+  const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
   const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
   return (
     <div ref={containerRef}>

web/components/charts/contract/pseudo-numeric.tsx

@@ -7,7 +7,7 @@ import { getInitialProbability, getProbability } from 'common/calculate'
 import { PseudoNumericContract } from 'common/contract'
 import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
-import { MARGIN_X, MARGIN_Y, getDateRange } from '../helpers'
+import { MARGIN_X, MARGIN_Y, MAX_DATE, getDateRange } from '../helpers'
 import { SingleValueHistoryChart } from '../generic-charts'
 import { useElementWidth } from 'web/hooks/use-element-width'
 
@@ -42,24 +42,26 @@ export const PseudoNumericContractChart = (props: {
   height?: number
 }) => {
   const { contract, bets } = props
-  const [start, end] = getDateRange(contract)
+  const [contractStart, contractEnd] = getDateRange(contract)
   const betPoints = useMemo(
     () => getBetPoints(contract, bets),
     [contract, bets]
   )
   const data = useMemo(
     () => [
-      getStartPoint(contract, start),
+      getStartPoint(contract, contractStart),
       ...betPoints,
-      getEndPoint(contract, end),
+      getEndPoint(contract, contractEnd ?? MAX_DATE),
     ],
-    [contract, betPoints, start, end]
+    [contract, betPoints, contractStart, contractEnd]
   )
+  const visibleRange = [contractStart, contractEnd ?? Date.now()]
+
   const isMobile = useIsMobile(800)
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0
   const height = props.height ?? (isMobile ? 150 : 250)
-  const xScale = scaleTime([start, end], [0, width - MARGIN_X])
+  const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
   const yScale = contract.isLogScale
     ? scaleLog(
         [Math.max(contract.min, 1), contract.max],

web/components/charts/helpers.tsx

@@ -18,6 +18,9 @@ export const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
 export const MARGIN_X = MARGIN.right + MARGIN.left
 export const MARGIN_Y = MARGIN.top + MARGIN.bottom
 
+export const MAX_TIMESTAMP = 8640000000000000
+export const MAX_DATE = new Date(MAX_TIMESTAMP)
+
 export const XAxis = <X,>(props: { w: number; h: number; axis: Axis<X> }) => {
   const { h, axis } = props
   const axisRef = useRef<SVGGElement>(null)
@@ -198,8 +201,7 @@ export const ChartTooltip = (
 
 export const getDateRange = (contract: Contract) => {
   const { createdTime, closeTime, resolutionTime } = contract
-  const now = Date.now()
+  const isClosed = !!closeTime && Date.now() > closeTime
-  const isClosed = !!closeTime && now > closeTime
+  const endDate = resolutionTime ?? (isClosed ? closeTime : null)
-  const endDate = resolutionTime ?? (isClosed ? closeTime : now)
+  return [new Date(createdTime), endDate ? new Date(endDate) : null] as const
-  return [new Date(createdTime), new Date(endDate)] as const
 }