Moved the get browser code to the utils file and Updated the distance from top logic in the pie chart.

Author: Robert Crocker

src/components/Arc.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
 import React from 'react';
 
 import { ArcProps } from '../../types';
@@ -14,7 +15,6 @@ export const Arc = React.memo(
     margin,
     cWidth,
   }: ArcProps): JSX.Element => {
-
     let tooltipState = {
       cursorX: 0,
       cursorY: 0,
@@ -26,13 +26,14 @@ export const Arc = React.memo(
     const onMouseMove = (e: any) => {
       if (setTooltip) {
         tooltipState = {
-          cursorX: e.pageX,
-          cursorY: e.pageY,
-          distanceFromTop: e.clientY,
-          distanceFromRight: (margin.left + cWidth + margin.right) - cWidth,
+          cursorX: e.nativeEvent.pageX,
+          cursorY: e.nativeEvent.pageY,
+          distanceFromTop: e.nativeEvent.pageY - e.clientY + e.clientY,
+          distanceFromRight: margin.left + cWidth + margin.right - cWidth,
           distanceFromLeft: e.pageX,
           data,
         };
+
         setTooltip(tooltipState);
       }
     };

src/components/ListeningRect.tsx

@@ -7,6 +7,7 @@ import {
   xAccessorFunc,
   yAccessorFunc,
 } from '../../types';
+import { getBrowser } from '../utils';
 
 export default function ListeningRect({
   data,
@@ -66,32 +67,6 @@ 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]);
@@ -115,7 +90,7 @@ export default function ListeningRect({
       closestXValue = xAccessor(closestDataPoint);
 
       tooltipState.cursorX =
-        sBrowser === 'Chrome'
+        getBrowser() === 'Chrome'
           ? e.nativeEvent.pageX - e.nativeEvent.layerX + xScale(closestXValue)
           : e.nativeEvent.pageX - e.nativeEvent.offsetX + xScale(closestXValue);
     }
@@ -143,7 +118,7 @@ export default function ListeningRect({
         closestYValue = layers[closestYIndex][closestXIndex][1];
 
         tooltipState.cursorY =
-          sBrowser === 'Chrome'
+          getBrowser() === 'Chrome'
             ? e.pageY - e.nativeEvent.layerY + yScale(closestYValue)
             : e.pageY - e.nativeEvent.offsetY + yScale(closestYValue);
 

src/utils.ts

@@ -24,6 +24,36 @@ export const themes = {
   dark: DarkTheme,
 };
 
+export function getBrowser() {
+  let browser;
+  const sUsrAg = navigator.userAgent;
+  if (sUsrAg.indexOf('Firefox') > -1) {
+    browser = 'Mozilla Firefox';
+    // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
+  } else if (sUsrAg.indexOf('SamsungBrowser') > -1) {
+    browser = '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) {
+    browser = '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) {
+    browser = '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) {
+    browser = '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) {
+    browser = '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) {
+    browser = '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 {
+    browser = 'unknown';
+  }
+  return browser;
+}
+
 export const EXTRA_LEGEND_MARGIN = 6;
 
 export function getXAxisCoordinates(