merge

.eslintrc.js

@@ -17,8 +17,7 @@ module.exports = {
   ],
   plugins: ["@typescript-eslint", "react", "react-hooks", "prettier"],
   rules: {
-    "prettier/prettier": "error",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }], 
-
     "import/first": "error",
     "import/order": [
       "error",

components/LineGraph.module.css

@@ -0,0 +1,35 @@
+.tickLabel {
+  font-family: "Inconsolata", monospace;
+  font-weight: 800;
+  fill: var(--label);
+}
+
+.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);
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  width: min-content;
+}
+
+.legend {
+  display: flex;
+  margin: calc(16rem / 8);
+}

components/LineGraph.tsx

@@ -1,22 +1,18 @@
 import { AxisBottom, AxisLeft } from "@visx/axis";
 import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
-import * as allCurves from "@visx/curve";
+import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
+import { localPoint } from "@visx/event";
+import { GridColumns, GridRows } from "@visx/grid";
 import { Group } from "@visx/group";
-import { scaleBand, scaleLinear } from "@visx/scale";
+import { LegendOrdinal } from "@visx/legend";
+import { Point } from "@visx/point";
+import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
 import { LinePath } from "@visx/shape";
-import { extent, max } from "d3-array";
+import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
+import React from "react";
 import { Color } from "utils/Color";
 
-type CurveType = keyof typeof allCurves;
+import styles from "./LineGraph.module.css";
-
-const curveTypes = Object.keys(allCurves);
-const lineCount = 2;
-// const series = new Array(lineCount).fill(null).map((_, i) =>
-//   // vary each series value deterministically
-//   generateDateValue(25, /* seed= */ i / 72).sort(
-//     (a: DateValue, b: DateValue) => a.date.getTime() - b.date.getTime()
-//   )
-// );
 
 interface LineData {
   label: string;
@@ -33,6 +29,22 @@ interface LineGraphData {
   lines: LineData[];
 }
 
+interface LegendProps {
+  /** Position of the legend, relative to the graph. */
+  position?: "top" | "right";
+  /** Font size of the labels in the legend, in pixels. Default is 16px. */
+  itemLabelSize?: number;
+  /** Gap between items in the legend, in pixels. */
+  itemGap?: number;
+  /** Distance between the legend and other adjacent elements, in pixels. */
+  margin?: {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+  };
+}
+
 interface LineGraphProps {
   data: LineGraphData;
   /** Width of the entire graph, in pixels. */
@@ -65,9 +77,11 @@ interface LineGraphProps {
   yAxisLabelSize?: number;
   /** Controls the distance between the value axis label and the value axis. */
   yAxisLabelOffset?: number;
+  legendProps?: LegendProps;
 }
 
 const DEFAULT_LABEL_SIZE = 16;
+const DEFAULT_LEGEND_GAP = 16;
 
 export function LineGraph(props: LineGraphProps) {
   const {
@@ -85,14 +99,39 @@ export function LineGraph(props: LineGraphProps) {
     yAxisLabel,
     yAxisLabelSize = DEFAULT_LABEL_SIZE,
     yAxisLabelOffset = 0,
+    legendProps,
   } = props;
 
-  const curveType = "curveLinear";
+  const {
-  const svgHeight = height - 40;
+    position: legendPosition = "right",
-  //const allData = data.reduce((rec, d) => rec.concat(d), []);
+    itemLabelSize: legendLabelSize = DEFAULT_LABEL_SIZE,
-  //console.log(allData);
+    itemGap: legendItemGap = DEFAULT_LEGEND_GAP,
+    margin: legendMargin = {},
+  } = legendProps ?? {};
 
-  // update scale output ranges
+  const xLength = data.xValues.length;
+
+  data.lines.forEach((line) => {
+    if (line.yValues.length != xLength) {
+      throw new Error("Invalid data with wrong length.");
+    }
+  });
+
+  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 yMax = height - margin.top - margin.bottom;
   const xMax = width - margin.left - margin.right;
@@ -103,6 +142,12 @@ export function LineGraph(props: LineGraphProps) {
     });
   });
 
+  const yMaxValue = Math.max(
+    ...data.lines.map((line) => {
+      return Math.max(...line.yValues);
+    })
+  );
+
   // data accessors
   const getX = (d: PointData) => d.x;
   const getY = (d: PointData) => d.y;
@@ -112,56 +157,153 @@ export function LineGraph(props: LineGraphProps) {
     range: [0, xMax],
     domain: data.xValues,
   });
+
   const yScale = scaleLinear<number>({
     range: [0, yMax],
     nice: true,
-    domain: [0, 100],
+    domain: [yMaxValue, 0],
+  });
+
+  const keys = data.lines.map((line) => line.label);
+
+  const legendScale = scaleOrdinal<string, string>({
+    domain: keys,
+    range: [Color.primaryAccent, Color.secondaryAccent],
   });
 
   return (
-    <svg width={width} height={svgHeight}>
+    <div
-      <Group top={margin.top} left={margin.left}>
+      className={className ? `${className} ${styles.wrapper}` : styles.wrapper}
-        {actualData.map((lineData, i) => {
+      style={{
-          console.log(lineData);
+        flexDirection: legendPosition === "right" ? "row" : "column-reverse",
-          const even = i % 2 === 0;
+      }}
-          return (
+    >
-            <Group key={`line-${i}`}>
+      <svg ref={containerRef} width={width} height={height}>
-              <LinePath
+        <Group top={margin.top} left={margin.left}>
-                curve={allCurves[curveType]}
+          <GridColumns
-                data={lineData}
+            scale={xScale}
-                x={(d) => xScale(getX(d)) ?? 0}
+            height={yMax}
-                y={(d) => yScale(getY(d)) ?? 0}
+            left={margin.left}
-                stroke={even ? Color.primaryAccent : Color.secondaryAccent}
+            numTicks={5}
-                strokeWidth={2}
+            stroke={Color.tertiaryBackground}
-                strokeOpacity={2}
+            strokeWidth={4}
-              />
+            strokeDasharray="10"
-            </Group>
+            strokeLinecap="round"
-          );
+          />
-        })}
+          <GridRows
-      </Group>
+            scale={yScale}
-      <AxisBottom
+            width={xMax}
-        scale={xScale}
+            left={margin.left * 2.3}
-        top={margin.top + yMax}
+            numTicks={data.xValues.length}
-        left={margin.left}
+            stroke={Color.tertiaryBackground}
-        hideAxisLine
+            strokeWidth={4}
-        hideTicks
+            strokeDasharray="10"
-        tickLabelProps={() => {
+            strokeLinecap="round"
-          return {
+          />
-            ...bottomTickLabelProps(),
+          <AxisBottom
-            //className: styles.tickLabel,
+            scale={xScale}
-            dy: "-0.25rem",
+            top={margin.top + yMax}
-            fontSize: `${xTickLabelSize / 16}rem`,
+            left={margin.left}
-            //width: categoryScale.bandwidth(),
+            hideAxisLine
-            verticalAnchor: "start",
+            hideTicks
-          };
+            tickLabelProps={() => {
-        }}
+              return {
-        label={xScale}
+                ...bottomTickLabelProps(),
-        // labelClassName={styles.axisLabel}
+                className: styles.tickLabel,
-        labelOffset={xAxisLabelOffset}
+                dy: "-0.25rem",
-        labelProps={{
+                fontSize: `${xTickLabelSize / 16}rem`,
-          fontSize: `${xAxisLabelSize / 16}rem`,
+                width: xScale.bandwidth(),
+              };
+            }}
+          />
+          <AxisLeft
+            scale={yScale}
+            left={margin.left}
+            hideAxisLine
+            hideTicks
+            numTicks={5}
+            tickLabelProps={() => {
+              return {
+                ...leftTickLabelProps(),
+                className: styles.tickLabel,
+                dx: "1.25rem",
+                dy: "0.25rem",
+                fontSize: `${yTickLabelSize / 16}rem`,
+              };
+            }}
+          />
+          <Group left={margin.left + xMax / (data.xValues.length * 2)}>
+            {actualData.map((lineData, i) => {
+              const isEven = i % 2 === 0;
+              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
+                      ) as Point;
+                      showTooltip({
+                        tooltipData: data.lines[i].label,
+                        tooltipTop: eventSvgCoords.y,
+                        tooltipLeft: eventSvgCoords.x,
+                      });
+                    }}
+                    onMouseOut={hideTooltip}
+                    data={lineData}
+                    className={styles.line}
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    x={(d) => xScale(getX(d))!}
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    y={(d) => yScale(getY(d))!}
+                    stroke={
+                      isEven ? Color.primaryAccent : Color.secondaryAccent
+                    }
+                    strokeWidth={4}
+                    strokeOpacity={2}
+                  />
+                </Group>
+              );
+            })}
+          </Group>
+        </Group>
+      </svg>
+      <LegendOrdinal
+        className={styles.legend}
+        style={{
+          marginTop: legendMargin.top,
+          marginRight: legendMargin.right,
+          marginBottom: legendMargin.bottom,
+          marginLeft: legendMargin.left,
+          fontSize: legendLabelSize,
         }}
+        scale={legendScale}
+        direction={legendPosition === "right" ? "column" : "row"}
+        itemMargin={
+          legendPosition === "right"
+            ? `calc(${legendItemGap / 2}rem / 16) 0 calc(${
+                legendItemGap / 2
+              }rem / 16) 0`
+            : `0 calc(${legendItemGap / 2}rem / 16) 0 calc(${
+                legendItemGap / 2
+              }rem / 16)`
+        }
       />
-    </svg>
+
+      {tooltipOpen && (
+        <TooltipInPortal
+          top={tooltipTop}
+          left={tooltipLeft}
+          className={styles.tooltip}
+          unstyled
+          applyPositionStyle
+        >
+          <>{tooltipData}</>
+        </TooltipInPortal>
+      )}
+    </div>
   );
 }

data/mocks.ts

@@ -119,6 +119,20 @@ export const mockStackedBarKeys = [
   "geese catchers",
 ];
 
+export const mockLineData = {
+  xValues: ["1A", "1B", "2A", "2B", "3A", "3B"],
+  lines: [
+    {
+      label: "Java",
+      yValues: [54, 88, 22, 66, 77, 88],
+    },
+    {
+      label: "C++",
+      yValues: [45, 22, 83, 98, 24, 33],
+    },
+  ],
+};
+
 export const mockTimelineData = [
   {
     time: "Fall 2020",

pages/playground.tsx

@@ -6,6 +6,7 @@ import {
   mockStackedBarKeys,
   mockStackedBarGraphData,
   mockBoxPlotData,
+  mockLineData,
   mockQuoteData,
   mockQuoteDataLong,
   mockPieData,
@@ -187,6 +188,22 @@ export default function Home() {
         </p>
       </CenterWrapper>
 
+      <h2>
+        <code>{"<LineGraph />"}</code>
+      </h2>
+      <LineGraph
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        data={mockLineData}
+        width={600}
+        height={400}
+        margin={{
+          top: 20,
+          bottom: 80,
+          left: 30,
+          right: 20,
+        }}
+      />
+
       <h2>
         <code>{"<Sections />"}</code>
       </h2>