fix(crosshair): use offsetX/Y instead of clientX/Y (#128)

This commit correct the behaviour of using clientX and clientY instead of offsetX and offsetY. The
previous behavious used the synthetic position of the mouse cursor, this commit change it to use the
native event value that already take care of the border box.

fix #123

src/components/chart_resizer.tsx

@@ -26,10 +26,8 @@ class Resizer extends React.Component<ResizerProps> {
   }
 
   onResize = (entries: ResizeObserverEntry[]) => {
-    entries.forEach((entry) => {
-      const { width, height } = entry.contentRect;
-      const { top, left } = entry.target.getBoundingClientRect();
-      this.props.chartStore!.updateParentDimensions(width, height, top, left);
+    entries.forEach(({ contentRect: { width, height } }) => {
+      this.props.chartStore!.updateParentDimensions(width, height, 0, 0);
     });
   }
 

src/components/react_canvas/reactive_chart.tsx

@@ -278,12 +278,8 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
           left: 0,
           boxSizing: 'border-box',
         }}
-        onMouseMove={({ clientX, clientY }) => {
-          // this cause a layout reflow on the browser https://gist.github.com/paulirish/5d52fb081b3570c81e3a
-          const { left, top } = this.props.chartStore!.parentDimensions;
-          const x = clientX - left;
-          const y = clientY - top;
-          setCursorPosition(x, y);
+        onMouseMove={({ nativeEvent: { offsetX, offsetY } }) => {
+          setCursorPosition(offsetX, offsetY);
         }}
         onMouseLeave={() => {
           setCursorPosition(-1, -1);