From dbb1a5929fad25e0d56d97a99ed1692aca22e976 Mon Sep 17 00:00:00 2001
From: Beihao Zhou <b72zhou@csclub.uwaterloo.ca>
Date: Wed, 7 Dec 2022 21:24:02 -0500
Subject: [PATCH] Add Postgrad Page (Close #58) (#99)

https://b72zhou-postgrad-page-csc-class-profile-stag-snedadah.k8s.csclub.cloud/postgrad/
Co-authored-by: Rebecca-Chou <beihaozhou@gmail.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/pulls/99
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
---
 data/post-grad.ts   | 231 ++++++++++++++++++++++++++++++++++++++++++++
 pages/post-grad.tsx | 137 ++++++++++++++++++++++++++
 2 files changed, 368 insertions(+)
 create mode 100644 data/post-grad.ts
 create mode 100644 pages/post-grad.tsx

diff --git a/data/post-grad.ts b/data/post-grad.ts
new file mode 100644
index 0000000..a6af396
--- /dev/null
+++ b/data/post-grad.ts
@@ -0,0 +1,231 @@
+export const P1 = [
+  {
+    category: "No",
+    value: 64.1,
+  },
+  {
+    category: "Not sure",
+    value: 20.4,
+  },
+  {
+    category: "Yes (Masters)",
+    value: 5,
+  },
+  {
+    category: "Yes (PhD)",
+    value: 4,
+  },
+  {
+    category: "Yes (PhD + Masters)",
+    value: 6.8,
+  },
+];
+
+export const P2 = [
+  {
+    category: "Yes",
+    value: 78.2,
+  },
+  {
+    category: "No",
+    value: 21.8,
+  },
+];
+
+export const P3 = [
+  {
+    text: "Seattle",
+    value: 8,
+  },
+  {
+    text: "New York",
+    value: 20,
+  },
+  {
+    text: "Chicago",
+    value: 4,
+  },
+  {
+    text: "San Francisco",
+    value: 13,
+  },
+  {
+    text: "California",
+    value: 13,
+  },
+  {
+    text: "GTA / Toronto",
+    value: 10,
+  },
+  {
+    text: "Boston",
+    value: 2,
+  },
+];
+
+export const P4 = [
+  {
+    category: "0",
+    value: 1,
+  },
+  {
+    category: "1",
+    value: 19,
+  },
+  {
+    category: "2",
+    value: 31,
+  },
+  {
+    category: "3",
+    value: 17,
+  },
+  {
+    category: "4",
+    value: 6,
+  },
+  {
+    category: "5",
+    value: 5,
+  },
+];
+
+export const P5 = [
+  {
+    category: "0",
+    value: 20,
+  },
+  {
+    category: "1",
+    value: 7,
+  },
+  {
+    category: "2",
+    value: 7,
+  },
+  {
+    category: "3",
+    value: 10,
+  },
+  {
+    category: "4",
+    value: 5,
+  },
+  {
+    category: "5",
+    value: 8,
+  },
+  {
+    category: "6",
+    value: 2,
+  },
+  {
+    category: "7",
+    value: 2,
+  },
+  {
+    category: "8",
+    value: 2,
+  },
+  {
+    category: "10",
+    value: 3,
+  },
+  {
+    category: "12",
+    value: 1,
+  },
+  {
+    category: "15",
+    value: 1,
+  },
+  {
+    category: "35",
+    value: 1,
+  },
+];
+
+export const P6 = [
+  {
+    category: "Yes",
+    value: 61.7,
+  },
+  {
+    category: "No",
+    value: 38.3,
+  },
+];
+
+export const P7 = [
+  {
+    category: "51k-100k",
+    value: 2,
+  },
+  {
+    category: "101k-150k",
+    value: 6,
+  },
+  {
+    category: "151k-200k",
+    value: 16,
+  },
+  {
+    category: "201k-250k",
+    value: 18,
+  },
+  {
+    category: "251k-300k",
+    value: 15,
+  },
+  {
+    category: "300k+",
+    value: 21,
+  },
+];
+
+export const P8 = [
+  {
+    text: "Web development",
+    value: 11,
+  },
+  {
+    text: "Finance",
+    value: 1,
+  },
+  {
+    text: "Cloud Computing",
+    value: 5,
+  },
+  {
+    text: "Artificial Intelligence",
+    value: 3,
+  },
+  {
+    text: "Robotics",
+    value: 1,
+  },
+  {
+    text: "Data Science",
+    value: 6,
+  },
+  {
+    text: "Research",
+    value: 3,
+  },
+  {
+    text: "Security",
+    value: 1,
+  },
+  {
+    text: "Hardware",
+    value: 2,
+  },
+  {
+    text: "Mobile Development",
+    value: 1,
+  },
+  {
+    text: "Computer Networking",
+    value: 2,
+  },
+];
diff --git a/pages/post-grad.tsx b/pages/post-grad.tsx
new file mode 100644
index 0000000..5c5c5b9
--- /dev/null
+++ b/pages/post-grad.tsx
@@ -0,0 +1,137 @@
+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"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={P1} {...pieChartProps(isMobile, pageWidth)} />
+        </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>
+  );
+}