diff --git a/web/components/charts/contract/binary.tsx b/web/components/charts/contract/binary.tsx index d0843dde..f03ba0b0 100644 --- a/web/components/charts/contract/binary.tsx +++ b/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(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 (
diff --git a/web/components/charts/contract/choice.tsx b/web/components/charts/contract/choice.tsx index 444c0273..416b3557 100644 --- a/web/components/charts/contract/choice.tsx +++ b/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), - [contract, bets] + () => getMultiChartData(contract, bets, start, end, 6), + [contract, bets, start, end] ) const isMobile = useIsMobile(800) const containerRef = useRef(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 (
diff --git a/web/components/charts/contract/pseudo-numeric.tsx b/web/components/charts/contract/pseudo-numeric.tsx index b81d2808..6b9a436a 100644 --- a/web/components/charts/contract/pseudo-numeric.tsx +++ b/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(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 (