From 3dd978c67e79bb481bcca4061b4a3ee57ec6d024 Mon Sep 17 00:00:00 2001
From: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
Date: Sun, 4 Dec 2022 16:22:06 -0500
Subject: [PATCH] Added default word cloud width util (#102)

Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/pulls/102
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
---
 pages/demographics.tsx |  3 ++-
 utils/defaultProps.ts  | 30 ++++++++++++------------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/pages/demographics.tsx b/pages/demographics.tsx
index b365e08..8bc8117 100644
--- a/pages/demographics.tsx
+++ b/pages/demographics.tsx
@@ -19,6 +19,7 @@ import {
   pieChartProps,
   barGraphMargin,
   barGraphWidth,
+  wordCloudWidth,
 } from "utils/defaultProps";
 import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
@@ -107,7 +108,7 @@ export default function Demographics() {
       >
         <WordCloud
           data={D7}
-          width={isMobile ? pageWidth / 1.5 : 800}
+          width={wordCloudWidth(isMobile, pageWidth)}
           height={DefaultProp.graphHeight}
           wordPadding={7}
           desktopMaxFontSize={75}
diff --git a/utils/defaultProps.ts b/utils/defaultProps.ts
index 70dd302..f275e20 100644
--- a/utils/defaultProps.ts
+++ b/utils/defaultProps.ts
@@ -6,27 +6,22 @@ type PropName = typeof propNames[number];
 
 const mobileBarGraphFactor = 1.25;
 const desktopBarGraphFactor = 2;
+export const barGraphWidth = (isMobile: boolean, pageWidth: number) =>
+  isMobile
+    ? pageWidth / mobileBarGraphFactor
+    : pageWidth / desktopBarGraphFactor;
 
 const mobilePieChartFactor = 1.25;
 const desktopPieChartFactor = 3;
+export const pieChartWidth = (isMobile: boolean, pageWidth: number) =>
+  isMobile
+    ? pageWidth / mobilePieChartFactor
+    : pageWidth / desktopPieChartFactor;
 
-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);
+const desktopWordCloudFactor = 1.5;
+const mobileWordCloudWidth = 800;
+export const wordCloudWidth = (isMobile: boolean, pageWidth: number) =>
+  isMobile ? pageWidth / desktopWordCloudFactor : mobileWordCloudWidth;
 
 export const barGraphMargin = {
   top: 20,
@@ -34,7 +29,6 @@ export const barGraphMargin = {
   left: 60,
   right: 20,
 };
-
 export const DefaultProp: { [key in PropName]: number } = {
   graphHeight: 500,
   labelSize: 24,