:feat: add friends page
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
Rebecca-Chou
parent
81e1efd054
commit
09f8ba4eb1
|
|
@ -0,0 +1,487 @@
|
|||
export const F1 = [
|
||||
{
|
||||
category: "1",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "2",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
category: "3",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
category: "4",
|
||||
value: 19,
|
||||
},
|
||||
{
|
||||
category: "5",
|
||||
value: 17,
|
||||
},
|
||||
{
|
||||
category: "6",
|
||||
value: 15,
|
||||
},
|
||||
{
|
||||
category: "7",
|
||||
value: 19,
|
||||
},
|
||||
{
|
||||
category: "8",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
category: "9",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
category: "10",
|
||||
value: 5,
|
||||
},
|
||||
];
|
||||
|
||||
export const F2 = [
|
||||
{
|
||||
category: "Introvert",
|
||||
value: 53,
|
||||
},
|
||||
{
|
||||
category: "Entrovert",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
category: "Ambivert",
|
||||
value: 39,
|
||||
},
|
||||
];
|
||||
|
||||
export const F3 = [
|
||||
{
|
||||
category: "Half",
|
||||
value: 25,
|
||||
},
|
||||
{
|
||||
category: "Some",
|
||||
value: 28,
|
||||
},
|
||||
{
|
||||
category: "Majority",
|
||||
value: 42,
|
||||
},
|
||||
{
|
||||
category: "All",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
category: "None",
|
||||
value: 5,
|
||||
},
|
||||
];
|
||||
|
||||
export const F4 = [
|
||||
{
|
||||
category: "Rarely",
|
||||
value: 21,
|
||||
},
|
||||
{
|
||||
category: "Sometimes",
|
||||
value: 33,
|
||||
},
|
||||
{
|
||||
category: "Often",
|
||||
value: 34,
|
||||
},
|
||||
{
|
||||
category: "Always",
|
||||
value: 15,
|
||||
},
|
||||
];
|
||||
|
||||
export const F5 = [
|
||||
{
|
||||
category: "0",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
category: "1-2",
|
||||
value: 29,
|
||||
},
|
||||
{
|
||||
category: "3-5",
|
||||
value: 35,
|
||||
},
|
||||
{
|
||||
category: "5-10",
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
category: "10+",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
category: "Unsure",
|
||||
value: 14,
|
||||
},
|
||||
];
|
||||
|
||||
export const F6 = [
|
||||
{
|
||||
category: "Often",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
category: "Sometimes",
|
||||
value: 37,
|
||||
},
|
||||
{
|
||||
category: "Rarely",
|
||||
value: 38,
|
||||
},
|
||||
{
|
||||
category: "Never",
|
||||
value: 17,
|
||||
},
|
||||
{
|
||||
category: "Always",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const F7 = [
|
||||
{
|
||||
category: "Often",
|
||||
value: 36,
|
||||
},
|
||||
{
|
||||
category: "Sometimes",
|
||||
value: 35,
|
||||
},
|
||||
{
|
||||
category: "Rarely",
|
||||
value: 14,
|
||||
},
|
||||
{
|
||||
category: "Never",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
category: "Always",
|
||||
value: 14,
|
||||
},
|
||||
];
|
||||
|
||||
export const F8 = [
|
||||
{
|
||||
category: "1A",
|
||||
value: 52,
|
||||
},
|
||||
{
|
||||
category: "1B",
|
||||
value: 35,
|
||||
},
|
||||
{
|
||||
category: "2A",
|
||||
value: 23,
|
||||
},
|
||||
{
|
||||
category: "2B",
|
||||
value: 26,
|
||||
},
|
||||
{
|
||||
category: "3A",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
category: "3B",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
category: "4A",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
category: "4B",
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
category: "1st coop",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
category: "2nd coop",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
category: "3rd coop",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
category: "4th coop",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
category: "5th coop",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "6th coop",
|
||||
value: 3,
|
||||
},
|
||||
];
|
||||
|
||||
export const F9 = [
|
||||
{
|
||||
category: "0",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
category: "1",
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
category: "2",
|
||||
value: 32,
|
||||
},
|
||||
{
|
||||
category: "3-4",
|
||||
value: 50,
|
||||
},
|
||||
{
|
||||
category: "5-10",
|
||||
value: 7,
|
||||
},
|
||||
];
|
||||
|
||||
export const F10 = [
|
||||
{
|
||||
category: "0",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
category: "1-2",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
category: "3-4",
|
||||
value: 49,
|
||||
},
|
||||
{
|
||||
category: "5-10",
|
||||
value: 43,
|
||||
},
|
||||
{
|
||||
category: "11+",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const F11 = [
|
||||
{
|
||||
category: "0",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
category: "1",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
category: "2",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
category: "3",
|
||||
value: 29,
|
||||
},
|
||||
{
|
||||
category: "4",
|
||||
value: 27,
|
||||
},
|
||||
{
|
||||
category: "5",
|
||||
value: 16,
|
||||
},
|
||||
];
|
||||
|
||||
export const F12 = [
|
||||
{
|
||||
category: "Most",
|
||||
value: 41,
|
||||
},
|
||||
{
|
||||
category: "Some",
|
||||
value: 49,
|
||||
},
|
||||
{
|
||||
category: "All",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
category: "Barely",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
category: "No",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const F13 = [
|
||||
{
|
||||
category: "Classes",
|
||||
value: 81,
|
||||
},
|
||||
{
|
||||
category: "Mutual friends",
|
||||
value: 71,
|
||||
},
|
||||
{
|
||||
category: "Extracurriculars",
|
||||
value: 53,
|
||||
},
|
||||
{
|
||||
category: "Coop",
|
||||
value: 40,
|
||||
},
|
||||
{
|
||||
category: "Parties",
|
||||
value: 15,
|
||||
},
|
||||
{
|
||||
category: "Online",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
category: "Residence",
|
||||
value: 3,
|
||||
},
|
||||
];
|
||||
|
||||
export const F14 = [
|
||||
{
|
||||
category: "Res",
|
||||
value: 78,
|
||||
},
|
||||
{
|
||||
category: "MC",
|
||||
value: 36,
|
||||
},
|
||||
{
|
||||
category: "DC",
|
||||
value: 21,
|
||||
},
|
||||
{
|
||||
category: "PAC",
|
||||
value: 14,
|
||||
},
|
||||
{
|
||||
category: "SLC",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
category: "DP",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
category: "E7",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
category: "E5",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
category: "E5",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
category: "CIF",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "AL",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
category: "CIF",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "Plaza",
|
||||
value: 3,
|
||||
},
|
||||
];
|
||||
|
||||
export const F15 = [
|
||||
{
|
||||
text: "Chatting/Talking",
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
text: "Eating food",
|
||||
value: 36,
|
||||
},
|
||||
{
|
||||
text: "Workout",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
text: "Drinking",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
text: "Study",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
text: "Board games",
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
text: "Video games",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
text: "Watch TV Shows/Animes/Movies",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
text: "Party",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Cook",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Exploring new places",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Clubs",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const F16 = [
|
||||
{
|
||||
category: "Most",
|
||||
value: 49,
|
||||
},
|
||||
{
|
||||
category: "Some",
|
||||
value: 36,
|
||||
},
|
||||
{
|
||||
category: "All",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
category: "Barely",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
category: "No",
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
import {
|
||||
F1,
|
||||
F2,
|
||||
F3,
|
||||
F4,
|
||||
F5,
|
||||
F6,
|
||||
F7,
|
||||
F8,
|
||||
F9,
|
||||
F10,
|
||||
F11,
|
||||
F12,
|
||||
F13,
|
||||
F14,
|
||||
F15,
|
||||
F16,
|
||||
} from "data/friends";
|
||||
import { pageRoutes } from "data/routes";
|
||||
import React from "react";
|
||||
import {
|
||||
barGraphProps,
|
||||
DefaultProp,
|
||||
pieChartProps,
|
||||
barGraphMargin,
|
||||
barGraphWidth,
|
||||
wordCloudWidth,
|
||||
} 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 { Header } from "@/components/Header";
|
||||
import { PieChart } from "@/components/PieChart";
|
||||
import { SectionHeader } from "@/components/SectionHeader";
|
||||
import { WordCloud } from "@/components/WordCloud";
|
||||
|
||||
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="Friends"
|
||||
subtitle="The friends you make in college are friends you’ll have for life."
|
||||
/>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Rate how social you are."
|
||||
bodyText="Looks like most people consider themselves in the middle."
|
||||
align="center"
|
||||
>
|
||||
<BarGraphVertical data={F1} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How would you describe yourself?"
|
||||
bodyText="Ambiverts and introverts dominate CS at waterloo."
|
||||
align="right"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={F2} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many close friends throughout university were also in your program?"
|
||||
bodyText="Most people had friends in the same program as them. For a lot of people, the majority of their friends are in the ssame program. Perhaps this makes scheduling and conversations easier."
|
||||
>
|
||||
<BarGraphVertical data={F3} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How often do you keep in touch with high school friends?"
|
||||
bodyText="Most people are still in touch with their friends in some form or another!"
|
||||
align="right"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={F4} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many friends are going to be in the same city as you post-grad?"
|
||||
bodyText="It is nice to know that the majority of our respondents have a few friends that are going to be in their city post-grad."
|
||||
>
|
||||
<BarGraphVertical data={F5} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How often do you stay in touch with friends that you made on co-op?"
|
||||
bodyText="Many people do not really keep in touch with friends made on co-op. This makes sense as each co-op only lasts a short period of time."
|
||||
align="right"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={F6} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How often do you stay in touch with friends that you made during school terms?"
|
||||
bodyText="Now, more people keep in touch with friends made during the school terms. This could be because they can hang out during multiple different school terms while on campus."
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={F7} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Which term(s) did you meet most of your friends?"
|
||||
bodyText="Establishing friendships is generally easier during the beginning of university. But, it is definitely still possible to make friends in the later terms."
|
||||
align="right"
|
||||
>
|
||||
<BarGraphHorizontal
|
||||
data={F8}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
margin={{ ...barGraphMargin, ...{ left: 100 } }}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many friend groups do you have?"
|
||||
bodyText="According to our data, most people have 3-4 friend groups."
|
||||
>
|
||||
<BarGraphVertical data={F9} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What is the average size of your friend groups?"
|
||||
bodyText="Those friend groups typically consists of 3-4 people."
|
||||
align="right"
|
||||
>
|
||||
<BarGraphVertical data={F10} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How open are you to meeting new people?"
|
||||
bodyText="Although graduating, most of our respondents are still somewhat open to meeting new people."
|
||||
>
|
||||
<BarGraphVertical data={F11} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many of your friendships were made after starting university?"
|
||||
bodyText="For a lot of people, most or at least some friendships are made during university."
|
||||
align="right"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={F12} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How did you meet most of your friends after starting university?"
|
||||
bodyText="There are countless ways to meet new friends in university. Some of the most common ways include classes, mutual friends, and extracurriculars."
|
||||
>
|
||||
<BarGraphHorizontal
|
||||
data={F13}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
margin={{ ...barGraphMargin, ...{ left: 150 } }}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Where do you and your friends usually hang out on campus? "
|
||||
bodyText="There are many buildings on campus for students to chill and hand out in. Looking at our data, at someone’s residence seems where most people like to hang out."
|
||||
align="right"
|
||||
>
|
||||
<BarGraphVertical data={F14} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What is your go-to activity when hanging out with friends?"
|
||||
bodyText="There is a variety of activities enjoyed by everyone!"
|
||||
>
|
||||
<WordCloud
|
||||
data={F15}
|
||||
width={wordCloudWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={7}
|
||||
desktopMaxFontSize={75}
|
||||
mobileMaxFontSize={48}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What proportion of friends will you keep in contact with post graduation?"
|
||||
bodyText="Some or even most friendships will be kept by our students post-grad!"
|
||||
align="right"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={F16} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<BottomNav
|
||||
leftPage={pageRoutes.postGrad}
|
||||
rightPage={pageRoutes.miscellaneous}
|
||||
></BottomNav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue