Refactor default prop values into util file (Closes #82) (#87)
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This PR creates a new util file `DefaultProp` that provides default prop values for graph/chart components. More values could be added in the future as the pages are developed. staging: (shahan: sorry, due to a unlucky naming this branch name doesnt work with staging ) Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca> Reviewed-on: #87 Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
This commit is contained in:
parent
97aa2261f2
commit
1c0191facc
|
@ -13,6 +13,13 @@ import {
|
||||||
} from "data/demographics";
|
} from "data/demographics";
|
||||||
import { pageRoutes } from "data/routes";
|
import { pageRoutes } from "data/routes";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import {
|
||||||
|
barGraphProps,
|
||||||
|
DefaultProp,
|
||||||
|
pieChartProps,
|
||||||
|
barGraphMargin,
|
||||||
|
barGraphWidth,
|
||||||
|
} from "utils/defaultProps";
|
||||||
import { useWindowDimensions } from "utils/getWindowDimensions";
|
import { useWindowDimensions } from "utils/getWindowDimensions";
|
||||||
import { useIsMobile } from "utils/isMobile";
|
import { useIsMobile } from "utils/isMobile";
|
||||||
|
|
||||||
|
@ -27,18 +34,9 @@ import { WordCloud } from "@/components/WordCloud";
|
||||||
import styles from "./samplePage.module.css";
|
import styles from "./samplePage.module.css";
|
||||||
|
|
||||||
export default function Demographics() {
|
export default function Demographics() {
|
||||||
const { width } = useWindowDimensions();
|
const pageWidth = useWindowDimensions().width;
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
|
|
||||||
const defaultGraphWidth = isMobile ? width / 1.25 : width / 2;
|
|
||||||
const defaultPieChartWidth = isMobile ? width / 1.25 : width / 3;
|
|
||||||
const defaultGraphHeight = 500;
|
|
||||||
|
|
||||||
const defaultBarGraphMargin = { top: 20, bottom: 80, left: 60, right: 20 };
|
|
||||||
|
|
||||||
const defaultLabelSize = 24;
|
|
||||||
const defaultLabelWidth = 100;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
<Header />
|
<Header />
|
||||||
|
@ -52,11 +50,7 @@ export default function Demographics() {
|
||||||
bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
|
bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
|
||||||
>
|
>
|
||||||
<div className={styles.graphContainer}>
|
<div className={styles.graphContainer}>
|
||||||
<PieChart
|
<PieChart data={D1} {...pieChartProps(isMobile, pageWidth)} />
|
||||||
data={D1}
|
|
||||||
width={defaultPieChartWidth}
|
|
||||||
labelWidth={defaultLabelWidth}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
|
@ -67,23 +61,13 @@ export default function Demographics() {
|
||||||
noBackground
|
noBackground
|
||||||
>
|
>
|
||||||
<div className={styles.graphContainer}>
|
<div className={styles.graphContainer}>
|
||||||
<PieChart
|
<PieChart data={D2} {...pieChartProps(isMobile, pageWidth)} />
|
||||||
data={D2}
|
|
||||||
width={defaultPieChartWidth}
|
|
||||||
labelWidth={defaultLabelWidth}
|
|
||||||
labelTextSize={defaultLabelSize}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
<ComponentWrapper heading="Please indicate the pronouns that you use.">
|
<ComponentWrapper heading="Please indicate the pronouns that you use.">
|
||||||
<div className={styles.graphContainer}>
|
<div className={styles.graphContainer}>
|
||||||
<PieChart
|
<PieChart data={D3} {...pieChartProps(isMobile, pageWidth)} />
|
||||||
data={D3}
|
|
||||||
width={defaultPieChartWidth}
|
|
||||||
labelWidth={defaultLabelWidth}
|
|
||||||
labelTextSize={defaultLabelSize}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
|
@ -93,24 +77,14 @@ export default function Demographics() {
|
||||||
align="left"
|
align="left"
|
||||||
noBackground
|
noBackground
|
||||||
>
|
>
|
||||||
<BarGraphVertical
|
<BarGraphVertical data={D4} {...barGraphProps(isMobile, pageWidth)} />
|
||||||
data={D4}
|
|
||||||
width={defaultGraphWidth}
|
|
||||||
height={defaultGraphHeight}
|
|
||||||
margin={defaultBarGraphMargin}
|
|
||||||
/>
|
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
<ComponentWrapper
|
<ComponentWrapper
|
||||||
heading="What was your high school admissions average?"
|
heading="What was your high school admissions average?"
|
||||||
bodyText="With a mean average of roughly 95.5%, getting into any of these programs is no easy feat. That makes everyone special from the day they were admitted into the school! :)"
|
bodyText="With a mean average of roughly 95.5%, getting into any of these programs is no easy feat. That makes everyone special from the day they were admitted into the school! :)"
|
||||||
>
|
>
|
||||||
<BarGraphVertical
|
<BarGraphVertical data={D5} {...barGraphProps(isMobile, pageWidth)} />
|
||||||
data={D5}
|
|
||||||
width={defaultGraphWidth}
|
|
||||||
height={defaultGraphHeight}
|
|
||||||
margin={defaultBarGraphMargin}
|
|
||||||
/>
|
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
<ComponentWrapper
|
<ComponentWrapper
|
||||||
|
@ -121,9 +95,7 @@ export default function Demographics() {
|
||||||
>
|
>
|
||||||
<BarGraphVertical
|
<BarGraphVertical
|
||||||
data={D6}
|
data={D6}
|
||||||
width={defaultGraphWidth}
|
{...barGraphProps(isMobile, pageWidth)}
|
||||||
height={defaultGraphHeight}
|
|
||||||
margin={defaultBarGraphMargin}
|
|
||||||
widthAlternatingLabel={700}
|
widthAlternatingLabel={700}
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
@ -135,8 +107,8 @@ export default function Demographics() {
|
||||||
>
|
>
|
||||||
<WordCloud
|
<WordCloud
|
||||||
data={D7}
|
data={D7}
|
||||||
width={isMobile ? width / 1.5 : 800}
|
width={isMobile ? pageWidth / 1.5 : 800}
|
||||||
height={defaultGraphHeight}
|
height={DefaultProp.graphHeight}
|
||||||
wordPadding={7}
|
wordPadding={7}
|
||||||
desktopMaxFontSize={75}
|
desktopMaxFontSize={75}
|
||||||
mobileMaxFontSize={48}
|
mobileMaxFontSize={48}
|
||||||
|
@ -148,12 +120,7 @@ export default function Demographics() {
|
||||||
bodyText="There’s quite a bit of spread in this chart! The real question is, how many of us are matching our parent’s levels of education? Find out later in the Class Profile…"
|
bodyText="There’s quite a bit of spread in this chart! The real question is, how many of us are matching our parent’s levels of education? Find out later in the Class Profile…"
|
||||||
noBackground
|
noBackground
|
||||||
>
|
>
|
||||||
<BarGraphVertical
|
<BarGraphVertical data={D8} {...barGraphProps(isMobile, pageWidth)} />
|
||||||
data={D8}
|
|
||||||
width={defaultGraphWidth}
|
|
||||||
height={defaultGraphHeight}
|
|
||||||
margin={defaultBarGraphMargin}
|
|
||||||
/>
|
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
<ComponentWrapper
|
<ComponentWrapper
|
||||||
|
@ -164,9 +131,7 @@ export default function Demographics() {
|
||||||
<BarGraphVertical
|
<BarGraphVertical
|
||||||
// TODO: change when histogram component is ready
|
// TODO: change when histogram component is ready
|
||||||
data={D9}
|
data={D9}
|
||||||
width={defaultGraphWidth}
|
{...barGraphProps(isMobile, pageWidth)}
|
||||||
height={defaultGraphHeight}
|
|
||||||
margin={defaultBarGraphMargin}
|
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
|
@ -176,12 +141,7 @@ export default function Demographics() {
|
||||||
align="left"
|
align="left"
|
||||||
noBackground
|
noBackground
|
||||||
>
|
>
|
||||||
<BarGraphVertical
|
<BarGraphVertical data={D10} {...barGraphProps(isMobile, pageWidth)} />
|
||||||
data={D10}
|
|
||||||
width={defaultGraphWidth}
|
|
||||||
height={defaultGraphHeight}
|
|
||||||
margin={defaultBarGraphMargin}
|
|
||||||
/>
|
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
<ComponentWrapper
|
<ComponentWrapper
|
||||||
|
@ -191,9 +151,9 @@ export default function Demographics() {
|
||||||
>
|
>
|
||||||
<BarGraphHorizontal
|
<BarGraphHorizontal
|
||||||
data={D11}
|
data={D11}
|
||||||
width={defaultGraphWidth}
|
width={barGraphWidth(isMobile, pageWidth)}
|
||||||
height={defaultGraphHeight}
|
height={DefaultProp.graphHeight}
|
||||||
margin={{ ...defaultBarGraphMargin, ...{ left: 220 } }}
|
margin={{ ...barGraphMargin, ...{ left: 220 } }}
|
||||||
/>
|
/>
|
||||||
</ComponentWrapper>
|
</ComponentWrapper>
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,58 @@
|
||||||
|
// Only static number props are included for this list
|
||||||
|
const propNames = ["graphHeight", "labelSize", "labelWidth"] as const;
|
||||||
|
|
||||||
|
// This type is needed for smart autocomplete
|
||||||
|
type PropName = typeof propNames[number];
|
||||||
|
|
||||||
|
const mobileBarGraphFactor = 1.25;
|
||||||
|
const desktopBarGraphFactor = 2;
|
||||||
|
|
||||||
|
const mobilePieChartFactor = 1.25;
|
||||||
|
const desktopPieChartFactor = 3;
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
export const barGraphMargin = {
|
||||||
|
top: 20,
|
||||||
|
bottom: 80,
|
||||||
|
left: 60,
|
||||||
|
right: 20,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DefaultProp: { [key in PropName]: number } = {
|
||||||
|
graphHeight: 500,
|
||||||
|
labelSize: 24,
|
||||||
|
labelWidth: 100,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const barGraphProps = (isMobile: boolean, pageWidth: number) => {
|
||||||
|
return {
|
||||||
|
width: barGraphWidth(isMobile, pageWidth),
|
||||||
|
height: DefaultProp.graphHeight,
|
||||||
|
margin: barGraphMargin,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const pieChartProps = (isMobile: boolean, pageWidth: number) => {
|
||||||
|
return {
|
||||||
|
width: pieChartWidth(isMobile, pageWidth),
|
||||||
|
labelWidth: DefaultProp.labelWidth,
|
||||||
|
labelTextSize: DefaultProp.labelSize,
|
||||||
|
};
|
||||||
|
};
|
Loading…
Reference in New Issue