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

Fix Stacked Bar Graph nitpicks
continuous-integration/drone/push Build is passing Details

This commit is contained in:
e26chiu 2023-01-02 00:11:26 -05:00
parent 0b5169d151
commit 05f0f9f7e0
5 changed files with 138 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
components/StackedBarGraph.tsx
View File

@ -42,13 +42,11 @@ export type StackedBarProps = {
/** Colours for each key */
colorRange: string[];
/** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */
margin: { top: number; left: number };
margin: { top: number; left: number; right: number; bottom: number };
/** Number of ticks for the value axis */
numTicksValueAxis?: number;
/** Distance between the left axis labels and the start of the lines of the graph, in px. */
/** Distance between the the left axis and the left edge of the graph, in px. */
axisLeftOffset?: number;
/** Distance between the bottom axis and the bottom of the container of the graph, in px. */
axisBottomOffset?: number;
/** Distance between the right side of the graph and the legend, in px. */
legendLeftOffset?: number;
/** Distance between the top of the graph and the legend, in px. */
@ -61,9 +59,6 @@ export type StackedBarProps = {
scalePadding?: number;
/** Margin for each item in the legend */
itemMargin?: string;
/** Factor multiplied with an offset to center the labels of the category-axis depending on the width/height of the graph.
* >1 for width/height <600 and <1 for width/height >600 (vertical=width/horizontal=height) */
categoryAxisLeftFactor?: number;
};
let tooltipTimeout: number;
@ -81,14 +76,12 @@ export const StackedBarGraphVertical = withTooltip<
margin,
scalePadding = 0.3,
numTicksValueAxis = 6,
axisLeftOffset = 40,
axisBottomOffset = 40,
axisLeftOffset = 30,
strokeWidth = 2.5,
strokeDashArray = "10,4",
legendLeftOffset = 40,
legendTopOffset = 40,
itemMargin = "0 0 0 15px",
categoryAxisLeftFactor = 1,
tooltipOpen,
tooltipLeft,
tooltipTop,
@ -125,10 +118,10 @@ export const StackedBarGraphVertical = withTooltip<
});
// bounds
const xMax = width;
const yMax = height - margin.top - axisBottomOffset;
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
categoryScale.rangeRound([0, xMax - axisLeftOffset]);
categoryScale.rangeRound([0, xMax]);
valueScale.range([yMax, 0]);
return width < 10 ? null : (
@ -146,12 +139,11 @@ export const StackedBarGraphVertical = withTooltip<
</div>
<svg width={width} height={height}>
<Group top={margin.top} left={margin.left}>
<Group top={margin.top} left={margin.left + axisLeftOffset}>
<GridRows
scale={valueScale}
width={xMax}
height={yMax}
left={axisLeftOffset}
numTicks={numTicksValueAxis}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
@ -160,77 +152,57 @@ export const StackedBarGraphVertical = withTooltip<
<GridColumns
scale={categoryScale}
height={yMax}
left={axisLeftOffset}
offset={categoryScale.bandwidth() / 2}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<Group left={axisLeftOffset}>
<BarStack<StackedBarData, string>
data={data}
keys={keys}
x={getCategory}
xScale={categoryScale}
yScale={valueScale}
color={colorScale}
>
{(barStacks) =>
barStacks.map((barStack) =>
barStack.bars.map((bar) => (
<rect
className={styles.barStack}
key={`bar-stack-${barStack.index}-${bar.index}`}
x={bar.x}
y={bar.y}
height={bar.height}
width={bar.width / 2}
fill={bar.color}
onMouseLeave={() => {
tooltipTimeout = window.setTimeout(() => {
hideTooltip();
}, 300);
}}
onMouseMove={(event) => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
const tooltipPos = getTooltipPosition(event);
showTooltip({
tooltipData: bar,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
/>
))
)
}
</BarStack>
</Group>
<BarStack<StackedBarData, string>
data={data}
keys={keys}
x={getCategory}
xScale={categoryScale}
yScale={valueScale}
color={colorScale}
>
{(barStacks) =>
barStacks.map((barStack) =>
barStack.bars.map((bar) => (
<rect
className={styles.barStack}
key={`bar-stack-${barStack.index}-${bar.index}`}
x={bar.x}
y={bar.y}
height={bar.height}
width={bar.width / 2}
fill={bar.color}
onMouseLeave={() => {
tooltipTimeout = window.setTimeout(() => {
hideTooltip();
}, 300);
}}
onMouseMove={(event) => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
const tooltipPos = getTooltipPosition(event);
showTooltip({
tooltipData: bar,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
/>
))
)
}
</BarStack>
<Line
fill={Color.tertiaryBackground}
to={new Point({ x: axisLeftOffset, y: 0 })}
from={new Point({ x: axisLeftOffset, y: yMax })}
to={new Point({ x: 0, y: 0 })}
from={new Point({ x: 0, y: yMax })}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<AxisBottom
top={yMax}
scale={categoryScale}
left={
((categoryScale.bandwidth() * 100) / width) *
categoryAxisLeftFactor
}
hideTicks
hideAxisLine
labelProps={{
fontSize: `${10 / 16}rem`,
}}
tickLabelProps={() => ({
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
})}
/>
<AxisLeft
scale={valueScale}
top={5}
@ -239,14 +211,27 @@ export const StackedBarGraphVertical = withTooltip<
labelProps={{
fontSize: `${10 / 16}rem`,
}}
tickLabelProps={() => {
return {
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
};
}}
tickLabelProps={() => ({
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
textAnchor: "end",
})}
/>
</Group>
<AxisBottom
top={yMax + margin.top}
scale={categoryScale}
left={axisLeftOffset}
hideTicks
hideAxisLine
labelProps={{
fontSize: `${10 / 16}rem`,
}}
tickLabelProps={() => ({
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
})}
/>
</svg>
{tooltipOpen && tooltipData ? (
@ -278,13 +263,11 @@ export const StackedBarGraphHorizontal = withTooltip<
scalePadding = 0.3,
numTicksValueAxis = 6,
axisLeftOffset = 40,
axisBottomOffset = 40,
strokeWidth = 2.5,
strokeDashArray = "10,4",
legendLeftOffset = 40,
legendTopOffset = 40,
itemMargin = "0 0 0 15px",
categoryAxisLeftFactor = 1,
tooltipOpen,
tooltipLeft,
tooltipTop,
@ -321,11 +304,11 @@ export const StackedBarGraphHorizontal = withTooltip<
});
// bounds
const xMax = width;
const yMax = height - margin.top - axisBottomOffset;
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
categoryScale.rangeRound([yMax, 0]);
valueScale.range([0, xMax - axisLeftOffset]);
valueScale.range([0, xMax]);
return width < 10 ? null : (
<div className={styles.container}>
@ -341,13 +324,12 @@ export const StackedBarGraphHorizontal = withTooltip<
</div>
<svg width={width} height={height}>
<Group top={margin.top} left={margin.left}>
<Group top={margin.top} left={margin.left + axisLeftOffset}>
<GridRows
scale={categoryScale}
width={xMax}
height={yMax}
offset={categoryScale.bandwidth() / 2}
left={axisLeftOffset}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
@ -356,55 +338,59 @@ export const StackedBarGraphHorizontal = withTooltip<
scale={valueScale}
height={yMax}
numTicks={numTicksValueAxis}
left={axisLeftOffset}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<Group left={axisLeftOffset}>
<BarStackHorizontal<StackedBarData, string>
data={data}
keys={keys}
y={getCategory}
xScale={valueScale}
yScale={categoryScale}
color={colorScale}
>
{(barStacks) =>
barStacks.map((barStack) =>
barStack.bars.map((bar) => (
<rect
className={styles.barStack}
key={`bar-stack-${barStack.index}-${bar.index}`}
x={bar.x}
y={bar.y}
height={bar.height / 2}
width={bar.width}
fill={bar.color}
onMouseLeave={() => {
tooltipTimeout = window.setTimeout(() => {
hideTooltip();
}, 300);
}}
onMouseMove={(event) => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
const tooltipPos = getTooltipPosition(event);
showTooltip({
tooltipData: bar,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
/>
))
)
}
</BarStackHorizontal>
</Group>
<Line
fill={Color.tertiaryBackground}
to={new Point({ x: 0, y: 2 })}
from={new Point({ x: xMax, y: 2 })}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<BarStackHorizontal<StackedBarData, string>
data={data}
keys={keys}
y={getCategory}
xScale={valueScale}
yScale={categoryScale}
color={colorScale}
>
{(barStacks) =>
barStacks.map((barStack) =>
barStack.bars.map((bar) => (
<rect
className={styles.barStack}
key={`bar-stack-${barStack.index}-${bar.index}`}
x={bar.x}
y={bar.y}
height={bar.height / 2}
width={bar.width}
fill={bar.color}
onMouseLeave={() => {
tooltipTimeout = window.setTimeout(() => {
hideTooltip();
}, 300);
}}
onMouseMove={(event) => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
const tooltipPos = getTooltipPosition(event);
showTooltip({
tooltipData: bar,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
/>
))
)
}
</BarStackHorizontal>
<AxisBottom
top={yMax}
scale={valueScale}
left={axisLeftOffset}
numTicks={numTicksValueAxis}
hideAxisLine
hideTicks
@ -414,25 +400,21 @@ export const StackedBarGraphHorizontal = withTooltip<
tickLabelProps={() => ({
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
textAnchor: "middle",
})}
/>
<AxisLeft
top={
-((categoryScale.bandwidth() * 100) / width) *
categoryAxisLeftFactor
}
scale={categoryScale}
hideAxisLine
hideTicks
labelProps={{
fontSize: `${10 / 16}rem`,
}}
tickLabelProps={() => {
return {
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
};
}}
tickLabelProps={() => ({
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
textAnchor: "end",
})}
/>
</Group>
</svg>

2
data/academics.ts
View File

@ -1331,7 +1331,7 @@ export const A16 = [
"95-100": 0.059,
},
{
category: "Cumulative Average",
category: "CAV",
"0-30": 0,
"30-60": 0,
"60-70": 0.03774,

6
pages/academics.tsx
View File

@ -255,6 +255,8 @@ export default function Academics() {
margin={{
top: 20,
left: 20,
right: 20,
bottom: 20,
}}
/>
</ComponentWrapper>
@ -268,7 +270,7 @@ export default function Academics() {
<ComponentWrapper
heading="What were your averages for each term? Approximately, what is your cumulative average as of right now?"
bodyText="The majority of people did their best in 1A and their worst in 1B, 2A, or 2B, likely because most of the mandatory challenging CS+MATH courses lie around that period of time. Students started having better grades in 3A, correlating with the difficulty of the courses question seen previously."
bodyText="The majority of people did their best in 1A and their worst in 1B, 2A, or 2B, likely because most of the mandatory challenging CS+MATH courses lie around that period of time. Students started having better grades in 3A, correlating with the difficulty of the courses question seen previously. CAV stands for Cumulative Average."
align="center"
noBackground
>
@ -285,6 +287,8 @@ export default function Academics() {
margin={{
top: 20,
left: 20,
right: 20,
bottom: 20,
}}
/>
</ComponentWrapper>

6
pages/coop.tsx
View File

@ -226,6 +226,8 @@ export default function CoopPage() {
margin={{
top: 20,
left: 20,
right: 20,
bottom: 20,
}}
/>
</div>
@ -254,6 +256,8 @@ export default function CoopPage() {
margin={{
top: 20,
left: 20,
right: 20,
bottom: 20,
}}
/>
</div>
@ -297,6 +301,8 @@ export default function CoopPage() {
margin={{
top: 20,
left: 20,
right: 20,
bottom: 20,
}}
/>
</div>

4
pages/playground.tsx
View File

@ -126,6 +126,8 @@ export default function Home() {
margin={{
top: 20,
left: 20,
right: 20,
bottom: 20,
}}
/>
@ -149,6 +151,8 @@ export default function Home() {
margin={{
top: 20,
left: 20,
right: 20,
bottom: 20,
}}
/>