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() { > + 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,