Refine props

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] ? (
                   <Text
-                    x={valuePoint(d) - 14}
+                    x={valuePoint(d) - 12}
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    y={categoryPoint(d)! + barWidth * 0.75}
+                    y={categoryPoint(d)! + barWidth / 2}
                     fill={COLOURS.white}
                     fontFamily="Inconsolata"
                     fontWeight={800}
-                    fontSize={barWidth * 0.75}
+                    fontSize={hoverLabelSize ?? barWidth * 0.75}
                     textAnchor="end"
+                    verticalAnchor="middle"
                   >
                     {getValue(d)}
                   </Text>
@@ -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] ? (
                   <Text
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    x={categoryPoint(d)! + barWidth * 0.5}
+                    x={categoryPoint(d)! + barWidth / 2}
-                    y={valueMax - barHeight + 30}
+                    y={valueMax - barHeight + 12}
                     fill={COLOURS.white}
                     fontFamily="Inconsolata"
                     fontWeight={800}
-                    fontSize={barWidth * 0.5}
+                    fontSize={hoverLabelSize ?? barWidth * 0.5}
                     textAnchor="middle"
+                    verticalAnchor="start"
                   >
                     {getValue(d)}
                   </Text>
@@ -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,
           };