Merge pull request #92 from oslabs-beta/tooltiprollback

Implemented functionality for Safari and Firefox

Author: robcrock

src/App.tsx

@@ -46,7 +46,7 @@ function App() {
         xAxisLabel="GDP per capita"
         yKey="Life expectancy"
         yGrid={true}
-        yAxis="right"
+        yAxis="left"
         yAxisLabel="Life Expectancy"
       />
       <LineChart

src/components/Arc.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import * as d3 from 'd3';
 
 import { ArcProps } from '../../types';
 import useWindowDimensions from '../hooks/useWindowDimensions';

src/components/ListeningRect.tsx

@@ -66,6 +66,32 @@ export default function ListeningRect({
   };
 
   function onMouseMove(e: any) {
+    let sBrowser;
+    const sUsrAg = navigator.userAgent;
+    if (sUsrAg.indexOf("Firefox") > -1) {
+      sBrowser = "Mozilla Firefox";
+      // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
+    } else if (sUsrAg.indexOf("SamsungBrowser") > -1) {
+      sBrowser = "Samsung Internet";
+      // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
+    } else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
+      sBrowser = "Opera";
+      // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
+    } else if (sUsrAg.indexOf("Trident") > -1) {
+      sBrowser = "Microsoft Internet Explorer";
+      // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
+    } else if (sUsrAg.indexOf("Edge") > -1) {
+      sBrowser = "Microsoft Edge";
+      // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+    } else if (sUsrAg.indexOf("Chrome") > -1) {
+      sBrowser = "Chrome";
+      // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
+    } else if (sUsrAg.indexOf("Safari") > -1) {
+      sBrowser = "Safari";
+      // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
+    } else {
+      sBrowser = "unknown";
+    }
     const mousePosition = d3.pointer(e);
     const hoveredX = xScale.invert(mousePosition[0]);
     const hoveredY = yScale.invert(mousePosition[1]);
@@ -88,8 +114,9 @@ export default function ListeningRect({
       const closestDataPoint = data[closestXIndex];
       closestXValue = xAccessor(closestDataPoint);
 
-      tooltipState.cursorX =
-        e.nativeEvent.pageX - e.nativeEvent.layerX + xScale(closestXValue);
+      tooltipState.cursorX = sBrowser === 'Chrome' 
+      ? e.nativeEvent.pageX - e.nativeEvent.layerX + xScale(closestXValue)
+      : e.nativeEvent.pageX - e.nativeEvent.offsetX + xScale(closestXValue)
     }
 
     // ****************************************
@@ -113,8 +140,10 @@ export default function ListeningRect({
     if (typeof closestYIndex === 'number') {
       if (typeof closestXIndex === 'number') {
         closestYValue = layers[closestYIndex][closestXIndex][1];
-        tooltipState.cursorY =
-          e.pageY - e.nativeEvent.layerY + yScale(closestYValue);
+        
+        tooltipState.cursorY =  sBrowser === "Chrome" ? 
+          e.pageY - e.nativeEvent.layerY + yScale(closestYValue) 
+          :   e.pageY - e.nativeEvent.offsetY + yScale(closestYValue) 
 
         tooltipState.data = {
           [xKey]: closestXValue,

src/components/Rectangle.tsx

@@ -34,15 +34,15 @@ const RectangleComp = ({
     // of the bar width to the cursor position to calculate the distance from
     // right hand side of the page. When the cursor enters the bar from the
     // right side of the bar we need to substract half of the bar width.
-    const offsetFromLeft = e.pageX - e.nativeEvent.layerX;
-    const offsetFromTop = e.clientY - e.nativeEvent.layerY;
+    const offsetFromLeft = e.pageX - e.nativeEvent.offsetX;
+    const offsetFromTop = e.clientY - e.nativeEvent.offsetY;
     const rectMidPoint = (x ?? 0) + width / 2;
     const rectTop = y ?? 0;
 
     if (setTooltip) {
       tooltipState = {
-        cursorX: e.pageX - e.nativeEvent.layerX + (x ?? 0),
-        cursorY: e.pageY - e.nativeEvent.layerY + (y ?? 0),
+        cursorX: e.pageX - e.nativeEvent.offsetX + (x ?? 0),
+        cursorY: e.pageY - e.nativeEvent.offsetY + (y ?? 0),
         distanceFromTop: offsetFromTop + margin.top + rectTop,
         distanceFromRight:
           clientWidth - (offsetFromLeft + margin.left + rectMidPoint),

src/components/VoronoiCell.tsx

@@ -40,8 +40,8 @@ export const VoronoiCell = ({
 
   const onMouseMove = (e: any) => {
     const tooltipState = {
-      cursorX: e.nativeEvent.pageX - e.nativeEvent.layerX + cellCenter.cx,
-      cursorY: e.nativeEvent.pageY - e.nativeEvent.layerY + cellCenter.cy,
+      cursorX: e.nativeEvent.pageX - e.nativeEvent.offsetX + cellCenter.cx,
+      cursorY: e.nativeEvent.pageY - e.nativeEvent.offsetY + cellCenter.cy,
       distanceFromTop: 0,
       distanceFromRight: 0,
       distanceFromLeft: 0,

src/components/VoronoiWrapper.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Data, VoronoiBody } from '../../types';
 import { VoronoiCell } from './VoronoiCell';
-import useWindowDimensions from '../hooks/useWindowDimensions';
 
 export const VoronoiWrapper = React.memo(
   ({