117 lines
4.1 KiB
TypeScript
117 lines
4.1 KiB
TypeScript
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. If you’re seeing this and feeling down, it does get better! "
|
||
>
|
||
<BarGraphVertical data={M1} {...barGraphProps(isMobile, pageWidth)} />
|
||
</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)} />
|
||
</ComponentWrapper>
|
||
|
||
<ComponentWrapper
|
||
heading="If you had to restart university, what program would you enroll in?"
|
||
bodyText="Good to see that people don’t necessarily regret doing CS or a related degree."
|
||
>
|
||
<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..."
|
||
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 this is or was you!"
|
||
>
|
||
<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. :)"
|
||
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=""
|
||
align="center"
|
||
>
|
||
<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>
|
||
);
|
||
}
|