226 lines
8.3 KiB
TypeScript
226 lines
8.3 KiB
TypeScript
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,
|
|
GroupedBarGraphHorizontal,
|
|
} from "@/components/GroupedBarGraph";
|
|
import { Header } from "@/components/Header";
|
|
import { PieChart } from "@/components/PieChart";
|
|
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
|
import { SectionHeader } from "@/components/SectionHeader";
|
|
import { Title } from "@/components/Title";
|
|
|
|
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 />
|
|
<Title>Intimacy and Drugs</Title>
|
|
<SectionHeader
|
|
title="Intimacy and Drugs"
|
|
subtitle="What have people tried during university?"
|
|
/>
|
|
|
|
<ComponentWrapper
|
|
heading="Which drugs have you used?"
|
|
bodyText="Many students experiment with substances during university. However, we can see that most students have not tried drugs that are stronger than marijuana, such as LSD, cigarettes, or magic mushrooms."
|
|
>
|
|
<GroupedBarGraphHorizontal
|
|
className={styles.barGraphDemo}
|
|
data={I2}
|
|
barColors={[Color.primaryAccentLight, Color.primaryAccentDark]}
|
|
barHoverColorsMap={{
|
|
[Color.primaryAccentLight]: Color.primaryAccentLighter,
|
|
[Color.primaryAccentDark]: Color.primaryAccentDarker,
|
|
}}
|
|
width={barGraphWidth(isMobile, pageWidth)}
|
|
minWidth={700}
|
|
height={DefaultProp.graphHeight}
|
|
margin={{ ...barGraphMargin, ...{ left: 200, bottom: 60 } }}
|
|
/>
|
|
</ComponentWrapper>
|
|
|
|
<ComponentWrapper
|
|
heading="What level of intimacy have you experienced?"
|
|
bodyText="Undergrad is a time when we are surrounded by many people of our age and are 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. However, it is also worth noting that a large portion of people did not respond for all of the intimacy levels, showing how they have not had these experiences or are uncomfortable sharing.
|
|
"
|
|
align="center"
|
|
noBackground
|
|
>
|
|
<GroupedBarGraphVertical
|
|
className={styles.barGraphDemo}
|
|
data={I1}
|
|
barColors={[Color.primaryAccentLight, Color.primaryAccentDark]}
|
|
barHoverColorsMap={{
|
|
[Color.primaryAccentLight]: Color.primaryAccentLighter,
|
|
[Color.primaryAccentDark]: Color.primaryAccentDarker,
|
|
}}
|
|
width={barGraphWidth(isMobile, pageWidth)}
|
|
height={700}
|
|
margin={{ ...barGraphMargin, ...{ bottom: 200 } }}
|
|
minWidth={800}
|
|
alternatingLabelSpace={40}
|
|
widthAlternatingLabel={1000}
|
|
lowerLabelDy="100px"
|
|
/>
|
|
</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 relationships during their undergraduate careers. On the other end, 5 is the highest number of committed relationships indicated."
|
|
>
|
|
<BarGraphVertical
|
|
data={I3}
|
|
{...barGraphProps(isMobile, pageWidth)}
|
|
lowerLabelDy="0"
|
|
/>
|
|
</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 partners during university. However, one individual wrote 20, another wrote 50, and most surprisingly another wrote 120."
|
|
align="left"
|
|
noBackground
|
|
>
|
|
<BarGraphVertical
|
|
data={I4}
|
|
{...barGraphProps(isMobile, pageWidth)}
|
|
lowerLabelDy="0"
|
|
/>
|
|
</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 situations."
|
|
>
|
|
<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 respondents have dated another CS / CS/BBA / CFM student, which is 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, 29 people did want to date someone in their program. Dating someone in the same program can be great in giving students something similar to bond over. On the other hand, finding someone with different interests than yourself can also be very fulfilling. "
|
|
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 lived together for a term?"
|
|
bodyText="Out of people who have had a relationship, around half of them have lived together and the other half have not."
|
|
align="right"
|
|
noBackground
|
|
>
|
|
<BarGraphVertical
|
|
data={I7}
|
|
{...barGraphProps(isMobile, pageWidth)}
|
|
lowerLabelDy="0"
|
|
/>
|
|
</ComponentWrapper>
|
|
|
|
<ComponentWrapper
|
|
heading="Are you currently in a relationship?"
|
|
bodyText="A little less than half of our respondents were in a relationship at the time that they filled out this survey!"
|
|
align="left"
|
|
>
|
|
<BarGraphVertical
|
|
data={I8}
|
|
{...barGraphProps(isMobile, pageWidth)}
|
|
lowerLabelDy="0"
|
|
/>
|
|
</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 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: 100 } }}
|
|
/>
|
|
</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={isMobile ? 600 : 500}
|
|
/>
|
|
</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={600}
|
|
/>
|
|
</div>
|
|
</ComponentWrapper>
|
|
|
|
<BottomNav
|
|
leftPage={pageRoutes.lifestyleAndInterests}
|
|
rightPage={pageRoutes.postGrad}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|