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

import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
import { pageRoutes } from "data/routes";
import React from "react";
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 { SectionHeader } from "@/components/SectionHeader";
import { WordCloud } from "@/components/WordCloud";

import styles from "./samplePage.module.css";

export default function SamplePage() {
  const { width } = useWindowDimensions();
  const isMobile = useIsMobile();

  // For components that are in the side wrappers, it looks better if they fill a certain amount of width, so we can make the width dynamic like this
  const defaultGraphWidth = isMobile ? width / 1.25 : width / 2;
  const defaultGraphHeight = 500;

  // Make vars for common configs such as common margins
  const defaultBarGraphMargin = { top: 20, bottom: 40, left: 150, right: 20 };

  return (
    <div className={styles.page}>
      <Header />
      <SectionHeader
        title="Demographics"
        subtitle="An insight into the demographics of UW’s CS programs"
      />
      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
      >
        <BarGraphVertical
          data={mockCategoricalData}
          width={defaultGraphWidth}
          height={defaultGraphHeight}
          margin={defaultBarGraphMargin}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
        align="center"
      >
        <WordCloud
          data={moreMockCategoricalData.map((word) => ({
            text: word.key,
            value: word.value,
          }))}
          // For components that we don't want to match the width necessarily we can provide direct values
          width={defaultGraphWidth}
          height={defaultGraphHeight}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
        align="right"
      >
        <BarGraphHorizontal
          className={styles.barGraphDemo}
          data={mockCategoricalData}
          width={defaultGraphWidth}
          height={defaultGraphHeight}
          margin={defaultBarGraphMargin}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
        align="left"
        noBackground
      >
        <BarGraphHorizontal
          className={styles.barGrapDemo}
          data={mockCategoricalData}
          width={defaultGraphWidth}
          height={defaultGraphHeight}
          margin={defaultBarGraphMargin}
        />
      </ComponentWrapper>

      <ComponentWrapper heading="What program are you in?" align="left">
        <BarGraphHorizontal
          className={styles.barGraphDemo}
          data={mockCategoricalData}
          width={defaultGraphWidth}
          height={defaultGraphHeight}
          margin={defaultBarGraphMargin}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
        align="left"
        noBackground
      >
        <WordCloud
          data={moreMockCategoricalData.map((word) => ({
            text: word.key,
            value: word.value,
          }))}
          width={defaultGraphWidth}
          height={defaultGraphHeight}
        />
      </ComponentWrapper>

      <ComponentWrapper heading="What program are you in? " align="right">
        <WordCloud
          data={moreMockCategoricalData.map((word) => ({
            text: word.key,
            value: word.value,
          }))}
          width={defaultGraphWidth}
          height={defaultGraphHeight}
        />
      </ComponentWrapper>
      <ComponentWrapper heading="What program are you in?" align="center">
        <WordCloud
          data={moreMockCategoricalData.map((word) => ({
            text: word.key,
            value: word.value,
          }))}
          width={defaultGraphWidth}
          height={defaultGraphHeight}
        />
      </ComponentWrapper>

      <ComponentWrapper heading="What program are you in?" align="left">
        <WordCloud
          data={moreMockCategoricalData.map((word) => ({
            text: word.key,
            value: word.value,
          }))}
          width={defaultGraphWidth}
          height={defaultGraphHeight}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
        align="right"
        noBackground
      >
        <BarGraphHorizontal
          className={styles.barGraphDemo}
          data={mockCategoricalData}
          width={defaultGraphWidth}
          height={defaultGraphHeight}
          margin={defaultBarGraphMargin}
        />
      </ComponentWrapper>

      <ComponentWrapper
        heading="What program are you in?"
        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
        align="left"
      >
        <BarGraphHorizontal
          className={styles.barGraphDemo}
          data={mockCategoricalData}
          width={defaultGraphWidth}
          height={defaultGraphHeight}
          margin={defaultBarGraphMargin}
        />
      </ComponentWrapper>

      <ComponentWrapper heading="What program are you in?" align="center">
        <WordCloud
          data={moreMockCategoricalData.map((word) => ({
            text: word.key,
            value: word.value,
          }))}
          width={defaultGraphWidth}
          height={defaultGraphHeight}
        />
      </ComponentWrapper>

      <BottomNav
        leftPage={pageRoutes.demographics}
        rightPage={pageRoutes.contributors}
      ></BottomNav>
    </div>
  );
}