import { bisector } from 'd3' ; export const onMouseMove = ( props , state , actions ) => ( e ) => { e . preventDefault ( ) ; const { target } = e ; if ( target ! . getAttribute ( 'class' ) !== 'baselinechart-content-shield' ) { actions . setMouse ( { ... state . mouse , datum : null } ) ; return ; } const { data } = props ; const { x } = props . dataKeys ; const svgRect = e . target . getBoundingClientRect ( ) ; const coords = [ e . clientX - svgRect . left , e . clientY - svgRect . top ] ; const x0 = state . chart . x ?. invert ( coords [ 0 ] ) ; const bisectIdx = bisector ( ( d ) => d [ x ] ) . right ( props . data , x0 ) ; const rightDatum = data [ bisectIdx ] ; const leftDatum = data [ bisectIdx - 1 ] ; let datum ; if ( leftDatum && rightDatum ) { datum = Math . abs ( x0 ! - leftDatum [ x ] ) < Math . abs ( x0 ! - rightDatum [ x ] ) ? leftDatum : rightDatum ; } else if ( leftDatum ) { datum = leftDatum ; } else { datum = rightDatum ; } actions . setMouse ( { ... state . mouse , datum } ) ; if ( props . onMouseMove ) { props . onMouseMove ( e ) ; } } ; export const onMouseLeave = ( props , state , actions ) => ( e ) => { e . preventDefault ( ) ; const clientRect = e . target . getBoundingClientRect ( ) ; const outsideChartX = e . clientX < clientRect . x || e . clientX > clientRect . x + clientRect . width ; const outsideChartY = e . clientY < clientRect . y || e . clientY > clientRect . y + clientRect . height ; if ( outsideChartX || outsideChartY ) { actions . setMouse ( { ... state . mouse , datum : null } ) ; if ( props . onMouseLeave ) { props . onMouseLeave ( e ) ; } } } ; export const onTouchStart = ( props , state , actions ) => ( e ) => { e . preventDefault ( ) ; actions . setMouse ( { ... state . mouse , datum : null } ) ; if ( props . onMouseMove ) { props . onMouseMove ( e ) ; } } ;