Merge pull request #95 from oslabs-beta/area-chart-tooltip-values

Fixed stacked area tooltip values

Author: hi2dmitri

src/App.tsx

@@ -26,7 +26,7 @@ function App() {
     <Container className="app">
       <GlobalStyle />
       <PieChart
-        data={coffee_shop}
+        data={coffee_shop.reverse()}
         label="product"
         value="sales"
         outerRadius={300}

src/charts/PieChart/PieChart.tsx

@@ -127,7 +127,7 @@ export default function PieChart({
 
   const discreteColors = Math.min(keys.length, 9);
   const computedScheme = d3[`${colorScheme}`][discreteColors];
-  const colorScale = d3.scaleOrdinal(computedScheme);
+  const colorScale = d3.scaleOrdinal(Array.from(computedScheme).reverse());
   colorScale.domain(keys);
 
   // ********************

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;

src/components/Tooltip.tsx

@@ -142,7 +142,7 @@ const Tooltip = ({
   let xValString = data[xKey as string];
   if (data[xKey as string] instanceof Date) {
     // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-    xValString = `${xValString.getFullYear()}.${xValString.getMonth()}.${xValString.getDay()}`;
+    xValString = `${xValString.getFullYear()}-${xValString.getMonth()}-${xValString.getDay()}`;
   }
 
   let yValString = data[yKey as string];

src/components/VoronoiCell.tsx

@@ -48,8 +48,7 @@ export const VoronoiCell = ({
       data,
     };
 
-    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;

src/hooks/useWindowDimensions.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 
-
 export default function useWindowDimensions() {
-  const [windowDimensions, setWindowDimensions] = useState(
-    {width: 0, height: 0}
-  );
+  const [windowDimensions, setWindowDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
 
   useEffect(() => {
     function getWindowDimensions() {
@@ -17,7 +17,7 @@ export default function useWindowDimensions() {
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
     }
-    handleResize() 
+    handleResize();
 
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);