cs-2022-class-profile/pages/post-grad.tsx

import { P1, P2, P3, P4, P5, P6, P7, P8 } from "data/post-grad";
import { pageRoutes } from "data/routes";
import React from "react";
import {
  barGraphProps,
  DefaultProp,
  pieChartProps,
  barGraphMargin,
  barGraphWidth,
  wordCloudWidth,
} from "utils/defaultProps";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";

import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
import { BottomNav } from "@/components/BottomNav";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { PieChart } from "@/components/PieChart";
import { SectionHeader } from "@/components/SectionHeader";
import { WordCloud } from "@/components/WordCloud";

import styles from "./samplePage.module.css";

export default function Demographics() {
  const pageWidth = useWindowDimensions().width;
  const isMobile = useIsMobile();

  return (
    <div className={styles.page}>
      <Header />
      <SectionHeader
        title="Post-grad"
        subtitle="Further Computer Science Academic Journey"
      />

      <ComponentWrapper
        heading="Do you plan on pursuing post-graduate education?"
        bodyText="There are a total of 103 respondents. Interestingly, there is a huge number of students not pursuring post-grad learning. Post-graduate education is not necessarly for everyone!"
        align="center"
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart
            data={P1}
            {...pieChartProps(isMobile, pageWidth)}
            labelTextSize={20}
            minWidth={500}
          />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Have you secured a full time position post-grad?"
        bodyText="Most students have secured a full time position as they have probably received return offers from the companies they have interned at! UWaterloo's coop program's 2 year worth of work experience also paid off!"
      >
        <div className={styles.graphContainer}>
          <PieChart data={P2} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Are you returning to a prior co-op?"
        bodyText="It’s great to see that most people that have a full-time position have gotten it from a return offer! It goes to show how the co-op program improve the students' employability and allow them to find jobs that they enjoy!"
        align="right"
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={P6} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Where will you be working from post grad? (City, State/Province, Country)"
        bodyText="The US and GTA/Toronto are huge hot spots here, but it’s great to see lots of that these programs can propel students to go to so many different places. Another noteworthy observation is that most students are going to work in the USA postgrad!"
        align="right"
      >
        <WordCloud
          data={P3}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={7}
          desktopMaxFontSize={75}
          mobileMaxFontSize={48}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many offers did you decide between?"
        bodyText="Over half of the participants only had to decide between one or two offers! 35% of respondants had to choose between 3+ offers!"
        noBackground
      >
        <BarGraphVertical data={P4} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many onsites/interviews did you get?"
        bodyText="As lots of people had return offers, it’s only imaginable that a significant portion of the higher end of the onsites / interviews are from the group that didn’t have return offers."
        align="right"
      >
        <BarGraphHorizontal
          data={P5}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={barGraphMargin}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What will be your first year total compensation (salary + signing + first year stock + bonus) in CAD?"
        bodyText="The tech field has interesting levels of annual compensation, these numbers speak for themselves…😜"
        noBackground
      >
        <BarGraphVertical
          data={P7}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What field/career path will you be in post-graduation?"
        bodyText="Computer Science degrees can lead to so many things these days! Web development is an obvious field with web apps being used everywhere nowadays. Artificial Intelligence and Data Science are also becoming increasingly popular fields as they bring out new methods of solving business problems. Cloud computing is also growing in demand by virtualizing IT infrastructure, reducing its costs, and improving its scalability."
        align="right"
      >
        <WordCloud
          data={P8}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={10}
          desktopMaxFontSize={75}
          mobileMaxFontSize={48}
        />
      </ComponentWrapper>

      <BottomNav
        leftPage={pageRoutes.intimacyAndDrugs}
        rightPage={pageRoutes.friends}
      ></BottomNav>
    </div>
  );
}