Fix a couple small chart bugs (#960)

* Fix time clamping causing little visual glitch

* Fix tick formatting glitch

web/components/charts/contract/binary.tsx

@@ -5,11 +5,11 @@ import { scaleTime, scaleLinear } from 'd3-scale'
 import { Bet } from 'common/bet'
 import { getProbability, getInitialProbability } from 'common/calculate'
 import { BinaryContract } from 'common/contract'
+import { DAY_MS } from 'common/util/time'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
 import {
   MARGIN_X,
   MARGIN_Y,
-  MAX_DATE,
   getDateRange,
   getRightmostVisibleDate,
   formatDateInRange,
@@ -58,7 +58,7 @@ export const BinaryContractChart = (props: {
     () => [
       { x: startDate, y: startP },
       ...betPoints,
-      { x: endDate ?? MAX_DATE, y: endP },
+      { x: endDate ?? new Date(Date.now() + DAY_MS), y: endP },
     ],
     [startDate, startP, endDate, endP, betPoints]
   )
@@ -73,7 +73,7 @@ export const BinaryContractChart = (props: {
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0
   const height = props.height ?? (isMobile ? 250 : 350)
-  const xScale = scaleTime(visibleRange, [0, width - MARGIN_X]).clamp(true)
+  const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
   const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
 
   return (

web/components/charts/contract/choice.tsx

@@ -7,11 +7,11 @@ 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 { DAY_MS } from 'common/util/time'
 import {
   Legend,
   MARGIN_X,
   MARGIN_Y,
-  MAX_DATE,
   getDateRange,
   getRightmostVisibleDate,
   formatPct,
@@ -141,7 +141,7 @@ export const ChoiceContractChart = (props: {
       { x: start, y: answers.map((_) => 0) },
       ...betPoints,
       {
-        x: end ?? MAX_DATE,
+        x: end ?? new Date(Date.now() + DAY_MS),
         y: answers.map((a) => getOutcomeProbability(contract, a.id)),
       },
     ],
@@ -157,7 +157,7 @@ export const ChoiceContractChart = (props: {
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0
   const height = props.height ?? (isMobile ? 150 : 250)
-  const xScale = scaleTime(visibleRange, [0, width - MARGIN_X]).clamp(true)
+  const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
   const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
 
   const ChoiceTooltip = useMemo(

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

@@ -3,6 +3,7 @@ import { last, sortBy } from 'lodash'
 import { scaleTime, scaleLog, scaleLinear } from 'd3-scale'
 
 import { Bet } from 'common/bet'
+import { DAY_MS } from 'common/util/time'
 import { getInitialProbability, getProbability } from 'common/calculate'
 import { formatLargeNumber } from 'common/util/format'
 import { PseudoNumericContract } from 'common/contract'
@@ -11,7 +12,6 @@ import { useIsMobile } from 'web/hooks/use-is-mobile'
 import {
   MARGIN_X,
   MARGIN_Y,
-  MAX_DATE,
   getDateRange,
   getRightmostVisibleDate,
   formatDateInRange,
@@ -77,7 +77,7 @@ export const PseudoNumericContractChart = (props: {
     () => [
       { x: startDate, y: startP },
       ...betPoints,
-      { x: endDate ?? MAX_DATE, y: endP },
+      { x: endDate ?? new Date(Date.now() + DAY_MS), y: endP },
     ],
     [betPoints, startDate, startP, endDate, endP]
   )
@@ -91,7 +91,7 @@ export const PseudoNumericContractChart = (props: {
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0
   const height = props.height ?? (isMobile ? 150 : 250)
-  const xScale = scaleTime(visibleRange, [0, width - MARGIN_X]).clamp(true)
+  const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
   // clamp log scale to make sure zeroes go to the bottom
   const yScale = isLogScale
     ? scaleLog([Math.max(min, 1), max], [height - MARGIN_Y, 0]).clamp(true)

web/components/charts/generic-charts.tsx

@@ -21,21 +21,9 @@ import {
 } from './helpers'
 import { useEvent } from 'web/hooks/use-event'
 
-export type MultiPoint<T = never> = {
-  x: Date
-  y: number[]
-  datum?: T
-}
-export type HistoryPoint<T = never> = {
-  x: Date
-  y: number
-  datum?: T
-}
-export type DistributionPoint<T = never> = {
-  x: number
-  y: number
-  datum?: T
-}
+export type MultiPoint<T = never> = { x: Date; y: number[]; datum?: T }
+export type HistoryPoint<T = never> = { x: Date; y: number; datum?: T }
+export type DistributionPoint<T = never> = { x: number; y: number; datum?: T }
 
 const getTickValues = (min: number, max: number, n: number) => {
   const step = (max - min) / (n - 1)
@@ -143,7 +131,9 @@ export const MultiValueHistoryChart = <T,>(props: {
     const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5)
     const xAxis = axisBottom<Date>(xScale).ticks(w / 100)
     const yAxis = pct
-      ? axisLeft<number>(yScale).tickValues(pctTickValues).tickFormat(formatPct)
+      ? axisLeft<number>(yScale)
+          .tickValues(pctTickValues)
+          .tickFormat((n) => formatPct(n))
       : axisLeft<number>(yScale)
     return { xAxis, yAxis }
   }, [w, h, pct, xScale, yScale])
@@ -233,7 +223,9 @@ export const SingleValueHistoryChart = <T,>(props: {
     const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5)
     const xAxis = axisBottom<Date>(xScale).ticks(w / 100)
     const yAxis = pct
-      ? axisLeft<number>(yScale).tickValues(pctTickValues).tickFormat(formatPct)
+      ? axisLeft<number>(yScale)
+          .tickValues(pctTickValues)
+          .tickFormat((n) => formatPct(n))
       : axisLeft<number>(yScale)
     return { xAxis, yAxis }
   }, [w, h, pct, xScale, yScale])

web/components/charts/helpers.tsx

@@ -22,9 +22,6 @@ 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)