How to use @vx/point - 10 common examples

const range = scale.range();
  const range0 = range[0] + 0.5 - rangePadding;
  const range1 = range[range.length - 1] + 0.5 + rangePadding;

  const horizontal = orientation !== ORIENT.left && orientation !== ORIENT.right;
  const isLeft = orientation === ORIENT.left;
  const isTop = orientation === ORIENT.top;
  const tickSign = isLeft || isTop ? -1 : 1;

  const position = (scale.bandwidth ? center : identity)(scale.copy());

  const axisFromPoint = new Point({
    x: horizontal ? range0 : 0,
    y: horizontal ? 0 : range0,
  });
  const axisToPoint = new Point({
    x: horizontal ? range1 : 0,
    y: horizontal ? 0 : range1,
  });

  let tickLabelFontSize = 10; // track the max tick label size to compute label offset

  if (children) {
    return (
      
        {children({
          axisFromPoint,
          axisToPoint,
          horizontal,
          tickSign,
          numTicks,
          label,

// use a number if passed, else find the index based on the ref type
    let index = reference;
    if (typeof reference !== 'number') {
      index = data.findIndex(
        (d, i) =>
          (reference === 'first' && i === 0) ||
          (reference === 'last' && i === data.length - 1) ||
          (reference === 'min' && Math.abs(getY(d) - yMin) < ZERO_DELTA) ||
          (reference === 'max' && Math.abs(getY(d) - yMax) < ZERO_DELTA),
      );
    }
    const datum = data[index];
    // use passed value if no datum, this enables custom x values
    const refNumber = datum ? getX(datum) : index;
    const scaledRef = xScale(refNumber);
    const fromPoint = new Point({ x: scaledRef, y: y1 });
    const toPoint = new Point({ x: scaledRef, y: y0 });
    const label = renderLabel && renderLabel((datum && getY(datum)) || refNumber);

    return (

let index = reference;
    if (typeof reference !== 'number') {
      index = data.findIndex(
        (d, i) =>
          (reference === 'first' && i === 0) ||
          (reference === 'last' && i === data.length - 1) ||
          (reference === 'min' && Math.abs(getY(d) - yMin) < ZERO_DELTA) ||
          (reference === 'max' && Math.abs(getY(d) - yMax) < ZERO_DELTA),
      );
    }
    const datum = data[index];
    // use passed value if no datum, this enables custom x values
    const refNumber = datum ? getX(datum) : index;
    const scaledRef = xScale(refNumber);
    const fromPoint = new Point({ x: scaledRef, y: y1 });
    const toPoint = new Point({ x: scaledRef, y: y0 });
    const label = renderLabel && renderLabel((datum && getY(datum)) || refNumber);

    return (

export default function touchPoint(node, event) {
  if (!node) return;
  const svg = node.ownerSVGElement || node;
  if (svg.createSVGPoint) {
    let point = svg.createSVGPoint();
    point.x = event.changedTouches[0].clientX;
    point.y = event.changedTouches[0].clientY;
    point = point.matrixTransform(node.getScreenCTM().inverse());
    return new Point({
      x: point.x,
      y: point.y,
    });
  }
  const rect = node.getBoundingClientRect();
  return new Point({
    x: event.changedTouches[0].clientX - rect.left - node.clientLeft,
    y: event.changedTouches[0].clientY - rect.top - node.clientTop,
  });
}

export default function Polygon({
  sides,
  size = 25,
  center = new Point({ x: 0, y: 0 }),
  rotate = 0,
  className,
  children,
  innerRef,
  ...restProps
}) {
  const points = getPoints({
    sides,
    size,
    center,
    rotate,
  }).map(p => p.toArray());

  if (children) return children({ points });

  return (

export default function Line({
  from = new Point({ x: 0, y: 0 }),
  to = new Point({ x: 1, y: 1 }),
  stroke = 'black',
  strokeWidth = 1,
  strokeDasharray = '',
  transform = '',
  className = '',
  data,
  innerRef,
  ...restProps
}) {
  return (

values.map(function (val, index) {
      if (hideZero && val === 0) return null;

      var tickFromPoint = new Point({
        x: horizontal ? position(val) : 0,
        y: horizontal ? 0 : position(val)
      });
      var tickToPoint = new Point({
        x: horizontal ? position(val) : tickSign * tickLength,
        y: horizontal ? tickLength * tickSign : position(val)
      });

      var tickLabelPropsObj = tickLabelProps(val, index);
      tickLabelFontSize = Math.max(tickLabelFontSize, tickLabelPropsObj.fontSize || 0);

      return React.createElement(
        Group,
        {
          key: 'vx-tick-' + val + '-' + index,
          className: cx('vx-axis-tick', tickClassName),
          transform: tickTransform
        },
        !hideTicks && React.createElement(Line, { from: tickFromPoint, to: tickToPoint, stroke: tickStroke }),
        tickComponent ? tickComponent(_extends({

{ticks.map((d, i) => {
        const x = offset ? scale(d) + offset : scale(d);
        const fromPoint = new Point({
          x,
          y: 0,
        });
        const toPoint = new Point({
          x,
          y: height,
        });
        return (

function HorizontalReferenceLine({
  label,
  labelProps,
  reference,
  stroke,
  strokeDasharray,
  strokeLinecap,
  strokeWidth,
  xScale,
  yScale,
}) {
  if (!xScale || !yScale) return null;
  const [x0, x1] = xScale.range();
  const scaledRef = yScale(reference);
  const fromPoint = new Point({ x: x0, y: scaledRef });
  const toPoint = new Point({ x: x1, y: scaledRef });

  return (

ticks: values.map(function (value, index) {
          var from = new Point({
            x: horizontal ? position(value) : 0,
            y: horizontal ? 0 : position(value)
          });
          var to = new Point({
            x: horizontal ? position(value) : tickSign * tickLength,
            y: horizontal ? tickLength * tickSign : position(value)
          });
          return {
            value: value,
            index: index,
            from: from,
            to: to,
            formattedValue: format(value, index)
          };
        })
      })