diff --git a/components/LineGraph.module.css b/components/LineGraph.module.css
index e551033..f3ab8f9 100644
--- a/components/LineGraph.module.css
+++ b/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);
-} */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/components/LineGraph.tsx b/components/LineGraph.tsx
index 0511861..4a3f0f6 100644
--- a/components/LineGraph.tsx
+++ b/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}
/>
-
-
-
- (
+
- {/** Draw circle around point */}
-
- {/** Connect label to CircleSubject */}
-
-
-
+ ))}
{
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`,
};
}}
/>
-
+
);
}
diff --git a/data/mocks.ts b/data/mocks.ts
index b286e54..5b142e4 100644
--- a/data/mocks.ts
+++ b/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,
+ },
+ ],
];