www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into opt-arrows

This commit is contained in:
Shahan Nedadahandeh 2022-11-05 12:19:13 -04:00
parent 3b960baf72 0fcc367ab6
commit 97e742a34b
5 changed files with 146 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/ComponentWrapper.module.css
View File

@ -43,6 +43,11 @@
padding: 0 15%;
}
.wrapperNoBodyText {
flex-direction: column;
align-items: center;
}
@media screen and (max-width: 768px) {
.sideWrapperCommon {
margin: auto;

5
components/ComponentWrapper.tsx
View File

@ -7,7 +7,7 @@ type AlignOption = "left" | "center" | "right";
type ComponentWrapperProps = {
children: React.ReactNode;
heading: string;
bodyText: string;
bodyText?: string;
align?: AlignOption;
noBackground?: boolean;
};
@ -30,11 +30,12 @@ export function ComponentWrapper({
className={`
${alignClasses[align]}
${noBackground ? styles.noBackground : ""}
${bodyText ? "" : styles.wrapperNoBodyText}
`}
>
<div className={styles.internalWrapper}>
<h3>{heading}</h3>
<p>{bodyText}</p>
{bodyText ? <p>{bodyText}</p> : null}
</div>
<div className={styles.internalWrapper}>{children}</div>
</div>

19
components/SectionHeader.module.css Normal file
View File

@ -0,0 +1,19 @@
.header {
display: flex;
flex-direction: column;
justify-content: center;
padding: calc(40rem / 16) 0;
text-align: center;
}
.title {
color: var(--primary-accent-light);
font-size: calc(70rem / 16);
margin: calc(40rem / 16) auto;
}
.subTitle {
color: var(--primary-accent-lighter);
font-size: calc(26rem / 16);
margin: auto;
}

17
components/SectionHeader.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
import styles from "./SectionHeader.module.css";
interface SectionHeaderProps {
title: string;
subtitle?: string;
}
export function SectionHeader({ title, subtitle }: SectionHeaderProps) {
return (
<div className={styles.header}>
<h1 className={styles.title}>{title}</h1>
{subtitle && <h5 className={styles.subTitle}>{subtitle}</h5>}
</div>
);
}

143
pages/samplePage.tsx
View File

@ -8,6 +8,7 @@ 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";
@ -16,24 +17,29 @@ 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}
// 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,
}}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</ComponentWrapper>
@ -48,8 +54,8 @@ export default function SamplePage() {
value: word.value,
}))}
// For components that we don't want to match the width necessarily we can provide direct values
width={isMobile ? width / 1.5 : 800}
height={500}
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
@ -61,14 +67,9 @@ export default function SamplePage() {
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={isMobile ? width / 1.45 : width / 2}
height={500}
margin={{
top: 20,
bottom: 40,
left: 150,
right: 20,
}}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</ComponentWrapper>
@ -81,32 +82,19 @@ export default function SamplePage() {
<BarGraphHorizontal
className={styles.barGrapDemo}
data={mockCategoricalData}
width={isMobile ? width / 1.45 : width / 2}
height={500}
margin={{
top: 20,
bottom: 40,
left: 150,
right: 20,
}}
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."
>
<ComponentWrapper heading="What program are you in?" align="left">
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={isMobile ? width / 1.45 : width / 2}
height={500}
margin={{
top: 20,
bottom: 40,
left: 150,
right: 20,
}}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</ComponentWrapper>
@ -121,10 +109,83 @@ export default function SamplePage() {
text: word.key,
value: word.value,
}))}
width={isMobile ? width / 1.5 : width / 2}
height={500}
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}