Rename width to pageWidth

pages/demographics.tsx

@@ -17,8 +17,8 @@ import {
   barGraphProps,
   DefaultProp,
   pieChartProps,
-  barGraphWidth,
   barGraphMargin,
+  barGraphWidth,
 } from "utils/defaultProps";
 import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
@@ -34,7 +34,7 @@ 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();
 
   return (
@@ -50,7 +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} {...pieChartProps(isMobile, width)} />
+          <PieChart data={D1} {...pieChartProps(isMobile, pageWidth)} />
         </div>
       </ComponentWrapper>
 
@@ -61,13 +61,13 @@ export default function Demographics() {
         noBackground
       >
         <div className={styles.graphContainer}>
-          <PieChart data={D2} {...pieChartProps(isMobile, width)} />
+          <PieChart data={D2} {...pieChartProps(isMobile, pageWidth)} />
         </div>
       </ComponentWrapper>
 
       <ComponentWrapper heading="Please indicate the pronouns that you use.">
         <div className={styles.graphContainer}>
-          <PieChart data={D3} {...pieChartProps(isMobile, width)} />
+          <PieChart data={D3} {...pieChartProps(isMobile, pageWidth)} />
         </div>
       </ComponentWrapper>
 
@@ -77,14 +77,14 @@ export default function Demographics() {
         align="left"
         noBackground
       >
-        <BarGraphVertical data={D4} {...barGraphProps(isMobile, width)} />
+        <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} {...barGraphProps(isMobile, width)} />
+        <BarGraphVertical data={D5} {...barGraphProps(isMobile, pageWidth)} />
       </ComponentWrapper>
 
       <ComponentWrapper
@@ -95,7 +95,7 @@ export default function Demographics() {
       >
         <BarGraphVertical
           data={D6}
-          {...barGraphProps(isMobile, width)}
+          {...barGraphProps(isMobile, pageWidth)}
           widthAlternatingLabel={700}
         />
       </ComponentWrapper>
@@ -107,7 +107,7 @@ export default function Demographics() {
       >
         <WordCloud
           data={D7}
-          width={isMobile ? width / 1.5 : 800}
+          width={isMobile ? pageWidth / 1.5 : 800}
           height={DefaultProp.graphHeight}
           wordPadding={7}
           desktopMaxFontSize={75}
@@ -120,7 +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} {...barGraphProps(isMobile, width)} />
+        <BarGraphVertical data={D8} {...barGraphProps(isMobile, pageWidth)} />
       </ComponentWrapper>
 
       <ComponentWrapper
@@ -131,7 +131,7 @@ export default function Demographics() {
         <BarGraphVertical
           // TODO: change when histogram component is ready
           data={D9}
-          {...barGraphProps(isMobile, width)}
+          {...barGraphProps(isMobile, pageWidth)}
         />
       </ComponentWrapper>
 
@@ -141,7 +141,7 @@ export default function Demographics() {
         align="left"
         noBackground
       >
-        <BarGraphVertical data={D10} {...barGraphProps(isMobile, width)} />
+        <BarGraphVertical data={D10} {...barGraphProps(isMobile, pageWidth)} />
       </ComponentWrapper>
 
       <ComponentWrapper
@@ -151,7 +151,7 @@ export default function Demographics() {
       >
         <BarGraphHorizontal
           data={D11}
-          width={barGraphWidth(isMobile, width)}
+          width={barGraphWidth(isMobile, pageWidth)}
           height={DefaultProp.graphHeight}
           margin={{ ...barGraphMargin, ...{ left: 220 } }}
         />

utils/defaultProps.ts

@@ -12,14 +12,14 @@ const desktopPieChartFactor = 3;
 
 const graphWidth = (
   isMobile: boolean,
-  width: number,
+  pageWidth: number,
   isPieChart: boolean
 ): number => {
   const mobileFactor = isPieChart ? mobilePieChartFactor : mobileBarGraphFactor;
   const desktopFactor = isPieChart
     ? desktopPieChartFactor
     : desktopBarGraphFactor;
-  return isMobile ? width / mobileFactor : width / desktopFactor;
+  return isMobile ? pageWidth / mobileFactor : pageWidth / desktopFactor;
 };
 
 export const barGraphWidth = (isMobile: boolean, width: number) =>
@@ -41,17 +41,17 @@ export const DefaultProp: { [key in PropName]: number } = {
   labelWidth: 100,
 };
 
-export const barGraphProps = (isMobile: boolean, width: number) => {
+export const barGraphProps = (isMobile: boolean, pageWidth: number) => {
   return {
-    width: barGraphWidth(isMobile, width),
+    width: barGraphWidth(isMobile, pageWidth),
     height: DefaultProp.graphHeight,
     margin: barGraphMargin,
   };
 };
 
-export const pieChartProps = (isMobile: boolean, width: number) => {
+export const pieChartProps = (isMobile: boolean, pageWidth: number) => {
   return {
-    width: pieChartWidth(isMobile, width),
+    width: pieChartWidth(isMobile, pageWidth),
     labelWidth: DefaultProp.labelWidth,
     labelTextSize: DefaultProp.labelSize,
   };