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

View File

@ -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}

View File

@ -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,