How to use @vx/event - 10 common examples

export default function findClosestDatum({ data, getX, xScale, event, marginLeft = 0 }) {
  if (!event || !event.target || !event.target.ownerSVGElement) return null;
  const bisect = bisector(getX).left;

  // if the g element has a transform we need to be in g coords not svg coords
  const svgCoords = localPoint(event.target.ownerSVGElement, event);
  const mouseX = svgCoords.x - marginLeft;

  const isOrdinalScale = typeof xScale.invert !== 'function';
  let d;
  if (isOrdinalScale) {
    // Ordinal scales don't have an invert function so we do it maually
    const xDomain = xScale.domain();
    const scaledXValues = xDomain.map(val => xScale(val));
    const index = d3BisectLeft(scaledXValues, mouseX);
    const d0 = data[index - 1];
    const d1 = data[index];
    d = d0 || d1;
  } else {
    const dataX = xScale.invert(mouseX);
    const index = bisect(data, dataX, 0);
    const d0 = data[index - 1];

handleTooltip({ event, data, xStock, xScale, yScale }) {
    const { showTooltip } = this.props;
    const { x } = localPoint(event);
    const x0 = xScale.invert(x);
    const index = bisectDate(data, x0, 1);
    const d0 = data[index - 1];
    const d1 = data[index];
    let d = d0;
    if (d1 && d1.date) {
      d = x0 - xStock(d0.date) > xStock(d1.date) - x0 ? d1 : d0;
    }
    showTooltip({
      tooltipData: d,
      tooltipLeft: x,
      tooltipTop: yScale(d.close)
    });
  }
  render() {

handleMouseMove({ event, datum, data, ...rest }) {
    if (this.tooltipTimeout) clearTimeout(this.tooltipTimeout);
    let coords = { x: 0, y: 0 };
    if (event && event.target && event.target.ownerSVGElement) {
      coords = localPoint(event.target.ownerSVGElement, event);
    }

    this.props.showTooltip({
      tooltipLeft: coords.x + 10,
      tooltipTop: coords.y + 10,
      tooltipData: {
        event,
        datum,
        data,
        ...rest,
      },
    });
  }

dragStart(event) {
    const { onDragStart, resetOnStart } = this.props;
    const { dx, dy } = this.state;
    const point = localPoint(event);
    const nextState = {
      ...this.state,
      isDragging: true,
      dx: resetOnStart ? 0 : dx,
      dy: resetOnStart ? 0 : dy,
      x: resetOnStart ? point.x : -dx + point.x,
      y: resetOnStart ? point.y : -dy + point.y,
    };
    if (onDragStart) onDragStart({ ...nextState, event });
    this.setState(() => nextState);
  }

handleTooltip ({ event, touchData, xStock, xScale, yScale, bisectDate }) {
    const { showTooltip } = this.props
    const { x } = localPoint(event)
    const x0 = xScale.invert(x)
    const index = bisectDate(touchData, x0, 1)
    const d0 = touchData[index - 1]
    const d1 = touchData[index]
    let d = d0
    if (d1 && d1[0]) {
      d = x0 - xStock(d0) > xStock(d1) - x0 ? d1 : d0
    }
    showTooltip({
      tooltipData: d,
      tooltipLeft: x,
      tooltipTop: yScale(d[1])
    })
  }

handleTooltip({ event, xScale, yScale }) {
    const { showTooltip } = this.props;
    const { x } = localPoint(event);
    const x0 = xScale.invert(x);
    const index = bisectDate(stock, x0, 1);
    const d0 = stock[index - 1];
    const d1 = stock[index];
    let d = d0;
    if (d1 && d1.date) {
      d = x0 - xStock(d0.date) > xStock(d1.date) - x0 ? d1 : d0;
    }
    showTooltip({
      tooltipData: d,
      tooltipLeft: x,
      tooltipTop: yScale(d.close)
    });
  }
  render() {

zoomToPoint (event, zoomDirection) {
    const { zoomInValue, zoomOutValue } = this.props.zoomConfiguration
    const zoomValue = (zoomDirection === 'in') ? zoomInValue : zoomOutValue
    const point = localPoint(event)
    this.zoom.scale({ scaleX: zoomValue, scaleY: zoomValue, point })
  }

handleTooltip({ event, data, xStock, xScale, yScale }) {
    const { showTooltip } = this.props;
    const { x } = localPoint(event);
    const x0 = xScale.invert(x);
    const index = bisectDate(data, x0, 1);
    const d0 = data[index - 1];
    const d1 = data[index];
    let d = d0;
    if (d1 && d1.date) {
      d = x0 - xStock(d0.date) > xStock(d1.date) - x0 ? d1 : d0;
    }
    showTooltip({
      tooltipData: d,
      tooltipLeft: x,
      tooltipTop: d && yScale(d.close)
    });
  }
  render() {

({ x, y, isDragging }) => {
        const point = localPoint(event) || { x: 0, y: 0 };
        return isDragging
          ? {
              isDragging: true,
              dx: -((x || 0) - point.x),
              dy: -((y || 0) - point.y),
            }
          : null;
      },
      onDragMove &&

onMouseMove={data => event => {
              const { x: xPoint, y: yPoint } = localPoint(this.svg, event);
              const bandWidth = xScale.step();
              const index = Math.floor(xPoint / bandWidth);
              const val = buckets[index];
              const left = xScale(val.closeTime);
              this.setState({
                activeBucket: val,
                yPoint
              });
            }}
            onMouseLeave={data => event =>