Refactor bar graph and pie chart props
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
455b94e8ee
commit
c6a71a67ad
|
@ -14,10 +14,11 @@ import {
|
|||
import { pageRoutes } from "data/routes";
|
||||
import React from "react";
|
||||
import {
|
||||
pieChartWidth,
|
||||
barGraphProps,
|
||||
DefaultProp,
|
||||
barGraphMargin,
|
||||
pieChartProps,
|
||||
barGraphWidth,
|
||||
barGraphMargin,
|
||||
} from "utils/defaultProps";
|
||||
import { useWindowDimensions } from "utils/getWindowDimensions";
|
||||
import { useIsMobile } from "utils/isMobile";
|
||||
|
@ -36,18 +37,6 @@ export default function Demographics() {
|
|||
const { width } = useWindowDimensions();
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
const defaultBarGraphProps = {
|
||||
width: barGraphWidth(isMobile, width),
|
||||
height: DefaultProp.graphHeight,
|
||||
margin: barGraphMargin,
|
||||
};
|
||||
|
||||
const defaultPieChartProps = {
|
||||
width: pieChartWidth(isMobile, width),
|
||||
labelWidth: DefaultProp.labelWidth,
|
||||
labelTextSize: DefaultProp.labelSize,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<Header />
|
||||
|
@ -61,7 +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."
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={D1} {...defaultPieChartProps} />
|
||||
<PieChart data={D1} {...pieChartProps(isMobile, width)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
|
@ -72,13 +61,13 @@ export default function Demographics() {
|
|||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={D2} {...defaultPieChartProps} />
|
||||
<PieChart data={D2} {...pieChartProps(isMobile, width)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper heading="Please indicate the pronouns that you use.">
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={D3} {...defaultPieChartProps} />
|
||||
<PieChart data={D3} {...pieChartProps(isMobile, width)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
|
@ -88,14 +77,14 @@ export default function Demographics() {
|
|||
align="left"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical data={D4} {...defaultBarGraphProps} />
|
||||
<BarGraphVertical data={D4} {...barGraphProps(isMobile, width)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
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! :)"
|
||||
>
|
||||
<BarGraphVertical data={D5} {...defaultBarGraphProps} />
|
||||
<BarGraphVertical data={D5} {...barGraphProps(isMobile, width)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
|
@ -106,7 +95,7 @@ export default function Demographics() {
|
|||
>
|
||||
<BarGraphVertical
|
||||
data={D6}
|
||||
{...defaultBarGraphProps}
|
||||
{...barGraphProps(isMobile, width)}
|
||||
widthAlternatingLabel={700}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
@ -131,7 +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…"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical data={D8} {...defaultBarGraphProps} />
|
||||
<BarGraphVertical data={D8} {...barGraphProps(isMobile, width)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
|
@ -142,7 +131,7 @@ export default function Demographics() {
|
|||
<BarGraphVertical
|
||||
// TODO: change when histogram component is ready
|
||||
data={D9}
|
||||
{...defaultBarGraphProps}
|
||||
{...barGraphProps(isMobile, width)}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
|
@ -152,7 +141,7 @@ export default function Demographics() {
|
|||
align="left"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical data={D10} {...defaultBarGraphProps} />
|
||||
<BarGraphVertical data={D10} {...barGraphProps(isMobile, width)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
|
|
|
@ -40,3 +40,19 @@ export const DefaultProp: { [key in PropName]: number } = {
|
|||
labelSize: 24,
|
||||
labelWidth: 100,
|
||||
};
|
||||
|
||||
export const barGraphProps = (isMobile: boolean, width: number) => {
|
||||
return {
|
||||
width: barGraphWidth(isMobile, width),
|
||||
height: DefaultProp.graphHeight,
|
||||
margin: barGraphMargin,
|
||||
};
|
||||
};
|
||||
|
||||
export const pieChartProps = (isMobile: boolean, width: number) => {
|
||||
return {
|
||||
width: pieChartWidth(isMobile, width),
|
||||
labelWidth: DefaultProp.labelWidth,
|
||||
labelTextSize: DefaultProp.labelSize,
|
||||
};
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue