Merge branch 'main' into b72zhou-life-and-interest-page
continuous-integration/drone/push Build is failing Details

This commit is contained in:
Mark Chiu 2022-12-06 22:31:37 -05:00
commit 8a9f6b1647
4 changed files with 913 additions and 19 deletions

589
data/coop.ts Normal file
View File

@ -0,0 +1,589 @@
export const C1 = [
{
category: "Coop",
value: 100,
},
{
category: "Regular",
value: 0,
},
];
export const C2 = [
{
text: "Toronto",
value: 32,
},
{
text: "California",
value: 26,
},
{
text: "West CA",
value: 12,
},
{
text: "East USA",
value: 11,
},
{
text: "Waterloo",
value: 9,
},
];
export const C3 = [
{
category: "Yes",
value: 17,
},
{
category: "No",
value: 83,
},
];
export const C4 = [
{
text: "Google",
value: 14,
},
{
text: "Jane Street",
value: 8,
},
{
text: "Meta/Facebook",
value: 4,
},
{
text: "Databricks",
value: 3,
},
{
text: "HRT",
value: 2,
},
{
text: "Cisco Meraki",
value: 2,
},
{
text: "Apple",
value: 2,
},
{
text: "Datadog",
value: 2,
},
{
text: "Shopify",
value: 2,
},
{
text: "Stripe",
value: 1,
},
{
text: "Citadel",
value: 1,
},
{
text: "Faire",
value: 1,
},
{
text: "Square",
value: 1,
},
{
text: "Salesforce",
value: 1,
},
{
text: "Capital One",
value: 1,
},
];
export const C5 = [
{
category: "Yes",
value: 6,
},
{
category: "No",
value: 94,
},
];
export const C6 = [
{
category: "0",
value: 92,
},
{
category: "1",
value: 8,
},
];
export const C7i = [
{
text: "Google",
value: 2,
},
{
text: "Konrad",
value: 1,
},
{
text: "Jane Street",
value: 2,
},
{
text: "Meta/Facebook",
value: 2,
},
{
text: "Microsoft",
value: 2,
},
{
text: "Databricks",
value: 1,
},
{
text: "HRT",
value: 2,
},
{
text: "Asana",
value: 1,
},
{
text: "Bloomberg",
value: 1,
},
{
text: "SAP",
value: 1,
},
{
text: "Cisco Meraki",
value: 1,
},
{
text: "Apple",
value: 1,
},
{
text: "Datadog",
value: 1,
},
{
text: "Shopify",
value: 1,
},
{
text: "Stripe",
value: 1,
},
{
text: "Citadel",
value: 1,
},
{
text: "Faire",
value: 1,
},
{
text: "Square",
value: 1,
},
{
text: "Salesforce",
value: 1,
},
{
text: "Capital One",
value: 1,
},
{
text: "Wish",
value: 1,
},
{
text: "Thomson Reuters",
value: 1,
},
{
text: "Uber",
value: 1,
},
{
text: "Rippling",
value: 1,
},
{
text: "Intel",
value: 1,
},
{
text: "NVIDIA",
value: 1,
},
{
text: "Twitch",
value: 1,
},
{
text: "RBC",
value: 1,
},
{
text: "Huawei",
value: 1,
},
{
text: "LinkedIn",
value: 1,
},
{
text: "Lyft",
value: 1,
},
{
text: "1Password",
value: 1,
},
{
text: "IBM",
value: 1,
},
{
text: "Snowflake",
value: 1,
},
{
text: "Autodesk",
value: 1,
},
{
text: "Tableau",
value: 1,
},
{
text: "Yugabyte",
value: 1,
},
{
text: "Twitter",
value: 1,
},
{
text: "Tesla",
value: 1,
},
{
text: "Coursera",
value: 1,
},
{
text: "EA",
value: 1,
},
];
export const C7ii = {
xValues: ["1", "2", "3", "4", "5", "6"],
lines: [
{
label: "Waterloo",
yValues: [22.1, 18.1, 16.9, 2.6, 1.3, 3.6],
},
{
label: "Toronto",
yValues: [50.2, 48.2, 30.4, 7, 4, 3.6],
},
{
label: "Remote",
yValues: [7.4, 4.8, 4.8, 82.1, 80.5, 73.2],
},
{
label: "USA(California, Washington, New York)",
yValues: [8.4, 18.1, 35, 0, 5.2, 17.9],
},
],
};
export const C7iii = [
{
category: "1",
min: 14,
firstQuartile: 18,
median: 22,
thirdQuartile: 40,
max: 50,
outliers: [105, 147],
},
{
category: "2",
min: 17.5,
firstQuartile: 22,
median: 25,
thirdQuartile: 36,
max: 76,
outliers: [105],
},
{
category: "3",
min: 16,
firstQuartile: 26,
median: 33,
thirdQuartile: 55,
max: 95,
outliers: [130],
},
{
category: "4",
min: 16,
firstQuartile: 30,
median: 35,
thirdQuartile: 60,
max: 140,
outliers: [],
},
{
category: "5",
min: 26,
firstQuartile: 39,
median: 44,
thirdQuartile: 60,
max: 145,
outliers: [],
},
{
category: "6",
min: 24,
firstQuartile: 40,
median: 48,
thirdQuartile: 72,
max: 132,
outliers: [],
},
];
export const C7iv = [
{
category: "1",
min: 0,
firstQuartile: 0,
median: 0,
thirdQuartile: 300,
max: 4000,
outliers: [10000],
},
{
category: "2",
min: 0,
firstQuartile: 0,
median: 0,
thirdQuartile: 2000,
max: 14000,
outliers: [],
},
{
category: "3",
min: 0,
firstQuartile: 0,
median: 250,
thirdQuartile: 10000,
max: 20500,
outliers: [],
},
{
category: "4",
min: 0,
firstQuartile: 0,
median: 0,
thirdQuartile: 4000,
max: 12000,
outliers: [],
},
{
category: "5",
min: 0,
firstQuartile: 0,
median: 1250,
thirdQuartile: 8000,
max: 20000,
outliers: [],
},
{
category: "6",
min: 0,
firstQuartile: 0,
median: 1000,
thirdQuartile: 15000,
max: 30493,
outliers: [],
},
];
export const C7vKey = ["Outstanding", "Excellent", "Very Good", "Good"];
export const C7v = [
{
category: "1",
Outstanding: 48.9,
Excellent: 33.7,
"Very Good": 10.9,
Good: 4.3,
},
{
category: "2",
Outstanding: 44.6,
Excellent: 48.2,
"Very Good": 4.8,
Good: 1.2,
},
{
category: "3",
Outstanding: 54.9,
Excellent: 35.4,
"Very Good": 8.5,
Good: 0,
},
{
category: "4",
Outstanding: 49.4,
Excellent: 39.2,
"Very Good": 3.8,
Good: 0,
},
{
category: "5",
Outstanding: 54.9,
Excellent: 35.4,
"Very Good": 8.5,
Good: 0,
},
{
category: "6",
Outstanding: 30.4,
Excellent: 30.4,
"Very Good": 10.7,
Good: 3.6,
},
];
export const C7viKey = ["5", "4", "3", "2", "1"];
export const C7vi = [
{
category: "1",
5: 41.3,
4: 26.1,
3: 20.7,
2: 8.7,
1: 3.3,
},
{
category: "2",
5: 37.8,
4: 36.6,
3: 14.6,
2: 9.8,
1: 1.2,
},
{
category: "3",
5: 39.5,
4: 40.7,
3: 11.1,
2: 4.9,
1: 3.7,
},
{
category: "4",
5: 33.8,
4: 37.7,
3: 18.2,
2: 9.1,
1: 1.3,
},
{
category: "5",
5: 51.9,
4: 32.5,
3: 14.3,
2: 1.3,
1: 0,
},
{
category: "6",
5: 53.7,
4: 20.4,
3: 18.5,
2: 5.6,
1: 1.9,
},
];
export const C7vii = {
xValues: ["1", "2", "3", "4", "5", "6"],
lines: [
{
label: "Main rounds",
yValues: [66.7, 61.4, 62.2, 49.4, 52.6, 46.4],
},
{
label: "Continuous Rounds",
yValues: [20.4, 16.9, 13.4, 7.6, 1.3, 1.8],
},
{
label: "Externally",
yValues: [12.9, 16.9, 20.7, 35.4, 32.9, 39.3],
},
{
label: "Return",
yValues: [0, 4.8, 3.7, 7.8, 11.8, 12.5],
},
],
};
export const C7viiiKey = ["No", "Yes"];
export const C7viii = [
{
category: "1",
Yes: 16.3,
No: 83.7,
},
{
category: "2",
Yes: 6.1,
No: 93.9,
},
{
category: "3",
Yes: 8.5,
No: 91.5,
},
{
category: "4",
Yes: 7.7,
No: 92.3,
},
{
category: "5",
Yes: 9.1,
No: 90.9,
},
{
category: "6",
Yes: 5.5,
No: 94.5,
},
];

310
pages/coop.tsx Normal file
View File

@ -0,0 +1,310 @@
import {
C1,
C2,
C3,
C4,
C5,
C6,
C7i,
C7ii,
C7iii,
C7iv,
C7v,
C7vKey,
C7vi,
C7viKey,
C7vii,
C7viii,
C7viiiKey,
} from "data/coop";
import { pageRoutes } from "data/routes";
import React from "react";
import { Color } from "utils/Color";
import { DefaultProp, pieChartProps, wordCloudWidth } from "utils/defaultProps";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import { BottomNav } from "@/components/BottomNav";
import { BoxPlot } from "@/components/Boxplot";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { LineGraph } from "@/components/LineGraph";
import { PieChart } from "@/components/PieChart";
import { SectionHeader } from "@/components/SectionHeader";
import {
StackedBarGraphHorizontal,
StackedBarGraphVertical,
} from "@/components/StackedBarGraph";
import { WordCloud } from "../components/WordCloud";
import styles from "./samplePage.module.css";
export default function CoopPage() {
const pageWidth = useWindowDimensions().width;
const isMobile = useIsMobile();
const colorRange = [
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLight,
Color.secondaryAccent,
];
return (
<div className={styles.page}>
<Header />
<SectionHeader
title="Co-op"
subtitle="Explore careers, gain experience and earn money through UWaterloo's co-op program!"
/>
{/* C1 */}
<ComponentWrapper
heading="Are you in a co-op program?"
bodyText="There are a total of 106 respondents of the CS Class Profile. Surprisingly, all individuals that participated were in a co-op program! Being part of the co-op program is the default option when applying to CS/CFM/CSBBA. Most don't opt out of it because co-op is one of the best experience you can get from attending the University of Waterloo!"
>
<div className={styles.graphContainer}>
<PieChart data={C1} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
{/* C7ii */}
<ComponentWrapper
heading="Where were you located during work?"
bodyText="Many students started in GTA or Waterloo region, then slowly progressed to California / USA. Software jobs in California / USA are known for their prestige and their high paying salary which may explain why most students eventually try them out. However, due to the pandemic, the last 3 co-op placements locations were dominantly remote."
align="right"
noBackground
>
<LineGraph
data={C7ii}
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
colorRange={colorRange}
/>
</ComponentWrapper>
{/* C2 */}
<ComponentWrapper
heading="What was your favourite co-op location?"
bodyText="32% of students enjoyed their co-op terms working in Toronto. A close second was students really enjoying their time working in California."
align="right"
>
<WordCloud
data={C2}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight * 0.7}
wordPadding={15}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
{/* C7i */}
<ComponentWrapper
heading="What company did you work for?"
bodyText="There are lots of companies that people have worked at! It just goes to show that the software world is HUGE. Most people have worked at Google, Meta, Jane Street, and HRT!"
align="center"
>
<WordCloud
data={C7i}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={38}
/>
</ComponentWrapper>
{/* c4 */}
<ComponentWrapper
heading="In your opinion, what is the best company to work at?"
bodyText="Weve got a fair share of companies around here, with Google being dominant as the best. Jane Street ranks 2nd highest. These results seem to be correlating with the most popular companies that students have worked at!"
>
<WordCloud
data={C4}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={14}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
{/* c3 */}
<ComponentWrapper
heading="Have you ever had a co-op term without a placement?"
bodyText="A sixth of respondents have gone through a term without a co-op. Youre not alone if you here and cant find one! Finding your first co-op can be especially difficult."
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={C3} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
{/* c5 */}
<ComponentWrapper
heading="Were you ever banned from WaterlooWorks for renegotiating an offer/match?"
bodyText="Re-negotiating an offer or a match can be a risky move, especially since students are not supposed to directly contact the employers. Re-negotiating can still be beneficial when you believe that your contract or salary can be better. A lot of people also get banned from WaterlooWork by accepting an external offer while getting matched with another company on WaterlooWorks. Make sure to fill out the 'Arrange your own job' form to avoid this!"
align="right"
>
<div className={styles.graphContainer}>
<PieChart data={C5} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
{/* c6 */}
<ComponentWrapper
heading="How many co-op positions did you lose due to COVID-19, if any?"
bodyText="Most people probably lost a position immediately when the pandemic began (Winter 2020), but its good to see the effects have not trickled too much. Most CS/CFM/CSBBA students do software-related jobs which are easier to transition into a remote environment."
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={C6} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
{/* C7iii */}
<ComponentWrapper
heading="What was your salary per hour in CAD (excluding other forms of compensation)?"
bodyText="Compensation generally went up throughout the terms! For reference, in 2021, the average co-op salaries in the Faculty of Mathematics in Canada were $20.15, $22.05, $24.98, $27.60, $28.96, and $30.95 CAD, respectively. The same amounts in the USA were $28.08, $30.82, $33.65, $34.50, $37.15, and $37.60 USD, respectively. So, CS students tend to get paid more than the faculty average."
align="right"
>
<BoxPlot
width={isMobile ? pageWidth / 1.5 : 500}
height={DefaultProp.graphHeight}
data={C7iii}
margin={{
top: 20,
left: 20,
}}
/>
</ComponentWrapper>
{/* C7iv */}
<ComponentWrapper
heading="How much did you receive in other forms of compensation in CAD? (i.e. bonuses, stock options, relocation, housing, etc.)"
bodyText="Additional compensation had increased as terms progressed and students got better jobs. Its great to see students having accommodations to make their lives easier. We can also note that most participants didn't get any other form of compensation which explains why the first quartile and the minimum is at 0 for all terms."
noBackground
>
<BoxPlot
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
data={C7iv}
valueAxisLeftOffset={75}
margin={{
top: 20,
left: 20,
}}
/>
</ComponentWrapper>
{/* C7v */}
<ComponentWrapper
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!"
>
<div style={{ paddingRight: "150px" }}>
<StackedBarGraphHorizontal
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={C7vKey}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
Color.secondaryAccent,
]}
data={C7v}
margin={{
top: 20,
left: 20,
}}
/>
</div>
</ComponentWrapper>
{/* C7vi */}
<ComponentWrapper
heading="How happy were you with your coop during the work term specified?"
bodyText="The ratio of people rating 4+ in happiness stayed roughly the same throughout the terms. There seem to be more 5s towards the last work term as students usually get better jobs that suit their interests and are thus, more satisfied."
align="right"
noBackground
>
<div style={{ paddingRight: "150px" }}>
<StackedBarGraphVertical
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={C7viKey}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
Color.secondaryAccent,
Color.primaryText,
]}
data={C7vi}
margin={{
top: 20,
left: 20,
}}
/>
</div>
</ComponentWrapper>
{/* C7vii */}
<ComponentWrapper
heading="How did you find your job?"
bodyText="People found more co-ops externally and got more return offers as terms progressed, which makes sense as people gain more experience, become more selective of their co-op positions, and become closer to their graduation date. Companies also generally love to re-hire their interns! WaterlooWorks was still really good in helping people find jobs in the main and continuous rounds."
align="right"
>
<div style={{ padding: "10px" }}>
<LineGraph
data={C7vii}
colorRange={colorRange}
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
/>
</div>
</ComponentWrapper>
{/* C7viii */}
<ComponentWrapper
heading="Were you referred for the job?"
bodyText="Interestingly, the referral to non-referral ratio stayed roughly the same as the co-op terms progressed, apart from the first one which had the most referrals. This goes to show that, without a doubt, networking can really get you some great opportunities! Especially in your first co-ops when your experience may be lacking!"
noBackground
>
<div style={{ paddingRight: "150px" }}>
<StackedBarGraphVertical
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={C7viiiKey}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
data={C7viii}
margin={{
top: 20,
left: 20,
}}
/>
</div>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.academics}
rightPage={pageRoutes.lifestyleAndInterests}
></BottomNav>
</div>
);
}

View File

@ -19,6 +19,7 @@ import {
pieChartProps,
barGraphMargin,
barGraphWidth,
wordCloudWidth,
} from "utils/defaultProps";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
@ -107,7 +108,7 @@ export default function Demographics() {
>
<WordCloud
data={D7}
width={isMobile ? pageWidth / 1.5 : 800}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}

View File

@ -6,27 +6,22 @@ type PropName = typeof propNames[number];
const mobileBarGraphFactor = 1.25;
const desktopBarGraphFactor = 2;
export const barGraphWidth = (isMobile: boolean, pageWidth: number) =>
isMobile
? pageWidth / mobileBarGraphFactor
: pageWidth / desktopBarGraphFactor;
const mobilePieChartFactor = 1.25;
const desktopPieChartFactor = 3;
export const pieChartWidth = (isMobile: boolean, pageWidth: number) =>
isMobile
? pageWidth / mobilePieChartFactor
: pageWidth / desktopPieChartFactor;
const graphWidth = (
isMobile: boolean,
pageWidth: number,
isPieChart: boolean
): number => {
const mobileFactor = isPieChart ? mobilePieChartFactor : mobileBarGraphFactor;
const desktopFactor = isPieChart
? desktopPieChartFactor
: desktopBarGraphFactor;
return isMobile ? pageWidth / mobileFactor : pageWidth / desktopFactor;
};
export const barGraphWidth = (isMobile: boolean, width: number) =>
graphWidth(isMobile, width, false);
export const pieChartWidth = (isMobile: boolean, width: number) =>
graphWidth(isMobile, width, true);
const desktopWordCloudFactor = 1.5;
const mobileWordCloudWidth = 800;
export const wordCloudWidth = (isMobile: boolean, pageWidth: number) =>
isMobile ? pageWidth / desktopWordCloudFactor : mobileWordCloudWidth;
export const barGraphMargin = {
top: 20,
@ -34,7 +29,6 @@ export const barGraphMargin = {
left: 60,
right: 20,
};
export const DefaultProp: { [key in PropName]: number } = {
graphHeight: 500,
labelSize: 24,