support multiple data lines

components/LineGraph.module.css

@@ -1,11 +1,3 @@
-.lineBackground {
-  fill: var(--card-background);
-}
-
-.line {
-  fill: var(--primary-accent-light);
-}
-
 .lineText {
   visibility: hidden;
   font-family: "Inconsolata", monospace;
@@ -22,13 +14,8 @@
   visibility: visible;
 }
 
-/* .tickLabel {
-  font-family: "Inconsolata", monospace;
-  font-weight: 800;
-  fill: var(--label);
-}
 .axisLabel {
   font-family: "Inconsolata", monospace;
   font-weight: 800;
   fill: var(--label);
-} */
+}

components/LineGraph.tsx

@@ -10,6 +10,7 @@ import {
   AnnotationCircleSubject,
 } from "@visx/xychart";
 import React from "react";
+import { Color } from "utils/Color";
 
 import styles from "./LineGraph.module.css";
 
@@ -19,7 +20,7 @@ interface LineGraphData {
 }
 
 interface BarGraphProps {
-  data: LineGraphData[];
+  data: LineGraphData[][];
   width: number;
   height: number;
   margin: {
@@ -28,34 +29,33 @@ interface BarGraphProps {
     left: number;
     right: number;
   };
+  xLabelSize?: number;
+  yLabelSize?: number;
 }
 
-const COLOURS = {
-  background: "#252D41",
-  salmon: "#ffcad0",
-  navy: "#2c3651",
-  white: "#ffffff",
-  pink: "#ef83b1",
-  darkpink: "#cc5773",
-  darkblue: "#354265",
-};
-
 const DEFAULT_LABEL_SIZE = 16;
 
-export function LineGraph({ data, width, height, margin }: BarGraphProps) {
+export function LineGraph({
+  data,
+  width,
+  height,
+  margin,
+  xLabelSize = DEFAULT_LABEL_SIZE,
+  yLabelSize = DEFAULT_LABEL_SIZE,
+}: BarGraphProps) {
   if (width < 10) return null;
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
   const customTheme = buildChartTheme({
     // colors
-    backgroundColor: COLOURS.background, // used by Tooltip, Annotation
-    colors: [COLOURS.pink], // categorical colors, mapped to series via `dataKey`s
+    backgroundColor: Color.secondaryBackground, // used by Tooltip, Annotation
+    colors: [Color.primaryAccent, Color.primaryHeading], // categorical colors, mapped to series via `dataKey`s
 
     tickLength: 5,
 
     // grid
-    gridColor: "#354265",
-    gridColorDark: "#222831", // used for axis baseline if x/yxAxisLineStyles not set
+    gridColor: Color.tertiaryBackground,
+    gridColorDark: Color.tertiaryBackground, // used for axis baseline if x/yxAxisLineStyles not set
   });
 
   // accessors
@@ -77,35 +77,18 @@ export function LineGraph({ data, width, height, margin }: BarGraphProps) {
         y={0}
         width={width}
         height={height}
-        fill={COLOURS.background}
+        fill={Color.primaryBackground}
       />
 
-      <LineSeries
-        dataKey="Line 1"
-        data={data}
-        xAccessor={xAccessor}
-        yAccessor={yAccessor}
-      />
-
-      <Annotation
-        dataKey="Line 1" // use this Series's accessor functions, alternatively specify x/yAccessor here
-        datum={data[2]}
-        dx={-40}
-        dy={-50}
-      >
-        <AnnotationLabel
-          title="Title"
-          subtitle="Subtitle deets"
-          showAnchorLine={false}
-          backgroundFill="#FFFFFF"
-          showBackground
+      {data.map((d, i) => (
+        <LineSeries
+          dataKey={i.toString()}
+          key={i}
+          data={d}
+          xAccessor={xAccessor}
+          yAccessor={yAccessor}
         />
-        {/** Draw circle around point */}
-        <AnnotationCircleSubject />
-        {/** Connect label to CircleSubject */}
-        <AnnotationConnector />
-      </Annotation>
-
+      ))}
       <Axis
         orientation="bottom"
         hideAxisLine
@@ -113,10 +96,8 @@ export function LineGraph({ data, width, height, margin }: BarGraphProps) {
         tickLabelProps={() => {
           return {
             dy: "0.25rem",
-            fill: COLOURS.white,
-            fontSize: `${width / 700}rem`,
-            fontFamily: "Inconsolata",
-            fontWeight: 800,
+            fontSize: `${xLabelSize / 16}rem`,
+            className: styles.axisLabel,
           };
         }}
       />
@@ -129,14 +110,12 @@ export function LineGraph({ data, width, height, margin }: BarGraphProps) {
         tickLabelProps={() => {
           return {
             dy: "0.25rem",
-            fill: COLOURS.white,
-            fontSize: `${height / 300}rem`,
-            fontFamily: "Inconsolata",
-            fontWeight: 800,
+            className: styles.axisLabel,
+            fontSize: `${yLabelSize / 16}rem`,
           };
         }}
       />
-      <Grid numTicks={data.length} strokeWidth={0.5} strokeDasharray="6" />
+      <Grid numTicks={data[0].length} strokeWidth={0.5} strokeDasharray="6" />
     </XYChart>
   );
 }

data/mocks.ts

@@ -65,28 +65,56 @@ export const moreMockCategoricalData = [
 ];
 
 export const mockLineGraphlData = [
-  {
-    x: "1A",
-    y: 30,
-  },
-  {
-    x: "1B",
-    y: 84,
-  },
-  {
-    x: "2A",
-    y: 93,
-  },
-  {
-    x: "2B",
-    y: 70,
-  },
-  {
-    x: "3A",
-    y: 100,
-  },
-  {
-    x: "3B",
-    y: 80,
-  },
+  [
+    {
+      x: "1A",
+      y: 30,
+    },
+    {
+      x: "1B",
+      y: 84,
+    },
+    {
+      x: "2A",
+      y: 93,
+    },
+    {
+      x: "2B",
+      y: 70,
+    },
+    {
+      x: "3A",
+      y: 100,
+    },
+    {
+      x: "3B",
+      y: 80,
+    },
+  ],
+  [
+    {
+      x: "1A",
+      y: 10,
+    },
+    {
+      x: "1B",
+      y: 64,
+    },
+    {
+      x: "2A",
+      y: 85,
+    },
+    {
+      x: "2B",
+      y: 90,
+    },
+    {
+      x: "3A",
+      y: 65,
+    },
+    {
+      x: "3B",
+      y: 77,
+    },
+  ],
 ];