www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Added default word cloud width util (#102)
continuous-integration/drone/push Build is passing Details 

Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: #102
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
This commit is contained in:
Shahan Nedadahandeh 2022-12-04 16:22:06 -05:00
parent db9f74a42a
commit 3dd978c67e
2 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pages/demographics.tsx
View File

@ -19,6 +19,7 @@ import {
pieChartProps, pieChartProps,
barGraphMargin, barGraphMargin,
barGraphWidth, barGraphWidth,
wordCloudWidth,
} from "utils/defaultProps"; } from "utils/defaultProps";
import { useWindowDimensions } from "utils/getWindowDimensions"; import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile"; import { useIsMobile } from "utils/isMobile";
@ -107,7 +108,7 @@ export default function Demographics() {
> >
<WordCloud <WordCloud
data={D7} data={D7}
width={isMobile ? pageWidth / 1.5 : 800} width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight} height={DefaultProp.graphHeight}
wordPadding={7} wordPadding={7}
desktopMaxFontSize={75} desktopMaxFontSize={75}

30
utils/defaultProps.ts
View File

@ -6,27 +6,22 @@ type PropName = typeof propNames[number];
const mobileBarGraphFactor = 1.25; const mobileBarGraphFactor = 1.25;
const desktopBarGraphFactor = 2; const desktopBarGraphFactor = 2;
export const barGraphWidth = (isMobile: boolean, pageWidth: number) =>
isMobile
? pageWidth / mobileBarGraphFactor
: pageWidth / desktopBarGraphFactor;
const mobilePieChartFactor = 1.25; const mobilePieChartFactor = 1.25;
const desktopPieChartFactor = 3; const desktopPieChartFactor = 3;
export const pieChartWidth = (isMobile: boolean, pageWidth: number) =>
isMobile
? pageWidth / mobilePieChartFactor
: pageWidth / desktopPieChartFactor;
const graphWidth = ( const desktopWordCloudFactor = 1.5;
isMobile: boolean, const mobileWordCloudWidth = 800;
pageWidth: number, export const wordCloudWidth = (isMobile: boolean, pageWidth: number) =>
isPieChart: boolean isMobile ? pageWidth / desktopWordCloudFactor : mobileWordCloudWidth;
): 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 = { export const barGraphMargin = {
top: 20, top: 20,
@ -34,7 +29,6 @@ export const barGraphMargin = {
left: 60, left: 60,
right: 20, right: 20,
}; };
export const DefaultProp: { [key in PropName]: number } = { export const DefaultProp: { [key in PropName]: number } = {
graphHeight: 500, graphHeight: 500,
labelSize: 24, labelSize: 24,