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

import { M1, M2, M3, M4, M5, M6, M7 } from "data/miscellaneous";
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="Miscellaneous" subtitle="" />

      <ComponentWrapper
        heading="How often did you cry per school term?"
        bodyText="Crying is definitely okay and not unheard of in university. University is an experience where we can face all kinds of rough patches as we grow up and move away from our parents. To those reading this and feeling down, it does get better! Reach out to close ones and the mental health hotline when you're feeling down! We all need someone to talk to when things don't go well! Don't bury your feelings away with you."
        noBackground
      >
        <BarGraphVertical
          data={M1}
          {...barGraphProps(isMobile, pageWidth)}
          lowerLabelDy="0"
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How many hours per week do you spend on the UW subreddit?"
        bodyText="There’s a reason why r/uwaterloo is one of the most popular University Reddit communities, very highly propelled by students but even has some profs on there too! Check it out if you haven’t heard of it :D"
        align="right"
      >
        <BarGraphVertical
          data={M2}
          {...barGraphProps(isMobile, pageWidth)}
          lowerLabelDy="0"
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="If you had to restart university, what program would you enroll in?"
        bodyText="Good to see that most CS postgrads don’t necessarily regret doing CS or a related degree!"
        noBackground
      >
        <BarGraphHorizontal
          data={M3}
          width={barGraphWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          margin={{ ...barGraphMargin, ...{ left: 220 } }}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="Have you considered dropping/transferring out of your program?"
        bodyText="Roughly ¼ of respondents have considered dropping at some point... Staying in a program that doesn't align with your interests or is too demanding are probably the main reasons a student might consider to switch out to another program."
        align="right"
      >
        <div className={styles.graphContainer}>
          <PieChart data={M4} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="Have you considered dropping out of university or transferring to another university?"
        bodyText="Around one over six thought about leaving or transferring, so you’re not alone if you have also considered this option! Wanting to transfer to another university can be caused by students feeling lonely in their program, feeling overwhelmed by the schoolwork required in that program, disliking the UW campus/campus life, etc."
        noBackground
      >
        <div className={styles.graphContainer}>
          <PieChart data={M5} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <ComponentWrapper
        heading="If you couldn't go to UW, what would you have done instead?"
        bodyText="UofT is very popular here, but for better or worse, you all went to UW instead. :) Meanwhile, UBC is known for its pretty campus which could explain its popularity. A lot of entrepreneurs are also present."
        align="right"
      >
        <WordCloud
          data={M6}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={7}
          desktopMaxFontSize={75}
          mobileMaxFontSize={48}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="In what areas have you grown that are unrelated to CS?"
        bodyText="University is an unforgettable, life-changing, and learning experience that we only get once in a lifetime! Make the most out of it! :)"
        align="center"
        noBackground
      >
        <WordCloud
          data={M7}
          width={wordCloudWidth(isMobile, pageWidth)}
          height={DefaultProp.graphHeight}
          wordPadding={7}
          desktopMaxFontSize={75}
          mobileMaxFontSize={48}
        />
      </ComponentWrapper>

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