diff --git a/web/components/charts/contract/binary.tsx b/web/components/charts/contract/binary.tsx index f7ed406b..8cd4bcb4 100644 --- a/web/components/charts/contract/binary.tsx +++ b/web/components/charts/contract/binary.tsx @@ -1,12 +1,18 @@ import { useMemo, useRef } from 'react' -import { sortBy } from 'lodash' +import { last, sortBy } from 'lodash' import { scaleTime, scaleLinear } from 'd3' 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, MAX_DATE, getDateRange } from '../helpers' +import { + MARGIN_X, + MARGIN_Y, + MAX_DATE, + getDateRange, + getRightmostVisibleDate, +} from '../helpers' import { SingleValueHistoryChart } from '../generic-charts' import { useElementWidth } from 'web/hooks/use-element-width' @@ -40,7 +46,12 @@ export const BinaryContractChart = (props: { ], [contract, betPoints, contractStart, contractEnd] ) - const visibleRange = [contractStart, contractEnd ?? Date.now()] + const rightmostDate = getRightmostVisibleDate( + contractEnd, + last(betPoints)?.[0], + new Date(Date.now()) + ) + const visibleRange = [contractStart, rightmostDate] const isMobile = useIsMobile(800) const containerRef = useRef(null) const width = useElementWidth(containerRef) ?? 0 diff --git a/web/components/charts/contract/choice.tsx b/web/components/charts/contract/choice.tsx index 4b4fa34d..ce87c382 100644 --- a/web/components/charts/contract/choice.tsx +++ b/web/components/charts/contract/choice.tsx @@ -1,5 +1,5 @@ import { useMemo, useRef } from 'react' -import { sum, sortBy, groupBy } from 'lodash' +import { last, sum, sortBy, groupBy } from 'lodash' import { scaleTime, scaleLinear } from 'd3' import { Bet } from 'common/bet' @@ -7,7 +7,13 @@ 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, MAX_DATE, getDateRange } from '../helpers' +import { + MARGIN_X, + MARGIN_Y, + MAX_DATE, + getDateRange, + getRightmostVisibleDate, +} from '../helpers' import { MultiPoint, MultiValueHistoryChart } from '../generic-charts' import { useElementWidth } from 'web/hooks/use-element-width' @@ -143,8 +149,12 @@ export const ChoiceContractChart = (props: { ], [answers, contract, betPoints, contractStart, contractEnd] ) - const visibleRange = [contractStart, contractEnd ?? Date.now()] - + const rightmostDate = getRightmostVisibleDate( + contractEnd, + last(betPoints)?.[0], + new Date(Date.now()) + ) + const visibleRange = [contractStart, rightmostDate] const isMobile = useIsMobile(800) const containerRef = useRef(null) const width = useElementWidth(containerRef) ?? 0 diff --git a/web/components/charts/contract/pseudo-numeric.tsx b/web/components/charts/contract/pseudo-numeric.tsx index 9b67a169..8b0319f6 100644 --- a/web/components/charts/contract/pseudo-numeric.tsx +++ b/web/components/charts/contract/pseudo-numeric.tsx @@ -1,5 +1,5 @@ import { useMemo, useRef } from 'react' -import { sortBy } from 'lodash' +import { last, sortBy } from 'lodash' import { scaleTime, scaleLog, scaleLinear } from 'd3' import { Bet } from 'common/bet' @@ -7,7 +7,13 @@ 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, MAX_DATE, getDateRange } from '../helpers' +import { + MARGIN_X, + MARGIN_Y, + MAX_DATE, + getDateRange, + getRightmostVisibleDate, +} from '../helpers' import { SingleValueHistoryChart } from '../generic-charts' import { useElementWidth } from 'web/hooks/use-element-width' @@ -55,8 +61,12 @@ export const PseudoNumericContractChart = (props: { ], [contract, betPoints, contractStart, contractEnd] ) - const visibleRange = [contractStart, contractEnd ?? Date.now()] - + const rightmostDate = getRightmostVisibleDate( + contractEnd, + last(betPoints)?.[0], + new Date(Date.now()) + ) + const visibleRange = [contractStart, rightmostDate] const isMobile = useIsMobile(800) const containerRef = useRef(null) const width = useElementWidth(containerRef) ?? 0 diff --git a/web/components/charts/helpers.tsx b/web/components/charts/helpers.tsx index 20231bc9..658fcbc9 100644 --- a/web/components/charts/helpers.tsx +++ b/web/components/charts/helpers.tsx @@ -205,3 +205,18 @@ export const getDateRange = (contract: Contract) => { const endDate = resolutionTime ?? (isClosed ? closeTime : null) return [new Date(createdTime), endDate ? new Date(endDate) : null] as const } + +export const getRightmostVisibleDate = ( + contractEnd: Date | null | undefined, + lastActivity: Date | null | undefined, + now: Date +) => { + 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())) + } else { + return now + } +}