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

Fix weird percentage number and add percent symbol (#157)
continuous-integration/drone/push Build is passing Details 

![image](/attachments/956151a0-270d-4d46-9985-73c24806e338)

![image](/attachments/f00e1266-8d16-46cd-9408-9955c93c3dd2)

Co-authored-by: shahanneda <shahan.neda@gmail.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #157
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
This commit is contained in:
Shahan Nedadahandeh 2023-01-31 00:36:49 -05:00
parent 09978edd0e
commit 1a6d031dd6
4 changed files with 105 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/StackedBarGraph.tsx
View File

@ -53,6 +53,14 @@ export type StackedBarProps = {
scalePadding?: number; scalePadding?: number;
/** Margin for each item in the legend */ /** Margin for each item in the legend */
itemMargin?: string; itemMargin?: string;
/** Hide the first data value in tooltip*/
hideDataValueInTooltip?: boolean;
//** Top tooltip label */
tooltipTopLabel?: string;
//** Bottom tooltip label */
tooltipBottomLabel?: string;
//** Display percentage */
displayPercentage?: boolean;
}; };
let tooltipTimeout: number; let tooltipTimeout: number;
@ -79,6 +87,10 @@ export const StackedBarGraphVertical = withTooltip<
tooltipData, tooltipData,
hideTooltip, hideTooltip,
showTooltip, showTooltip,
hideDataValueInTooltip,
tooltipBottomLabel = "",
tooltipTopLabel = "",
displayPercentage,
}: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => { }: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
const yTotals = data.reduce((allTotals, currCategory) => { const yTotals = data.reduce((allTotals, currCategory) => {
const yTotal = keys.reduce((categoryTotal, k) => { const yTotal = keys.reduce((categoryTotal, k) => {
@ -230,8 +242,15 @@ export const StackedBarGraphVertical = withTooltip<
left={tooltipLeft} left={tooltipLeft}
header={tooltipData.key} header={tooltipData.key}
> >
<p>{tooltipData.bar.data[tooltipData.key]}</p> {hideDataValueInTooltip ? null : (
<p>{getCategory(tooltipData.bar.data)}</p> <p>
{tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]}
{displayPercentage ? "%" : ""}
</p>
)}
<p>
{tooltipBottomLabel} {getCategory(tooltipData.bar.data)}
</p>
</TooltipWrapper> </TooltipWrapper>
) : null} ) : null}
</div> </div>
@ -261,6 +280,10 @@ export const StackedBarGraphHorizontal = withTooltip<
tooltipData, tooltipData,
hideTooltip, hideTooltip,
showTooltip, showTooltip,
hideDataValueInTooltip,
tooltipBottomLabel = "",
tooltipTopLabel = "",
displayPercentage,
}: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => { }: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
const yTotals = data.reduce((allTotals, currCategory) => { const yTotals = data.reduce((allTotals, currCategory) => {
const yTotal = keys.reduce((categoryTotal, k) => { const yTotal = keys.reduce((categoryTotal, k) => {
@ -409,8 +432,15 @@ export const StackedBarGraphHorizontal = withTooltip<
left={tooltipLeft} left={tooltipLeft}
header={tooltipData.key} header={tooltipData.key}
> >
<p>{tooltipData.bar.data[tooltipData.key]}</p> {hideDataValueInTooltip ? null : (
<p>{getCategory(tooltipData.bar.data)}</p> <p>
{tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]}
{displayPercentage ? "%" : ""}
</p>
)}
<p>
{tooltipBottomLabel} {getCategory(tooltipData.bar.data)}
</p>
</TooltipWrapper> </TooltipWrapper>
) : null} ) : null}
</div> </div>

126
data/academics.ts
View File

@ -1248,101 +1248,101 @@ export const A15 = [
export const A16 = [ export const A16 = [
{ {
category: "1A", category: "1A",
"0-30": 0.04, "0-30": 4,
"30-60": 0, "30-60": 0,
"60-70": 0.04, "60-70": 4,
"70-80": 0.152, "70-80": 15.2,
"80-90": 0.495, "80-90": 49.5,
"90-95": 0.192, "90-95": 19.2,
"95-100": 0.081, "95-100": 8.1,
}, },
{ {
category: "1B", category: "1B",
"0-30": 0.04, "0-30": 4,
"30-60": 0.01, "30-60": 1,
"60-70": 0.091, "60-70": 9.1,
"70-80": 0.232, "70-80": 23.2,
"80-90": 0.434, "80-90": 43.4,
"90-95": 0.121, "90-95": 12.1,
"95-100": 0.071, "95-100": 7.1,
}, },
{ {
category: "2A", category: "2A",
"0-30": 0.0208, "0-30": 2.08,
"30-60": 0.0312, "30-60": 3.12,
"60-70": 0.052, "60-70": 5.2,
"70-80": 0.2604, "70-80": 26.04,
"80-90": 0.4479, "80-90": 44.79,
"90-95": 0.1354, "90-95": 13.54,
"95-100": 0.0417, "95-100": 4.17,
}, },
{ {
category: "2B", category: "2B",
"0-30": 0.051, "0-30": 5.1,
"30-60": 0, "30-60": 0,
"60-70": 0.112, "60-70": 11.2,
"70-80": 0.296, "70-80": 29.6,
"80-90": 0.378, "80-90": 37.8,
"90-95": 0.133, "90-95": 13.3,
"95-100": 0.031, "95-100": 3.1,
}, },
{ {
category: "3A", category: "3A",
"0-30": 0.032, "0-30": 3.2,
"30-60": 0.033, "30-60": 3.3,
"60-70": 0.032, "60-70": 3.2,
"70-80": 0.149, "70-80": 14.9,
"80-90": 0.447, "80-90": 44.7,
"90-95": 0.245, "90-95": 24.5,
"95-100": 0.064, "95-100": 6.4,
}, },
{ {
category: "3B", category: "3B",
"0-30": 0.033, "0-30": 3.3,
"30-60": 0.033, "30-60": 3.3,
"60-70": 0.043, "60-70": 4.3,
"70-80": 0.108, "70-80": 10.8,
"80-90": 0.355, "80-90": 35.5,
"90-95": 0.312, "90-95": 31.2,
"95-100": 0.118, "95-100": 11.8,
}, },
{ {
category: "4A", category: "4A",
"0-30": 0.011, "0-30": 1.1,
"30-60": 0.032, "30-60": 3.2,
"60-70": 0.053, "60-70": 5.3,
"70-80": 0.129, "70-80": 12.9,
"80-90": 0.355, "80-90": 35.5,
"90-95": 0.312, "90-95": 31.2,
"95-100": 0.108, "95-100": 10.8,
}, },
{ {
category: "4B", category: "4B",
"0-30": 0.011, "0-30": 1.1,
"30-60": 0.033, "30-60": 3.3,
"60-70": 0.023, "60-70": 2.3,
"70-80": 0.149, "70-80": 14.9,
"80-90": 0.241, "80-90": 24.1,
"90-95": 0.138, "90-95": 13.8,
"95-100": 0.092, "95-100": 9.2,
}, },
{ {
category: "5A", category: "5A",
"0-30": 0.02, "0-30": 2,
"30-60": 0.04, "30-60": 4,
"60-70": 0.02, "60-70": 2,
"70-80": 0.039, "70-80": 3.9,
"80-90": 0.137, "80-90": 13.7,
"90-95": 0, "90-95": 0,
"95-100": 0.059, "95-100": 5.9,
}, },
{ {
category: "CAV", category: "CAV",
"0-30": 0, "0-30": 0,
"30-60": 0, "30-60": 0,
"60-70": 0.03774, "60-70": 3.774,
"70-80": 0.28302, "70-80": 28.302,
"80-90": 0.67924, "80-90": 67.924,
"90-95": 0, "90-95": 0,
"95-100": 0, "95-100": 0,
}, },

1
pages/academics.tsx
View File

@ -281,6 +281,7 @@ export default function Academics() {
]} ]}
data={A16} data={A16}
margin={barGraphMargin} margin={barGraphMargin}
displayPercentage={true}
/> />
</ComponentWrapper> </ComponentWrapper>

8
pages/coop.tsx
View File

@ -216,7 +216,7 @@ export default function CoopPage() {
{/* C7v */} {/* C7v */}
<ComponentWrapper <ComponentWrapper
heading="What was your coop evaluation rating?" heading="What was your coop evaluation rating?"
bodyText="Ratings were pretty positive overall! It seems that it's not extremely hard to get an outstanding rating!" bodyText="Ratings were pretty positive overall! It seems that it's not extremely hard to get an outstanding rating! The y-axis represents the co-op term while the x-axis represents the number of students who have given a rating."
> >
<div> <div>
<StackedBarGraphHorizontal <StackedBarGraphHorizontal
@ -231,6 +231,8 @@ export default function CoopPage() {
]} ]}
data={C7v} data={C7v}
margin={barGraphMargin} margin={barGraphMargin}
displayPercentage
tooltipBottomLabel="Coop Term: "
/> />
</div> </div>
</ComponentWrapper> </ComponentWrapper>
@ -256,6 +258,8 @@ export default function CoopPage() {
]} ]}
data={C7vi} data={C7vi}
margin={barGraphMargin} margin={barGraphMargin}
tooltipBottomLabel="Coop Term: "
displayPercentage
/> />
</div> </div>
</ComponentWrapper> </ComponentWrapper>
@ -296,6 +300,8 @@ export default function CoopPage() {
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]} colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
data={C7viii} data={C7viii}
margin={barGraphMargin} margin={barGraphMargin}
displayPercentage={true}
tooltipBottomLabel="Coop term: "
/> />
</div> </div>
</ComponentWrapper> </ComponentWrapper>