Add basic page
This commit is contained in:
e26chiu
parent
441dcd2d07
commit
fdca7a54e7
|
|
@ -0,0 +1,209 @@
|
|||
import {
|
||||
I1,
|
||||
I2,
|
||||
I3,
|
||||
I4,
|
||||
I5,
|
||||
I6,
|
||||
I6i,
|
||||
I7,
|
||||
I8,
|
||||
I8i,
|
||||
I9,
|
||||
I10,
|
||||
} from "data/intimacy-and-drugs";
|
||||
import { pageRoutes } from "data/routes";
|
||||
import React from "react";
|
||||
import {
|
||||
barGraphProps,
|
||||
DefaultProp,
|
||||
pieChartProps,
|
||||
barGraphMargin,
|
||||
barGraphWidth,
|
||||
} from "utils/defaultProps";
|
||||
import { useWindowDimensions } from "utils/getWindowDimensions";
|
||||
import { useIsMobile } from "utils/isMobile";
|
||||
|
||||
import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
|
||||
import { BottomNav } from "@/components/BottomNav";
|
||||
import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||
import { GroupedBarGraphVertical } from "@/components/GroupedBarGraph";
|
||||
import { Header } from "@/components/Header";
|
||||
import { PieChart } from "@/components/PieChart";
|
||||
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
||||
import { SectionHeader } from "@/components/SectionHeader";
|
||||
import { WordCloud } from "@/components/WordCloud";
|
||||
|
||||
import { Color } from "../utils/Color";
|
||||
|
||||
import styles from "./samplePage.module.css";
|
||||
|
||||
export default function Demographics() {
|
||||
const pageWidth = useWindowDimensions().width;
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<Header />
|
||||
<SectionHeader
|
||||
title="Intimacy and Drugs"
|
||||
subtitle="What have people tried/already done during university?👀"
|
||||
/>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What level of intimacy have you reached?"
|
||||
bodyText="Undergrad is a time when we are surrounded by mostly people of our age and given more freedom to seek out relationships. This is reflected in our data by how many respondents first experienced different levels of intimacy during university. But, it is also worth noting that a large chunk of people did not respond for all of the intimacy levels, showing how they have not yet reached there or are uncomfortable sharing."
|
||||
>
|
||||
<GroupedBarGraphVertical
|
||||
className={styles.barGraphDemo}
|
||||
data={I1}
|
||||
barColors={[Color.primaryAccentLight, Color.secondaryAccentLight]}
|
||||
barHoverColorsMap={{
|
||||
[Color.primaryAccentLight]: Color.primaryAccent,
|
||||
[Color.secondaryAccentLight]: Color.secondaryAccent,
|
||||
}}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={500}
|
||||
margin={{
|
||||
top: 20,
|
||||
bottom: 100,
|
||||
left: 50,
|
||||
right: 20,
|
||||
}}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Which drugs have you tried/used?"
|
||||
bodyText="A lot of students also experiment with substances during university. However, we can see that most students have not tried drugs that are more harsh than Marijuana, such as nicotine, cigarettes, or mushrooms."
|
||||
align="right"
|
||||
noBackground
|
||||
>
|
||||
<GroupedBarGraphVertical
|
||||
className={styles.barGraphDemo}
|
||||
data={I2}
|
||||
barColors={[Color.primaryAccentLight, Color.secondaryAccentLight]}
|
||||
barHoverColorsMap={{
|
||||
[Color.primaryAccentLight]: Color.primaryAccent,
|
||||
[Color.secondaryAccentLight]: Color.secondaryAccent,
|
||||
}}
|
||||
width={500}
|
||||
height={400}
|
||||
margin={{
|
||||
top: 20,
|
||||
bottom: 40,
|
||||
left: 50,
|
||||
right: 20,
|
||||
}}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many committed relationships have you been in during university?"
|
||||
bodyText="Our respondents most commonly have been in either 0 or 1 committed relationship during their undergrad. On the other end, 5 is the most number of committed relationships indicated."
|
||||
>
|
||||
<BarGraphVertical data={I3} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many sexual partners have you had during university?"
|
||||
bodyText="Similar to the relationships question, most people responded with having 0 or 1 sexual partner during univeristy. However, one individual wrote 20, another wrote 50, and most impressively (or not depending on how you want to look at it) another wrote 120."
|
||||
align="left"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical data={I4} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Have you ever cheated on someone, been cheated on, or helped someone cheat?"
|
||||
bodyText="14 out of 96 people have selected yes to having been involved in cheating."
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={I5} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Did you ever date another CS / CS/BBA / CFM student?"
|
||||
bodyText="27 people have dated another CS/CSBBA/CFM student. That’s about 1 in 4 students."
|
||||
align="right"
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={I6} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="If you answered no to the previous question, did you want to?"
|
||||
bodyText="Out of everyone who answered no to the last question, 28 people out of 70 did want to date someone in their program. That’s a little more than 1 in 4 students, meaning a little less than half of CS/CSBBA/CFA students did not want to date one another."
|
||||
align="right"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={I6i} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="If you've had a significant other, have you ever roomed together for a term?"
|
||||
bodyText="Out of people who have had a relationship, around half of them have roomed together and the other half have not."
|
||||
align="right"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical data={I7} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Are you currently in a relationship?"
|
||||
bodyText="A little less than half of our respondents are in a relationship as of the time they filled out this survey."
|
||||
align="left"
|
||||
>
|
||||
<BarGraphVertical data={I8} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="If you answered yes to the previous question, will you be living in the same city/region post-grad?"
|
||||
bodyText="For those who are currently in a relationship, 25 of them will be in the same city post-grad. The rest are will either be in a long-distance relationship or are currently unsure."
|
||||
align="right"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphHorizontal
|
||||
data={I8i}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
margin={{ ...barGraphMargin, ...{ left: 220 } }}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper heading="How has your understanding of relationships changed in the past 5 years?">
|
||||
<div className={styles.quotationCarouselContainer}>
|
||||
<QuotationCarousel
|
||||
data={I9}
|
||||
circleDiameter={0}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={400}
|
||||
/>
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Any advice for people looking for a relationship?"
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.quotationCarouselContainer}>
|
||||
<QuotationCarousel
|
||||
data={I10}
|
||||
circleDiameter={0}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={400}
|
||||
/>
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<BottomNav
|
||||
leftPage={pageRoutes.lifestyleAndInterests}
|
||||
rightPage={pageRoutes.postGrad}
|
||||
></BottomNav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -8,6 +8,14 @@
|
|||
padding: 0 calc(70rem / 16);
|
||||
}
|
||||
|
||||
.quotationCarouselContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(48rem / 16);
|
||||
margin: calc(32rem / 16);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.graphContainer {
|
||||
padding: 0 calc(40rem / 16);
|
||||
|
|
|
|||
Loading…
Reference in New Issue