cs-2022-class-profile/pages/coop.tsx

314 lines
12 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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 {
barGraphMargin,
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 { Title } from "@/components/Title";
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 />
<Title>Co-op</Title>
<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"
noBackground
>
<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>
<StackedBarGraphHorizontal
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={C7vKey}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
Color.secondaryAccent,
]}
data={C7v}
margin={barGraphMargin}
hideDataValueInTooltip
tooltipBottomLabel="Coop Term: "
/>
</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>
<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={barGraphMargin}
tooltipBottomLabel="Coop Term: "
displayPercentage
/>
</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>
<StackedBarGraphVertical
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={C7viiiKey}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
data={C7viii}
margin={barGraphMargin}
/>
</div>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.academics}
rightPage={pageRoutes.lifestyleAndInterests}
/>
</div>
);
}