Refactor components, graph values & questions

pages/demographics.tsx

@@ -11,6 +11,7 @@ import {
   D10,
   D11,
 } from "data/demographics";
+import { pageRoutes } from "data/routes";
 import React from "react";
 import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
@@ -18,8 +19,9 @@ import { useIsMobile } from "utils/isMobile";
 import { BarGraphHorizontal, BarGraphVertical } from "@/components/BarGraph";
 import { BottomNav } from "@/components/BottomNav";
 import { ComponentWrapper } from "@/components/ComponentWrapper";
-import { PieChart } from "@/components/PieChart";
 import { Header } from "@/components/Header";
+import { PieChart } from "@/components/PieChart";
+import { SectionHeader } from "@/components/SectionHeader";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -28,15 +30,22 @@ export default function Demographics() {
   const { width } = useWindowDimensions();
   const isMobile = useIsMobile();
 
+  const defaultGraphWidth = isMobile ? width / 1.25 : width / 2;
+  const defaultPieChartWidth = isMobile ? width / 1.25 : width / 3;
+  const defaultGraphHeight = 500;
+
+  const defaultBarGraphMargin = { top: 20, bottom: 80, left: 60, right: 20 };
+
+  const defaultLabelSize = 24;
+  const defaultLabelWidth = 100;
+
   return (
     <div className={styles.page}>
       <Header />
-      <div className={styles.header}>
-        <h1 className={styles.title}>Demographics</h1>
-        <h5 className={styles.subTitle}>
-          An insight into the demographics of UW’s CS programs
-        </h5>
-      </div>
+      <SectionHeader
+        title="Demographics"
+        subtitle="An insight into the demographics of UW’s CS programs"
+      />
 
       <ComponentWrapper
         heading="What program are you in?"
@@ -45,58 +54,50 @@ export default function Demographics() {
         <div className={styles.graphContainer}>
           <PieChart
             data={D1}
-            width={isMobile ? width / 3 : width / 3}
-            labelWidth={100}
+            width={defaultPieChartWidth}
+            labelWidth={defaultLabelWidth}
           />
         </div>
       </ComponentWrapper>
 
       <ComponentWrapper
         heading="Please select the gender identity option(s) with which you identify."
-        bodyText="The ratio between different genders and pronouns is pretty drastic, but it’s important to note that this is not representative of everyone. There is also an obvious correlation between the gender identities and used pronouns. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as separate entry rather than a category itself."
+        bodyText="The ratio between different genders and pronouns is pretty drastic, but it’s important to note that this is not representative of everyone. There is also an obvious correlation between the gender identities and used pronouns. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
         align="right"
         noBackground
       >
         <div className={styles.graphContainer}>
           <PieChart
             data={D2}
-            width={isMobile ? width / 3 : width / 3}
-            labelWidth={100}
-            labelTextSize={24}
+            width={defaultPieChartWidth}
+            labelWidth={defaultLabelWidth}
+            labelTextSize={defaultLabelSize}
           />
         </div>
       </ComponentWrapper>
 
-      <ComponentWrapper
-        heading="Please indicate the pronouns that you use."
-        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. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as separate entry rather than a category itself."
-      >
+      <ComponentWrapper heading="Please indicate the pronouns that you use.">
         <div className={styles.graphContainer}>
           <PieChart
             data={D3}
-            width={isMobile ? width / 3 : width / 3}
-            labelWidth={100}
-            labelTextSize={24}
+            width={defaultPieChartWidth}
+            labelWidth={defaultLabelWidth}
+            labelTextSize={defaultLabelSize}
           />
         </div>
       </ComponentWrapper>
 
       <ComponentWrapper
         heading="Please select the racial category or categories with which you primarily identify."
-        bodyText="We have quite a bit diversity in here! It’s great to see that, and extrapolating this to the rest of the population would probably yield similar results. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as separate entry rather than a category itself."
+        bodyText="We have quite a bit diversity in here! It’s great to see that, and extrapolating this to the rest of the population would probably yield similar results. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
         align="left"
         noBackground
       >
         <BarGraphVertical
           data={D4}
-          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>
 
@@ -106,33 +107,23 @@ export default function Demographics() {
       >
         <BarGraphVertical
           data={D5}
-          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="Please select the sexual identity option(s) you identify with."
-        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. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as separate entry rather than a category itself."
+        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. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
         align="right"
         noBackground
       >
         <BarGraphVertical
           data={D6}
-          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>
 
@@ -143,9 +134,8 @@ export default function Demographics() {
       >
         <WordCloud
           data={D7}
-          // 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}
+          height={defaultGraphHeight}
         />
       </ComponentWrapper>
 
@@ -156,14 +146,9 @@ export default function Demographics() {
       >
         <BarGraphVertical
           data={D8}
-          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>
 
@@ -174,14 +159,9 @@ export default function Demographics() {
       >
         <BarGraphVertical
           data={D9} // we might want a histogram instead
-          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>
 
@@ -193,26 +173,21 @@ export default function Demographics() {
       >
         <BarGraphVertical
           data={D10}
-          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>
 
       <ComponentWrapper
         heading="Please indicate your religion and/or spiritual affiliation."
-        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. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as separate entry rather than a category itself."
+        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. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
         align="right"
       >
         <BarGraphHorizontal
           data={D11}
-          width={isMobile ? width / 1.25 : width / 2}
-          height={500}
+          width={defaultGraphWidth}
+          height={defaultGraphHeight}
           margin={{
             top: 20,
             bottom: 80,
@@ -222,12 +197,7 @@ export default function Demographics() {
         />
       </ComponentWrapper>
 
-      <BottomNav
-        rightPageLink="/"
-        rightPageName="Academics"
-        leftPageLink={"/"}
-        leftPageName={""}
-      ></BottomNav>
+      <BottomNav rightPage={pageRoutes.academics}></BottomNav>
     </div>
   );
 }