Fix fishy Date.now inconsistency bugs

web/components/charts/contract/binary.tsx

@@ -10,14 +10,19 @@ import { MARGIN_X, MARGIN_Y, getDateRange } from '../helpers'
 import { SingleValueHistoryChart } from '../generic-charts'
 import { useElementWidth } from 'web/hooks/use-element-width'
 
-const getChartData = (contract: BinaryContract, bets: Bet[]) => {
+const getChartData = (
+  contract: BinaryContract,
+  bets: Bet[],
+  start: Date,
+  end: Date
+) => {
   const sortedBets = sortBy(bets, (b) => b.createdTime)
   const startProb = getInitialProbability(contract)
   const endProb = getProbability(contract)
   return [
-    [new Date(contract.createdTime), startProb] as const,
+    [start, startProb] as const,
     ...sortedBets.map((b) => [new Date(b.createdTime), b.probAfter] as const),
-    [new Date(Date.now()), endProb] as const,
+    [end, endProb] as const,
   ]
 }
 
@@ -27,12 +32,16 @@ export const BinaryContractChart = (props: {
   height?: number
 }) => {
   const { contract, bets } = props
-  const data = useMemo(() => getChartData(contract, bets), [contract, bets])
+  const [start, end] = useMemo(() => getDateRange(contract), [contract])
+  const data = useMemo(
+    () => getChartData(contract, bets, start, end),
+    [contract, bets, start, end]
+  )
   const isMobile = useIsMobile(800)
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0
   const height = props.height ?? (isMobile ? 150 : 250)
-  const xScale = scaleTime(getDateRange(contract), [0, width - MARGIN_X])
+  const xScale = scaleTime([start, end], [0, width - MARGIN_X])
   const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
   return (
     <div ref={containerRef}>

web/components/charts/contract/choice.tsx

@@ -13,6 +13,8 @@ import { useElementWidth } from 'web/hooks/use-element-width'
 const getMultiChartData = (
   contract: FreeResponseContract | MultipleChoiceContract,
   bets: Bet[],
+  start: Date,
+  end: Date,
   topN: number
 ) => {
   const { answers, totalBets, outcomeType } = contract
@@ -57,10 +59,10 @@ const getMultiChartData = (
   }
 
   const allPoints: MultiPoint[] = [
-    [new Date(contract.createdTime), trackedAnswers.map((_) => 0)],
+    [start, trackedAnswers.map((_) => 0)],
     ...points,
     [
-      new Date(Date.now()),
+      end,
       trackedAnswers.map((answer) =>
         getOutcomeProbability(contract, answer.id)
       ),
@@ -78,15 +80,16 @@ export const ChoiceContractChart = (props: {
   height?: number
 }) => {
   const { contract, bets } = props
+  const [start, end] = useMemo(() => getDateRange(contract), [contract])
   const data = useMemo(
-    () => getMultiChartData(contract, bets, 6),
+    () => getMultiChartData(contract, bets, start, end, 6),
-    [contract, bets]
+    [contract, bets, start, end]
   )
   const isMobile = useIsMobile(800)
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0
   const height = props.height ?? (isMobile ? 150 : 250)
-  const xScale = scaleTime(getDateRange(contract), [0, width - MARGIN_X])
+  const xScale = scaleTime([start, end], [0, width - MARGIN_X])
   const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
   return (
     <div ref={containerRef}>

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

@@ -11,18 +11,23 @@ import { MARGIN_X, MARGIN_Y, getDateRange } from '../helpers'
 import { SingleValueHistoryChart } from '../generic-charts'
 import { useElementWidth } from 'web/hooks/use-element-width'
 
-const getChartData = (contract: PseudoNumericContract, bets: Bet[]) => {
+const getChartData = (
+  contract: PseudoNumericContract,
+  bets: Bet[],
+  start: Date,
+  end: Date
+) => {
   const { min, max } = contract
   const getY = (p: number) => p * (max - min) + min
   const sortedBets = sortBy(bets, (b) => b.createdTime)
   const startProb = getInitialProbability(contract)
   const endProb = getProbability(contract)
   return [
-    [new Date(contract.createdTime), getY(startProb)] as const,
+    [start, getY(startProb)] as const,
     ...sortedBets.map(
       (b) => [new Date(b.createdTime), getY(b.probAfter)] as const
     ),
-    [new Date(Date.now()), getY(endProb)] as const,
+    [end, getY(endProb)] as const,
   ]
 }
 
@@ -32,13 +37,17 @@ export const PseudoNumericContractChart = (props: {
   height?: number
 }) => {
   const { contract, bets } = props
-  const data = useMemo(() => getChartData(contract, bets), [contract, bets])
+  const [start, end] = useMemo(() => getDateRange(contract), [contract])
+  const data = useMemo(
+    () => getChartData(contract, bets, start, end),
+    [contract, bets, start, end]
+  )
   const isMobile = useIsMobile(800)
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0
   const height = props.height ?? (isMobile ? 150 : 250)
   const scaleType = contract.isLogScale ? scaleLog : scaleLinear
-  const xScale = scaleTime(getDateRange(contract), [0, width - MARGIN_X])
+  const xScale = scaleTime([start, end], [0, width - MARGIN_X])
   const yScale = scaleType([contract.min, contract.max], [height - MARGIN_Y, 0])
   return (
     <div ref={containerRef}>