Expose onMouseOver chart event to hook into from outside (#967)

web/components/charts/contract/binary.tsx

@@ -46,20 +46,20 @@ export const BinaryContractChart = (props: {
   contract: BinaryContract
   bets: Bet[]
   height?: number
+  onMouseOver?: (p: HistoryPoint<Bet> | undefined) => void
 }) => {
-  const { contract, bets } = props
+  const { contract, bets, onMouseOver } = props
   const [startDate, endDate] = getDateRange(contract)
   const startP = getInitialProbability(contract)
   const endP = getProbability(contract)
   const betPoints = useMemo(() => getBetPoints(bets), [bets])
-  const data = useMemo(
-    () => [
+  const data = useMemo(() => {
+    return [
       { x: startDate, y: startP },
       ...betPoints,
       { x: endDate ?? new Date(Date.now() + DAY_MS), y: endP },
-    ],
-    [startDate, startP, endDate, endP, betPoints]
-  )
+    ]
+  }, [startDate, startP, endDate, endP, betPoints])
 
   const rightmostDate = getRightmostVisibleDate(
     endDate,
@@ -84,6 +84,7 @@ export const BinaryContractChart = (props: {
           yScale={yScale}
           data={data}
           color="#11b981"
+          onMouseOver={onMouseOver}
           Tooltip={BinaryChartTooltip}
           pct
         />

web/components/charts/contract/choice.tsx

@@ -125,8 +125,9 @@ export const ChoiceContractChart = (props: {
   contract: FreeResponseContract | MultipleChoiceContract
   bets: Bet[]
   height?: number
+  onMouseOver?: (p: MultiPoint<Bet> | undefined) => void
 }) => {
-  const { contract, bets } = props
+  const { contract, bets, onMouseOver } = props
   const [start, end] = getDateRange(contract)
   const answers = useMemo(
     () => getTrackedAnswers(contract, CATEGORY_COLORS.length),
@@ -194,6 +195,7 @@ export const ChoiceContractChart = (props: {
           yScale={yScale}
           data={data}
           colors={CATEGORY_COLORS}
+          onMouseOver={onMouseOver}
           Tooltip={ChoiceTooltip}
           pct
         />

web/components/charts/contract/numeric.tsx

@@ -33,8 +33,9 @@ const NumericChartTooltip = (props: TooltipProps<DistributionPoint>) => {
 export const NumericContractChart = (props: {
   contract: NumericContract
   height?: number
+  onMouseOver?: (p: DistributionPoint | undefined) => void
 }) => {
-  const { contract } = props
+  const { contract, onMouseOver } = props
   const { min, max } = contract
   const data = useMemo(() => getNumericChartData(contract), [contract])
   const isMobile = useIsMobile(800)
@@ -54,6 +55,7 @@ export const NumericContractChart = (props: {
           yScale={yScale}
           data={data}
           color={NUMERIC_GRAPH_COLOR}
+          onMouseOver={onMouseOver}
           Tooltip={NumericChartTooltip}
         />
       )}

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

@@ -58,8 +58,9 @@ export const PseudoNumericContractChart = (props: {
   contract: PseudoNumericContract
   bets: Bet[]
   height?: number
+  onMouseOver?: (p: HistoryPoint<Bet> | undefined) => void
 }) => {
-  const { contract, bets } = props
+  const { contract, bets, onMouseOver } = props
   const { min, max, isLogScale } = contract
   const [startDate, endDate] = getDateRange(contract)
   const scaleP = useMemo(
@@ -102,6 +103,7 @@ export const PseudoNumericContractChart = (props: {
           xScale={xScale}
           yScale={yScale}
           data={data}
+          onMouseOver={onMouseOver}
           Tooltip={PseudoNumericChartTooltip}
           color={NUMERIC_GRAPH_COLOR}
         />

web/components/charts/generic-charts.tsx

@@ -38,6 +38,7 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
   color: string
   xScale: ScaleContinuousNumeric<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<P>
 }) => {
   const { color, data, yScale, w, h, Tooltip } = props
@@ -71,12 +72,9 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
   const onMouseOver = useEvent((mouseX: number) => {
     const queryX = xScale.invert(mouseX)
     const item = data[xBisector.left(data, queryX) - 1]
-    if (item == null) {
-      // this can happen if you are on the very left or right edge of the chart,
-      // so your queryX is out of bounds
-      return
-    }
-    return { ...item, x: queryX }
+    const result = item ? { ...item, x: queryX } : undefined
+    props.onMouseOver?.(result)
+    return result
   })
 
   return (
@@ -108,6 +106,7 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
   colors: readonly string[]
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<P>
   pct?: boolean
 }) => {
@@ -156,12 +155,9 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
   const onMouseOver = useEvent((mouseX: number) => {
     const queryX = xScale.invert(mouseX)
     const item = data[xBisector.left(data, queryX) - 1]
-    if (item == null) {
-      // this can happen if you are on the very left or right edge of the chart,
-      // so your queryX is out of bounds
-      return
-    }
-    return { ...item, x: queryX }
+    const result = item ? { ...item, x: queryX } : undefined
+    props.onMouseOver?.(result)
+    return result
   })
 
   return (
@@ -196,10 +192,11 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   color: string
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<P>
   pct?: boolean
 }) => {
-  const { color, data, pct, yScale, w, h, Tooltip } = props
+  const { color, data, yScale, w, h, Tooltip, pct } = props
 
   const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
   const xScale = viewXScale ?? props.xScale
@@ -235,12 +232,9 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   const onMouseOver = useEvent((mouseX: number) => {
     const queryX = xScale.invert(mouseX)
     const item = data[xBisector.left(data, queryX) - 1]
-    if (item == null) {
-      // this can happen if you are on the very left or right edge of the chart,
-      // so your queryX is out of bounds
-      return
-    }
-    return { ...item, x: queryX }
+    const result = item ? { ...item, x: queryX } : undefined
+    props.onMouseOver?.(result)
+    return result
   })
 
   return (