diff --git a/pages/demographics.tsx b/pages/demographics.tsx
index cece66f..b365e08 100644
--- a/pages/demographics.tsx
+++ b/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 (
@@ -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."
>
@@ -67,23 +61,13 @@ export default function Demographics() {
noBackground
>
@@ -93,24 +77,14 @@ export default function Demographics() {
align="left"
noBackground
>
-
+
-
+
@@ -135,8 +107,8 @@ export default function Demographics() {
>
-
+
@@ -176,12 +141,7 @@ export default function Demographics() {
align="left"
noBackground
>
-
+
diff --git a/utils/defaultProps.ts b/utils/defaultProps.ts
new file mode 100644
index 0000000..70dd302
--- /dev/null
+++ b/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,
+ };
+};