74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
|
|
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
|
|
import React from "react";
|
|
import useWindowDimensions from "utils/getWindowDimensions";
|
|
import { useIsMobile } from "utils/isMobile";
|
|
|
|
import FullComponentWrapper from "@/components/FullComponentWrapper";
|
|
import SideComponentWrapper from "@/components/SideComponentWrapper";
|
|
|
|
import { WordCloud } from "../components/WordCloud";
|
|
|
|
import styles from "./samplePage.module.css";
|
|
|
|
export default function SamplePage() {
|
|
const { width } = useWindowDimensions();
|
|
const isMobile = useIsMobile();
|
|
|
|
return (
|
|
<div className={styles.page}>
|
|
<SideComponentWrapper
|
|
heading="What program are you in?"
|
|
body="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}
|
|
// 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
|
|
width={isMobile ? width / 1.25 : width / 2}
|
|
height={500}
|
|
margin={{
|
|
top: 20,
|
|
bottom: 80,
|
|
left: 60,
|
|
right: 20,
|
|
}}
|
|
/>
|
|
</SideComponentWrapper>
|
|
|
|
<FullComponentWrapper
|
|
heading="What program are you in?"
|
|
body="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."
|
|
>
|
|
<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={isMobile ? 500 : 1000}
|
|
height={500}
|
|
/>
|
|
</FullComponentWrapper>
|
|
|
|
<SideComponentWrapper
|
|
heading="What program are you in?"
|
|
body="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."
|
|
rightAligned
|
|
>
|
|
<BarGraphHorizontal
|
|
className={styles.barGraphDemo}
|
|
data={mockCategoricalData}
|
|
width={isMobile ? width / 1.25 : width / 2}
|
|
height={500}
|
|
margin={{
|
|
top: 20,
|
|
bottom: 40,
|
|
left: 150,
|
|
right: 20,
|
|
}}
|
|
/>
|
|
</SideComponentWrapper>
|
|
</div>
|
|
);
|
|
}
|