Fixed the area chart tooltip values.

Author: Robert Crocker

src/components/ListeningRect.tsx

@@ -68,29 +68,29 @@ export default function ListeningRect({
   function onMouseMove(e: any) {
     let sBrowser;
     const sUsrAg = navigator.userAgent;
-    if (sUsrAg.indexOf("Firefox") > -1) {
-      sBrowser = "Mozilla Firefox";
+    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";
+    } 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";
+    } 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";
+    } 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";
+    } 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";
+    } 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";
+    } 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";
+      sBrowser = 'unknown';
     }
     const mousePosition = d3.pointer(e);
     const hoveredX = xScale.invert(mousePosition[0]);
@@ -114,9 +114,10 @@ export default function ListeningRect({
       const closestDataPoint = data[closestXIndex];
       closestXValue = xAccessor(closestDataPoint);
 
-      tooltipState.cursorX = sBrowser === 'Chrome' 
-      ? e.nativeEvent.pageX - e.nativeEvent.layerX + xScale(closestXValue)
-      : e.nativeEvent.pageX - e.nativeEvent.offsetX + xScale(closestXValue)
+      tooltipState.cursorX =
+        sBrowser === 'Chrome'
+          ? e.nativeEvent.pageX - e.nativeEvent.layerX + xScale(closestXValue)
+          : e.nativeEvent.pageX - e.nativeEvent.offsetX + xScale(closestXValue);
     }
 
     // ****************************************
@@ -140,20 +141,21 @@ export default function ListeningRect({
     if (typeof closestYIndex === 'number') {
       if (typeof closestXIndex === 'number') {
         closestYValue = layers[closestYIndex][closestXIndex][1];
-        
-        tooltipState.cursorY =  sBrowser === "Chrome" ? 
-          e.pageY - e.nativeEvent.layerY + yScale(closestYValue) 
-          :   e.pageY - e.nativeEvent.offsetY + yScale(closestYValue) 
 
+        tooltipState.cursorY =
+          sBrowser === 'Chrome'
+            ? e.pageY - e.nativeEvent.layerY + yScale(closestYValue)
+            : e.pageY - e.nativeEvent.offsetY + yScale(closestYValue);
+
+        const closestYKey: string = layers[closestYIndex].key;
         tooltipState.data = {
-          [xKey]: closestXValue,
-          [yKey]: closestYValue,
+          [xKey]: data[closestXIndex][xKey],
+          [yKey]: data[closestXIndex][closestYKey],
         };
       }
     }
 
-    tooltipState.distanceFromTop =
-      tooltipState.cursorY + margin.top;
+    tooltipState.distanceFromTop = tooltipState.cursorY + margin.top;
     tooltipState.distanceFromRight =
       width - (margin.left + tooltipState.cursorX);
     tooltipState.distanceFromLeft = margin.left + tooltipState.cursorX;