add tooltip

components/LineGraph.module.css

@@ -7,3 +7,18 @@
 .line:hover {
   filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
 }
+
+.tooltip {
+  font-family: "Inconsolata", monospace;
+  font-weight: bold;
+  top: 0;
+  left: 0;
+  position: absolute;
+  background-color: var(--label);
+  color: var(--primary-background);
+  box-shadow: 0px calc(1rem / 16) calc(2rem / 16) var(--card-background);
+  pointer-events: none;
+  padding: calc(10rem / 16);
+  font-size: calc(18rem / 16);
+  border-radius: calc(10rem / 16);
+}

components/LineGraph.tsx

@@ -1,11 +1,12 @@
 import { AxisBottom, AxisLeft } from "@visx/axis";
 import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
 import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
-import * as allCurves from "@visx/curve";
+import { localPoint } from "@visx/event";
 import { GridColumns, GridRows } from "@visx/grid";
 import { Group } from "@visx/group";
 import { scaleBand, scaleLinear } from "@visx/scale";
 import { LinePath } from "@visx/shape";
+import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
 import React from "react";
 import { Color } from "utils/Color";
 
@@ -80,6 +81,24 @@ export function LineGraph(props: LineGraphProps) {
     yAxisLabelOffset = 0,
   } = props;
 
+  const {
+    tooltipData,
+    tooltipLeft,
+    tooltipTop,
+    tooltipOpen,
+    showTooltip,
+    hideTooltip,
+  } = useTooltip();
+
+  // If you don't want to use a Portal, simply replace `TooltipInPortal` below with
+  // `Tooltip` or `TooltipWithBounds` and remove `containerRef`
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    // use TooltipWithBounds
+    detectBounds: true,
+    // when tooltip containers are scrolled, this will correctly update the Tooltip position
+    scroll: true,
+  });
+
   const yMax = height - margin.top - margin.bottom;
   const xMax = width - margin.left - margin.right;
 
@@ -106,7 +125,8 @@ export function LineGraph(props: LineGraphProps) {
   });
 
   return (
-    <svg width={width} height={height}>
+    <>
+      <svg ref={containerRef} width={width} height={height}>
         <Group top={margin.top} left={margin.left}>
           <GridColumns
             scale={xScale}
@@ -166,6 +186,21 @@ export function LineGraph(props: LineGraphProps) {
               return (
                 <Group key={`line-${i}`}>
                   <LinePath
+                    onMouseMove={(e) => {
+                      const eventSvgCoords = localPoint(
+                        // ownerSVGElement is given by visx docs but not recognized by typescript
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        e.target.ownerSVGElement as Element,
+                        e
+                      );
+                      showTooltip({
+                        tooltipData: data.lines[i].label,
+                        tooltipTop: eventSvgCoords.y,
+                        tooltipLeft: eventSvgCoords.x,
+                      });
+                    }}
+                    onMouseOut={hideTooltip}
                     data={lineData}
                     className={styles.line}
                     x={(d) => xScale(getX(d)) ?? 0}
@@ -180,5 +215,20 @@ export function LineGraph(props: LineGraphProps) {
           </Group>
         </Group>
       </svg>
+
+      {tooltipOpen && (
+        <TooltipInPortal
+          // set this to random so it correctly updates with parent bounds
+          key={Math.random()}
+          top={tooltipTop}
+          left={tooltipLeft}
+          className={styles.tooltip}
+          unstyled
+          applyPositionStyle
+        >
+          {tooltipData}
+        </TooltipInPortal>
+      )}
+    </>
   );
 }