How to use the @vx/event.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.
rohan-paul / stock-dashboard-react / src / Components / StockAnalytics / Alternative-working-codes-kept-for-backup / SandP500_PE-vx-WORKING.js View on Github 
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 =>
