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

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 college are friends you’ll have for life."
      />

      <ComponentWrapper
        heading="Rate how social you are."
        bodyText="Looks like most people consider themselves in the middle."
        align="center"
      >
        <BarGraphVertical data={F1} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How would you describe yourself?"
        bodyText="Ambiverts and introverts dominate CS at waterloo."
        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 ssame program. Perhaps this makes scheduling and conversations easier."
      >
        <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!"
        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."
      >
        <BarGraphVertical data={F5} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How often do you stay in touch with friends that you made on co-op?"
        bodyText="Many people do not really keep in touch with friends made on co-op. This makes sense as each co-op only lasts a short period of time."
        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 the school terms. This could be because they can hang out during multiple different school terms while on campus."
      >
        <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. But, it is definitely still possible to make friends in the 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."
      >
        <BarGraphVertical data={F9} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What is the average size of your friend groups?"
        bodyText="Those friend groups typically consists of 3-4 people."
        align="right"
      >
        <BarGraphVertical data={F10} {...barGraphProps(isMobile, pageWidth)} />
      </ComponentWrapper>

      <ComponentWrapper
        heading="How open are you to meeting new people?"
        bodyText="Although graduating, most of our respondents are still somewhat open to meeting new people."
      >
        <BarGraphVertical data={F11} {...barGraphProps(isMobile, pageWidth)} />
      </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."
        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."
      >
        <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 hand out in. Looking at our data, at someone’s residence seems where most people like to hang out."
        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!"
      >
        <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!"
        align="right"
      >
        <div className={styles.graphContainer}>
          <PieChart data={F16} {...pieChartProps(isMobile, pageWidth)} />
        </div>
      </ComponentWrapper>

      <BottomNav
        leftPage={pageRoutes.postGrad}
        rightPage={pageRoutes.miscellaneous}
      ></BottomNav>
    </div>
  );
}