196 lines
7.3 KiB
TypeScript
196 lines
7.3 KiB
TypeScript
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>
|
||
);
|
||
}
|