From 7bcd11e18650a5a18625d51c637166f628bb9e84 Mon Sep 17 00:00:00 2001
From: Beihao Zhou <b72zhou@csclub.uwaterloo.ca>
Date: Sun, 11 Dec 2022 19:18:15 -0500
Subject: [PATCH] Add Friends Page (Close #59) (#105)

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/105
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
---
 data/friends.ts   | 487 ++++++++++++++++++++++++++++++++++++++++++++++
 pages/friends.tsx | 233 ++++++++++++++++++++++
 2 files changed, 720 insertions(+)
 create mode 100644 data/friends.ts
 create mode 100644 pages/friends.tsx

diff --git a/data/friends.ts b/data/friends.ts
new file mode 100644
index 0000000..698ee8d
--- /dev/null
+++ b/data/friends.ts
@@ -0,0 +1,487 @@
+export const F1 = [
+  {
+    category: "1",
+    value: 5,
+  },
+  {
+    category: "2",
+    value: 4,
+  },
+  {
+    category: "3",
+    value: 11,
+  },
+  {
+    category: "4",
+    value: 19,
+  },
+  {
+    category: "5",
+    value: 17,
+  },
+  {
+    category: "6",
+    value: 15,
+  },
+  {
+    category: "7",
+    value: 19,
+  },
+  {
+    category: "8",
+    value: 6,
+  },
+  {
+    category: "9",
+    value: 2,
+  },
+  {
+    category: "10",
+    value: 5,
+  },
+];
+
+export const F2 = [
+  {
+    category: "Introvert",
+    value: 53,
+  },
+  {
+    category: "Extrovert",
+    value: 11,
+  },
+  {
+    category: "Ambivert",
+    value: 39,
+  },
+];
+
+export const F3 = [
+  {
+    category: "None",
+    value: 5,
+  },
+  {
+    category: "Half",
+    value: 25,
+  },
+  {
+    category: "Some",
+    value: 28,
+  },
+  {
+    category: "Majority",
+    value: 42,
+  },
+  {
+    category: "All",
+    value: 3,
+  },
+];
+
+export const F4 = [
+  {
+    category: "Rarely",
+    value: 21,
+  },
+  {
+    category: "Sometimes",
+    value: 33,
+  },
+  {
+    category: "Often",
+    value: 34,
+  },
+  {
+    category: "Always",
+    value: 15,
+  },
+];
+
+export const F5 = [
+  {
+    category: "0",
+    value: 7,
+  },
+  {
+    category: "1-2",
+    value: 29,
+  },
+  {
+    category: "3-5",
+    value: 35,
+  },
+  {
+    category: "5-10",
+    value: 10,
+  },
+  {
+    category: "10+",
+    value: 6,
+  },
+  {
+    category: "Unsure",
+    value: 14,
+  },
+];
+
+export const F6 = [
+  {
+    category: "Often",
+    value: 8,
+  },
+  {
+    category: "Sometimes",
+    value: 37,
+  },
+  {
+    category: "Rarely",
+    value: 38,
+  },
+  {
+    category: "Never",
+    value: 17,
+  },
+  {
+    category: "Always",
+    value: 1,
+  },
+];
+
+export const F7 = [
+  {
+    category: "Often",
+    value: 36,
+  },
+  {
+    category: "Sometimes",
+    value: 35,
+  },
+  {
+    category: "Rarely",
+    value: 14,
+  },
+  {
+    category: "Never",
+    value: 3,
+  },
+  {
+    category: "Always",
+    value: 14,
+  },
+];
+
+export const F8 = [
+  {
+    category: "1A",
+    value: 52,
+  },
+  {
+    category: "1B",
+    value: 35,
+  },
+  {
+    category: "2A",
+    value: 23,
+  },
+  {
+    category: "2B",
+    value: 26,
+  },
+  {
+    category: "3A",
+    value: 7,
+  },
+  {
+    category: "3B",
+    value: 3,
+  },
+  {
+    category: "4A",
+    value: 7,
+  },
+  {
+    category: "4B",
+    value: 13,
+  },
+  {
+    category: "1st coop",
+    value: 7,
+  },
+  {
+    category: "2nd coop",
+    value: 8,
+  },
+  {
+    category: "3rd coop",
+    value: 8,
+  },
+  {
+    category: "4th coop",
+    value: 3,
+  },
+  {
+    category: "5th coop",
+    value: 5,
+  },
+  {
+    category: "6th coop",
+    value: 3,
+  },
+];
+
+export const F9 = [
+  {
+    category: "0",
+    value: 1,
+  },
+  {
+    category: "1",
+    value: 13,
+  },
+  {
+    category: "2",
+    value: 32,
+  },
+  {
+    category: "3-4",
+    value: 50,
+  },
+  {
+    category: "5-10",
+    value: 7,
+  },
+];
+
+export const F10 = [
+  {
+    category: "0",
+    value: 1,
+  },
+  {
+    category: "1-2",
+    value: 8,
+  },
+  {
+    category: "3-4",
+    value: 49,
+  },
+  {
+    category: "5-10",
+    value: 43,
+  },
+  {
+    category: "11+",
+    value: 1,
+  },
+];
+
+export const F11 = [
+  {
+    category: "0",
+    value: 2,
+  },
+  {
+    category: "1",
+    value: 9,
+  },
+  {
+    category: "2",
+    value: 20,
+  },
+  {
+    category: "3",
+    value: 29,
+  },
+  {
+    category: "4",
+    value: 27,
+  },
+  {
+    category: "5",
+    value: 16,
+  },
+];
+
+export const F12 = [
+  {
+    category: "Most",
+    value: 41,
+  },
+  {
+    category: "Some",
+    value: 49,
+  },
+  {
+    category: "All",
+    value: 4,
+  },
+  {
+    category: "Barely",
+    value: 8,
+  },
+  {
+    category: "No",
+    value: 1,
+  },
+];
+
+export const F13 = [
+  {
+    category: "Classes",
+    value: 81,
+  },
+  {
+    category: "Mutual friends",
+    value: 71,
+  },
+  {
+    category: "Extracurriculars",
+    value: 53,
+  },
+  {
+    category: "Coop",
+    value: 40,
+  },
+  {
+    category: "Parties",
+    value: 15,
+  },
+  {
+    category: "Online",
+    value: 9,
+  },
+  {
+    category: "Residence",
+    value: 3,
+  },
+];
+
+export const F14 = [
+  {
+    category: "Res",
+    value: 78,
+  },
+  {
+    category: "MC",
+    value: 36,
+  },
+  {
+    category: "DC",
+    value: 21,
+  },
+  {
+    category: "PAC",
+    value: 14,
+  },
+  {
+    category: "SLC",
+    value: 11,
+  },
+  {
+    category: "DP",
+    value: 4,
+  },
+  {
+    category: "E7",
+    value: 9,
+  },
+  {
+    category: "E5",
+    value: 3,
+  },
+  {
+    category: "E5",
+    value: 3,
+  },
+  {
+    category: "CIF",
+    value: 5,
+  },
+  {
+    category: "AL",
+    value: 2,
+  },
+  {
+    category: "CIF",
+    value: 5,
+  },
+  {
+    category: "Plaza",
+    value: 3,
+  },
+];
+
+export const F15 = [
+  {
+    text: "Chatting/Talking",
+    value: 12,
+  },
+  {
+    text: "Eating food",
+    value: 36,
+  },
+  {
+    text: "Workout",
+    value: 11,
+  },
+  {
+    text: "Drinking",
+    value: 7,
+  },
+  {
+    text: "Study",
+    value: 9,
+  },
+  {
+    text: "Board games",
+    value: 10,
+  },
+  {
+    text: "Video games",
+    value: 8,
+  },
+  {
+    text: "Watch TV Shows/Animes/Movies",
+    value: 4,
+  },
+  {
+    text: "Party",
+    value: 2,
+  },
+  {
+    text: "Cook",
+    value: 2,
+  },
+  {
+    text: "Exploring new places",
+    value: 1,
+  },
+  {
+    text: "Clubs",
+    value: 1,
+  },
+];
+
+export const F16 = [
+  {
+    category: "Most",
+    value: 49,
+  },
+  {
+    category: "Some",
+    value: 36,
+  },
+  {
+    category: "All",
+    value: 9,
+  },
+  {
+    category: "Barely",
+    value: 6,
+  },
+  {
+    category: "No",
+    value: 2,
+  },
+];
\ No newline at end of file
diff --git a/pages/friends.tsx b/pages/friends.tsx
new file mode 100644
index 0000000..192b9d7
--- /dev/null
+++ b/pages/friends.tsx
@@ -0,0 +1,233 @@
+import {
+  F1,
+  F2,
+  F3,
+  F4,
+  F5,
+  F6,
+  F7,
+  F8,
+  F9,
+  F10,
+  F11,
+  F12,
+  F13,
+  F14,
+  F15,
+  F16,
+} from "data/friends";
+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="Friends"
+        subtitle="The friends you make in university are friends you’ll have for life."
+      />
+
+      <ComponentWrapper
+        heading="Rate how social you are."
+        bodyText="Looks like most people consider themselves to be in the middle."
+        align="center"
+      >
+        <BarGraphVertical
+          data={F1}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How would you describe yourself?"
+        bodyText="Ambiverts and introverts dominate CS at UWaterloo. Still, contrary to a popular Reddit opinion, it seems that introverted people do not necessarily comprise such a big majority of the CS student population. Extroverts and ambiverts are almost a half of the CS student population!"
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F2} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many close friends throughout university were also in your program?"
+        bodyText="Most people had friends in the same program as them. For a lot of people, the majority of their friends are in the same program. Perhaps the shared classes, career goals, and pain from shared assignments make scheduling and conversations easier."
+        noBackground
+      >
+        <BarGraphVertical data={F3} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often do you keep in touch with high school friends?"
+        bodyText="Most people are still in touch with their friends in some form or another! Keeping in touch with high school friends can be especially difficult, given that high school friends often drift away from each other due to different career and/or academic paths."
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F4} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many friends are going to be in the same city as you post-grad?"
+        bodyText="It is nice to know that the majority of our respondents have a few friends that are going to be in their city post-grad."
+        noBackground
+      >
+        <BarGraphVertical data={F5} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often do you stay in touch with friends that you made during co-op?"
+        bodyText="Many people do not really keep in touch with friends made during co-op. This makes sense as each co-op only lasts a short period of time. Interns are not necessarily given the opportunity to interact with each other during the co-op term either. A remote co-op experience can also affect friendships. To sum up, the ease of maintaining friends from co-ops varies on each co-op!"
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F6} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often do you stay in touch with friends that you made during school terms?"
+        bodyText="Now, more people keep in touch with friends made during school terms. This could be because they can hang out during multiple school terms while on campus."
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F7} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Which term(s) did you meet most of your friends?"
+        bodyText="Establishing friendships is generally easier during the beginning of university as many core introductory courses are shared and all sequences have 1A and 1B at the same time. However, it is definitely still possible to make friends in later terms.😉"
+        align="right"
+      >
+        <BarGraphHorizontal
+          data={F8}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 100 } }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many friend groups do you have?"
+        bodyText="According to our data, most people have 3-4 friend groups. These friend groups can come from classes, extracurriculars, high school friends, etc."
+        noBackground
+      >
+        <BarGraphVertical
+          data={F9}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What is the average size of your friend groups?"
+        bodyText="UW's CS2022's friend groups typically consists of 3-4 people which is pretty normal. Groups of friends of this size allow people to do group activities while maintaining a sense of closeness between them."
+        align="right"
+      >
+        <BarGraphVertical
+          data={F10}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How open are you to meeting new people?"
+        bodyText="Even though they are graduating, most of our respondents are still somewhat open to meeting new people. Meeting new people can make your life more exciting and make you discover new perspectives that change the way you approach life!"
+        noBackground
+      >
+        <BarGraphVertical
+          data={F11}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many of your friendships were made after starting university?"
+        bodyText="For a lot of people, most or at least some friendships are made during university. This goes to show how university is an important point in life where people form their most valuable relationships!"
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F12} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How did you meet most of your friends after starting university?"
+        bodyText="There are countless ways to meet new friends in university. Some of the most common ways include classes, mutual friends, and extracurriculars."
+        noBackground
+      >
+        <BarGraphHorizontal
+          data={F13}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 150 } }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Where do you and your friends usually hang out on campus? "
+        bodyText="There are many buildings on campus for students to chill and hang out. Looking at our data, hanging out at someone’s residence seems to be the most popular option. It makes sense as having fun outside of school buildings enable people to take their mind off from schoolwork. MC and DC are also fairly popular spots since they are where most classes take place for CS students and DC is the library where most students study at due to its nice vibes while MC has all the club offices."
+        align="right"
+      >
+        <BarGraphVertical data={F14} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What is your go-to activity when hanging out with friends?"
+        bodyText="There is a variety of activities enjoyed by everyone! Most people enjoy eating food with their friends (Who doesn't love to eat or try out new restaurants?). Talking and going to the gym are the next social activities that are favoured the most by students. Hanging out with friends doesn't have to be complicated! 😉"
+        noBackground
+      >
+        <WordCloud
+          data={F15}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={7}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={48}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What proportion of friends will you keep in contact with post graduation?"
+        bodyText="Some or even most friendships will be kept by our students post-grad! As mentioned previously, university is an experience where people make most of their long-term friends! This pie chart demonstrates it!"
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F16} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <BottomNav
+        leftPage={pageRoutes.postGrad}
+        rightPage={pageRoutes.miscellaneous}
+      ></BottomNav>
+    </div>
+  );
+}