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

218 lines
7.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import {
mockBoxPlotData,
mockCategoricalData,
mockLineData,
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 { BoxPlot } from "@/components/Boxplot";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { LineGraph } from "@/components/LineGraph";
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 defaultVerticalBarGraphMargin = {
top: 20,
bottom: 80,
left: 60,
right: 20,
};
const defaultHorizontalBarGraphMargin = {
top: 20,
bottom: 80,
left: 120,
right: 20,
};
return (
<div className={styles.page}>
<Header />
<SectionHeader
title="Demographics"
subtitle="An insight into the demographics of UWs 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={defaultVerticalBarGraphMargin}
/>
</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?" align="right">
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
// You can override specific margins if needed
margin={defaultHorizontalBarGraphMargin}
/>
</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={defaultHorizontalBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="left">
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultHorizontalBarGraphMargin}
/>
</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={defaultHorizontalBarGraphMargin}
/>
</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={defaultHorizontalBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="center">
<BoxPlot
width={600}
height={400}
data={mockBoxPlotData}
margin={{
top: 20,
left: 20,
}}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
align="right"
bodyText="Pariatur deserunt aute laborum ea adipisicing. Labore labore ipsum duis nisi ea incididunt ipsum occaecat. Ut occaecat et exercitation incididunt sit sit duis deserunt velit culpa nisi et dolore."
>
<LineGraph
data={mockLineData}
width={600}
height={400}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
/>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.demographics}
rightPage={pageRoutes.contributors}
></BottomNav>
</div>
);
}