Update x scale on choice, binary, multinumeric graphs on bet

manifoldmarkets · Feb 27, 2025 · 360b306 · 360b306
1 parent 86d96e6
commit 360b306
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/web/components/charts/contract/binary.tsx b/web/components/charts/contract/binary.tsx
@@ -110,8 +110,9 @@ export const BinaryContractChart = (props: {
   const start = Math.min(first(betPoints)?.x ?? Infinity, contract.createdTime)
   const end = getEndDate(contract)
   const endP = getProbability(contract as BinaryContract)
+  const stringifiedBetPoints = JSON.stringify(betPoints)
 
-  const now = useMemo(() => Date.now(), [betPoints])
+  const now = useMemo(() => Date.now(), [stringifiedBetPoints, endP])
 
   const data = useMemo(() => {
     return [
@@ -140,6 +141,7 @@ export const BinaryContractChart = (props: {
       h={height}
       xScale={xScale}
       yScale={yScale}
+      rightmostDate={rightmostDate}
       zoomParams={zoomParams}
       showZoomer={showZoomer}
       yKind="percent"
@@ -253,8 +255,8 @@ export const MultiBinaryChart = (props: {
   )
 
   const [bottom, top] = contract.answers.map(getAnswerColor)
-
-  const now = useMemo(() => Date.now(), [betPoints])
+  const stringifiedBetPoints = JSON.stringify(betPoints)
+  const now = useMemo(() => Date.now(), [stringifiedBetPoints, endP])
 
   const data = useMemo(() => {
     return [{ x: start, y: 0.5 }, ...betPoints, { x: end ?? now, y: endP }]
@@ -280,6 +282,7 @@ export const MultiBinaryChart = (props: {
       h={height}
       xScale={xScale}
       yScale={yScale}
+      rightmostDate={rightmostDate}
       zoomParams={zoomParams}
       showZoomer={showZoomer}
       data={data}

diff --git a/web/components/charts/contract/choice.tsx b/web/components/charts/contract/choice.tsx
@@ -158,8 +158,14 @@ export const ChoiceContractChart = (props: {
   const start = contract.createdTime
   const end = getEndDate(contract)
   const answers = useChartAnswers(contract)
-
-  const now = useMemo(() => Date.now(), [multiPoints])
+  const stringifiedMultiPoints = JSON.stringify(multiPoints)
+  const rightestPointX = Math.max(
+    ...Object.values(multiPoints).map((p) => last(p)?.x ?? 0)
+  )
+  const now = useMemo(
+    () => Date.now(),
+    [stringifiedMultiPoints, rightestPointX]
+  )
 
   const data = useMemo(() => {
     const ret = {} as Record<
@@ -195,9 +201,6 @@ export const ChoiceContractChart = (props: {
     return ret
   }, [answers.length, multiPoints, start, end, now])
 
-  const rightestPointX = Math.max(
-    ...Object.values(multiPoints).map((p) => last(p)?.x ?? 0)
-  )
   const rightmostDate = getRightmostVisibleDate(end, rightestPointX, now)
   const chosenAnswerIds = buildArray(selectedAnswerIds, highlightAnswerId)
 
@@ -273,6 +276,7 @@ export const ChoiceContractChart = (props: {
       xScale={xScale}
       yScale={yScale}
       zoomParams={zoomParams}
+      rightmostDate={rightmostDate}
       showZoomer={showZoomer}
       data={graphedData}
       hoveringId={highlightAnswerId}

diff --git a/web/components/charts/contract/multi-numeric.tsx b/web/components/charts/contract/multi-numeric.tsx
@@ -101,7 +101,7 @@ export const MultiNumericContractChart = (props: {
     () => getBetPoints(contract, multiPoints),
     [stringifiedMultiPoints]
   )
-  const now = useMemo(() => Date.now(), [stringifiedMultiPoints])
+  const now = useMemo(() => Date.now(), [stringifiedMultiPoints, endP])
 
   const singlePointData = useMemo(
     () => [
@@ -124,6 +124,7 @@ export const MultiNumericContractChart = (props: {
       h={height}
       xScale={xScale}
       yScale={yScale}
+      rightmostDate={rightmostDate}
       negativeThreshold={min}
       zoomParams={zoomParams}
       showZoomer={showZoomer}

diff --git a/web/components/charts/generic-charts.tsx b/web/components/charts/generic-charts.tsx
@@ -400,6 +400,7 @@ export const MultiValueHistoryChart = <P extends HistoryPoint>(props: {
   chartPositions?: ChartPosition[]
   hoveredChartPosition?: ChartPosition | null
   setHoveredChartPosition?: (position: ChartPosition | null) => void
+  rightmostDate?: number
 }) => {
   const {
     data,
@@ -418,13 +419,14 @@ export const MultiValueHistoryChart = <P extends HistoryPoint>(props: {
     setHoveredChartPosition,
     hoveredChartPosition,
     yKind = 'percent',
+    rightmostDate,
   } = props
 
   useLayoutEffect(() => {
     if (props.xScale) {
       zoomParams?.setXScale(props.xScale)
     }
-  }, [w])
+  }, [w, rightmostDate])
 
   const xScale = zoomParams?.viewXScale ?? props.xScale
 
@@ -734,6 +736,7 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   areaClassName?: string
   noWatermark?: boolean
   className?: string
+  rightmostDate?: number
 }) => {
   const {
     contractId,
@@ -755,13 +758,14 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
     onGraphClick,
     areaClassName,
     noWatermark,
+    rightmostDate,
   } = props
 
   useLayoutEffect(() => {
     if (props.xScale) {
       zoomParams?.setXScale(props.xScale)
     }
-  }, [w])
+  }, [w, rightmostDate])
 
   const xScale = zoomParams?.viewXScale ?? props.xScale
 
@@ -992,6 +996,7 @@ export const SingleValueStackedHistoryChart = <P extends HistoryPoint>(props: {
   bottomColor: string
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  rightmostDate?: number
   zoomParams?: ZoomParams
   showZoomer?: boolean
   curve?: CurveFactory
@@ -1010,13 +1015,14 @@ export const SingleValueStackedHistoryChart = <P extends HistoryPoint>(props: {
     curve = curveStepAfter,
     yScale,
     zoomParams,
+    rightmostDate,
   } = props
 
   useLayoutEffect(() => {
     if (props.xScale) {
       zoomParams?.setXScale(props.xScale)
     }
-  }, [w])
+  }, [w, rightmostDate])
 
   const xScale = zoomParams?.viewXScale ?? props.xScale