components/LineGraph.module.css

@@ -17,4 +17,19 @@
   font-family: "Inconsolata", monospace;
   font-weight: 800;
   fill: var(--label);
+}
+
+.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,14 +1,9 @@
-import { localPoint } from "@visx/event";
-import {
-  useTooltip,
-  useTooltipInPortal,
-  TooltipWithBounds,
-} from "@visx/tooltip";
 import {
   Axis,
   Grid,
   buildChartTheme,
   LineSeries,
+  Tooltip,
   XYChart,
 } from "@visx/xychart";
 import React from "react";
@@ -35,46 +30,18 @@ interface LineGraphProps {
   yLabelSize?: number;
 }
 
-interface TooltipData {
-  name?: string;
-}
-
 const DEFAULT_LABEL_SIZE = 16;
-let tooltipTimeout: number;
 
-export function LineGraph({
+const lineKey = ["Java", "C++"];
+
+export const LineGraph = ({
   data,
   width,
   height,
   margin,
   xLabelSize = DEFAULT_LABEL_SIZE,
   yLabelSize = DEFAULT_LABEL_SIZE,
-}: LineGraphProps) {
-  const {
-    tooltipData,
-    tooltipLeft,
-    tooltipTop,
-    tooltipOpen,
-    showTooltip,
-    hideTooltip,
-  } = useTooltip();
-
-  const { containerRef, TooltipInPortal } = useTooltipInPortal({
-    // use TooltipWithBounds
-    detectBounds: true,
-    // when tooltip containers are scrolled, this will correctly update the Tooltip position
-    scroll: true,
-  });
-
-  const handleMouseOver = (event: React.MouseEvent<SVGRectElement>, datum) => {
-    const coords = localPoint(event);
-    showTooltip({
-      tooltipLeft: coords.x,
-      tooltipTop: coords.y,
-      tooltipData: datum,
-    });
-  };
-
+}: LineGraphProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
   const customTheme = buildChartTheme({
     // colors
@@ -97,7 +64,6 @@ export function LineGraph({
       <rect
         x={0}
         y={0}
-        ref={containerRef}
         width={width}
         height={height}
         fill={Color.primaryBackground}
@@ -139,35 +105,37 @@ export function LineGraph({
           />
           <Grid
             numTicks={data[0].length}
-            strokeWidth={50}
+            stroke={Color.label}
+            strokeWidth={4}
             strokeDasharray="10"
           />
           {data.map((d, i) => (
             <LineSeries
               enableEvents
               className={styles.lineSeries} // Why doesn't work???
-              dataKey={i.toString()}
+              dataKey={lineKey[i]}
               key={i}
               data={d}
               xAccessor={xAccessor}
               yAccessor={yAccessor}
-              // onFocus={handleMouseOver}
-              // onMouseOut={hideTooltip}
             />
           ))}
+
+          <Tooltip
+            snapTooltipToDatumX
+            snapTooltipToDatumY
+            renderTooltip={({ tooltipData }) => (
+              <div className={styles.tooltip}>
+                <div>{tooltipData?.nearestDatum?.key}</div>
+                <br />
+                {/* {xAccessor(tooltipData.nearestDatum.datum)}
+                {": "} */}
+                {yAccessor(tooltipData.nearestDatum.datum)}
+              </div>
+            )}
+          />
         </XYChart>
       </rect>
-
-      {tooltipOpen && (
-        <TooltipInPortal
-          // set this to random so it correctly updates with parent bounds
-          key={Math.random()}
-          top={tooltipTop}
-          left={tooltipLeft}
-        >
-          Data value <strong>{tooltipData}</strong>
-        </TooltipInPortal>
-      )}
     </>
   );
-}
+};