diff --git a/components/BarGraph.tsx b/components/BarGraph.tsx
index 4e7f90b..ed8431a 100644
--- a/components/BarGraph.tsx
+++ b/components/BarGraph.tsx
@@ -8,11 +8,13 @@ import { Bar } from "@visx/shape";
import { Text } from "@visx/text";
import React, { useState } from "react";
-// TODO: refine props for styles
interface BarGraphProps {
data: BarGraphData[];
+ /** Width of the entire graph, in pixels. */
width: number;
+ /** Height of the entire graph, in pixels. */
height: number;
+ /** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */
margin: {
top: number;
bottom: number;
@@ -20,6 +22,12 @@ interface BarGraphProps {
right: number;
};
className?: string;
+ /** Font size of the category labels, in pixels. Default is 16px. */
+ categoryLabelSize?: number;
+ /** Font size of the value labels, in pixels. Default is 16px. */
+ valueLabelSize?: number;
+ /** Font size of the value that appears when hovering over a bar, in pixels. */
+ hoverLabelSize?: number;
}
interface BarGraphData {
@@ -35,8 +43,19 @@ const COLOURS = {
darkpink: "#cc5773",
};
+const DEFAULT_LABEL_SIZE = 16;
+
export function BarGraphHorizontal(props: BarGraphProps) {
- const { width, height, margin, data, className } = props;
+ const {
+ width,
+ height,
+ margin,
+ data,
+ className,
+ categoryLabelSize = DEFAULT_LABEL_SIZE,
+ valueLabelSize = DEFAULT_LABEL_SIZE,
+ hoverLabelSize,
+ } = props;
const barPadding = 0.4;
@@ -130,14 +149,15 @@ export function BarGraphHorizontal(props: BarGraphProps) {
/>
{isBarHovered[barName] ? (
{getValue(d)}
@@ -159,7 +179,7 @@ export function BarGraphHorizontal(props: BarGraphProps) {
dx: "-0.5rem",
dy: "0.25rem",
fill: COLOURS.white,
- fontSize: "1rem",
+ fontSize: `${categoryLabelSize / 16}rem`,
fontFamily: "Inconsolata",
fontWeight: 800,
};
@@ -177,7 +197,7 @@ export function BarGraphHorizontal(props: BarGraphProps) {
...bottomTickLabelProps(),
dy: "0.25rem",
fill: COLOURS.white,
- fontSize: "1rem",
+ fontSize: `${valueLabelSize / 16}rem`,
fontFamily: "Inconsolata",
fontWeight: 800,
};
@@ -188,7 +208,16 @@ export function BarGraphHorizontal(props: BarGraphProps) {
}
export function BarGraphVertical(props: BarGraphProps) {
- const { width, height, margin, data, className } = props;
+ const {
+ width,
+ height,
+ margin,
+ data,
+ className,
+ categoryLabelSize = DEFAULT_LABEL_SIZE,
+ valueLabelSize = DEFAULT_LABEL_SIZE,
+ hoverLabelSize,
+ } = props;
const barPadding = 0.4;
@@ -283,13 +312,14 @@ export function BarGraphVertical(props: BarGraphProps) {
{isBarHovered[barName] ? (
{getValue(d)}
@@ -310,7 +340,7 @@ export function BarGraphVertical(props: BarGraphProps) {
...bottomTickLabelProps(),
dy: "-0.25rem",
fill: COLOURS.white,
- fontSize: "1rem",
+ fontSize: `${categoryLabelSize / 16}rem`,
fontFamily: "Inconsolata",
fontWeight: 800,
width: categoryScale.bandwidth(),
@@ -331,7 +361,7 @@ export function BarGraphVertical(props: BarGraphProps) {
dx: "-0.5rem",
dy: "0.25rem",
fill: COLOURS.white,
- fontSize: "1rem",
+ fontSize: `${valueLabelSize / 16}rem`,
fontFamily: "Inconsolata",
fontWeight: 800,
};