Update styling of bar graph tooltip

zshuzh · May 14, 2023 · 0fcdcec · 0fcdcec
1 parent 3eb64d5
commit 0fcdcec
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/components/Bars.js b/components/Bars.js
@@ -4,6 +4,7 @@ import { Line } from '@visx/shape';
 import { scaleBand, scaleLinear } from '@visx/scale';
 import { AxisBottom, AxisLeft } from '@visx/axis';
 import { useTooltip, Tooltip, defaultStyles } from '@visx/tooltip';
+import { localPoint } from '@visx/event';
 import { MdZoomIn, MdZoomOut } from 'react-icons/md';
 import { motion } from 'framer-motion';
 
@@ -64,12 +65,12 @@ const Bars = ({ progressions, median, average, stats }) => {
                 y={yPoint(d)}
                 height={yMax - yPoint(d)}
                 fill={d.duration <= median ? '#A100F1' : '#FF00AA'}
-                onMouseEnter={() => {
+                onMouseMove={(e) => {
                   if (tooltipTimeout) clearTimeout(tooltipTimeout);
                   showTooltip({
                     tooltipData: d,
-                    tooltipLeft: xPoint(d),
-                    tooltipTop: yPoint(d),
+                    tooltipLeft: xPoint(d) + 30,
+                    tooltipTop: localPoint(e).y,
                   });
                 }}
                 onMouseLeave={() => {
@@ -124,17 +125,19 @@ const Bars = ({ progressions, median, average, stats }) => {
             minWidth: 60,
             backgroundColor: '#11162D',
             color: 'white',
-            transform: 'translateX(-50%) translateX(30px)',
           }}
         >
-          <div>
-            {getDuration(
-              0,
-              tooltipData.duration * 86400000,
-              ['days', 'hours'],
-              true
-            )}
-          </div>
+          <div
+            className={`${
+              tooltipData.duration <= median ? 'text-purple' : 'text-pink'
+            } font-medium`}
+          >{`Level ${tooltipData.level}`}</div>
+          <div className="font-light">{`${Math.floor(
+            tooltipData.duration
+          )} days`}</div>
+          <div className="font-light">{`${Math.round(
+            (tooltipData.duration % 1) * 24
+          )} hours`}</div>
         </Tooltip>
       )}
     </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@visx/axis": "^2.1.1",
     "@visx/curve": "^2.1.0",
+    "@visx/event": "^2.1.0",
     "@visx/group": "^2.1.0",
     "@visx/heatmap": "^2.1.0",
     "@visx/scale": "^2.1.0",