Fix date memoization in charts (#972)

* Memoize on numbers, not dates

* Use numbers instead of dates to calculate visible range

web/components/charts/contract/binary.tsx

@@ -49,24 +49,24 @@ export const BinaryContractChart = (props: {
   onMouseOver?: (p: HistoryPoint<Bet> | undefined) => void
 }) => {
   const { contract, bets, onMouseOver } = props
-  const [startDate, endDate] = getDateRange(contract)
+  const [start, end] = getDateRange(contract)
   const startP = getInitialProbability(contract)
   const endP = getProbability(contract)
   const betPoints = useMemo(() => getBetPoints(bets), [bets])
   const data = useMemo(() => {
     return [
-      { x: startDate, y: startP },
+      { x: new Date(start), y: startP },
       ...betPoints,
-      { x: endDate ?? new Date(Date.now() + DAY_MS), y: endP },
+      { x: new Date(end ?? Date.now() + DAY_MS), y: endP },
     ]
-  }, [startDate, startP, endDate, endP, betPoints])
+  }, [start, startP, end, endP, betPoints])
 
   const rightmostDate = getRightmostVisibleDate(
-    endDate,
-    last(betPoints)?.x,
-    new Date(Date.now())
+    end,
+    last(betPoints)?.x?.getTime(),
+    Date.now()
   )
-  const visibleRange = [startDate, rightmostDate]
+  const visibleRange = [start, rightmostDate]
   const isMobile = useIsMobile(800)
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0

web/components/charts/contract/choice.tsx

@@ -136,10 +136,10 @@ export const ChoiceContractChart = (props: {
   const betPoints = useMemo(() => getBetPoints(answers, bets), [answers, bets])
   const data = useMemo(
     () => [
-      { x: start, y: answers.map((_) => 0) },
+      { x: new Date(start), y: answers.map((_) => 0) },
       ...betPoints,
       {
-        x: end ?? new Date(Date.now() + DAY_MS),
+        x: new Date(end ?? Date.now() + DAY_MS),
         y: answers.map((a) => getOutcomeProbability(contract, a.id)),
       },
     ],
@@ -147,8 +147,8 @@ export const ChoiceContractChart = (props: {
   )
   const rightmostDate = getRightmostVisibleDate(
     end,
-    last(betPoints)?.x,
-    new Date(Date.now())
+    last(betPoints)?.x?.getTime(),
+    Date.now()
   )
   const visibleRange = [start, rightmostDate]
   const isMobile = useIsMobile(800)

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

@@ -62,7 +62,7 @@ export const PseudoNumericContractChart = (props: {
 }) => {
   const { contract, bets, onMouseOver } = props
   const { min, max, isLogScale } = contract
-  const [startDate, endDate] = getDateRange(contract)
+  const [start, end] = getDateRange(contract)
   const scaleP = useMemo(
     () => getScaleP(min, max, isLogScale),
     [min, max, isLogScale]
@@ -72,18 +72,18 @@ export const PseudoNumericContractChart = (props: {
   const betPoints = useMemo(() => getBetPoints(bets, scaleP), [bets, scaleP])
   const data = useMemo(
     () => [
-      { x: startDate, y: startP },
+      { x: new Date(start), y: startP },
       ...betPoints,
-      { x: endDate ?? new Date(Date.now() + DAY_MS), y: endP },
+      { x: new Date(end ?? Date.now() + DAY_MS), y: endP },
     ],
-    [betPoints, startDate, startP, endDate, endP]
+    [betPoints, start, startP, end, endP]
   )
   const rightmostDate = getRightmostVisibleDate(
-    endDate,
-    last(betPoints)?.x,
-    new Date(Date.now())
+    end,
+    last(betPoints)?.x?.getTime(),
+    Date.now()
   )
-  const visibleRange = [startDate, rightmostDate]
+  const visibleRange = [start, rightmostDate]
   const isMobile = useIsMobile(800)
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0

web/components/charts/helpers.tsx

@@ -259,19 +259,19 @@ export const getDateRange = (contract: Contract) => {
   const { createdTime, closeTime, resolutionTime } = contract
   const isClosed = !!closeTime && Date.now() > closeTime
   const endDate = resolutionTime ?? (isClosed ? closeTime : null)
-  return [new Date(createdTime), endDate ? new Date(endDate) : null] as const
+  return [createdTime, endDate ?? null] as const
 }
 
 export const getRightmostVisibleDate = (
-  contractEnd: Date | null | undefined,
-  lastActivity: Date | null | undefined,
-  now: Date
+  contractEnd: number | null | undefined,
+  lastActivity: number | null | undefined,
+  now: number
 ) => {
   if (contractEnd != null) {
     return contractEnd
   } else if (lastActivity != null) {
     // client-DB clock divergence may cause last activity to be later than now
-    return new Date(Math.max(lastActivity.getTime(), now.getTime()))
+    return Math.max(lastActivity, now)
   } else {
     return now
   }