How to use the @vx/event/build/localPoint function in @vx/event

To help you get started, we’ve selected a few @vx/event examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github williaster / data-ui / packages / xy-chart / src / utils / findClosestDatum.js View on Github external
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];
github williaster / data-ui / packages / shared / src / enhancer / WithTooltip.jsx View on Github external
handleMouseMove({ event, datum, coords, ...rest }) {
    const { showTooltip } = this.props;
    if (this.tooltipTimeout) {
      clearTimeout(this.tooltipTimeout);
    }

    let tooltipCoords = { x: 0, y: 0 };
    if (event && event.target && event.type !== 'focus' && event.target.ownerSVGElement) {
      tooltipCoords = localPoint(event.target.ownerSVGElement, event);
    }

    tooltipCoords = { ...tooltipCoords, ...coords };

    showTooltip({
      tooltipLeft: tooltipCoords.x,
      tooltipTop: tooltipCoords.y,
      tooltipData: {
        event,
        datum,
        ...rest,
      },
    });
  }
github williaster / data-ui / packages / sparkline / src / utils / findClosestDatum.js View on Github external
export default function findClosestDatum({ data, getX, xScale, event, marginLeft = 0 }) {
  if (!event || !event.target || !event.target.ownerSVGElement) return {};
  const bisect = bisector(getX).right;

  const svgCoords = localPoint(event.target.ownerSVGElement, event);
  const x = svgCoords.x - marginLeft;
  const dataX = xScale.invert(x);
  const index = bisect(data, dataX, 1);
  const d0 = data[index - 1];
  const d1 = data[index];
  const d = !d0 || Math.abs(dataX - getX(d0)) > Math.abs(dataX - getX(d1)) ? d1 : d0;

  return {
    datum: d,
    index: d === d0 ? index - 1 : index,
  };
}

@vx/event

vx event

MIT
Latest version published 4 years ago

Package Health Score

75 / 100
Full package analysis