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

Add optional axis labels
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Amy Wang 2022-07-14 21:34:25 -04:00
parent 293183064a
commit 77d0a8a93d
2 changed files with 66 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/BarGraph.module.css
View File

@ -28,3 +28,9 @@
font-weight: 800;
fill: var(--label);
}
.axisLabel {
font-family: "Inconsolata";
font-weight: 800;
fill: var(--label);
}

72
components/BarGraph.tsx
View File

@ -25,12 +25,24 @@ 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 category tick labels, in pixels. Default is 16px. */
categoryTickLabelSize?: number;
/** Font size of the value tick labels, in pixels. Default is 16px. */
valueTickLabelSize?: number;
/** Font size of the value that appears when hovering over a bar, in pixels. */
hoverLabelSize?: number;
/** Label text for the category axis. */
categoryAxisLabel?: string;
/** Font size of the label for the cateogry axis, in pixels. */
categoryAxisLabelSize?: number;
/** Controls the distance between the category axis label and the category axis. */
categoryAxisLabelOffset?: number;
/** Label text for the value axis. */
valueAxisLabel?: string;
/** Font size of the label for the value axis, in pixels. */
valueAxisLabelSize?: number;
/** Controls the distance between the value axis label and the value axis. */
valueAxisLabelOffset?: number;
}
interface BarGraphData {
@ -47,9 +59,15 @@ export function BarGraphHorizontal(props: BarGraphProps) {
margin,
data,
className,
categoryLabelSize = DEFAULT_LABEL_SIZE,
valueLabelSize = DEFAULT_LABEL_SIZE,
categoryTickLabelSize = DEFAULT_LABEL_SIZE,
valueTickLabelSize = DEFAULT_LABEL_SIZE,
hoverLabelSize,
categoryAxisLabel,
categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
categoryAxisLabelOffset = 0,
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
} = props;
const barPadding = 0.4;
@ -147,9 +165,15 @@ export function BarGraphHorizontal(props: BarGraphProps) {
className: styles.tickLabel,
dx: "-0.5rem",
dy: "0.25rem",
fontSize: `${categoryLabelSize / 16}rem`,
fontSize: `${categoryTickLabelSize / 16}rem`,
};
}}
label={categoryAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={categoryAxisLabelOffset}
labelProps={{
fontSize: `${categoryAxisLabelSize / 16}rem`,
}}
/>
<AxisBottom
scale={valueScale}
@ -163,9 +187,15 @@ export function BarGraphHorizontal(props: BarGraphProps) {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: "0.25rem",
fontSize: `${valueLabelSize / 16}rem`,
fontSize: `${valueTickLabelSize / 16}rem`,
};
}}
label={valueAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={valueAxisLabelOffset}
labelProps={{
fontSize: `${valueAxisLabelSize / 16}rem`,
}}
/>
</svg>
);
@ -178,9 +208,15 @@ export function BarGraphVertical(props: BarGraphProps) {
margin,
data,
className,
categoryLabelSize = DEFAULT_LABEL_SIZE,
valueLabelSize = DEFAULT_LABEL_SIZE,
categoryTickLabelSize = DEFAULT_LABEL_SIZE,
valueTickLabelSize = DEFAULT_LABEL_SIZE,
hoverLabelSize,
categoryAxisLabel,
categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
categoryAxisLabelOffset = 0,
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
} = props;
const barPadding = 0.4;
@ -277,11 +313,17 @@ export function BarGraphVertical(props: BarGraphProps) {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: "-0.25rem",
fontSize: `${categoryLabelSize / 16}rem`,
fontSize: `${categoryTickLabelSize / 16}rem`,
width: categoryScale.bandwidth(),
verticalAnchor: "start",
};
}}
label={categoryAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={categoryAxisLabelOffset}
labelProps={{
fontSize: `${categoryAxisLabelSize / 16}rem`,
}}
/>
<AxisLeft
scale={valueScale}
@ -296,9 +338,15 @@ export function BarGraphVertical(props: BarGraphProps) {
className: styles.tickLabel,
dx: "-0.5rem",
dy: "0.25rem",
fontSize: `${valueLabelSize / 16}rem`,
fontSize: `${valueTickLabelSize / 16}rem`,
};
}}
label={valueAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={valueAxisLabelOffset}
labelProps={{
fontSize: `${valueAxisLabelSize / 16}rem`,
}}
/>
</svg>
);