Merge branch 'main' into richard-shuai/contribution-link
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Richard Shuai 2023-02-01 21:48:30 -05:00
commit 8afa78834d
8 changed files with 173 additions and 97 deletions

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>

View File

@ -883,6 +883,12 @@ export const A12 = [
]; ];
export const A12i = [ export const A12i = [
{
category: "CS145",
"1-4": 1,
"5-7": 10,
"8-10": 23,
},
{ {
category: "CS146", category: "CS146",
"1-4": 1, "1-4": 1,
@ -1068,7 +1074,7 @@ export const A14 = [
}, },
{ {
text: "Carmen Bruni", text: "Carmen Bruni",
value: 10, value: 9,
}, },
{ {
text: "Michael Wallace", text: "Michael Wallace",
@ -1242,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,
}, },
@ -1478,7 +1484,7 @@ export const A19 = [
export const A19i = [ export const A19i = [
{ {
category: "0", category: "0",
value: 15, value: 56,
}, },
{ {
category: "1", category: "1",

View File

@ -10,17 +10,29 @@ export const C1 = [
]; ];
export const C2 = [ export const C2 = [
{
text: "Pacific NW USA",
value: 3,
},
{
text: "West Coast CAN",
value: 12,
},
{
text: "Remote",
value: 2,
},
{
text: "East Coast Canada",
value: 1,
},
{ {
text: "Toronto", text: "Toronto",
value: 32, value: 34,
}, },
{ {
text: "California", text: "California",
value: 26, value: 25,
},
{
text: "West CA",
value: 12,
}, },
{ {
text: "East USA", text: "East USA",
@ -28,7 +40,15 @@ export const C2 = [
}, },
{ {
text: "Waterloo", text: "Waterloo",
value: 9, value: 10,
},
{
text: "Chicago",
value: 1,
},
{
text: "Tokyo",
value: 1,
}, },
]; ];
@ -478,7 +498,7 @@ export const C7v = [
}, },
]; ];
export const C7viKey = ["5", "4", "3", "2", "1"]; export const C7viKey = ["1", "2", "3", "4", "5"];
export const C7vi = [ export const C7vi = [
{ {

View File

@ -199,7 +199,7 @@ export const D7 = [
}, },
{ {
text: "GTA / Toronto", text: "GTA / Toronto",
value: 1, value: 58,
}, },
{ {
text: "United Arab Emirates", text: "United Arab Emirates",

View File

@ -190,35 +190,39 @@ export const P8 = [
}, },
{ {
text: "Finance", text: "Finance",
value: 1, value: 8,
}, },
{ {
text: "Cloud Computing", text: "Cloud Computing",
value: 5,
},
{
text: "Artificial Intelligence",
value: 3,
},
{
text: "Robotics",
value: 1,
},
{
text: "Data Science",
value: 6, value: 6,
}, },
{ {
text: "Research", text: "Artificial Intelligence",
value: 5,
},
{
text: "Operating System",
value: 2,
},
{
text: "Robotics",
value: 3, value: 3,
}, },
{ {
text: "Security", text: "Data Science",
value: 1, value: 10,
},
{
text: "Research",
value: 6,
},
{
text: "Cybersecurity",
value: 2,
}, },
{ {
text: "Hardware", text: "Hardware",
value: 2, value: 4,
}, },
{ {
text: "Mobile Development", text: "Mobile Development",
@ -228,4 +232,12 @@ export const P8 = [
text: "Computer Networking", text: "Computer Networking",
value: 2, value: 2,
}, },
{
text: "Programming Languages",
value: 5,
},
{
text: "Compilers",
value: 1,
},
]; ];

View File

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

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>
@ -252,10 +254,12 @@ export default function CoopPage() {
Color.secondaryAccentLight, Color.secondaryAccentLight,
Color.primaryAccentLighter, Color.primaryAccentLighter,
Color.secondaryAccent, Color.secondaryAccent,
Color.primaryText, Color.primaryHeading,
]} ]}
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>

View File

@ -86,6 +86,7 @@
font-size: calc(30rem / 16); font-size: calc(30rem / 16);
color: var(--primary-accent-light); color: var(--primary-accent-light);
font-weight: 700; font-weight: 700;
font-family: 'Inconsolata';
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;