Merge remote-tracking branch 'origin/main' into opt-arrows
This commit is contained in:
commit
97e742a34b
|
@ -43,6 +43,11 @@
|
||||||
padding: 0 15%;
|
padding: 0 15%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wrapperNoBodyText {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.sideWrapperCommon {
|
.sideWrapperCommon {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
|
@ -7,7 +7,7 @@ type AlignOption = "left" | "center" | "right";
|
||||||
type ComponentWrapperProps = {
|
type ComponentWrapperProps = {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
heading: string;
|
heading: string;
|
||||||
bodyText: string;
|
bodyText?: string;
|
||||||
align?: AlignOption;
|
align?: AlignOption;
|
||||||
noBackground?: boolean;
|
noBackground?: boolean;
|
||||||
};
|
};
|
||||||
|
@ -30,11 +30,12 @@ export function ComponentWrapper({
|
||||||
className={`
|
className={`
|
||||||
${alignClasses[align]}
|
${alignClasses[align]}
|
||||||
${noBackground ? styles.noBackground : ""}
|
${noBackground ? styles.noBackground : ""}
|
||||||
|
${bodyText ? "" : styles.wrapperNoBodyText}
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
<div className={styles.internalWrapper}>
|
<div className={styles.internalWrapper}>
|
||||||
<h3>{heading}</h3>
|
<h3>{heading}</h3>
|
||||||
<p>{bodyText}</p>
|
{bodyText ? <p>{bodyText}</p> : null}
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.internalWrapper}>{children}</div>
|
<div className={styles.internalWrapper}>{children}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -8,6 +8,7 @@ import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
|
||||||
import { BottomNav } from "@/components/BottomNav";
|
import { BottomNav } from "@/components/BottomNav";
|
||||||
import { ComponentWrapper } from "@/components/ComponentWrapper";
|
import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||||
import { Header } from "@/components/Header";
|
import { Header } from "@/components/Header";
|
||||||
|
import { SectionHeader } from "@/components/SectionHeader";
|
||||||
import { WordCloud } from "@/components/WordCloud";
|
import { WordCloud } from "@/components/WordCloud";
|
||||||
|
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
@ -16,24 +17,29 @@ export default function SamplePage() {
|
||||||
const { width } = useWindowDimensions();
|
const { width } = useWindowDimensions();
|
||||||
const isMobile = useIsMobile();
|
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 (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
<SectionHeader
|
||||||
|
title="Demographics"
|
||||||
|
subtitle="An insight into the demographics of UW’s CS programs"
|
||||||
|
/>
|
||||||
<ComponentWrapper
|
<ComponentWrapper
|
||||||
heading="What program are you in?"
|
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."
|
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
|
<BarGraphVertical
|
||||||
data={mockCategoricalData}
|
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={defaultGraphWidth}
|
||||||
width={isMobile ? width / 1.25 : width / 2}
|
height={defaultGraphHeight}
|
||||||
height={500}
|
margin={defaultBarGraphMargin}
|
||||||
margin={{
|
|
||||||
top: 20,
|
|
||||||
bottom: 80,
|
|
||||||
left: 60,
|
|
||||||
right: 20,
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
|
@ -48,8 +54,8 @@ export default function SamplePage() {
|
||||||
value: word.value,
|
value: word.value,
|
||||||
}))}
|
}))}
|
||||||
// For components that we don't want to match the width necessarily we can provide direct values
|
// For components that we don't want to match the width necessarily we can provide direct values
|
||||||
width={isMobile ? width / 1.5 : 800}
|
width={defaultGraphWidth}
|
||||||
height={500}
|
height={defaultGraphHeight}
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
|
@ -61,14 +67,9 @@ export default function SamplePage() {
|
||||||
<BarGraphHorizontal
|
<BarGraphHorizontal
|
||||||
className={styles.barGraphDemo}
|
className={styles.barGraphDemo}
|
||||||
data={mockCategoricalData}
|
data={mockCategoricalData}
|
||||||
width={isMobile ? width / 1.45 : width / 2}
|
width={defaultGraphWidth}
|
||||||
height={500}
|
height={defaultGraphHeight}
|
||||||
margin={{
|
margin={defaultBarGraphMargin}
|
||||||
top: 20,
|
|
||||||
bottom: 40,
|
|
||||||
left: 150,
|
|
||||||
right: 20,
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
|
@ -81,32 +82,19 @@ export default function SamplePage() {
|
||||||
<BarGraphHorizontal
|
<BarGraphHorizontal
|
||||||
className={styles.barGrapDemo}
|
className={styles.barGrapDemo}
|
||||||
data={mockCategoricalData}
|
data={mockCategoricalData}
|
||||||
width={isMobile ? width / 1.45 : width / 2}
|
width={defaultGraphWidth}
|
||||||
height={500}
|
height={defaultGraphHeight}
|
||||||
margin={{
|
margin={defaultBarGraphMargin}
|
||||||
top: 20,
|
|
||||||
bottom: 40,
|
|
||||||
left: 150,
|
|
||||||
right: 20,
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
<ComponentWrapper
|
<ComponentWrapper heading="What program are you in?" align="left">
|
||||||
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."
|
|
||||||
>
|
|
||||||
<BarGraphHorizontal
|
<BarGraphHorizontal
|
||||||
className={styles.barGraphDemo}
|
className={styles.barGraphDemo}
|
||||||
data={mockCategoricalData}
|
data={mockCategoricalData}
|
||||||
width={isMobile ? width / 1.45 : width / 2}
|
width={defaultGraphWidth}
|
||||||
height={500}
|
height={defaultGraphHeight}
|
||||||
margin={{
|
margin={defaultBarGraphMargin}
|
||||||
top: 20,
|
|
||||||
bottom: 40,
|
|
||||||
left: 150,
|
|
||||||
right: 20,
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
|
@ -121,10 +109,83 @@ export default function SamplePage() {
|
||||||
text: word.key,
|
text: word.key,
|
||||||
value: word.value,
|
value: word.value,
|
||||||
}))}
|
}))}
|
||||||
width={isMobile ? width / 1.5 : width / 2}
|
width={defaultGraphWidth}
|
||||||
height={500}
|
height={defaultGraphHeight}
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</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
|
<BottomNav
|
||||||
leftPage={pageRoutes.demographics}
|
leftPage={pageRoutes.demographics}
|
||||||
rightPage={pageRoutes.contributors}
|
rightPage={pageRoutes.contributors}
|
||||||
|
|
Loading…
Reference in New Issue