Added default word cloud width util (#102)
continuous-integration/drone/push Build is passing
Details
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:
parent
db9f74a42a
commit
3dd978c67e
|
@ -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}
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue