Refactor default prop values into util file (Closes #82) (#87)

This PR creates a new util file `DefaultProp` that provides default prop values for graph/chart components. More values could be added in the future as the pages are developed.

staging: (shahan: sorry, due to a unlucky naming this branch name doesnt work with staging )
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #87
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>

pages/demographics.tsx

@@ -13,6 +13,13 @@ import {
 } from "data/demographics";
 import { pageRoutes } from "data/routes";
 import React from "react";
+import {
+  barGraphProps,
+  DefaultProp,
+  pieChartProps,
+  barGraphMargin,
+  barGraphWidth,
+} from "utils/defaultProps";
 import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
 
@@ -27,18 +34,9 @@ import { WordCloud } from "@/components/WordCloud";
 import styles from "./samplePage.module.css";
 
 export default function Demographics() {
-  const { width } = useWindowDimensions();
+  const pageWidth = useWindowDimensions().width;
   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 />
@@ -52,11 +50,7 @@ export default function 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."
       >
         <div className={styles.graphContainer}>
-          <PieChart
-            data={D1}
-            width={defaultPieChartWidth}
-            labelWidth={defaultLabelWidth}
-          />
+          <PieChart data={D1} {...pieChartProps(isMobile, pageWidth)} />
         </div>
       </ComponentWrapper>
 
@@ -67,23 +61,13 @@ export default function Demographics() {
         noBackground
       >
         <div className={styles.graphContainer}>
-          <PieChart
-            data={D2}
-            width={defaultPieChartWidth}
-            labelWidth={defaultLabelWidth}
-            labelTextSize={defaultLabelSize}
-          />
+          <PieChart data={D2} {...pieChartProps(isMobile, pageWidth)} />
         </div>
       </ComponentWrapper>
 
       <ComponentWrapper heading="Please indicate the pronouns that you use.">
         <div className={styles.graphContainer}>
-          <PieChart
-            data={D3}
-            width={defaultPieChartWidth}
-            labelWidth={defaultLabelWidth}
-            labelTextSize={defaultLabelSize}
-          />
+          <PieChart data={D3} {...pieChartProps(isMobile, pageWidth)} />
         </div>
       </ComponentWrapper>
 
@@ -93,24 +77,14 @@ export default function Demographics() {
         align="left"
         noBackground
       >
-        <BarGraphVertical
-          data={D4}
-          width={defaultGraphWidth}
-          height={defaultGraphHeight}
-          margin={defaultBarGraphMargin}
-        />
+        <BarGraphVertical data={D4} {...barGraphProps(isMobile, pageWidth)} />
       </ComponentWrapper>
 
       <ComponentWrapper
         heading="What was your high school admissions average?"
         bodyText="With a mean average of roughly 95.5%, getting into any of these programs is no easy feat. That makes everyone special from the day they were admitted into the school! :)"
       >
-        <BarGraphVertical
-          data={D5}
-          width={defaultGraphWidth}
-          height={defaultGraphHeight}
-          margin={defaultBarGraphMargin}
-        />
+        <BarGraphVertical data={D5} {...barGraphProps(isMobile, pageWidth)} />
       </ComponentWrapper>
 
       <ComponentWrapper
@@ -121,9 +95,7 @@ export default function Demographics() {
       >
         <BarGraphVertical
           data={D6}
-          width={defaultGraphWidth}
-          height={defaultGraphHeight}
-          margin={defaultBarGraphMargin}
+          {...barGraphProps(isMobile, pageWidth)}
           widthAlternatingLabel={700}
         />
       </ComponentWrapper>
@@ -135,8 +107,8 @@ export default function Demographics() {
       >
         <WordCloud
           data={D7}
-          width={isMobile ? width / 1.5 : 800}
-          height={defaultGraphHeight}
+          width={isMobile ? pageWidth / 1.5 : 800}
+          height={DefaultProp.graphHeight}
           wordPadding={7}
           desktopMaxFontSize={75}
           mobileMaxFontSize={48}
@@ -148,12 +120,7 @@ export default function Demographics() {
         bodyText="There’s quite a bit of spread in this chart! The real question is, how many of us are matching our parent’s levels of education? Find out later in the Class Profile…"
         noBackground
       >
-        <BarGraphVertical
-          data={D8}
-          width={defaultGraphWidth}
-          height={defaultGraphHeight}
-          margin={defaultBarGraphMargin}
-        />
+        <BarGraphVertical data={D8} {...barGraphProps(isMobile, pageWidth)} />
       </ComponentWrapper>
 
       <ComponentWrapper
@@ -164,9 +131,7 @@ export default function Demographics() {
         <BarGraphVertical
           // TODO: change when histogram component is ready
           data={D9}
-          width={defaultGraphWidth}
-          height={defaultGraphHeight}
-          margin={defaultBarGraphMargin}
+          {...barGraphProps(isMobile, pageWidth)}
         />
       </ComponentWrapper>
 
@@ -176,12 +141,7 @@ export default function Demographics() {
         align="left"
         noBackground
       >
-        <BarGraphVertical
-          data={D10}
-          width={defaultGraphWidth}
-          height={defaultGraphHeight}
-          margin={defaultBarGraphMargin}
-        />
+        <BarGraphVertical data={D10} {...barGraphProps(isMobile, pageWidth)} />
       </ComponentWrapper>
 
       <ComponentWrapper
@@ -191,9 +151,9 @@ export default function Demographics() {
       >
         <BarGraphHorizontal
           data={D11}
-          width={defaultGraphWidth}
-          height={defaultGraphHeight}
-          margin={{ ...defaultBarGraphMargin, ...{ left: 220 } }}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 220 } }}
         />
       </ComponentWrapper>
 

utils/defaultProps.ts

@@ -0,0 +1,58 @@
+// Only static number props are included for this list
+const propNames = ["graphHeight", "labelSize", "labelWidth"] as const;
+
+// This type is needed for smart autocomplete
+type PropName = typeof propNames[number];
+
+const mobileBarGraphFactor = 1.25;
+const desktopBarGraphFactor = 2;
+
+const mobilePieChartFactor = 1.25;
+const desktopPieChartFactor = 3;
+
+const graphWidth = (
+  isMobile: boolean,
+  pageWidth: number,
+  isPieChart: boolean
+): number => {
+  const mobileFactor = isPieChart ? mobilePieChartFactor : mobileBarGraphFactor;
+  const desktopFactor = isPieChart
+    ? desktopPieChartFactor
+    : desktopBarGraphFactor;
+  return isMobile ? pageWidth / mobileFactor : pageWidth / desktopFactor;
+};
+
+export const barGraphWidth = (isMobile: boolean, width: number) =>
+  graphWidth(isMobile, width, false);
+
+export const pieChartWidth = (isMobile: boolean, width: number) =>
+  graphWidth(isMobile, width, true);
+
+export const barGraphMargin = {
+  top: 20,
+  bottom: 80,
+  left: 60,
+  right: 20,
+};
+
+export const DefaultProp: { [key in PropName]: number } = {
+  graphHeight: 500,
+  labelSize: 24,
+  labelWidth: 100,
+};
+
+export const barGraphProps = (isMobile: boolean, pageWidth: number) => {
+  return {
+    width: barGraphWidth(isMobile, pageWidth),
+    height: DefaultProp.graphHeight,
+    margin: barGraphMargin,
+  };
+};
+
+export const pieChartProps = (isMobile: boolean, pageWidth: number) => {
+  return {
+    width: pieChartWidth(isMobile, pageWidth),
+    labelWidth: DefaultProp.labelWidth,
+    labelTextSize: DefaultProp.labelSize,
+  };
+};