From 3fb136fd1a59a97f6df3c1cbd6d9d1b261a24201 Mon Sep 17 00:00:00 2001
From: Rebecca-Chou <beihaozhou@gmail.com>
Date: Fri, 2 Dec 2022 16:06:33 -0500
Subject: [PATCH] :feat: add lifestyle-and-interest page

---
 data/lifestyle-and-interests.ts   | 730 ++++++++++++++++++++++++++++++
 pages/lifestyle-and-interests.tsx | 231 ++++++++++
 2 files changed, 961 insertions(+)
 create mode 100644 data/lifestyle-and-interests.ts
 create mode 100644 pages/lifestyle-and-interests.tsx

diff --git a/data/lifestyle-and-interests.ts b/data/lifestyle-and-interests.ts
new file mode 100644
index 0000000..b688cdb
--- /dev/null
+++ b/data/lifestyle-and-interests.ts
@@ -0,0 +1,730 @@
+export const L1 = [
+  {
+    category: "Yes",
+    value: 85,
+  },
+  {
+    category: "No",
+    value: 15,
+  },
+];
+
+export const L2 = [
+  {
+    category: "3+",
+    value: 85.5,
+  },
+  {
+    category: "2",
+    value: 12.5,
+  },
+  {
+    category: "1",
+    value: 1,
+  },
+  {
+    category: "0",
+    value: 1,
+  },
+];
+
+export const L3 = [
+  {
+    category: "Never",
+    value: 76,
+  },
+  {
+    category: "No longer",
+    value: 5,
+  },
+  {
+    category: "Still",
+    value: 19,
+  },
+  {
+    category: "Became",
+    value: 2,
+  },
+];
+
+export const L4 = [
+  {
+    category: "Yes",
+    value: 55,
+  },
+  {
+    category: "No",
+    value: 12.5,
+  },
+  {
+    category: "Knew",
+    value: 34,
+  },
+];
+
+export const L5 = [
+  {
+    category: "0",
+    value: 9,
+  },
+  {
+    category: "1",
+    value: 6,
+  },
+  {
+    category: "2",
+    value: 12,
+  },
+  {
+    category: "3",
+    value: 24,
+  },
+  {
+    category: "4",
+    value: 16,
+  },
+  {
+    category: "5",
+    value: 17,
+  },
+  {
+    category: "6",
+    value: 11,
+  },
+  {
+    category: "7",
+    value: 8,
+  },
+];
+
+export const L6 = [
+  {
+    category: "Few times a week",
+    value: 4,
+  },
+  {
+    category: "Monthly",
+    value: 7,
+  },
+  {
+    category: "Never",
+    value: 41,
+  },
+  {
+    category: "Once every few months",
+    value: 43,
+  },
+  {
+    category: "Once every few weeks",
+    value: 3,
+  },
+  {
+    category: "Weekly",
+    value: 6,
+  },
+];
+
+export const L7 = [
+  {
+    category: "Agree",
+    value: 43,
+  },
+  {
+    category: "Disagree",
+    value: 26,
+  },
+  {
+    category: "Neither",
+    value: 19,
+  },
+  {
+    category: "Strongly agree",
+    value: 9,
+  },
+  {
+    category: "Strongly disagree",
+    value: 7,
+  },
+];
+
+export const L8 = [
+  {
+    category: "Couple times per month",
+    value: 36,
+  },
+  {
+    category: "Rarely",
+    value: 35,
+  },
+  {
+    category: "Holidays only",
+    value: 18,
+  },
+  {
+    category: "Almost every week",
+    value: 12,
+  },
+  {
+    category: "Once a month",
+    value: 1,
+  },
+  {
+    category: "Monthly",
+    value: 1,
+  },
+];
+
+export const L9 = [
+  {
+    category: "Before 9",
+    value: 1,
+  },
+  {
+    category: "9pm - 11pm",
+    value: 11,
+  },
+  {
+    category: "11pm - 1am",
+    value: 29,
+  },
+  {
+    category: "1am - 3am",
+    value: 46,
+  },
+  {
+    category: "3am - 5am",
+    value: 12,
+  },
+  {
+    category: "5am onwards",
+    value: 3,
+  },
+];
+
+export const L10 = [
+  {
+    category: "0-2",
+    value: 1,
+  },
+  {
+    category: "3-4",
+    value: 2,
+  },
+  {
+    category: "5-6",
+    value: 30,
+  },
+  {
+    category: "7-8",
+    value: 63,
+  },
+  {
+    category: "9+",
+    value: 8,
+  },
+];
+
+export const L11 = [
+  {
+    category: "0",
+    value: 8,
+  },
+  {
+    category: "1",
+    value: 13,
+  },
+  {
+    category: "2",
+    value: 19,
+  },
+  {
+    category: "3",
+    value: 21,
+  },
+  {
+    category: "4",
+    value: 10,
+  },
+  {
+    category: "5",
+    value: 18,
+  },
+  {
+    category: "6",
+    value: 6,
+  },
+  {
+    category: "7",
+    value: 9,
+  },
+];
+
+export const L12 = [
+  {
+    text: "Gol's Lanzhou Noodle",
+    value: 15,
+  },
+  {
+    text: "Lazeez Shawarma",
+    value: 5,
+  },
+  {
+    text: "Nuri Village",
+    value: 5,
+  },
+  {
+    text: "Ken's sushi",
+    value: 8,
+  },
+  {
+    text: "Williams Fresh Cafe",
+    value: 4,
+  },
+  {
+    text: "Song's Lamian",
+    value: 2,
+  },
+  {
+    text: "Shinwa",
+    value: 3,
+  },
+  {
+    text: "Oka Sushi",
+    value: 2,
+  },
+  {
+    text: "Mel's",
+    value: 2,
+  },
+  {
+    text: "Shawarma Plus",
+    value: 3,
+  },
+  {
+    text: "iPotato",
+    value: 3,
+  },
+  {
+    text: "Kim's Kitchen",
+    value: 2,
+  },
+  {
+    text: "Baba grill",
+    value: 2,
+  },
+  {
+    text: "Waterloo Star",
+    value: 1,
+  },
+  {
+    text: "Loobapbap",
+    value: 1,
+  },
+  {
+    text: "Momo",
+    value: 1,
+  },
+  {
+    text: "Onnuri",
+    value: 1,
+  },
+  {
+    text: "Kinkaku",
+    value: 1,
+  },
+  {
+    text: "Tim Hortons",
+    value: 1,
+  },
+  {
+    text: "Fresh Burrito",
+    value: 1,
+  },
+  {
+    text: "Home Garden - Taste of Taiwan",
+    value: 1,
+  },
+  {
+    text: "Yangyum",
+    value: 1,
+  },
+  {
+    text: "Mozy's",
+    value: 1,
+  },
+  {
+    text: "Rolltations",
+    value: 1,
+  },
+  {
+    text: "Harvey's",
+    value: 1,
+  },
+  {
+    text: "Fantastic Wok",
+    value: 1,
+  },
+  {
+    text: "Foodie Fruitie",
+    value: 1,
+  },
+  {
+    text: "Bao Sandwich Bar",
+    value: 1,
+  },
+  {
+    text: "Soul Seoul",
+    value: 1,
+  },
+  {
+    text: "Burrito Boyz",
+    value: 1,
+  },
+  {
+    text: "Poke Box",
+    value: 1,
+  },
+  {
+    text: "Thai Express",
+    value: 1,
+  },
+  {
+    text: "Molly blooms",
+    value: 1,
+  },
+  {
+    text: "Better Chef",
+    value: 1,
+  },
+];
+
+export const L13 = [
+  {
+    category: "Sometimes easy",
+    value: 5,
+  },
+  {
+    category: "Always easy",
+    value: 5,
+  },
+  {
+    category: "Always easy and sometimes medium",
+    value: 25,
+  },
+  {
+    category: "Always easy and medium",
+    value: 22,
+  },
+  {
+    category: "Always medium and sometimes hard",
+    value: 32,
+  },
+  {
+    category: "Always medium and hard",
+    value: 10,
+  },
+];
+
+export const L14 = [
+  {
+    category: "0",
+    value: 22,
+  },
+  {
+    category: "1",
+    value: 18,
+  },
+  {
+    category: "2",
+    value: 22,
+  },
+  {
+    category: "3",
+    value: 21,
+  },
+  {
+    category: "4",
+    value: 5,
+  },
+  {
+    category: "5",
+    value: 8,
+  },
+  {
+    category: "6",
+    value: 4,
+  },
+  {
+    category: "7",
+    value: 1,
+  },
+  {
+    category: "8",
+    value: 1,
+  },
+];
+
+export const L16 = [
+  {
+    category: "Never or rarely",
+    value: 89.1,
+  },
+  {
+    category: "1+ per year",
+    value: 9.9,
+  },
+  {
+    category: "Weekly",
+    value: 1,
+  },
+];
+
+export const L17 = [
+  {
+    text: "MathSoc",
+    value: 9,
+  },
+  {
+    text: "Blueprint",
+    value: 8,
+  },
+  {
+    text: "Muay Thai",
+    value: 8,
+  },
+  {
+    text: "Volleyball",
+    value: 6,
+  },
+  {
+    text: "Dodgeball",
+    value: 6,
+  },
+  {
+    text: "Frisbee",
+    value: 7,
+  },
+  {
+    text: "CSC",
+    value: 5,
+  },
+  {
+    text: "Basketball",
+    value: 6,
+  },
+  {
+    text: "UWACC",
+    value: 5,
+  },
+  {
+    text: "Badminton",
+    value: 5,
+  },
+  {
+    text: "Watonomous",
+    value: 4,
+  },
+  {
+    text: "WiCS",
+    value: 4,
+  },
+  {
+    text: "Tech+",
+    value: 4,
+  },
+  {
+    text: "Chess",
+    value: 4,
+  },
+  {
+    text: "PMC",
+    value: 3,
+  },
+  {
+    text: "HipHop",
+    value: 3,
+  },
+  {
+    text: "Orchestra",
+    value: 3,
+  },
+  {
+    text: "Waterloop",
+    value: 3,
+  },
+  {
+    text: "Soccer",
+    value: 3,
+  },
+  {
+    text: "DSC",
+    value: 3,
+  },
+  {
+    text: "Hack the North",
+    value: 2,
+  },
+  {
+    text: "ACE",
+    value: 2,
+  },
+  {
+    text: "Cuban Salsa",
+    value: 2,
+  },
+  {
+    text: "Aquadrone",
+    value: 2,
+  },
+  {
+    text: "Magic",
+    value: 2,
+  },
+  {
+    text: "Fencing",
+    value: 2,
+  },
+  {
+    text: "CCF",
+    value: 2,
+  },
+  {
+    text: "DJ",
+    value: 2,
+  },
+  {
+    text: "Tennis",
+    value: 2,
+  },
+  {
+    text: "UWCSA",
+    value: 2,
+  },
+  {
+    text: "mathNEWS",
+    value: 2,
+  },
+  {
+    text: "Toastmasters",
+    value: 2,
+  },
+  {
+    text: "Chamber Ensembles",
+    value: 2,
+  },
+  {
+    text: "UWFA",
+    value: 2,
+  },
+  {
+    text: "WiSTEM",
+    value: 1,
+  },
+  {
+    text: "KC",
+    value: 1,
+  },
+  {
+    text: "WARG",
+    value: 1,
+  },
+  {
+    text: "Swimming",
+    value: 1,
+  },
+  {
+    text: "Skating",
+    value: 1,
+  },
+  {
+    text: "Boxing",
+    value: 1,
+  },
+  {
+    text: "Movie",
+    value: 1,
+  },
+  {
+    text: "Theatre",
+    value: 1,
+  },
+  {
+    text: "Cooking",
+    value: 1,
+  },
+  {
+    text: "TechNova",
+    value: 1,
+  },
+  {
+    text: "CTF",
+    value: 1,
+  },
+  {
+    text: "Robotics Design Team",
+    value: 1,
+  },
+  {
+    text: "EntSoc",
+    value: 1,
+  },
+  {
+    text: "UWEN",
+    value: 1,
+  },
+];
+
+export const L18 = [
+  {
+    category: "DC",
+    value: 22,
+  },
+  {
+    category: "MC",
+    value: 23,
+  },
+  
+  {
+    category: "Res",
+    value: 16,
+  },
+  {
+    category: "E7",
+    value: 11,
+  },
+  {
+    category: "QNC",
+    value: 9,
+  },
+  {
+    category: "DP",
+    value: 5,
+  },
+  {
+    category: "SLC",
+    value: 4,
+  },
+  {
+    category: "E5",
+    value: 3,
+  },
+  {
+    category: "EV3",
+    value: 3,
+  },
+  {
+    category: "PHY",
+    value: 1,
+  },
+];
+
+export const L19 = [
+  {
+    category: "No",
+    value: 78,
+  },
+  {
+    category: "Yes",
+    value: 22,
+  },
+]
\ No newline at end of file
diff --git a/pages/lifestyle-and-interests.tsx b/pages/lifestyle-and-interests.tsx
new file mode 100644
index 0000000..1e3a729
--- /dev/null
+++ b/pages/lifestyle-and-interests.tsx
@@ -0,0 +1,231 @@
+import {
+  L1,
+  L2,
+  L3,
+  L4,
+  L5,
+  L6,
+  L7,
+  L8,
+  L9,
+  L10,
+  L11,
+  L12,
+  L13,
+  L14,
+  L16,
+  L17,
+  L18,
+  L19,
+} from "data/lifestyle-and-interests";
+import { pageRoutes } from "data/routes";
+import React from "react";
+import {
+  barGraphProps,
+  DefaultProp,
+  pieChartProps,
+  barGraphMargin,
+  barGraphWidth,
+} 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="Lifestyle and Interests"
+        subtitle="What do CS people do in their free time?"
+      />
+
+      <ComponentWrapper
+        heading="Did you move back home during the beginning of COVID-19?"
+        bodyText="The vast majority of respondent did move back home during the beginning of Covid, which makes sense given the situation. "
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={L1} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have many doses of COVID-19 vaccination have you gotten?"
+        bodyText="Complete proof of vaccination used to be a requirement for entering campus, unless there are special circumstances. Here, we can see that everyone except for 2 people had 2 or more doses. The large majority had 3+ doses."
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={L2} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How did your outlook on religion change during university?"
+        bodyText="Interestingly, most of our respondents were never religious."
+      >
+        <BarGraphVertical data={L3} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Did you learn how to cook during university?"
+        bodyText="Only 12 people indicated that they have not learned to cook. As for the rest, more stated that they learned to cook during university rather than before. This could correlate to university being the first time that many students move out from their parent/gardian’s place."
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={L4} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many days are you physically active in a week now?"
+        bodyText="It’s nice to see that most Waterloo student are active at least a few days a week! CS is an especially sedentary major so it’s important to stay active and take care of your bodies."
+      >
+        <BarGraphVertical data={L5} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often did you pull all-nighters throughout university?"
+        bodyText="84 people have either never pulled an all-nighter or only once every few months. With decent time management skills, work is definitely manageable and sleep does not have to be sacrificed."
+        noBackground
+      >
+        <BarGraphVertical data={L6} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading='Rate how strongly you agree with the following statement: "Throughout my university experience, I felt like I had enough time to pursue my own hobbies."'
+        bodyText="However, it seems like many people did not find enough time for their hobbies. Workloads can often pile up."
+        align="right"
+      >
+        <BarGraphVertical data={L7} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often did you attend parties/gatherings?"
+        bodyText="A lot of students attend social events to relieve some stress and build relationships. Many Waterloo students our no exception. Although we are not know for our parties, they can still frequently be found in residence areas around campus."
+        align="left"
+      >
+        <BarGraphHorizontal
+          data={L8}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 200 } }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What time do you usually sleep?"
+        bodyText="Looks like we have a lot of nightowls!"
+        align="right"
+      >
+        <BarGraphVertical data={L9} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many hours of sleep do you get on average per night?"
+        bodyText="Although many of our respondents sleep late, most people are getting 7+ hours every night. Our class schedules are typically somewhat flexible and morning classes are usually not super popular amoung students."
+        align="left"
+      >
+        <BarGraphVertical data={L10} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="While on campus, how many days out of the week do you go out to eat at a restaurant?"
+        bodyText="Waterloo’s campus is surrounded by great food places. We have a plaza filled with restaurants that serve all sorts of food such as Mexican, East Asian, Persian, Indian, etc. Although most students have learned to cook, we still enjoy eating out ever so often."
+        align="right"
+      >
+        <BarGraphVertical data={L11} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What is your favourite restaurant to go to on/around campus?"
+        bodyText="With all the diverse restaurant around campus, it seems like the most popular choices of food are sushi, noodles, and shawarma."
+        noBackground
+      >
+        <WordCloud
+          data={L12}
+          width={isMobile ? pageWidth / 1.5 : 800}
+          height={DefaultProp.graphHeight}
+          wordPadding={7}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={48}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What is your Leetcode proficiency level?"
+        bodyText="Most respondents can consistently solve medium leetcode questions, which are often asked by large tech companies during interviews. Some people also responded with being able to solve hard level questions on leetcode, going above and beyond."
+        align="right"
+      >
+        <BarGraphHorizontal
+          data={L13}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 270 } }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many side projects have you completed during university, if any?"
+        bodyText="Students invest time into side projects to show companies their software experiences and skills. Building side projects is a great way to compensate for lack of actual work experience. Many of our respondents are shown to have completed a few side projects, however, a large amount of them have indicated that they have not down any at all. This shows that side projects are not the only factor to landing a job."
+      >
+        <BarGraphVertical data={L14} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often do you attend hackathons now?"
+        bodyText="Similar to side projects, hackathons allow students to show companies their software skills and passion in technology. Many creative projects stem from hackathons as well. But, hackathons are definitely not a necessity. In fact, we see that the vast majority of our respondents have never or very rarely attended hackathons."
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={L16} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Which extracurricular activities (e.g., design teams, sports, intramurals, clubs, societies) did you participate in? "
+        bodyText="Many of our respondents are involved with one or more extracurricular activities during university. These include sports, clubs, societies, and more."
+      >
+        <WordCloud
+          data={L17}
+          width={isMobile ? pageWidth / 1.5 : 800}
+          height={DefaultProp.graphHeight}
+          wordPadding={7}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={48}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Where is your favourite place to study on campus?"
+        bodyText="The most popular study locations according to our respondents are the Mathematics & Computer Building (MC) and the William G. Davis Computer Research Centre (DC), each having 23 and 22 votes respectively. Other popular places include on residence, QNC, and E7."
+        align="right"
+      >
+        <PieChart data={L18} {...pieChartProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have you done a URA (Undergraduate Research Assistantship)?"
+        bodyText="URA provide students with the opportunity to gain research experience, usually with a professor, while earning some money."
+      >
+        <PieChart data={L19} {...pieChartProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <BottomNav
+        leftPage={pageRoutes.intimacyAndDrugs}
+        rightPage={pageRoutes.mentalHealth}
+      ></BottomNav>
+    </div>
+  );
+}