2022-11-16 21:35:55 -05:00
import {
mockBoxPlotData ,
mockCategoricalData ,
mockLineData ,
moreMockCategoricalData ,
} from "data/mocks" ;
2022-11-05 14:06:24 -04:00
import { pageRoutes } from "data/routes" ;
2022-09-02 17:39:46 -04:00
import React from "react" ;
2022-11-30 21:48:36 -05:00
import { Color } from "utils/Color" ;
2022-09-02 17:39:46 -04:00
import { useWindowDimensions } from "utils/getWindowDimensions" ;
import { useIsMobile } from "utils/isMobile" ;
2022-10-22 14:04:12 -04:00
import { BarGraphVertical , BarGraphHorizontal } from "@/components/BarGraph" ;
2022-10-05 21:07:49 -04:00
import { BottomNav } from "@/components/BottomNav" ;
2022-11-16 21:35:55 -05:00
import { BoxPlot } from "@/components/Boxplot" ;
2023-02-07 13:28:17 -05:00
import { ComponentSwitcher } from "@/components/ComponentSwitcher" ;
2022-09-02 17:39:46 -04:00
import { ComponentWrapper } from "@/components/ComponentWrapper" ;
2022-10-22 14:04:12 -04:00
import { Header } from "@/components/Header" ;
2022-11-16 21:35:55 -05:00
import { LineGraph } from "@/components/LineGraph" ;
2022-11-05 09:01:46 -04:00
import { SectionHeader } from "@/components/SectionHeader" ;
2022-12-28 01:54:32 -05:00
import { SectionWrapper } from "@/components/SectionWrapper" ;
2022-10-22 14:04:12 -04:00
import { WordCloud } from "@/components/WordCloud" ;
2022-09-02 17:39:46 -04:00
import styles from "./samplePage.module.css" ;
export default function SamplePage() {
const { width } = useWindowDimensions ( ) ;
const isMobile = useIsMobile ( ) ;
2022-11-05 12:18:44 -04:00
// 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
2022-11-13 23:11:29 -05:00
const defaultVerticalBarGraphMargin = {
top : 20 ,
bottom : 80 ,
left : 60 ,
right : 20 ,
} ;
const defaultHorizontalBarGraphMargin = {
top : 20 ,
bottom : 80 ,
left : 120 ,
right : 20 ,
} ;
2022-11-05 12:18:44 -04:00
2022-09-02 17:39:46 -04:00
return (
< div className = { styles . page } >
2022-10-22 14:04:12 -04:00
< Header / >
2022-12-28 01:54:32 -05:00
< SectionWrapper title = "Transfer" / >
2022-11-05 09:01:46 -04:00
< SectionHeader
title = "Demographics"
subtitle = "An insight into the demographics of UW’ s CS programs"
/ >
2023-02-07 13:28:17 -05:00
< ComponentWrapper
heading = "TESTING?"
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
>
< ComponentSwitcher
graphList = { [
< BarGraphHorizontal
className = { styles . barGraphDemo }
data = { mockCategoricalData }
width = { defaultGraphWidth }
height = { defaultGraphHeight }
margin = { defaultHorizontalBarGraphMargin }
key = { 1 }
/ > ,
< LineGraph
data = { mockLineData }
width = { defaultGraphWidth }
height = { 417 }
margin = { {
top : 20 ,
bottom : 80 ,
left : 30 ,
right : 20 ,
} }
colorRange = { [ Color . primaryAccent , Color . secondaryAccentLight ] }
key = { 1 }
/ > ,
< BarGraphHorizontal
className = { styles . barGraphDemo }
data = { mockCategoricalData }
width = { defaultGraphWidth }
height = { defaultGraphHeight }
margin = { defaultHorizontalBarGraphMargin }
key = { 1 }
/ > ,
< LineGraph
data = { mockLineData }
width = { defaultGraphWidth }
height = { 417 }
margin = { {
top : 20 ,
bottom : 80 ,
left : 30 ,
right : 20 ,
} }
colorRange = { [ Color . primaryAccent , Color . secondaryAccentLight ] }
key = { 1 }
/ > ,
< BarGraphHorizontal
className = { styles . barGraphDemo }
data = { mockCategoricalData }
width = { defaultGraphWidth }
height = { defaultGraphHeight }
margin = { defaultHorizontalBarGraphMargin }
key = { 1 }
/ > ,
< LineGraph
data = { mockLineData }
width = { defaultGraphWidth }
height = { 417 }
margin = { {
top : 20 ,
bottom : 80 ,
left : 30 ,
right : 20 ,
} }
colorRange = { [ Color . primaryAccent , Color . secondaryAccentLight ] }
key = { 1 }
/ > ,
< BarGraphHorizontal
className = { styles . barGraphDemo }
data = { mockCategoricalData }
width = { defaultGraphWidth }
height = { defaultGraphHeight }
margin = { defaultHorizontalBarGraphMargin }
key = { 1 }
/ > ,
< LineGraph
data = { mockLineData }
width = { defaultGraphWidth }
height = { 417 }
margin = { {
top : 20 ,
bottom : 80 ,
left : 30 ,
right : 20 ,
} }
colorRange = { [ Color . primaryAccent , Color . secondaryAccentLight ] }
key = { 1 }
/ > ,
] }
buttonList = { [ "1A" , "1B" , "2A" , "2B" , "3A" , "3B" , "4A" , "4B" ] }
/ >
< / ComponentWrapper >
2022-09-02 17:39:46 -04:00
< 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 }
2022-11-05 12:18:44 -04:00
width = { defaultGraphWidth }
height = { defaultGraphHeight }
2022-11-13 23:11:29 -05:00
margin = { defaultVerticalBarGraphMargin }
2022-09-02 17:39:46 -04:00
/ >
< / 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"
2022-12-28 01:32:07 -05:00
noBackground
2022-09-02 17:39:46 -04:00
>
< 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
2022-11-05 12:18:44 -04:00
width = { defaultGraphWidth }
height = { defaultGraphHeight }
2022-09-02 17:39:46 -04:00
/ >
< / ComponentWrapper >
2022-11-13 23:11:29 -05:00
< ComponentWrapper heading = "What program are you in?" align = "right" >
2022-09-02 17:39:46 -04:00
< BarGraphHorizontal
className = { styles . barGraphDemo }
data = { mockCategoricalData }
2022-11-05 12:18:44 -04:00
width = { defaultGraphWidth }
height = { defaultGraphHeight }
2022-11-13 23:11:29 -05:00
// You can override specific margins if needed
margin = { defaultHorizontalBarGraphMargin }
2022-09-02 17:39:46 -04:00
/ >
< / 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 }
2022-11-05 12:18:44 -04:00
width = { defaultGraphWidth }
height = { defaultGraphHeight }
2022-11-13 23:11:29 -05:00
margin = { defaultHorizontalBarGraphMargin }
2022-11-05 12:18:44 -04:00
/ >
< / ComponentWrapper >
< ComponentWrapper heading = "What program are you in?" align = "left" >
< BarGraphHorizontal
className = { styles . barGraphDemo }
data = { mockCategoricalData }
width = { defaultGraphWidth }
height = { defaultGraphHeight }
2022-11-13 23:11:29 -05:00
margin = { defaultHorizontalBarGraphMargin }
2022-09-02 17:39:46 -04:00
/ >
< / 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."
2022-11-05 12:18:44 -04:00
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 >
2022-12-28 01:32:07 -05:00
< ComponentWrapper
heading = "What program are you in?"
align = "center"
noBackground
>
2022-11-05 12:18:44 -04:00
< 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 >
2022-09-02 17:39:46 -04:00
< 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"
>
2022-11-05 12:18:44 -04:00
< BarGraphHorizontal
className = { styles . barGraphDemo }
data = { mockCategoricalData }
width = { defaultGraphWidth }
height = { defaultGraphHeight }
2022-11-13 23:11:29 -05:00
margin = { defaultHorizontalBarGraphMargin }
2022-11-05 12:18:44 -04:00
/ >
< / ComponentWrapper >
2022-12-28 01:32:07 -05:00
< ComponentWrapper
heading = "What program are you in?"
align = "center"
noBackground
>
2022-11-16 21:35:55 -05:00
< 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 ,
} }
2022-11-30 21:48:36 -05:00
colorRange = { [ Color . primaryAccent , Color . secondaryAccentLight ] }
2022-09-02 17:39:46 -04:00
/ >
< / ComponentWrapper >
2022-10-05 21:07:49 -04:00
< BottomNav
2022-11-05 14:06:24 -04:00
leftPage = { pageRoutes . demographics }
rightPage = { pageRoutes . contributors }
2022-10-05 21:07:49 -04:00
> < / BottomNav >
2022-09-02 17:39:46 -04:00
< / div >
) ;
}