www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Refine props

This commit is contained in:
Amy Wang 2022-06-17 22:11:04 -04:00
parent 5e93bf9ad6
commit 3e0d96b2cd
1 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
components/BarGraph.tsx
View File

@ -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}
y={valueMax - barHeight + 30}
x={categoryPoint(d)! + barWidth / 2}
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,
};