Compare commits

..

37 Commits

Author SHA1 Message Date
Shahan Nedadahandeh 2b97ef0021
test
continuous-integration/drone/push Build is passing Details
2022-06-18 12:51:47 -07:00
Shahan Nedadahandeh 8712511968
test
continuous-integration/drone/push Build is passing Details
2022-06-18 12:45:57 -07:00
Shahan Nedadahandeh 3396de157a
Updated docs
continuous-integration/drone/push Build is passing Details
2022-06-18 12:37:16 -07:00
Shahan Nedadahandeh 540132bfd4
Reverted changes
continuous-integration/drone/push Build is passing Details
2022-06-18 12:30:11 -07:00
Shahan Nedadahandeh 2a03276419
test change
continuous-integration/drone/push Build is passing Details
2022-06-15 21:17:51 -07:00
Shahan Nedadahandeh c7e5fb59b2
Reverted debug
continuous-integration/drone/push Build is passing Details
2022-06-15 21:01:53 -07:00
Shahan Nedadahandeh 64c9c57ad7
Debug docker
continuous-integration/drone/push Build is passing Details
2022-06-15 16:56:23 -07:00
Shahan Nedadahandeh f36ce140ca
Updated docs
continuous-integration/drone/push Build is failing Details
2022-06-15 16:50:33 -07:00
Shahan Nedadahandeh 35db02a0c8
Reverted change to playground and fixed duplicate pr builds
continuous-integration/drone/push Build is passing Details
2022-06-13 23:57:22 -07:00
Shahan Nedadahandeh 5c02596938
Updated url preview
continuous-integration/drone/push Build is passing Details
continuous-integration/drone/pr Build is failing Details
2022-06-13 23:12:36 -07:00
Shahan Nedadahandeh 3f855bb634
Updated docs
continuous-integration/drone/push Build is passing Details
2022-06-13 23:00:58 -07:00
Shahan Nedadahandeh 6ed1ace6cb
Updated docs and secret naming
continuous-integration/drone/push Build is passing Details
2022-06-13 22:56:55 -07:00
Shahan Nedadahandeh f5470f5596
fix typo
continuous-integration/drone/push Build is passing Details
2022-06-13 22:30:27 -07:00
Shahan Nedadahandeh e706b22586
update auth 2022-06-13 22:30:06 -07:00
Shahan Nedadahandeh 6a0384e073
Updated auth 2022-06-13 22:27:53 -07:00
Shahan Nedadahandeh 0af1cbc614
Added auth
continuous-integration/drone/push Build is passing Details
2022-06-13 22:15:49 -07:00
Shahan Nedadahandeh 5fb3b90031
Udate log
continuous-integration/drone/push Build is passing Details
2022-06-08 21:47:54 -07:00
Shahan Nedadahandeh a03f4519e9
Added logging
continuous-integration/drone/push Build is passing Details
2022-06-08 21:44:33 -07:00
Shahan Nedadahandeh 0d9dc49167
rebuild test
continuous-integration/drone/push Build is passing Details
2022-06-08 20:56:02 -07:00
Shahan Nedadahandeh d20c28f35a
rebuild test
continuous-integration/drone/push Build was killed Details
2022-06-08 20:55:43 -07:00
Shahan Nedadahandeh 09d71776b4
Changed ref
continuous-integration/drone/push Build is passing Details
2022-06-08 20:39:15 -07:00
Shahan Nedadahandeh f73aa6ca95
test
continuous-integration/drone/push Build is passing Details
2022-06-08 20:20:56 -07:00
Shahan Nedadahandeh 213c8f5756
Chagned ref
continuous-integration/drone/push Build is passing Details
2022-06-08 18:59:20 -07:00
Shahan Nedadahandeh ca221a2282
changed ref
continuous-integration/drone/push Build is failing Details
2022-06-08 18:48:49 -07:00
Shahan Nedadahandeh 62db9d8ad0
test
continuous-integration/drone/push Build is failing Details
2022-06-08 18:37:36 -07:00
Shahan Nedadahandeh 36961ad6e6
test
continuous-integration/drone/push Build is passing Details
2022-06-07 18:16:58 -07:00
Shahan Nedadahandeh 787aecba1c
reran test
continuous-integration/drone/push Build is passing Details
2022-06-07 00:07:31 -07:00
Shahan Nedadahandeh 0949f37142
Reran test
continuous-integration/drone/push Build is passing Details
2022-06-06 23:12:41 -07:00
Shahan Nedadahandeh e9f35eaca5
fixed typo
continuous-integration/drone/push Build is passing Details
2022-06-06 23:00:18 -07:00
Shahan Nedadahandeh ce345c8441
added webhook
continuous-integration/drone/push Build encountered an error Details
2022-06-06 22:17:26 -07:00
Shahan Nedadahandeh 95dcbf4d7c
test
continuous-integration/drone/push Build is passing Details
2022-06-06 22:08:02 -07:00
Shahan Nedadahandeh cd6673b1bf
test
continuous-integration/drone/push Build is passing Details
2022-06-06 22:01:01 -07:00
Shahan Nedadahandeh 0f830efee0
Test
continuous-integration/drone/push Build is passing Details
2022-06-06 21:19:02 -07:00
Shahan Nedadahandeh 6a9c4016c3
test
continuous-integration/drone/push Build is passing Details
2022-06-06 19:54:37 -07:00
Shahan Nedadahandeh 30d9eed4a0
updated repo
continuous-integration/drone/push Build is passing Details
2022-06-06 19:24:03 -07:00
Shahan Nedadahandeh 6939c73814
changed registry
continuous-integration/drone/push Build is failing Details
2022-06-06 19:17:38 -07:00
Shahan Nedadahandeh a8a2283dfd
added .drone.yml with staging deployement
continuous-integration/drone/push Build is failing Details
2022-06-06 19:14:16 -07:00
112 changed files with 27 additions and 19910 deletions

View File

@ -50,7 +50,7 @@ steps:
registry: registry.cloud.csclub.uwaterloo.ca
repo: registry.cloud.csclub.uwaterloo.ca/snedadah/csc-class-profile-staging
- name: deploy-staging
- name: deploy
image: node:16
depends_on:
- publish
@ -61,21 +61,6 @@ steps:
- echo "The docker build tag is ${DRONE_BRANCH//\//-}"
- 'curl -H "Authorization: $STAGING_AUTH_TOKEN" https://csclub.uwaterloo.ca/~snedadah/webhooks/cscclassprofilestaging?ref=${DRONE_BRANCH//\//-}'
- name: deploy-production
image: node:16
depends_on:
- export
environment:
SSH_KEY:
from_secret: DEPLOYMENT_SSH_KEY
commands:
- 'echo "$SSH_KEY" > /tmp/ssh_key'
- chmod 600 /tmp/ssh_key
- ssh -4 -i /tmp/ssh_key www@caffeine.csclub.uwaterloo.ca -o StrictHostKeyChecking=no '~/bin/classprofile/deploy-2022.sh'
when:
branch:
- main
trigger:
event:
exclude:

View File

@ -15,15 +15,10 @@ module.exports = {
"plugin:react/recommended",
"plugin:prettier/recommended",
],
plugins: ["@typescript-eslint", "react", "react-hooks", "prettier", "unused-imports"],
plugins: ["@typescript-eslint", "react", "react-hooks", "prettier"],
rules: {
"no-unused-vars": "off",
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"error",
{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
],
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"prettier/prettier": "error",
"import/first": "error",
"import/order": [
"error",

10
.vscode/settings.json vendored
View File

@ -2,13 +2,11 @@
"typescript.tsdk": "node_modules/typescript/lib",
"eslint.format.enable": true,
"eslint.codeActionsOnSave.mode": "all",
"css.lint.validProperties": ["composes"],
"css.format.spaceAroundSelectorSeparator": true,
"[css]": {
"editor.suggest.insertMode": "replace",
"gitlens.codeLens.scopes": ["document"],
"editor.formatOnSave": true,
"editor.defaultFormatter": "vscode.css-language-features",
"editor.defaultFormatter": "vscode.css-language-features"
},
"[javascript]": {
"editor.formatOnSave": false,
@ -43,11 +41,7 @@
"files.eol": "\n",
"[markdown]": {
"editor.wordWrap": "on",
"editor.quickSuggestions": {
"comments": "off",
"strings": "off",
"other": "off"
},
"editor.quickSuggestions": false,
"editor.tabSize": 4
}
}

View File

@ -1,5 +1,2 @@
FROM nginx
COPY ./out /usr/share/nginx/html
COPY staging-nginx.conf /etc/nginx/conf.d
RUN rm /etc/nginx/conf.d/default.conf

View File

@ -1,65 +0,0 @@
.aboutWrapper {
position: relative;
width: 90%;
}
.about {
display: flex;
flex-direction: row;
padding: calc(45rem / 16);
}
.about h1 {
margin: 0;
}
.about h4 {
margin: 0;
}
.about aside {
flex: 1;
margin-right: calc(40rem / 16);
}
.about aside h1 {
color: var(--secondary-accent)
}
.about aside p {
color: var(--primary-accent-lighter)
}
.about article {
flex: 3;
}
.about article p {
color: var(--primary-text);
}
.angle {
position: absolute;
top: 0;
left: 0;
width: calc(70rem / 16);
height: calc(70rem / 16);
}
.anglePath {
stroke: var(--primary-accent-light)
}
.left.angle {
transform: rotate(180deg);
top: unset;
left: unset;
bottom: 0;
right: 0;
}
@media screen and (max-width: 900px) {
.about {
flex-direction: column;
}
}

View File

@ -1,66 +0,0 @@
import React from "react";
import styles from "./About.module.css";
export function About() {
return (
<div className={styles.aboutWrapper} id="about">
<AngleDecoration isBottom={false} />
<section className={styles.about}>
<aside>
<h1>About the Programs</h1>
<p>Getting an overview of the CS programs in UW</p>
</aside>
<article>
<h4>Computer Science</h4>
<p>
Computer Science (CS) is commonly offered by the Faculty of
Mathematics as a co-op program, with students usually attending 8
school and 6 co-op terms in their degree. However, CS is more
flexible than the other two programs because of the ability to
choose from a wider range and number of electives, to take terms
off, and to change their academic schedules to fit their needs.
</p>
<h4>Computing and Financial Management</h4>
<p>
Computing and Financial Management (CFM) combines the core CS
courses with electives from areas such as accounting, economics, and
financial management. This is a joint offering by the Faculty of
Mathematics and the School of Accounting and Finance. The program is
offered only as a co-op program with 6 co-op terms.{" "}
</p>
<h4>Computer Science/Business Administration</h4>
<p>
Joint with Wilfrid Laurier University, the Business Administration
and Computer Science Double Degree (CS/BBA) is an exclusive offering
that allows students to gain experience in CS as well as many
subfields of business. There are 10 school terms and either 4 or 5
co-op terms in the usual schedule, so its a longer degree with more
academic terms than CS or CFM.
</p>
</article>
</section>
<AngleDecoration isBottom={true} />
</div>
);
}
interface AngleDecorationProps {
isBottom: boolean;
}
function AngleDecoration({ isBottom }: AngleDecorationProps) {
return (
<svg
viewBox="0 0 100 100"
className={isBottom ? `${styles.left} ${styles.angle}` : styles.angle}
>
<path
d="M100,2 L2,2 L2,100"
fill="none"
strokeWidth="10"
className={styles.anglePath}
/>
</svg>
);
}

View File

@ -1,30 +0,0 @@
.barBackground {
fill: var(--card-background);
transition: fill 0.5s ease-out;
}
.bar {
fill: var(--primary-accent-light);
transition: fill 0.5s ease-out;
}
.barGroup {
transition: fill 0.5s ease-out;
}
.barGroup:hover .bar {
fill: var(--primary-accent);
filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
}
.tickLabel {
font-family: "Inconsolata", monospace;
font-weight: 800;
fill: var(--label);
}
.axisLabel {
font-family: "Inconsolata", monospace;
font-weight: 800;
fill: var(--label);
}

View File

@ -1,398 +0,0 @@
import { AxisBottom, AxisLeft } from "@visx/axis";
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
import { GridColumns, GridRows } from "@visx/grid";
import { Group } from "@visx/group";
import { scaleBand, scaleLinear } from "@visx/scale";
import { Bar } from "@visx/shape";
import { withTooltip } from "@visx/tooltip";
import React from "react";
import { Color } from "utils/Color";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./BarGraph.module.css";
interface BarGraphProps {
data: BarGraphData[];
/** Width of the entire graph, in pixels. */
width: number;
/** Height of the entire graph, in pixels. */
height: number;
/** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */
margin: {
top: number;
bottom: number;
left: number;
right: number;
};
className?: string;
/** Font size of the category axis tick labels, in pixels. Default is 16px. */
categoryTickLabelSize?: number;
/** Font size of the value axis tick labels, in pixels. Default is 16px. */
valueTickLabelSize?: number;
/** Label text for the category axis. */
categoryAxisLabel?: string;
/** Font size of the label for the cateogry axis, in pixels. */
categoryAxisLabelSize?: number;
/** Controls the distance between the category axis label and the category axis. */
categoryAxisLabelOffset?: number;
/** Label text for the value axis. */
valueAxisLabel?: string;
/** Font size of the label for the value axis, in pixels. */
valueAxisLabelSize?: number;
/** Controls the distance between the value axis label and the value axis. */
valueAxisLabelOffset?: number;
/** Minimum width of the graph. */
minWidth?: number;
/** Breakpoint width of graph where alernating labels are displayed. Only for Vertical graphs */
widthAlternatingLabel?: number;
/** Space added to the bottom of the graph to show overflowing labels. Only for Vertical graphs */
alternatingLabelSpace?: number;
/** Default position of labels in x-axis, in px. */
defaultLabelDy?: string;
/** Position of lower labels in x-axis, in px. Only for Vertical graphs */
lowerLabelDy?: string;
}
interface BarGraphData {
category: string;
value: number;
}
const DEFAULT_LABEL_SIZE = 16;
type TooltipData = string;
export const BarGraphHorizontal = withTooltip<BarGraphProps, TooltipData>(
({
width,
height,
margin,
data,
className,
minWidth = 500,
categoryTickLabelSize = DEFAULT_LABEL_SIZE,
valueTickLabelSize = DEFAULT_LABEL_SIZE,
categoryAxisLabel,
categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
categoryAxisLabelOffset = 0,
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
defaultLabelDy = "0",
tooltipOpen,
tooltipLeft,
tooltipTop,
tooltipData,
hideTooltip,
showTooltip,
}) => {
width = width < minWidth ? minWidth : width; // Ensuring graph's width >= minWidth
const barPadding = 0.4;
const categoryMax = height - margin.top - margin.bottom;
const valueMax = width - margin.left - margin.right;
const getCategory = (d: BarGraphData) => d.category;
const getValue = (d: BarGraphData) => d.value;
const categoryScale = scaleBand({
range: [0, categoryMax],
domain: data.map(getCategory),
padding: barPadding,
});
const valueScale = scaleLinear({
range: [0, valueMax],
nice: true,
domain: [0, Math.max(...data.map(getValue))],
});
const categoryPoint = (d: BarGraphData) => categoryScale(getCategory(d));
const valuePoint = (d: BarGraphData) => valueScale(getValue(d));
return (
<div>
<svg className={className} width={width} height={height}>
<Group top={margin.top} left={margin.left}>
<Group>
{data.map((d, idx) => {
const barName = `${getCategory(d)}-${idx}`;
const barWidth = categoryScale.bandwidth();
const backgroundBarWidth = barWidth / (1 - barPadding);
return idx % 2 === 0 ? (
<Bar
className={styles.barBackground}
key={`bar-${barName}-background`}
x={0}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
y={categoryPoint(d)! - (backgroundBarWidth - barWidth) / 2}
width={valueMax}
height={backgroundBarWidth}
/>
) : null;
})}
</Group>
<GridColumns
scale={valueScale}
height={categoryMax}
numTicks={5}
stroke={Color.label}
strokeWidth={4}
strokeDasharray="10"
strokeLinecap="round"
/>
<Group>
{data.map((d, idx) => {
const barName = `${getCategory(d)}-${idx}`;
const barLength = valuePoint(d);
const barWidth = categoryScale.bandwidth();
return (
<Group className={styles.barGroup} key={`bar-${barName}`}>
<Bar
onMouseMove={(e) => {
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: getValue(d).toString(),
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
onMouseOut={hideTooltip}
className={styles.bar}
x={0}
y={categoryPoint(d)}
width={barLength}
height={barWidth}
/>
</Group>
);
})}
</Group>
<AxisLeft
scale={categoryScale}
hideAxisLine
hideTicks
tickLabelProps={() => {
return {
...leftTickLabelProps(),
className: styles.tickLabel,
fontSize: `${categoryTickLabelSize / 16}rem`,
};
}}
label={categoryAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={categoryAxisLabelOffset}
labelProps={{
fontSize: `${categoryAxisLabelSize / 16}rem`,
}}
/>
<AxisBottom
scale={valueScale}
top={categoryMax}
hideAxisLine
hideTicks
numTicks={5}
tickLabelProps={() => {
return {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: defaultLabelDy,
fontSize: `${valueTickLabelSize / 16}rem`,
};
}}
label={valueAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={valueAxisLabelOffset}
labelProps={{
fontSize: `${valueAxisLabelSize / 16}rem`,
}}
/>
</Group>
</svg>
{tooltipOpen && (
<TooltipWrapper
top={tooltipTop}
left={tooltipLeft}
header={tooltipData as string}
></TooltipWrapper>
)}
</div>
);
}
);
export const BarGraphVertical = withTooltip<BarGraphProps, TooltipData>(
({
width,
height,
margin,
data,
className,
minWidth = 500,
categoryTickLabelSize = DEFAULT_LABEL_SIZE,
valueTickLabelSize = DEFAULT_LABEL_SIZE,
categoryAxisLabel,
categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
categoryAxisLabelOffset = 0,
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
widthAlternatingLabel = 600,
alternatingLabelSpace = 80,
defaultLabelDy = `0px`,
lowerLabelDy = `30px`,
tooltipOpen,
tooltipLeft,
tooltipTop,
tooltipData,
hideTooltip,
showTooltip,
}) => {
width = width < minWidth ? minWidth : width; // Ensuring graph's width >= minWidth
const barPadding = 0.4;
const alternatingLabel = width <= widthAlternatingLabel;
const final_margin_bottom = alternatingLabel
? margin.bottom + alternatingLabelSpace
: margin.bottom;
const categoryMax = width - margin.left - margin.right;
const valueMax = height - margin.top - final_margin_bottom;
const getCategory = (d: BarGraphData) => d.category;
const getValue = (d: BarGraphData) => d.value;
const categoryScale = scaleBand({
range: [0, categoryMax],
domain: data.map(getCategory),
padding: barPadding,
});
const valueScale = scaleLinear({
range: [valueMax, 0],
nice: true,
domain: [0, Math.max(...data.map(getValue))],
});
const categoryPoint = (d: BarGraphData) => categoryScale(getCategory(d));
const valuePoint = (d: BarGraphData) => valueScale(getValue(d));
return (
<div>
<svg className={className} width={width} height={height}>
<Group top={margin.top} left={margin.left}>
<Group>
{data.map((d, idx) => {
const barName = `${getCategory(d)}-${idx}`;
const barWidth = categoryScale.bandwidth();
const backgroundBarWidth = barWidth / (1 - barPadding);
return idx % 2 === 0 ? (
<Bar
className={styles.barBackground}
key={`bar-${barName}-background`}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
x={categoryPoint(d)! - (backgroundBarWidth - barWidth) / 2}
y={0}
width={backgroundBarWidth}
height={valueMax}
/>
) : null;
})}
</Group>
<GridRows
scale={valueScale}
width={categoryMax}
numTicks={5}
stroke={Color.label}
strokeWidth={4}
strokeDasharray="10"
strokeLinecap="round"
/>
<Group>
{data.map((d, idx) => {
const barName = `${getCategory(d)}-${idx}`;
const barHeight = valueMax - valuePoint(d);
const barWidth = categoryScale.bandwidth();
return (
<Group className={styles.barGroup} key={`bar-${barName}`}>
<Bar
onMouseMove={(e) => {
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: getValue(d).toString(),
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
onMouseOut={hideTooltip}
className={styles.bar}
x={categoryPoint(d)}
y={valueMax - barHeight}
width={barWidth}
height={barHeight}
/>
</Group>
);
})}
</Group>
<AxisBottom
scale={categoryScale}
top={valueMax}
hideAxisLine
hideTicks
tickLabelProps={(value, index) => {
const alternatingDy =
index % 2 == 0 ? defaultLabelDy : lowerLabelDy;
return {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: alternatingLabel ? alternatingDy : defaultLabelDy,
fontSize: `${categoryTickLabelSize / 16}rem`,
width: categoryScale.bandwidth(),
verticalAnchor: "start",
};
}}
label={categoryAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={categoryAxisLabelOffset}
labelProps={{
fontSize: `${categoryAxisLabelSize / 16}rem`,
}}
/>
<AxisLeft
scale={valueScale}
hideAxisLine
hideTicks
numTicks={5}
tickLabelProps={() => {
return {
...leftTickLabelProps(),
className: styles.tickLabel,
dx: "-0.5rem",
dy: "0.25rem",
fontSize: `${valueTickLabelSize / 16}rem`,
};
}}
label={valueAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={valueAxisLabelOffset}
labelProps={{
fontSize: `${valueAxisLabelSize / 16}rem`,
}}
/>
</Group>
</svg>
{tooltipOpen && (
<TooltipWrapper
top={tooltipTop}
left={tooltipLeft}
header={tooltipData as string}
></TooltipWrapper>
)}
</div>
);
}
);

View File

@ -1,15 +0,0 @@
import React from "react";
export const BodyLink = ({
targetBlank = true,
children,
href,
}: {
href: string;
targetBlank?: boolean;
children: React.ReactNode;
}) => (
<a href={href} target={targetBlank ? "_blank" : ""} rel="noreferrer">
<b>{children}</b>
</a>
);

View File

@ -1,110 +0,0 @@
.container {
display: flex;
flex-flow: center;
align-items: center;
justify-content: space-between;
margin: calc(40rem / 16) 0;
}
.subBox {
display: inline-block;
}
.leftItem {
text-align: right;
}
.item {
color: var(--primary-text);
font-size: calc(28rem / 16);
position: relative;
margin: calc(24rem / 16);
}
.subBox {
display: flex;
flex-direction: row;
align-items: center;
}
.arrow {
width: calc(250rem / 16);
height: calc(20rem / 16);
display: flex;
align-items: center;
justify-content: center;
}
.item:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: calc(2rem / 16);
bottom: 0;
left: 0;
background-color: var(--primary-accent);
cursor: pointer;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.item:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.linePath {
stroke: var(--primary-text);
}
.arrowPath {
fill: var(--primary-text);
}
.right {
transform: rotate(180deg);
}
@media screen and (max-width: 1000px) {
.subBox {
flex-direction: column;
align-items: flex-start;
}
.subBoxLeft {
flex-direction: column-reverse;
align-items: flex-end;
}
.item {
font-size: calc(20rem / 16);
margin: 0;
margin-bottom: calc(10rem / 16);
}
.arrow {
width: calc(200rem / 16);
}
}
@media screen and (max-width: 500px) {
.container {
justify-content: center;
gap: calc(50rem / 16);
}
.arrow {
width: 100%;
}
}
.containerOnlyRightArrow {
justify-content: flex-end;
}
.containerOnlyLeftArrow {
justify-content: flex-start;
}

View File

@ -1,88 +0,0 @@
import Link from "next/link";
import React from "react";
import styles from "./BottomNav.module.css";
interface PagesInfo {
leftPage?: {
url: string;
name: string;
};
rightPage?: {
url: string;
name: string;
};
}
export function BottomNav(props: PagesInfo) {
const onlyRightArrow = props.rightPage && !props.leftPage;
const onlyLeftArrow = !props.rightPage && props.leftPage;
return (
<div
className={`${styles.container}
${onlyRightArrow ? styles.containerOnlyRightArrow : ""}
${onlyLeftArrow ? styles.containerOnlyLeftArrow : ""}`}
>
{props.leftPage ? (
<div className={styles.subBox + " " + styles.subBoxLeft}>
<Link href={props.leftPage.url} scroll={true}>
<a>
<Arrow />
</a>
</Link>
<Link href={props.leftPage.url} scroll={true}>
<a className={styles.item + " " + styles.leftItem}>
{props.leftPage.name}
</a>
</Link>
</div>
) : null}
{props.rightPage ? (
<div className={styles.subBox}>
<Link href={props.rightPage.url} scroll={true}>
<a className={styles.item}>{props.rightPage.name}</a>
</Link>
<Link href={props.rightPage.url} scroll={true}>
<a>
<Arrow isPointingRight />
</a>
</Link>
</div>
) : null}
</div>
);
}
interface ArrowProps {
isPointingRight?: boolean;
}
function Arrow({ isPointingRight }: ArrowProps) {
return (
<svg className={(isPointingRight ? styles.right : "") + " " + styles.arrow}>
<defs>
<marker
id="arrow"
markerWidth="10"
markerHeight="10"
refX="5"
refY="3"
orient="auto"
markerUnits="strokeWidth"
>
<path d="M0,0 L0,6 L9,3 z" className={styles.arrowPath} />
</marker>
</defs>
<line
x1="250"
y1="10"
x2="100"
y2="10" // half of svg height
strokeWidth="3"
markerEnd="url(#arrow)"
className={styles.linePath}
/>
</svg>
);
}

View File

@ -1,9 +0,0 @@
.boxplot {
fill: var(--primary-accent-light);
transition: fill 0.5s ease-out;
}
.boxplot:hover {
fill: var(--primary-accent);
filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
}

View File

@ -1,312 +0,0 @@
import { AxisLeft, AxisBottom } from "@visx/axis";
import { GridRows, GridColumns } from "@visx/grid";
import { Group } from "@visx/group";
import { Stats } from "@visx/mock-data/lib/generators/genStats";
import { Point } from "@visx/point";
import { scaleBand, scaleLinear } from "@visx/scale";
import { Line } from "@visx/shape";
import { BoxPlot as VisxBoxPlot } from "@visx/stats";
import { withTooltip } from "@visx/tooltip";
import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withTooltip";
import React from "react";
import { Color } from "utils/Color";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./Boxplot.module.css";
const DEFAULT_LABEL_SIZE = 16;
const TICK_LABEL_FONT_WEIGHT = 800;
interface BoxPlotData {
category: string;
min: number;
median: number;
max: number;
firstQuartile: number;
thirdQuartile: number;
outliers?: number[];
}
type TooltipData = Omit<BoxPlotData, "outliers">;
export type StatsPlotProps = {
data: BoxPlotData[];
/** Width of the entire graph, in pixels, greater than 10. */
width: number;
/** Height of the entire graph, in pixels. */
height: number;
/** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */
margin: {
top: number;
left: number;
};
/** Width of the lines in the graph, in px. */
strokeWidth?: number;
/** Length of the dashes and the gaps in the graph, in px. */
strokeDashArray?: string;
/** Number of ticks for the value (y-)axis */
numTicksLeftAxis?: number;
/** Left margin before the start of the graph for the left axis labels, in px. */
valueAxisLeftMargin?: number;
/** Distance between the left axis labels and the start of the graph */
valueAxisLabelOffset?: number;
/** Distance between the top and the column lines of the grid of the graph, in px. */
gridColumnTopOffset?: number;
/** Distance between the top of the point in the boxplot and the start of the tooltip box, in px. */
toolTipTopOffset?: number;
/** Distance between the left of the point in the boxplot and the start of the tooltip box, in px. */
toolTipLeftOffset?: number;
/** Font size of the category (x-)axis labels */
categoryAxisLabelSize?: number;
/** Font size of the value (y-)axis labels */
valueAxisLabelSize?: number;
/** Font size of the text in the tool tip box */
toolTipFontSize?: number;
/** Factor multiplied with the compressed width to determine the box width, in px. */
boxPlotWidthFactor?: number;
/** Factor multiplied with the compressed width to determine the distance between boxes, in px. */
boxPlotLeftOffset?: number;
/** Boxplot padding */
boxPlotPadding?: number;
/** Minimum width of the graph. */
minWidth?: number;
};
export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
({
width,
height,
data,
margin,
tooltipOpen,
tooltipLeft,
tooltipTop,
tooltipData,
showTooltip,
hideTooltip,
strokeWidth = 2.5,
strokeDashArray = "10,4",
numTicksLeftAxis = 6,
valueAxisLeftMargin = 40,
gridColumnTopOffset = -20,
valueAxisLabelOffset = -10,
toolTipTopOffset = 0,
toolTipLeftOffset = 0,
categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
boxPlotWidthFactor = 0.4,
boxPlotLeftOffset = 0.3,
boxPlotPadding = 0.3,
minWidth = 500,
}: StatsPlotProps & WithTooltipProvidedProps<TooltipData>) => {
if (width < minWidth) {
width = minWidth;
}
// bounds
const xMax = width;
const yMax = height - 120;
// formatting data
const plotData: Stats[] = data.map((d) => {
return {
boxPlot: {
...d,
x: d.category,
outliers: [],
},
binData: [],
};
});
// accessors
const getX = (d: Stats) => d.boxPlot.x;
const getMin = (d: Stats) => d.boxPlot.min;
const getMax = (d: Stats) => d.boxPlot.max;
const getMedian = (d: Stats) => d.boxPlot.median;
const getFirstQuartile = (d: Stats) => d.boxPlot.firstQuartile;
const getThirdQuartile = (d: Stats) => d.boxPlot.thirdQuartile;
// scales
const xScale = scaleBand<string>({
range: [margin.left, xMax - 2 * margin.left - valueAxisLeftMargin], // scaling is needed due to left margin
round: true,
domain: plotData.map(getX),
padding: boxPlotPadding,
});
const values = plotData.reduce((allValues, { boxPlot }) => {
allValues.push(boxPlot.min, boxPlot.max);
return allValues;
}, [] as number[]);
const maxYValue = Math.max(...values);
const yScale = scaleLinear<number>({
range: [yMax - margin.top, 0],
round: true,
domain: [0, maxYValue],
});
const constrainedWidth = Math.min(200, xScale.bandwidth());
const mouseOverEventHandler =
(d: Stats) =>
(e: React.MouseEvent<SVGLineElement | SVGRectElement, MouseEvent>) => {
const pos = getTooltipPosition(e);
showTooltip({
tooltipLeft: pos.x + toolTipLeftOffset,
tooltipTop: pos.y + toolTipTopOffset,
tooltipData: {
...d.boxPlot,
category: getX(d),
},
});
};
return width < 10 ? null : (
<div>
<svg width={width} height={height}>
<Group top={margin.top} left={margin.left}>
<Group left={valueAxisLeftMargin}>
<GridRows
scale={yScale}
width={xMax}
numTicks={numTicksLeftAxis}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<GridColumns
scale={xScale}
height={yMax - gridColumnTopOffset}
top={gridColumnTopOffset}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<AxisBottom
top={yMax - gridColumnTopOffset}
scale={xScale}
hideAxisLine
hideTicks
labelProps={{
fontSize: `${categoryAxisLabelSize / 16}rem`,
}}
tickLabelProps={() => {
return {
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
textAnchor: "middle",
};
}}
/>
<AxisLeft
scale={yScale}
left={valueAxisLabelOffset}
numTicks={numTicksLeftAxis}
hideAxisLine
labelProps={{
fontSize: `${valueAxisLabelSize / 16}rem`,
}}
tickLabelProps={() => {
return {
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
textAnchor: "end",
verticalAnchor: "middle",
};
}}
/>
<Line
fill={Color.tertiaryBackground}
to={new Point({ x: 0, y: gridColumnTopOffset })}
from={new Point({ x: 0, y: yMax })}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
</Group>
<Line
fill={Color.tertiaryBackground}
to={
new Point({
x: xMax - margin.left - strokeWidth,
y: gridColumnTopOffset,
})
}
from={
new Point({
x: xMax - margin.left - strokeWidth,
y: yMax,
})
}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
{plotData.map((d: Stats, i) => (
<Group key={i}>
<VisxBoxPlot
className={styles.boxplot}
min={getMin(d)}
max={getMax(d)}
left={
xScale(getX(d))! +
boxPlotLeftOffset * constrainedWidth +
valueAxisLeftMargin
}
firstQuartile={getFirstQuartile(d)}
thirdQuartile={getThirdQuartile(d)}
median={getMedian(d)}
boxWidth={constrainedWidth * boxPlotWidthFactor}
rx={0}
ry={0}
stroke={Color.label}
strokeWidth={strokeWidth}
valueScale={yScale}
minProps={{
onMouseMove: mouseOverEventHandler(d),
onMouseLeave: hideTooltip,
}}
maxProps={{
onMouseMove: mouseOverEventHandler(d),
onMouseLeave: hideTooltip,
}}
boxProps={{
onMouseMove: mouseOverEventHandler(d),
strokeWidth: 0,
onMouseLeave: hideTooltip,
}}
medianProps={{
style: {
stroke: Color.label,
},
onMouseMove: mouseOverEventHandler(d),
onMouseLeave: () => {
hideTooltip();
},
}}
/>
</Group>
))}
</Group>
</svg>
{tooltipOpen && tooltipData && (
<TooltipWrapper
left={tooltipLeft}
top={tooltipTop}
header={tooltipData.category}
>
<p>max: {tooltipData.max}</p>
<p>third quartile: {tooltipData.thirdQuartile}</p>
<p>median: {tooltipData.median}</p>
<p>first quartile: {tooltipData.firstQuartile}</p>
<p>min: {tooltipData.min}</p>
</TooltipWrapper>
)}
</div>
);
}
);

View File

@ -1,15 +0,0 @@
.textbox {
display: flex;
flex-direction: column;
width: 80%;
padding: calc(80rem / 16);
background-color: var(--secondary-background);
border-radius: calc(20rem / 16);
align-self: center;
}
@media screen and (max-width: 900px) {
.textbox {
align-items: center;
}
}

View File

@ -1,11 +0,0 @@
import React, { ReactNode } from "react";
import styles from "./CenterWrapper.module.css";
export interface TextboxProps {
children: ReactNode;
}
export function CenterWrapper({ children }: TextboxProps) {
return <section className={styles.textbox}>{children}</section>;
}

View File

@ -1,21 +0,0 @@
.box {
width: calc(100rem / 16);
height: calc(100rem / 16);
margin-bottom: calc(10rem / 16);
}
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: calc(10rem / 16) calc(60rem / 16);
width: calc(150rem / 16);
}

View File

@ -1,24 +0,0 @@
import React from "react";
import { Color } from "utils/Color";
import styles from "./ColorPalette.module.css";
export function ColorPalette() {
return (
<>
<h2>Color Palette</h2>
<div className={styles.wrapper}>
{Object.entries(Color).map(([colorName, colorCSSName]) => (
<div key={colorName} className={styles.item}>
<div
className={styles.box}
style={{ backgroundColor: colorCSSName }}
key={colorName}
/>
<span>{colorName}</span>
</div>
))}
</div>
</>
);
}

View File

@ -1,59 +0,0 @@
.btn {
--button-color: var(--primary-accent-darker);
--border-color: var(--link);
--selected-button-color: var(--primary-accent-dark);
--selected-button-border-color: var(--link-hover);
--hover-button-color: var(--primary-accent-dark);
--hover-button-border-color: var(--link-hover);
display: inline-block;
height: calc(60rem / 16);
line-height: calc(30rem / 16);
background-color: var(--button-color);
padding: 0 calc(30rem / 16);
border-radius: 99em;
text-decoration: none;
color: #fff;
font-size: calc(18rem / 16);
vertical-align: bottom;
white-space: nowrap;
border: calc(3rem / 16) solid var(--border-color);
font-family: "Inconsolata", monospace;
transition: .15s background-color, .15s border-color, .15s color, .15s fill;
font-weight: 600;
cursor: pointer;
margin: calc(8rem / 16) calc(3rem / 16);
text-align: center;
}
.btn:hover {
--button-color: var(--hover-button-color);
--border-color: var(--hover-button-border-color);
background-color: var(--button-color);
border: calc(3rem / 16) solid var(--border-color);
}
.btnContainer {
display: block;
text-align: center;
margin: auto;
}
.selectedBtn {
--button-color: var(--selected-button-color);
--border-color: var(--selected-button-border-color);
background-color: var(--button-color);
border: calc(3rem / 16) solid var(--border-color);
}
.selectedBtn:hover {
--button-color: var(--hover-button-color);
--border-color: var(--hover-button-border-color);
background-color: var(--button-color);
border: calc(3rem / 16) solid var(--border-color);
}

View File

@ -1,49 +0,0 @@
import React, { useState, useEffect } from "react";
import styles from "./ComponentSwitcher.module.css";
type ComponentSwitcherProps = {
buttonList: string[];
graphList: React.ReactNode[];
};
export function ComponentSwitcher({
buttonList,
graphList,
}: ComponentSwitcherProps) {
const [selectedButton, setSelectedButton] = useState(buttonList[0]);
const [currentGraph, setCurrentGraph] = useState(graphList[0]);
const [currentGraphNumber, setCurrentGraphNumber] = useState(0);
const handleSwitch = (buttonName: string) => {
const graphIndex = buttonList.indexOf(buttonName);
setSelectedButton(buttonName);
setCurrentGraph(graphList[graphIndex]);
setCurrentGraphNumber(graphIndex);
};
useEffect(() => {
setCurrentGraph(graphList[currentGraphNumber]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [graphList]);
return (
<div>
<div>{currentGraph}</div>
<div className={styles.btnContainer}>
{buttonList.map((buttonName, idx) => (
// we may also apply style if currently selected button === buttonName
<button
key={idx}
className={`${styles.btn} ${
selectedButton === buttonName ? styles.selectedBtn : ""
}`}
onClick={() => handleSwitch(buttonName)}
>
{buttonName}
</button>
))}
</div>
</div>
);
}

View File

@ -1,100 +0,0 @@
.sideWrapperCommon {
background-color: var(--secondary-background);
display: flex;
padding: calc(40rem / 16) calc(50rem / 16);
margin: calc(65rem / 16) 0;
width: 88%;
}
.wrapperRight {
composes: sideWrapperCommon;
align-self: end;
margin-right: 0;
border-radius: calc(200rem / 16) 0 0 calc(200rem / 16);
flex-direction: row-reverse;
padding-right: calc(50rem / 16);
}
.wrapperLeft {
composes: sideWrapperCommon;
align-self: start;
margin-left: 0;
border-radius: 0 calc(200rem / 16) calc(200rem / 16) 0;
flex-direction: row;
padding-left: calc(50rem / 16);
}
.noBackground {
background: none;
align-self: center;
}
.wrapperCenter {
composes: sideWrapperCommon;
flex-direction: column;
text-align: center;
gap: calc(25rem / 16);
/* to match the 65px margin with the left/right variant:
add 45px bottom margin, since internal wrapper contributes 20px for the center component
0px top margin, since h3 contributes 45px and internal wrapper contributes 20px for the center component
*/
margin: 0 0 calc(45rem / 16) 0;
align-self: center;
}
.wrapperCenter .internalWrapper {
margin: auto;
}
.wrapperNoBodyText {
flex-direction: column;
}
.wrapperNoBodyText .internalWrapper {
text-align: center;
}
@media screen and (max-width: 900px) {
.sideWrapperCommon {
margin: auto;
flex-direction: column;
text-align: center;
padding: 0;
border-radius: 0;
width: 100%;
}
.wrapperCenter .internalWrapper {
margin: initial;
}
.wrapperCenter {
padding: 0;
}
.horizontalScrollOnMobile {
overflow-x: scroll;
}
.internalWrapper {
/* Without this, some graphs will have an horizontal scroll bar thats not needed */
overflow-x: auto;
}
}
.internalWrapper {
padding: calc(20rem / 16);
}
.internalWrapper p {
font-size: calc(24rem / 16);
opacity: .85;
line-height: 1.25;
}
.textWrapper {
/* We add this since we want the text to shrink before the graph ever shrinks */
flex-shrink: 1000;
/* So that text is still readable in the awkward 1000px width screen size */
min-width: 200px;
}

View File

@ -1,53 +0,0 @@
import React from "react";
import styles from "./ComponentWrapper.module.css";
type AlignOption = "left" | "center" | "right";
type ComponentWrapperProps = {
children: React.ReactNode;
heading: string;
bodyText?: string | React.ReactNode;
align?: AlignOption;
noBackground?: boolean;
};
export function ComponentWrapper({
heading,
bodyText,
children,
align = "left",
noBackground = false,
}: ComponentWrapperProps) {
const alignClasses: { [key in AlignOption]: string } = {
left: styles.wrapperLeft,
center: styles.wrapperCenter,
right: styles.wrapperRight,
};
return (
<div
className={`
${alignClasses[align]}
${noBackground ? styles.noBackground : ""}
${bodyText ? "" : styles.wrapperNoBodyText}
`}
>
<div className={`${styles.internalWrapper} ${styles.textWrapper}`}>
<h3>{heading}</h3>
{bodyText ? (
typeof bodyText === "string" ? (
<p>{bodyText}</p>
) : (
bodyText
)
) : null}
</div>
<div
className={`${styles.internalWrapper} ${styles.horizontalScrollOnMobile}`}
>
{children}
</div>
</div>
);
}

View File

@ -1,30 +0,0 @@
.wrapper {
display: flex;
flex-direction: column;
}
.barBackground {
fill: var(--card-background);
}
.tickLabel {
font-family: "Inconsolata", monospace;
font-weight: 800;
fill: var(--label);
}
.axisLabel {
font-family: "Inconsolata", monospace;
font-weight: 800;
fill: var(--label);
}
.bar {
transition: fill 0.5s ease-out;
}
.legend {
display: flex;
margin: calc(16rem / 16);
justify-content: center;
}

View File

@ -1,623 +0,0 @@
import { AxisBottom, AxisLeft } from "@visx/axis";
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
import { GridColumns, GridRows } from "@visx/grid";
import { Group } from "@visx/group";
import { LegendOrdinal } from "@visx/legend";
import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
import { Bar, BarGroup, BarGroupHorizontal } from "@visx/shape";
import { BarGroupBar as BarGroupBarType } from "@visx/shape/lib/types";
import { withTooltip } from "@visx/tooltip";
import React, { useState } from "react";
import { Color } from "utils/Color";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./GroupedBarGraph.module.css";
interface GroupedBarGraphProps {
data: GroupedBarGraphData[];
/** Colours of bars in each group. */
barColors: string[];
/** Object mapping from the possible colours of bars in each group (barColors) to the colour of the bar when hovered. */
barHoverColorsMap: Record<string, string>;
/** Width of the entire graph, in pixels. */
width: number;
/** Height of the entire graph, in pixels. */
height: number;
/** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */
margin: {
top: number;
bottom: number;
left: number;
right: number;
};
className?: string;
/** Font size of the category axis tick labels, in pixels. Default is 16px. */
categoryTickLabelSize?: number;
/** Font size of the value axis tick labels, in pixels. Default is 16px. */
valueTickLabelSize?: number;
/** Font size of the value that appears when hovering over a bar, in pixels. */
hoverLabelSize?: number;
/** Label text for the category axis. */
categoryAxisLabel?: string;
/** Font size of the label for the cateogry axis, in pixels. */
categoryAxisLabelSize?: number;
/** Controls the distance between the category axis label and the category axis. */
categoryAxisLabelOffset?: number;
/** Label text for the value axis. */
valueAxisLabel?: string;
/** Font size of the label for the value axis, in pixels. */
valueAxisLabelSize?: number;
/** Controls the distance between the value axis label and the value axis. */
valueAxisLabelOffset?: number;
/** Margin for each item in the legend */
itemMargin?: string;
/** Minimum width of the graph. */
minWidth?: number;
/** Breakpoint width of graph where alernating labels are displayed. Only for Vertical graphs */
widthAlternatingLabel?: number;
/** Space added to the bottom of the graph to show overflowing labels. Only for Vertical graphs */
alternatingLabelSpace?: number;
/** Default position of labels in x-axis, in px. */
defaultLabelDy?: string;
/** Position of lower labels in x-axis, in px. Only for Vertical graphs */
lowerLabelDy?: string;
}
// Best format for props
interface GroupedBarGraphData {
category: string;
values: {
[key: string]: number;
};
}
// Best format for visx
interface BarGroupData {
category: string;
[key: string]: string | number;
}
// BAR_PADDING must be in the range [0, 1)
const BAR_PADDING = 0.2;
const DEFAULT_LABEL_SIZE = 16;
type TooltipData = string;
export const GroupedBarGraphVertical = withTooltip<
GroupedBarGraphProps,
TooltipData
>(
({
data: propsData,
barColors,
barHoverColorsMap,
width,
height,
margin,
className,
minWidth = 500,
categoryTickLabelSize = DEFAULT_LABEL_SIZE,
valueTickLabelSize = DEFAULT_LABEL_SIZE,
hoverLabelSize,
categoryAxisLabel,
categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
categoryAxisLabelOffset = 0,
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
itemMargin = "0 0 0 15px",
widthAlternatingLabel = 600,
alternatingLabelSpace = 80,
defaultLabelDy = `0px`,
lowerLabelDy = `30px`,
tooltipOpen,
tooltipLeft,
tooltipTop,
tooltipData,
hideTooltip,
showTooltip,
}) => {
width = width < minWidth ? minWidth : width; // Ensuring graph's width >= minWidth
const alternatingLabel = width <= widthAlternatingLabel;
const final_margin_bottom = alternatingLabel
? margin.bottom + alternatingLabelSpace
: margin.bottom;
const data: BarGroupData[] = propsData.map((datum: GroupedBarGraphData) => {
return { category: datum.category, ...datum.values };
});
const keys = Object.keys(propsData[0].values);
propsData.forEach((d: GroupedBarGraphData) => {
const currentKeys = Object.keys(d.values);
if (
keys.length != currentKeys.length ||
!keys.every((key: string) => currentKeys.includes(key))
) {
throw new Error(
"Every category in a GroupedBarGraph must have the same keys. Check the data prop"
);
}
});
const allValues = propsData
.map((d: GroupedBarGraphData) => Object.values(d.values))
.flat();
const categoryMax = width - margin.left - margin.right;
const valueMax = height - margin.top - final_margin_bottom;
const getCategory = (d: BarGroupData) => d.category;
const categoryScale = scaleBand({
domain: data.map(getCategory),
padding: BAR_PADDING,
});
const keyScale = scaleBand({
domain: keys,
});
const valueScale = scaleLinear<number>({
domain: [0, Math.max(...allValues)],
});
const colorScale = scaleOrdinal<string, string>({
domain: keys,
range: barColors,
});
categoryScale.rangeRound([0, categoryMax]);
keyScale.rangeRound([0, categoryScale.bandwidth()]);
valueScale.rangeRound([valueMax, 0]);
return (
<div
className={
className ? `${className} ${styles.wrapper}` : styles.wrapper
}
>
<div className={styles.legend}>
<LegendOrdinal
scale={colorScale}
direction="row"
itemMargin={itemMargin}
labelAlign="center"
/>
</div>
<svg width={width} height={height}>
<defs>
{Object.keys(barHoverColorsMap).map((color: string) => {
// remove brackets from colour name to make ids work
const colorId = removeBrackets(color);
return (
<filter key={`glow-${color}`} id={`glow-${colorId}`}>
<feDropShadow
dx="0"
dy="0"
stdDeviation="4"
floodColor={barHoverColorsMap[color]}
/>
</filter>
);
})}
</defs>
<Group top={margin.top} left={margin.left}>
<Group>
{data.map((d, idx) => {
const barName = `${getCategory(d)}-${idx}`;
const barWidth = categoryScale.bandwidth();
const backgroundBarWidth = barWidth / (1 - BAR_PADDING);
return idx % 2 === 0 ? (
<Bar
className={styles.barBackground}
key={`bar-${barName}-background`}
x={
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
categoryScale(getCategory(d))! -
(backgroundBarWidth - barWidth) / 2
}
y={0}
width={backgroundBarWidth}
height={valueMax}
/>
) : null;
})}
</Group>
<GridRows
scale={valueScale}
width={categoryMax}
numTicks={5}
stroke={Color.label}
strokeWidth={4}
strokeDasharray="10"
strokeLinecap="round"
/>
<BarGroup
data={data}
keys={keys}
height={valueMax}
x0={getCategory}
x0Scale={categoryScale}
x1Scale={keyScale}
yScale={valueScale}
color={colorScale}
>
{(barGroups) =>
barGroups.map((barGroup) => (
<Group
key={`bar-group-${barGroup.x0}-${barGroup.index}`}
left={barGroup.x0}
>
{barGroup.bars.map((bar) => (
<HoverableBar
onMouseMove={(e) => {
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: bar.value.toString(),
tooltipTop: tooltipPos.y,
tooltipLeft: tooltipPos.x,
});
}}
onMouseOut={hideTooltip}
key={`bar-group-bar-${barGroup.x0}-${barGroup.index}-${bar.key}-${bar.index}`}
bar={bar}
valueMax={valueMax}
hoverFillColor={barHoverColorsMap[bar.color]}
hoverLabelSize={hoverLabelSize}
/>
))}
</Group>
))
}
</BarGroup>
<AxisBottom
scale={categoryScale}
top={valueMax}
hideAxisLine
hideTicks
tickLabelProps={(value, index) => {
const alternatingDy =
index % 2 == 0 ? defaultLabelDy : lowerLabelDy;
return {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: alternatingLabel ? alternatingDy : defaultLabelDy,
fontSize: `${categoryTickLabelSize / 16}rem`,
width: categoryScale.bandwidth(),
verticalAnchor: "start",
};
}}
label={categoryAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={categoryAxisLabelOffset}
labelProps={{
fontSize: `${categoryAxisLabelSize / 16}rem`,
}}
/>
<AxisLeft
scale={valueScale}
hideAxisLine
hideTicks
numTicks={5}
tickLabelProps={() => {
return {
...leftTickLabelProps(),
className: styles.tickLabel,
dx: "-0.5rem",
dy: "0.25rem",
fontSize: `${valueTickLabelSize / 16}rem`,
};
}}
label={valueAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={valueAxisLabelOffset}
labelProps={{
fontSize: `${valueAxisLabelSize / 16}rem`,
}}
/>
</Group>
</svg>
{tooltipOpen && (
<TooltipWrapper
top={tooltipTop}
left={tooltipLeft}
header={tooltipData as string}
></TooltipWrapper>
)}
</div>
);
}
);
export const GroupedBarGraphHorizontal = withTooltip<
GroupedBarGraphProps,
TooltipData
>(
({
data: propsData,
barColors,
barHoverColorsMap,
width,
height,
margin,
className,
minWidth = 600,
categoryTickLabelSize = DEFAULT_LABEL_SIZE,
valueTickLabelSize = DEFAULT_LABEL_SIZE,
hoverLabelSize,
categoryAxisLabel,
categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
categoryAxisLabelOffset = 0,
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
itemMargin = "0 0 0 15px",
defaultLabelDy = "0",
tooltipOpen,
tooltipLeft,
tooltipTop,
tooltipData,
hideTooltip,
showTooltip,
}) => {
width = width < minWidth ? minWidth : width; // Ensuring graph's width >= minWidth
const data: BarGroupData[] = propsData.map((datum: GroupedBarGraphData) => {
return { category: datum.category, ...datum.values };
});
const keys = Object.keys(propsData[0].values);
propsData.forEach((d: GroupedBarGraphData) => {
const currentKeys = Object.keys(d.values);
if (
keys.length != currentKeys.length ||
!keys.every((key: string) => currentKeys.includes(key))
) {
throw new Error(
"Every category in a GroupedBarGraph must have the same keys. Check the data prop"
);
}
});
const allValues = propsData
.map((d: GroupedBarGraphData) => Object.values(d.values))
.flat();
const categoryMax = height - margin.top - margin.bottom;
const valueMax = width - margin.left - margin.right;
const getCategory = (d: BarGroupData) => d.category;
const categoryScale = scaleBand({
domain: data.map(getCategory),
padding: BAR_PADDING,
});
const keyScale = scaleBand({
domain: keys,
});
const valueScale = scaleLinear<number>({
domain: [Math.max(...allValues), 0],
});
const colorScale = scaleOrdinal<string, string>({
domain: keys,
range: barColors,
});
categoryScale.rangeRound([0, categoryMax]);
keyScale.rangeRound([0, categoryScale.bandwidth()]);
valueScale.rangeRound([valueMax, 0]);
return (
<div
className={
className ? `${className} ${styles.wrapper}` : styles.wrapper
}
>
<div className={styles.legend}>
<LegendOrdinal
scale={colorScale}
direction="row"
itemMargin={itemMargin}
labelAlign="center"
/>
</div>
<svg width={width} height={height}>
<defs>
{Object.keys(barHoverColorsMap).map((color: string) => {
// remove brackets from colour name to make ids work
const colorId = removeBrackets(color);
return (
<filter key={`glow-${color}`} id={`glow-${colorId}`}>
<feDropShadow
dx="0"
dy="0"
stdDeviation="4"
floodColor={barHoverColorsMap[color]}
/>
</filter>
);
})}
</defs>
<Group top={margin.top} left={margin.left}>
<Group>
{data.map((d, idx) => {
const barName = `${getCategory(d)}-${idx}`;
const barWidth = categoryScale.bandwidth();
const backgroundBarWidth = barWidth / (1 - BAR_PADDING);
return idx % 2 === 0 ? (
<Bar
className={styles.barBackground}
key={`bar-${barName}-background`}
x={0}
y={
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
categoryScale(getCategory(d))! -
(backgroundBarWidth - barWidth) / 2
}
width={valueMax}
height={backgroundBarWidth}
/>
) : null;
})}
</Group>
<GridColumns
scale={valueScale}
height={categoryMax}
numTicks={5}
stroke={Color.label}
strokeWidth={4}
strokeDasharray="10"
strokeLinecap="round"
/>
<BarGroupHorizontal
data={data}
keys={keys}
width={valueMax}
y0={getCategory}
y0Scale={categoryScale}
y1Scale={keyScale}
xScale={valueScale}
color={colorScale}
>
{(barGroups) =>
barGroups.map((barGroup) => (
<Group
key={`bar-group-${barGroup.y0}-${barGroup.index}`}
top={barGroup.y0}
>
{barGroup.bars.map((bar) => (
<HoverableBar
onMouseMove={(e) => {
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: bar.value.toString(),
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
onMouseOut={hideTooltip}
key={`bar-group-bar-${barGroup.y0}-${barGroup.index}-${bar.key}-${bar.index}`}
bar={bar}
valueMax={valueMax}
hoverFillColor={barHoverColorsMap[bar.color]}
hoverLabelSize={hoverLabelSize}
isHorizontal
/>
))}
</Group>
))
}
</BarGroupHorizontal>
<AxisLeft
scale={categoryScale}
hideAxisLine
hideTicks
tickLabelProps={() => {
return {
...leftTickLabelProps(),
className: styles.tickLabel,
dx: "-0.5rem",
dy: defaultLabelDy,
fontSize: `${valueTickLabelSize / 16}rem`,
height: categoryScale.bandwidth(),
};
}}
label={categoryAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={categoryAxisLabelOffset}
labelProps={{
fontSize: `${categoryAxisLabelSize / 16}rem`,
}}
/>
<AxisBottom
scale={valueScale}
top={categoryMax}
hideAxisLine
hideTicks
numTicks={5}
tickLabelProps={() => {
return {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: "-0.25rem",
fontSize: `${categoryTickLabelSize / 16}rem`,
verticalAnchor: "start",
};
}}
label={valueAxisLabel}
labelClassName={styles.axisLabel}
labelOffset={valueAxisLabelOffset}
labelProps={{
fontSize: `${valueAxisLabelSize / 16}rem`,
}}
/>
</Group>
</svg>
{tooltipOpen && (
<TooltipWrapper
top={tooltipTop}
left={tooltipLeft}
header={tooltipData as string}
></TooltipWrapper>
)}
</div>
);
}
);
interface HoverableBarProps {
bar: BarGroupBarType<string>;
valueMax: number;
hoverFillColor?: string;
hoverLabelSize?: number;
isHorizontal?: boolean;
onMouseMove?: (e: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
onMouseOut?: () => void;
}
function HoverableBar(props: HoverableBarProps) {
const { bar, hoverFillColor, onMouseMove, onMouseOut } = props;
const [isHovered, setIsHovered] = useState(false);
const colorId = removeBrackets(bar.color);
return (
<Group
className={styles.singleBar}
onMouseEnter={() => {
setIsHovered(true);
}}
onMouseLeave={() => {
setIsHovered(false);
}}
>
<Bar
className={styles.bar}
onMouseMove={onMouseMove}
onMouseOut={onMouseOut}
x={bar.x}
y={bar.y}
width={bar.width}
height={bar.height}
fill={isHovered && hoverFillColor ? hoverFillColor : bar.color}
// apply the glow effect when the bar is hovered
filter={isHovered ? `url(#glow-${colorId})` : undefined}
/>
</Group>
);
}
function removeBrackets(str: string) {
return str.replace(/\(|\)/g, "");
}

View File

@ -1,137 +0,0 @@
.headerWrapper {
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
left: 0;
background: var(--dark--primary-background);
z-index: 98;
box-sizing: border-box;
padding: calc(10rem / 16) calc(100rem / 16) 0;
}
.titleHeader {
margin: calc(16rem / 16) 0;
}
.sideBarCommon {
position: fixed;
right: 0;
top: 0;
min-width: calc(400rem / 16);
height: 100vh;
background: var(--secondary-background);
padding: calc(100rem / 16);
margin: 0;
z-index: 100;
padding: 0;
padding-right: calc(20rem / 16);
transition: transform 0.8s;
overflow: auto;
}
.sideBarShown {
composes: sideBarCommon;
}
.sideBarHidden {
composes: sideBarCommon;
transform: translateX(100%);
}
.backgroundTintCommon {
background-color: var(--label);
animation: fadeIn 1s;
position: fixed;
z-index: 99;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
transition: opacity 0.8s, visibility 0.8s;
}
.backgroundTintShow {
composes: backgroundTintCommon;
visibility: visible;
opacity: 0.2;
}
.backgroundTintHidden {
composes: backgroundTintCommon;
visibility: hidden;
opacity: 0;
}
.menuHeader {
margin-bottom: 0;
padding-left: calc(30rem / 16);
padding-bottom: 0;
color: var(--dark--secondary-heading);
}
.sectionsWrapper {
padding-left: calc(30rem / 16);
}
.menuIcon {
background: none;
border: none;
transition: opacity 0.5s ease-out;
}
.menuIcon:hover {
opacity: 0.8;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.sideBarCommon {
min-width: calc(300rem / 16);
max-width: calc(500rem / 16);
}
.menuHeader {
padding-left: calc(20rem / 16);
}
.sectionsWrapper {
padding-left: calc(20rem / 16);
}
.headerWrapper {
padding: calc(10rem / 16) calc(20rem / 16) 0;
}
}
.closeMenuButton {
background: var(--primary-heading);
padding: 0 calc(20rem / 16);
border-radius: calc(50rem / 16);
display: flex;
flex-direction: row;
margin-left: calc(20rem / 16);
/* transparent border fixes weird coloring on the border in some browsers */
border: calc(1rem / 16) solid transparent;
transition: background-color 0.25s ease-out;
}
.closeMenuButton:hover {
background-color: var(--secondary-accent-light);
cursor: pointer;
}
.lineWrapper {
width: 100%;
display: flex;
}
.lineWrapper:before {
content: "";
flex: 1 1;
border-bottom: 3px solid white;
margin: auto;
}

View File

@ -1,70 +0,0 @@
import { pageRoutes } from "data/routes";
import Link from "next/link";
import React, { useState } from "react";
import { basePath } from "utils/getBasePath";
import { Sections } from "./Sections";
import styles from "./Header.module.css";
export function Header() {
const [isShowingMenu, setIsShowingMenu] = useState(false);
return (
<>
<div
className={
isShowingMenu
? styles.backgroundTintShow
: styles.backgroundTintHidden
}
onClick={(_) => {
setIsShowingMenu(false);
}}
/>
<div className={styles.headerWrapper}>
<h1 className={styles.titleHeader}>
<Link href="/">CS 2022</Link>
</h1>
<button
onClick={(_) => {
setIsShowingMenu(true);
}}
className={styles.menuIcon}
>
<img
src={basePath + "/images/menuIcon.svg"}
width="50"
height="50"
draggable="false"
/>
</button>
</div>
<div
className={isShowingMenu ? styles.sideBarShown : styles.sideBarHidden}
>
<h1 className={styles.menuHeader}>Sections</h1>
<div className={styles.lineWrapper}>
<button
className={styles.closeMenuButton}
onClick={(_) => {
setIsShowingMenu(false);
}}
>
<img
src={basePath + "/images/rightArrow.svg"}
className={styles.arrowIcon}
width="50"
height="50"
draggable="false"
/>
</button>
</div>
<div className={styles.sectionsWrapper}>
<Sections data={pageRoutes} showHeader={false} />
</div>
</div>
</>
);
}

View File

@ -1,33 +0,0 @@
.tickLabel {
font-family: "Inconsolata", monospace;
font-weight: 800;
fill: var(--label);
}
.line {
transition: filter 0.5s ease-out;
}
.line:hover {
filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
transition: filter 0.5s ease-out;
}
.wrapper {
display: flex;
width: min-content;
}
.legend {
display: flex;
margin: calc(16rem / 8);
justify-content: center;
}
@media screen and (max-width: 900px) {
/* To fix legend being cut off on mobile */
.legend {
justify-content: start;
}
}

View File

@ -1,238 +0,0 @@
import { AxisBottom, AxisLeft } from "@visx/axis";
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
import { GridColumns, GridRows } from "@visx/grid";
import { Group } from "@visx/group";
import { LegendOrdinal } from "@visx/legend";
import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
import { LinePath } from "@visx/shape";
import { withTooltip } from "@visx/tooltip";
import React from "react";
import { Color } from "utils/Color";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./LineGraph.module.css";
interface LineData {
label: string;
yValues: number[];
}
interface PointData {
x: string;
y: number;
}
interface LineGraphData {
xValues: string[];
lines: LineData[];
}
interface LineGraphProps {
data: LineGraphData;
/** Width of the entire graph, in pixels. */
width: number;
/** Height of the entire graph, in pixels. */
height: number;
/** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */
margin: {
top: number;
bottom: number;
left: number;
right: number;
};
/** List of hexademical colours for each line, length of colorRange should match the length of data. */
colorRange: string[];
/** Font size of the category tick labels, in pixels. Default is 16px. */
xTickLabelSize?: number;
/** Font size of the value tick labels, in pixels. Default is 16px. */
yTickLabelSize?: number;
/** Margin for each item in the legend */
itemMargin?: string;
/** Minimum width of the graph. */
minWidth?: number;
}
const DEFAULT_LABEL_SIZE = 16;
type TooltipData = string;
export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
({
width,
height,
margin,
data,
colorRange,
xTickLabelSize = DEFAULT_LABEL_SIZE,
yTickLabelSize = DEFAULT_LABEL_SIZE,
tooltipOpen,
tooltipLeft,
tooltipTop,
tooltipData,
hideTooltip,
showTooltip,
itemMargin = "0 0 0 15px",
minWidth = 500,
}) => {
if (width < minWidth) {
width = minWidth;
}
const xLength = data.xValues.length;
if (data.lines.length != colorRange.length) {
throw new Error("Invalid data with wrong length.");
}
data.lines.forEach((line) => {
if (line.yValues.length != xLength) {
throw new Error("Invalid data with wrong length.");
}
});
const yMax = height - margin.top - margin.bottom;
const xMax = width - margin.left - margin.right;
const actualData = data.lines.map((line) => {
return line.yValues.map((val, idx) => {
return { x: data.xValues[idx], y: val };
});
});
const yMaxValue = Math.max(
...data.lines.map((line) => {
return Math.max(...line.yValues);
})
);
// data accessors
const getX = (d: PointData) => d.x;
const getY = (d: PointData) => d.y;
// scales
const xScale = scaleBand({
range: [0, xMax],
domain: data.xValues,
});
const yScale = scaleLinear<number>({
range: [0, yMax],
nice: true,
domain: [yMaxValue, 0],
});
const keys = data.lines.map((line) => line.label);
const colorScale = scaleOrdinal<string, string>({
domain: keys,
range: colorRange,
});
return (
<div>
<div className={styles.legend}>
<LegendOrdinal
scale={colorScale}
direction="row"
itemMargin={itemMargin}
labelAlign="center"
/>
</div>
<svg width={width} height={height}>
<Group top={margin.top} left={margin.left}>
<GridColumns
scale={xScale}
height={yMax}
left={margin.left}
numTicks={5}
stroke={Color.tertiaryBackground}
strokeWidth={4}
strokeDasharray="10"
strokeLinecap="round"
/>
<GridRows
scale={yScale}
width={xMax}
left={margin.left * 2.3}
numTicks={data.xValues.length}
stroke={Color.tertiaryBackground}
strokeWidth={4}
strokeDasharray="10"
strokeLinecap="round"
/>
<AxisBottom
scale={xScale}
top={margin.top + yMax}
left={margin.left}
hideAxisLine
hideTicks
tickLabelProps={() => {
return {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: "-0.25rem",
fontSize: `${xTickLabelSize / 16}rem`,
width: xScale.bandwidth(),
};
}}
/>
<AxisLeft
scale={yScale}
left={margin.left}
hideAxisLine
hideTicks
numTicks={5}
tickLabelProps={() => {
return {
...leftTickLabelProps(),
className: styles.tickLabel,
dx: "1.25rem",
dy: "0.25rem",
fontSize: `${yTickLabelSize / 16}rem`,
};
}}
/>
<Group left={margin.left + xMax / (data.xValues.length * 2)}>
{actualData.map((lineData, i) => {
return (
<Group key={`line-${i}`}>
<LinePath
onMouseMove={(e) => {
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: data.lines[i].label,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
onMouseOut={hideTooltip}
data={lineData}
className={styles.line}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
x={(d) => xScale(getX(d))!}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
y={(d) => yScale(getY(d))!}
stroke={colorRange[i]}
strokeWidth={4}
strokeOpacity={2}
/>
</Group>
);
})}
</Group>
</Group>
</svg>
{tooltipOpen && (
<TooltipWrapper
top={tooltipTop}
left={tooltipLeft}
header={tooltipData as string}
></TooltipWrapper>
)}
</div>
);
}
);

View File

@ -1,21 +0,0 @@
.piePath {
fill: var(--tertiary-background);
stroke: var(--label);
stroke-width: 1px;
stroke-dasharray: 0;
stroke-linecap: round;
transition: fill 0.5s ease-out;
}
.labelPath {
fill-opacity: 0;
}
.labelText {
fill: white;
}
.group:hover > .piePath {
fill: var(--primary-accent);
filter: drop-shadow(0px 0px calc(6rem / 16) var(--primary-accent));
}

View File

@ -1,194 +0,0 @@
import { Group } from "@visx/group";
import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
import { Text } from "@visx/text";
import { withTooltip } from "@visx/tooltip";
import React from "react";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./PieChart.module.css";
interface PieChartProps {
data: PieChartData[];
/** Width of the entire graph, including labels, in pixels. */
width: number;
/** Width of the outer ring of labels, in pixels. Label text may be cut off if specified value is too small. */
labelWidth: number;
/** Distance between pie slices, in pixels. */
padRadius?: number;
/** Distance of gap in center of pie graph, in pixels. */
innerRadius?: number;
/** Font size of labels outside the pie, in pixels. */
labelTextSize?: number;
/** X-axis offset of the label text, in pixels. */
labelTextXOffset?: number;
/** Y-axis offset of the label text, in pixels. */
labelTextYOffset?: number;
/** The radial offset of the label text, in pixels. */
labelTextRadialOffset?: number;
/** If set, the minimum width of this graph */
minWidth?: number;
/** Accessor function to get value to display as label text from datum. */
getLabelDisplayValueFromDatum?: (datum: PieChartData) => string;
className?: string;
}
interface PieChartData {
category: string;
value: number;
}
export const PieChart = withTooltip<PieChartProps>(
({
data,
width,
labelWidth,
padRadius = width * 0.25,
innerRadius = width * 0,
labelTextSize = 40,
labelTextXOffset = 0,
labelTextYOffset = 0,
labelTextRadialOffset = -20,
minWidth = 500,
getLabelDisplayValueFromDatum = (datum: PieChartData) =>
`${datum.category}`,
className,
tooltipOpen,
tooltipLeft,
tooltipTop,
tooltipData,
hideTooltip,
showTooltip,
}) => {
if (minWidth) {
width = width < minWidth ? minWidth : width;
}
const pieWidth = width * 0.5 - labelWidth;
const cornerRadius = 0;
const padAngle = 0;
return (
<div>
<svg className={className} width={width} height={width}>
<Group top={width * 0.5} left={width * 0.5}>
<Pie
data={data}
pieValue={(d: PieChartData) => d.value}
cornerRadius={cornerRadius}
padAngle={padAngle}
padRadius={padRadius}
innerRadius={innerRadius}
outerRadius={pieWidth}
>
{({ arcs, path }) => {
return arcs.map((arc) => {
const pathArc = path(arc) as string;
return (
<Group
className={styles.group}
key={`arc-${arc.data.category}`}
>
<path
onMouseMove={(e) => {
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: `${arc.data.category}: ${arc.data.value}%`,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
onMouseOut={hideTooltip}
className={styles.piePath}
d={pathArc}
/>
</Group>
);
});
}}
</Pie>
<Pie
data={data}
pieValue={(d: PieChartData) => d.value}
innerRadius={pieWidth}
outerRadius={width * 0.5}
>
{(pie) => (
<PieSliceLabel
{...pie}
labelTextSize={labelTextSize}
labelTextXOffset={labelTextXOffset}
labelTextYOffset={labelTextYOffset}
labelTextRadialOffset={labelTextRadialOffset}
getLabelDisplayValueFromDatum={getLabelDisplayValueFromDatum}
/>
)}
</Pie>
</Group>
</svg>
{tooltipOpen && (
<TooltipWrapper
top={tooltipTop}
left={tooltipLeft}
header={tooltipData as string}
></TooltipWrapper>
)}
</div>
);
}
);
type PieSliceLabelProps<PieChartData> = ProvidedProps<PieChartData> & {
labelTextSize: number;
labelTextXOffset: number;
labelTextYOffset: number;
labelTextRadialOffset: number;
getLabelDisplayValueFromDatum: (datum: PieChartData) => string;
};
export function PieSliceLabel({
path,
arcs,
labelTextSize,
labelTextXOffset,
labelTextYOffset,
labelTextRadialOffset,
getLabelDisplayValueFromDatum,
}: PieSliceLabelProps<PieChartData>) {
return (
<>
{arcs.map((arc) => {
const [centroidX, centroidY] = path.centroid(arc);
const pathArc = path(arc) as string;
return (
<Group className={styles.group} key={`arc-${arc.data.category}`}>
<path className={styles.labelPath} d={pathArc} />
<Text
className={styles.labelText}
x={
(labelTextRadialOffset * centroidX) /
Math.sqrt(centroidX ** 2 + centroidY ** 2) +
centroidX +
labelTextXOffset
}
y={
(labelTextRadialOffset * centroidY) /
Math.sqrt(centroidX ** 2 + centroidY ** 2) +
centroidY +
labelTextYOffset
}
textAnchor={
centroidX > 100 ? "start" : centroidX < -100 ? "end" : "middle"
}
fontSize={labelTextSize}
>
{`${getLabelDisplayValueFromDatum(arc.data)}`}
</Text>
</Group>
);
})}
</>
);
}

View File

@ -1,125 +0,0 @@
.carousel {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: calc(8rem / 16);
margin: auto;
}
.circle {
position: absolute;
top: 30%;
right: 52%;
z-index: -1;
background-color: var(--tertiary-background);
clip-path: circle();
}
.right.circle {
top: unset;
right: unset;
bottom: 30%;
left: 52%;
}
.carouselButton {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: calc(16rem / 16);
height: min-content;
background: none;
border: none;
cursor: pointer;
}
.arrow {
position: relative;
width: calc(20rem / 16);
height: calc(40rem / 16);
transition: 0.2s;
}
.previous.arrow {
transform: rotate(180deg);
}
.carouselButton:hover > .arrow {
translate: calc(4rem / 16);
}
.carouselButton:hover > .previous.arrow {
translate: calc(-4rem / 16);
}
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
gap: calc(16rem / 16);
min-height: inherit;
height: 100%;
width: 100%;
padding: calc(30rem / 16);
background-color: var(--translucent-accent);
border: calc(2rem / 16) solid var(--primary-text);
border-radius: calc(12rem / 16);
box-shadow: 0 calc(1rem / 16) calc(10rem / 16) var(--primary-accent);
}
.card ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
margin: 0;
padding: 0;
flex-grow: 1;
}
.card li {
position: absolute;
left: 0;
right: 0;
margin: 0;
padding: 0;
list-style: none;
visibility: visible;
opacity: 1;
transition: 0.1s;
}
.card li.hidden {
visibility: hidden;
opacity: 0;
}
.card p {
margin: 0 calc(16rem / 16);
font-weight: bold;
text-align: center;
}
.quotationMark {
width: calc(20rem / 16);
height: calc(20rem / 16);
}
.right.quotationMark {
transform: rotate(180deg);
align-self: end;
}

View File

@ -1,136 +0,0 @@
import React, { useState } from "react";
import { Color } from "utils/Color";
import styles from "./QuotationCarousel.module.css";
interface QuotationCarouselProps {
data: string[];
/** Width of the entire carousel including the buttons, in px. */
width?: number;
/** Minimum height of the carousel, in px. */
height?: number;
/** Diameter of the background circles, in px. Set to 0 for no circles. */
circleDiameter?: number;
className?: string;
/** Minimum width of the graph. */
minWidth?: number;
}
interface CarouselButtonProps {
onClick: () => void;
isPrevious?: boolean;
}
export function QuotationCarousel(props: QuotationCarouselProps) {
const {
data,
width = 600,
height = 100,
circleDiameter = 120,
minWidth = 600,
className,
} = props;
const actualWidth = width < minWidth ? minWidth : width;
const [activeIdx, setActiveIdx] = useState(0);
function showNextCard() {
setActiveIdx((activeIdx + 1) % data.length);
}
function showPreviousCard() {
setActiveIdx((activeIdx - 1 + data.length) % data.length);
}
return (
<section
className={
className ? `${className} ${styles.carousel}` : styles.carousel
}
style={{
width: `${actualWidth / 16}rem`,
minHeight: `${height / 16}rem`,
}}
>
<Circle className={styles.circle} diameter={circleDiameter} />
<Circle
className={`${styles.right} ${styles.circle}`}
diameter={circleDiameter}
/>
<CarouselButton onClick={showPreviousCard} isPrevious />
<div className={styles.card}>
<QuotationMark className={styles.quotationMark} />
<ul>
{data.map((quote, idx) => (
<li key={idx} className={idx !== activeIdx ? styles.hidden : ""}>
<p>{quote}</p>
</li>
))}
</ul>
<QuotationMark className={`${styles.right} ${styles.quotationMark}`} />
</div>
<CarouselButton onClick={showNextCard} />
</section>
);
}
function Circle({
className,
diameter,
}: {
className: string;
diameter: number;
}) {
return (
<div
className={className}
aria-hidden
style={{
width: `${diameter / 16}rem`,
height: `${diameter / 16}rem`,
}}
/>
);
}
function CarouselButton({ isPrevious, onClick }: CarouselButtonProps) {
return (
<button className={styles.carouselButton} onClick={onClick}>
<svg
className={
isPrevious ? `${styles.previous} ${styles.arrow}` : styles.arrow
}
width="39"
height="72"
viewBox="0 0 39 72"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 4L34.4206 35.804C35.2926 36.7157 35.2597 38.1619 34.3471 39.0329L4 68"
stroke={Color.primaryAccentLighter}
strokeWidth="4"
strokeLinecap="round"
/>
</svg>
</button>
);
}
function QuotationMark({ className }: { className: string }) {
return (
<svg
className={className}
aria-hidden
width="68"
height="56"
viewBox="0 0 68 56"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.34 0.855375L31.1131 9.91768C28.9808 11.9315 27.0262 13.9454 25.2492 15.9592C23.5908 17.9731 22.2877 19.9869 21.34 22.0008C20.3923 24.0146 19.9185 25.9692 19.9185 27.8646C19.9185 29.4046 20.3331 30.7077 21.1623 31.7738C21.9915 32.84 22.9392 33.8469 24.0054 34.7946C25.0715 35.7423 26.0192 36.8677 26.8485 38.1708C27.6777 39.4738 28.0923 41.1323 28.0923 43.1461C28.0923 46.5815 26.8485 49.5431 24.3608 52.0308C21.9915 54.5185 18.8523 55.7623 14.9431 55.7623C11.1523 55.7623 7.71693 54.2223 4.63693 51.1423C1.67539 48.0623 0.194616 44.1531 0.194616 39.4146C0.194616 35.6238 0.964617 31.7146 2.50462 27.6869C4.16308 23.5408 6.53231 19.2169 9.61231 14.7154C12.6923 10.2138 16.6015 5.59383 21.34 0.855375ZM57.7669 0.855375L67.54 9.91768C65.4077 11.9315 63.4531 13.9454 61.6762 15.9592C60.0177 17.9731 58.7146 19.9869 57.7669 22.0008C56.8192 24.0146 56.3454 25.9692 56.3454 27.8646C56.3454 29.4046 56.76 30.7077 57.5892 31.7738C58.4185 32.84 59.3662 33.8469 60.4323 34.7946C61.4985 35.7423 62.4462 36.8677 63.2754 38.1708C64.1046 39.4738 64.5192 41.1323 64.5192 43.1461C64.5192 46.5815 63.2754 49.5431 60.7877 52.0308C58.4185 54.5185 55.2792 55.7623 51.37 55.7623C47.5792 55.7623 44.1439 54.2223 41.0639 51.1423C38.1023 48.0623 36.6215 44.1531 36.6215 39.4146C36.6215 35.6238 37.3915 31.7146 38.9315 27.6869C40.59 23.5408 42.9592 19.2169 46.0392 14.7154C49.1192 10.2138 53.0285 5.59383 57.7669 0.855375Z"
fill={Color.primaryText}
/>
</svg>
);
}

View File

@ -1,32 +0,0 @@
.header {
display: flex;
flex-direction: column;
justify-content: center;
padding: calc(40rem / 16) 0;
text-align: center;
}
.title {
color: var(--primary-accent-light);
font-size: calc(70rem / 16);
margin: calc(40rem / 16) auto;
word-break: break-word;
}
.subTitle {
color: var(--primary-accent-lighter);
font-size: calc(26rem / 16);
margin: auto;
}
@media screen and (max-width: 900px) {
.title {
font-size: calc(50rem / 16);
margin: calc(20rem / 16) auto;
}
.subTitle {
font-size: calc(30rem / 16);
margin: auto calc(15rem / 16);
}
}

View File

@ -1,17 +0,0 @@
import React from "react";
import styles from "./SectionHeader.module.css";
interface SectionHeaderProps {
title: string;
subtitle?: string;
}
export function SectionHeader({ title, subtitle }: SectionHeaderProps) {
return (
<div className={styles.header}>
<h1 className={styles.title}>{title}</h1>
{subtitle && <h5 className={styles.subTitle}>{subtitle}</h5>}
</div>
);
}

View File

@ -1,11 +0,0 @@
.sectionWrapper h2 {
color: var(--primary-heading);
padding-left: 4rem;
}
@media screen and (max-width: 900px) {
.sectionWrapper h2 {
text-align: center;
padding-left: 0;
}
}

View File

@ -1,15 +0,0 @@
import React from "react";
import styles from "./SectionWrapper.module.css";
type SectionWrapperProps = {
title: string;
};
export function SectionWrapper({ title }: SectionWrapperProps) {
return (
<div className={styles.sectionWrapper}>
<h2>{title}</h2>
</div>
);
}

View File

@ -1,87 +0,0 @@
.sections {
display: flex;
flex-direction: row;
gap: calc(15rem / 16);
}
.sections h1 {
flex: 3;
text-align: right;
margin: 0;
}
.separator {
flex: 2;
background-color: var(--label);
height: calc(1rem / 16);
width: 100%;
margin-top: calc(30rem / 16);
}
.nav {
flex: 3;
display: flex;
flex-direction: column;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav li {
margin: calc(20rem / 16);
margin-left: 0;
}
.nav li:first-child {
margin-top: calc(18rem / 16);
}
.nav li .linkNumber {
color: var(--secondary-accent);
margin: 0;
display: inline;
}
.nav li a {
font-size: calc(24rem / 16);
color: var(--primary-text);
}
.linkName:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: calc(1rem / 16);
bottom: 0;
left: 0;
background-color: var(--primary-text);
cursor: pointer;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.linkName:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.linkName {
margin: 0;
display: inline;
position: relative;
}
@media screen and (max-width: 900px) {
.sections {
flex-direction: column;
}
.sections h1 {
text-align: left;
}
}

View File

@ -1,55 +0,0 @@
import { PageRoutes } from "data/routes";
import Link from "next/link";
import React from "react";
import styles from "./Sections.module.css";
interface SectionsProps {
/* Whether to display the "Sections" title and separator that appears on the left. */
showHeader?: boolean;
/* Width of the entire Sections, in px. */
width?: number;
data: PageRoutes;
className?: string;
}
export function Sections({
data,
showHeader = true,
className,
}: SectionsProps) {
return (
<section
className={
className ? `${className} ${styles.sections}` : `${styles.sections}`
}
>
{showHeader ? (
<>
<h1>Sections</h1>
<div className={styles.separator} />
</>
) : (
""
)}
<nav className={styles.nav}>
<ul>
{Object.values(data).map((datum, index) => {
return (
<li key={`${datum.name}-${index}`}>
<span className={styles.linkNumber}>
{String(index).padStart(2, "0")}{" "}
</span>
<span className={styles.linkName}>
<Link className={styles.linkName} href={datum.url}>
{datum.name}
</Link>
</span>
</li>
);
})}
</ul>
</nav>
</section>
);
}

View File

@ -1,23 +0,0 @@
.container {
position: relative;
}
.barStack {
transition: filter 0.5s ease-out;
}
.barStack:hover {
filter: drop-shadow(0 0 calc(4rem / 16) var(--label));
transition: filter 0.5s ease-out;
}
.legend {
display: flex;
font-size: calc(16rem / 16);
top: 0;
justify-content: center;
}
.key {
font-weight: bold;
}

View File

@ -1,461 +0,0 @@
import { AxisLeft, AxisBottom } from "@visx/axis";
import { GridRows, GridColumns } from "@visx/grid";
import { Group } from "@visx/group";
import { LegendOrdinal } from "@visx/legend";
import { Point } from "@visx/point";
import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
import { BarStack, BarStackHorizontal, Line } from "@visx/shape";
import { SeriesPoint } from "@visx/shape/lib/types";
import { withTooltip } from "@visx/tooltip";
import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withTooltip";
import React from "react";
import { Color } from "utils/Color";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./StackedBarGraph.module.css";
interface StackedBarData {
category: string;
[key: string]: number | string;
}
type TooltipData = {
bar: SeriesPoint<StackedBarData>;
key: string;
index: number;
height: number;
width: number;
x: number;
y: number;
color: string;
};
export type StackedBarProps = {
data: StackedBarData[];
/** Width of the entire graph, in pixels, greater than 10. */
width: number;
/** Height of the entire graph, in pixels. */
height: number;
/** Names of the groups appearing in the legend */
keys: string[];
/** Colours for each key */
colorRange: string[];
/** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */
margin: { top: number; left: number; right: number; bottom: number };
/** Number of ticks for the value axis */
numTicksValueAxis?: number;
/** Width of the lines in the graph, in px. */
strokeWidth?: number;
/** Length of the dashes and the gaps in the graph, in px. */
strokeDashArray?: string;
/** Padding between each bar in the stacked bar graph, from 0 to 1 */
scalePadding?: number;
/** Margin for each item in the legend */
itemMargin?: string;
/** Hide the first data value in tooltip*/
hideDataValueInTooltip?: boolean;
//** Top tooltip label */
tooltipTopLabel?: string;
//** Bottom tooltip label */
tooltipBottomLabel?: string;
//** Display percentage */
displayPercentage?: boolean;
/** Minimum width of the graph. */
minWidth?: number;
};
let tooltipTimeout: number;
export const StackedBarGraphVertical = withTooltip<
StackedBarProps,
TooltipData
>(
({
data,
width,
height,
keys,
colorRange,
margin,
scalePadding = 0.3,
numTicksValueAxis = 6,
strokeWidth = 2.5,
strokeDashArray = "10,4",
itemMargin = "0 0 0 15px",
tooltipOpen,
tooltipLeft,
tooltipTop,
tooltipData,
hideTooltip,
showTooltip,
hideDataValueInTooltip,
tooltipBottomLabel = "",
tooltipTopLabel = "",
displayPercentage,
minWidth = 500,
}: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
if (width < minWidth) {
width = minWidth;
}
const yTotals = data.reduce((allTotals, currCategory) => {
const yTotal = keys.reduce((categoryTotal, k) => {
categoryTotal += currCategory[k] as number;
return categoryTotal;
}, 0);
allTotals.push(yTotal);
return allTotals;
}, [] as number[]);
const TICK_LABEL_FONT_WEIGHT = 800;
// accessors
const getCategory = (d: StackedBarData) => d.category;
// scales
const categoryScale = scaleBand<string>({
domain: data.map(getCategory),
padding: scalePadding,
});
const valueScale = scaleLinear<number>({
domain: [0, Math.max(...yTotals)],
nice: true,
});
const colorScale = scaleOrdinal<string, string>({
domain: keys,
range: colorRange,
});
// bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
categoryScale.rangeRound([0, xMax]);
valueScale.range([yMax, 0]);
return width < 10 ? null : (
<div className={styles.container}>
<div className={styles.legend}>
<LegendOrdinal
scale={colorScale}
direction="row"
itemMargin={itemMargin}
labelAlign="center"
/>
</div>
<svg width={width} height={height}>
<Group top={margin.top} left={margin.left}>
<GridRows
scale={valueScale}
width={xMax}
height={yMax}
numTicks={numTicksValueAxis}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<GridColumns
scale={categoryScale}
height={yMax}
offset={categoryScale.bandwidth() / 2}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<BarStack<StackedBarData, string>
data={data}
keys={keys}
x={getCategory}
xScale={categoryScale}
yScale={valueScale}
color={colorScale}
>
{(barStacks) =>
barStacks.map((barStack) =>
barStack.bars.map((bar) => (
<rect
className={styles.barStack}
key={`bar-stack-${barStack.index}-${bar.index}`}
x={bar.x}
y={bar.y}
height={bar.height}
width={bar.width / 2}
fill={bar.color}
onMouseLeave={() => {
tooltipTimeout = window.setTimeout(() => {
hideTooltip();
}, 300);
}}
onMouseMove={(event) => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
const tooltipPos = getTooltipPosition(event);
showTooltip({
tooltipData: bar,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
/>
))
)
}
</BarStack>
<Line
fill={Color.tertiaryBackground}
to={new Point({ x: 0, y: 0 })}
from={new Point({ x: 0, y: yMax })}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<AxisLeft
scale={valueScale}
top={5}
numTicks={numTicksValueAxis}
hideAxisLine
hideTicks
labelProps={{
fontSize: `${10 / 16}rem`,
}}
tickLabelProps={() => ({
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
textAnchor: "end",
})}
/>
</Group>
<AxisBottom
top={yMax + margin.top}
scale={categoryScale}
left={margin.left - categoryScale.bandwidth() / 4}
hideTicks
hideAxisLine
labelProps={{
fontSize: `${10 / 16}rem`,
}}
tickLabelProps={() => ({
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
textAnchor: "middle",
})}
/>
</svg>
{tooltipOpen && tooltipData ? (
<TooltipWrapper
top={tooltipTop}
left={tooltipLeft}
header={tooltipData.key}
>
{hideDataValueInTooltip ? null : (
<p>
{tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]}
{displayPercentage ? "%" : ""}
</p>
)}
<p>
{tooltipBottomLabel} {getCategory(tooltipData.bar.data)}
</p>
</TooltipWrapper>
) : null}
</div>
);
}
);
export const StackedBarGraphHorizontal = withTooltip<
StackedBarProps,
TooltipData
>(
({
data,
width,
height,
keys,
colorRange,
margin,
scalePadding = 0.3,
numTicksValueAxis = 6,
strokeWidth = 2.5,
strokeDashArray = "10,4",
itemMargin = "0 0 0 15px",
tooltipOpen,
tooltipLeft,
tooltipTop,
tooltipData,
hideTooltip,
showTooltip,
hideDataValueInTooltip,
tooltipBottomLabel = "",
tooltipTopLabel = "",
displayPercentage,
minWidth = 500,
}: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
if (width < minWidth) {
width = minWidth;
}
const yTotals = data.reduce((allTotals, currCategory) => {
const yTotal = keys.reduce((categoryTotal, k) => {
categoryTotal += currCategory[k] as number;
return categoryTotal;
}, 0);
allTotals.push(yTotal);
return allTotals;
}, [] as number[]);
const TICK_LABEL_FONT_WEIGHT = 800;
// accessors
const getCategory = (d: StackedBarData) => d.category;
// scales
const valueScale = scaleLinear<number>({
domain: [0, Math.max(...yTotals)],
nice: true,
});
const categoryScale = scaleBand<string>({
domain: data.map(getCategory),
padding: scalePadding,
});
const colorScale = scaleOrdinal<string, string>({
domain: keys,
range: colorRange,
});
// bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
categoryScale.rangeRound([yMax, 0]);
valueScale.range([0, xMax]);
return width < 10 ? null : (
<div className={styles.container}>
<div className={styles.legend}>
<LegendOrdinal
scale={colorScale}
direction="row"
itemMargin={itemMargin}
/>
</div>
<svg width={width} height={height}>
<Group top={margin.top} left={margin.left}>
<GridRows
scale={categoryScale}
width={xMax}
height={yMax}
offset={categoryScale.bandwidth() / 2}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<GridColumns
scale={valueScale}
height={yMax}
numTicks={numTicksValueAxis}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<Line
fill={Color.tertiaryBackground}
to={new Point({ x: 0, y: 2 })}
from={new Point({ x: xMax, y: 2 })}
stroke={Color.tertiaryBackground}
strokeWidth={strokeWidth}
strokeDasharray={strokeDashArray}
/>
<BarStackHorizontal<StackedBarData, string>
data={data}
keys={keys}
y={getCategory}
xScale={valueScale}
yScale={categoryScale}
color={colorScale}
>
{(barStacks) =>
barStacks.map((barStack) =>
barStack.bars.map((bar) => (
<rect
className={styles.barStack}
key={`bar-stack-${barStack.index}-${bar.index}`}
x={bar.x}
y={bar.y}
height={bar.height / 2}
width={bar.width}
fill={bar.color}
onMouseLeave={() => {
tooltipTimeout = window.setTimeout(() => {
hideTooltip();
}, 300);
}}
onMouseMove={(event) => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
const tooltipPos = getTooltipPosition(event);
showTooltip({
tooltipData: bar,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
/>
))
)
}
</BarStackHorizontal>
<AxisBottom
top={yMax}
scale={valueScale}
numTicks={numTicksValueAxis}
hideAxisLine
hideTicks
labelProps={{
fontSize: `${10 / 16}rem`,
}}
tickLabelProps={() => ({
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
textAnchor: "middle",
})}
/>
<AxisLeft
scale={categoryScale}
hideAxisLine
hideTicks
labelProps={{
fontSize: `${10 / 16}rem`,
}}
tickLabelProps={() => ({
fill: Color.label,
fontWeight: TICK_LABEL_FONT_WEIGHT,
textAnchor: "end",
})}
/>
</Group>
</svg>
{tooltipOpen && tooltipData ? (
<TooltipWrapper
top={tooltipTop}
left={tooltipLeft}
header={tooltipData.key}
>
{hideDataValueInTooltip ? null : (
<p>
{tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]}
{displayPercentage ? "%" : ""}
</p>
)}
<p>
{tooltipBottomLabel} {getCategory(tooltipData.bar.data)}
</p>
</TooltipWrapper>
) : null}
</div>
);
}
);

View File

@ -1,92 +0,0 @@
.wrapper {
position: relative;
}
.line {
position: absolute;
height: 100%;
border-radius: calc(10rem / 16);
background-color: var(--secondary-accent);
z-index: -1;
}
.timelineSections {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: calc(20rem / 16);
}
.timelineSection {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.time {
margin: 0;
text-align: right;
font-size: calc(30rem / 16);
font-weight: 700;
color: var(--secondary-accent);
word-wrap: break-word;
}
.outerCircle {
background-color: var(--secondary-accent);
box-shadow: calc(0rem / 16) calc(0rem / 16) calc(30rem / 16) var(--secondary-accent);
display: flex;
justify-content: center;
align-items: center;
}
.innerCircle {
background-color: var(--label);
display: none;
}
.text {
height: fit-content;
margin: 0;
padding: calc(15rem / 16);
border-radius: calc(10rem / 16);
font-size: calc(20rem / 16);
font-weight: 700;
color: var(--label);
border: calc(2rem / 16) solid var(--card-background);
background-color: var(--card-background);
word-wrap: break-word;
box-sizing: border-box;
}
.timelineSection:hover .time {
color: var(--secondary-accent-light);
}
.timelineSection:hover .innerCircle {
display: inline;
}
.timelineSection:hover .text {
border: calc(2rem / 16) solid var(--secondary-accent-light);
box-shadow: calc(0rem / 16) calc(0rem / 16) calc(20rem / 16) var(--secondary-accent);
}
.timelineSection .timeText {
display: none;
}
@media screen and (max-width: 900px) {
.timelineSection .time {
display: none;
}
.timelineSection .timeText {
display: block;
font-size: calc(26rem / 16);
color: var(--secondary-accent);
margin-bottom: calc(8rem /16)
}
}

View File

@ -1,127 +0,0 @@
import React from "react";
import styles from "./Timeline.module.css";
interface TimelineData {
time: string;
text: string;
}
interface TimelineProps {
data: TimelineData[];
/** Whether the time is transformed to uppercase. */
isTimeUppercase?: boolean;
/** Width of the middle timeline line, in pixels */
lineWidth?: number;
/** Width of the outer circles on the timeline, in pixels. */
outerCircleWidth?: number;
/** Width of the inner circles on the timeline, in pixels. */
innerCircleWidth?: number;
/** Width of text label, in pixels. */
textWidth?: number;
/** Distance between the time label AND the text label to middle line, in pixels. */
gap?: number;
className?: string;
}
export function Timeline({
data,
isTimeUppercase = true,
lineWidth = 5,
outerCircleWidth = 30,
innerCircleWidth = 15,
textWidth = 500,
gap = 50,
className,
}: TimelineProps) {
const largerMiddleElement =
outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
if (innerCircleWidth > outerCircleWidth) {
throw new Error(
`<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
);
}
return (
<div
className={
className ? `${className} ${styles.wrapper}` : `${styles.wrapper}`
}
>
<div
className={styles.line}
style={{
width: lineWidth,
right: textWidth + gap + largerMiddleElement / 2 - lineWidth / 2,
}}
/>
<div className={styles.timelineSections}>
{data.map((datum) => (
<TimelineSection
key={datum.time}
datum={datum}
isTimeUppercase={isTimeUppercase}
outerCircleWidth={outerCircleWidth}
innerCircleWidth={innerCircleWidth}
textWidth={textWidth}
gap={gap}
/>
))}
</div>
</div>
);
}
interface TimelineSectionProps {
datum: TimelineData;
isTimeUppercase: boolean;
outerCircleWidth: number;
innerCircleWidth: number;
textWidth: number;
gap: number;
}
function TimelineSection({
datum,
isTimeUppercase,
outerCircleWidth,
innerCircleWidth,
textWidth,
gap,
}: TimelineSectionProps) {
return (
<div className={styles.timelineSection} style={{ gap: gap }}>
<div className={styles.time}>
{isTimeUppercase ? datum.time.toUpperCase() : datum.time}
</div>
<div
className={styles.outerCircle}
style={{
width: outerCircleWidth,
height: outerCircleWidth,
borderRadius: outerCircleWidth,
flex: `0 0 calc(${outerCircleWidth}rem / 16)`,
}}
>
<div
className={styles.innerCircle}
style={{
width: innerCircleWidth,
height: innerCircleWidth,
borderRadius: innerCircleWidth,
}}
/>
</div>
<div
className={styles.text}
style={{
width: textWidth,
flex: `0 0 calc(${textWidth}rem / 16)`,
}}
>
<div className={styles.timeText}>{datum.time}</div>
{datum.text}
</div>
</div>
);
}

View File

@ -1,19 +0,0 @@
import Head from "next/head";
import React from "react";
interface Props {
children: string | string[];
}
export function Title(props: Props) {
const children =
typeof props.children === "string" ? [props.children] : props.children;
children.push("2022 CS Class Profile");
return (
<Head>
<title>{children.join(" - ")}</title>
</Head>
);
}

View File

@ -1,31 +0,0 @@
.tooltip {
font-family: "Inconsolata", monospace;
top: 0;
left: 0;
position: absolute;
background-color: var(--label);
pointer-events: none;
padding: calc(10rem / 16);
border-radius: calc(10rem / 16);
font-size: calc(18rem / 16);
}
.header {
color: var(--primary-background);
margin: 0;
font-size: calc(16rem / 16);
font-weight: 700;
}
.body {
color: var(--primary-background);
margin-top: calc(5rem / 16);
font-size: calc(16rem / 16);
}
.body p {
color: var(--primary-background);
margin: 0;
padding: 0;
font-size: calc(16rem / 16) !important;
}

View File

@ -1,85 +0,0 @@
import localPoint from "@visx/event/lib/localPoint";
import { Point } from "@visx/point";
import { Tooltip } from "@visx/tooltip";
import React from "react";
import styles from "./TooltipWrapper.module.css";
type TooltipWrapperProps = {
top?: number;
left?: number;
className?: string;
header?: string;
children?: React.ReactNode;
};
// Finds the SVG Element which is the outmost from element (highest parent of element which is svg)
function getOutmostSVG(element: Element): SVGElement | undefined {
let rootSVG: HTMLElement | Element | null = element;
let current: HTMLElement | Element | null = element;
while (current) {
console.log(current);
if (current.tagName == "svg") {
rootSVG = current;
}
current = current.parentElement;
}
return rootSVG as SVGElement;
}
const TooltipWrapper = ({
top,
left,
className,
header,
children,
}: TooltipWrapperProps) => {
return (
<Tooltip
top={top}
left={left}
className={`${styles.tooltip} ${className ?? ""}`}
unstyled
applyPositionStyle
>
{header ? <span className={styles.header}>{header}</span> : null}
{children ? <div className={styles.body}>{children}</div> : null}
</Tooltip>
);
};
function getTooltipPosition(
e: React.MouseEvent<
SVGTextElement | SVGPathElement | SVGLineElement,
MouseEvent
>
) {
// ownerSVGElement is given by visx docs but not recognized by typescript
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const eventElement = e.target.ownerSVGElement as Element;
const eventSvgCoords = localPoint(eventElement, e) as Point;
const rootSVG: SVGElement | undefined = getOutmostSVG(eventElement);
if (!rootSVG) {
console.error("Failed to find parent SVG for tooltip!");
return { x: 0, y: 0 };
}
const rootSVGLeft = rootSVG.getBoundingClientRect().left ?? 0;
const parentDivLeft =
rootSVG.parentElement?.getBoundingClientRect().left ?? 0;
// visx localPoint does not account for the horizontal shift due to centering of the parent element,
// so manually add any shift from that
const alignmentOffset = rootSVGLeft - parentDivLeft;
return {
x: eventSvgCoords.x + alignmentOffset,
y: eventSvgCoords.y,
};
}
export { TooltipWrapper, getTooltipPosition };

View File

@ -1,9 +0,0 @@
.word:hover {
text-shadow: var(--primary-accent) 0 0 calc(20rem / 16);
text-anchor: "middle";
cursor: default;
}
.word {
transition: text-shadow 0.25s ease-out;
}

View File

@ -1,247 +0,0 @@
import { scaleLog } from "@visx/scale";
import { Text } from "@visx/text";
import { useTooltip, withTooltip } from "@visx/tooltip";
import { Wordcloud as VisxWordcloud } from "@visx/wordcloud";
import React from "react";
import { Color } from "utils/Color";
import { inDevEnvironment } from "utils/inDevEnviroment";
import { useIsMobile } from "utils/isMobile";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./WordCloud.module.css";
interface WordCloudProps {
data: Array<WordData>;
/** Width of the graph, in px */
width?: number;
/** The minimum width of the graph */
minWidth?: number;
/** Height of the graph, in px */
height?: number;
/** Minimum padding between words, in px */
wordPadding?: number;
/** Weight of the font of the words */
fontWeight?: number;
/** The desired font size of the smallest word on desktop, in px.*/
desktopMinFontSize?: number;
/** The desired font size of the smallest word on mobile, in px.*/
mobileMinFontSize?: number;
/** The desired font size of the largest word on desktop, in px. */
desktopMaxFontSize?: number;
/** The desired font size of the largest word on mobile, in px. */
mobileMaxFontSize?: number;
/** A random seed in the range [0, 1) used for placing the words, change this value to get an alternate placement of words */
randomSeed?: number;
/** Type of spiral used for rendering the words, either rectangular or archimedean */
spiral?: "rectangular" | "archimedean";
/** ClassName of the wrapper of the wordcloud */
className?: string;
}
interface WordData {
text: string;
value: number;
}
const wordColors = [Color.primaryAccent, Color.primaryAccentLight];
const TOOLTIP_HORIZONTAL_SHIFT_SCALER = 12.0;
export const WordCloud = withTooltip(
({
data,
width,
height,
wordPadding,
fontWeight,
desktopMinFontSize,
mobileMinFontSize,
desktopMaxFontSize,
mobileMaxFontSize,
randomSeed,
spiral,
className,
minWidth,
}: WordCloudProps) => {
const {
tooltipData,
tooltipLeft,
tooltipTop,
tooltipOpen,
showTooltip,
hideTooltip,
} = useTooltip<WordData>();
return (
<div className={className}>
<WordCloudWordsMemoized
width={width}
height={height}
data={data}
wordPadding={wordPadding}
fontWeight={fontWeight}
desktopMinFontSize={desktopMinFontSize}
mobileMinFontSize={mobileMinFontSize}
desktopMaxFontSize={desktopMaxFontSize}
mobileMaxFontSize={mobileMaxFontSize}
showTooltip={(data, left, top) => {
showTooltip({
tooltipData: data,
tooltipLeft: left,
tooltipTop: top,
});
}}
hideTooltip={hideTooltip}
tooltipLeft={tooltipLeft}
tooltipTop={tooltipTop}
randomSeed={randomSeed}
spiral={spiral}
isMobile={useIsMobile()}
minWidth={minWidth}
/>
{tooltipOpen && tooltipData ? (
<TooltipWrapper
// set this to random so it correctly updates with parent bounds
key={Math.random()}
top={tooltipTop}
left={tooltipLeft}
header={`${tooltipData.text} (${tooltipData.value})`}
></TooltipWrapper>
) : null}
</div>
);
}
);
/** The internal wordcloud component that actually lays out the word needs to be separate from the tooltip to prevent extra rerendering. */
type WordCloudWordsProps = Omit<WordCloudProps, "className"> & {
showTooltip: (
data: WordData,
tooltipLeft: number,
tooltipTop: number
) => void;
hideTooltip: () => void;
// tooltipLeft and tooltipTop are used for preventing unnessary renders
tooltipLeft?: number;
tooltipTop?: number;
isMobile: boolean; // passing in isMobile as a prop so we can rerender if this changes
};
const WordCloudWords: React.FC<WordCloudWordsProps> = ({
data,
width = 1000,
minWidth = 500,
height = 500,
wordPadding = 20,
fontWeight = 400,
desktopMinFontSize = 15,
desktopMaxFontSize = 100,
mobileMinFontSize = 15,
mobileMaxFontSize = 60,
randomSeed = 0.5,
spiral = "rectangular",
showTooltip,
hideTooltip,
isMobile,
}) => {
width = width < minWidth ? minWidth : width;
const minFontSize = isMobile ? mobileMinFontSize : desktopMinFontSize;
const maxFontSize = isMobile ? mobileMaxFontSize : desktopMaxFontSize;
const maxVal = Math.max(...data.map((w) => w.value));
const minVal = Math.min(...data.map((w) => w.value));
const fontScale = scaleLog({
domain: [minVal, maxVal],
range: [minFontSize, maxFontSize],
});
const fontSizeSetter = (datum: WordData) => fontScale(datum.value);
const fixedValueGenerator = () => randomSeed;
return (
<VisxWordcloud
words={data}
width={width}
height={height}
fontSize={fontSizeSetter}
font="Inconsolata, monospace"
padding={wordPadding}
spiral={spiral}
rotate={0}
random={fixedValueGenerator}
>
{(cloudWords) => {
if (
inDevEnvironment &&
cloudWords.length != 0 && // since on initial load the length is 0, but thats not an error
cloudWords.length != data.length
) {
console.error(
`Not all words rendered for wordcloud! (${
data.length - cloudWords.length
} words missing) Please try adjusting the min/max font size, the random seed, and the wordPadding`
);
}
return cloudWords.map((word, index) => {
return (
<Text
key={`wordcloud-word-${word.text ?? ""}-${index}`}
fill={wordColors[index % wordColors.length]}
transform={`translate(${word.x ?? 0}, ${word.y ?? 0})`}
fontSize={word.size}
fontFamily={word.font}
fontWeight={fontWeight}
className={styles.word}
textAnchor="middle"
onMouseMove={
((
e: React.MouseEvent<
SVGTextElement | SVGLineElement,
MouseEvent
>
) => {
const tooltipPos = getTooltipPosition(e);
if (word.text) {
showTooltip(
{
text: word.text,
value: (cloudWords[index] as WordData).value,
},
tooltipPos.x -
word.text.length * TOOLTIP_HORIZONTAL_SHIFT_SCALER,
tooltipPos.y
);
}
}) as React.MouseEventHandler<SVGTextElement>
}
onMouseLeave={(_) => hideTooltip()}
>
{word.text}
</Text>
);
});
}}
</VisxWordcloud>
);
};
const shouldNotRerender = (
prevProps: WordCloudWordsProps,
nextProps: WordCloudWordsProps
) => {
if (
// if width changes, rerender, else don't rerender for a tooltip change
prevProps.width === nextProps.width &&
prevProps.isMobile === nextProps.isMobile &&
(prevProps.tooltipLeft !== nextProps.tooltipLeft ||
prevProps.tooltipTop !== nextProps.tooltipTop ||
nextProps.tooltipLeft === undefined ||
nextProps.tooltipTop === undefined)
) {
return true; // do not re-render
}
return false; // will re-render
};
const WordCloudWordsMemoized = React.memo(WordCloudWords, shouldNotRerender);

File diff suppressed because it is too large Load Diff

View File

@ -1,87 +0,0 @@
export const communityReps = [
{
name: "Sat Arora",
link: "https://www.linkedin.com/in/sat-arora/",
},
{
name: "Mayank Mehra",
link: "https://www.linkedin.com/in/mayank808",
},
{
name: "Olivia Liu",
link: "",
},
{
name: "Amy Luo",
link: "https://www.linkedin.com/in/amytluo/",
},
{
name: "Juthika Hoque",
link: "https://www.linkedin.com/in/juthikahoque/",
},
{
name: "Ivy Lei",
link: "https://www.linkedin.com/in/ivy-lei/",
},
{
name: "Kevin Cui",
link: "https://www.linkedin.com/in/kevincui1/",
},
{
name: "Nikki Guo",
link: "https://www.linkedin.com/in/nikkiguo",
},
];
export const designers = [
{
name: "Jenny Zhang",
link: "https://www.instagram.com/j3nny_zhang",
},
{
name: "Vivian Guo",
link: "https://www.linkedin.com/in/vivianvg",
},
{
name: "Aaryan Shroff",
link: "https://www.linkedin.com/in/aaryan-shroff",
},
{
name: "Rachel Ma",
link: "",
},
];
export const webDevs = [
{
name: "Amy Wang",
link: "",
},
{
name: "Mark Chiu",
link: "https://linkedin.com/in/markchiu02",
},
{
name: "Shahan Nedadahandeh",
link: "https://shahan.ca/",
},
{
name: "Beihao Zhou",
link: "https://www.linkedin.com/in/beihaozhou/",
},
{
name: "Jared He",
link: "https://www.linkedin.com/in/jaredhe/",
},
];
export const sysCom = [
{
name: "Raymond Li",
link: "https://raymond.li/",
},
{
name: "Max Erenberg",
link: "https://maxerenberg.github.io/",
},
];

File diff suppressed because it is too large Load Diff

View File

@ -1,344 +0,0 @@
export const D1 = [
{
category: "CS",
value: 83.8,
},
{
category: "CS/BBA",
value: 11.4,
},
{
category: "CFM",
value: 4.7,
},
];
export const D2 = [
{
category: "Man",
value: 68.6,
},
{
category: "Woman",
value: 27.6,
},
{
category: "Gender non-conforming",
value: 3.8,
},
];
export const D3 = [
{
category: "She/Her/Hers",
value: 29.0,
},
{
category: "He/Him/His",
value: 68.2,
},
{
category: "They/Them/Their",
value: 2.8,
},
];
export const D4 = [
{
category: "Black",
value: 2,
},
{
category: "Latin",
value: 1,
},
{
category: "East Asian",
value: 68,
},
{
category: "Middle Eastern",
value: 2,
},
{
category: "South Asian",
value: 13,
},
{
category: "Southeast Asian",
value: 2,
},
{
category: "White",
value: 18,
},
{
category: "Prefer not to say",
value: 1,
},
];
export const D5 = [
{
category: "89",
value: 1,
},
{
category: "90",
value: 6,
},
{
category: "91",
value: 1,
},
{
category: "92",
value: 5,
},
{
category: "93",
value: 4,
},
{
category: "94",
value: 10,
},
{
category: "95",
value: 15,
},
{
category: "96",
value: 22,
},
{
category: "97",
value: 21,
},
{
category: "98",
value: 10,
},
{
category: "99",
value: 8,
},
];
export const D6 = [
{
category: "Asexual",
value: 6,
},
{
category: "Bisexual",
value: 12,
},
{
category: "Gay",
value: 3,
},
{
category: "Heterosexual",
value: 81,
},
{
category: "Queer",
value: 3,
},
{
category: "Pansexual",
value: 3,
},
{
category: "Questioning",
value: 2,
},
{
category: "Prefer not to say",
value: 2,
},
];
export const D7 = [
{
text: "Ontario (Other)",
value: 15,
},
{
text: "British Columbia",
value: 11,
},
{
text: "Kitchener / Waterloo",
value: 5,
},
{
text: "Alberta",
value: 3,
},
{
text: "Quebec",
value: 3,
},
{
text: "USA",
value: 2,
},
{
text: "Hong Kong",
value: 2,
},
{
text: "Manitoba",
value: 2,
},
{
text: "India",
value: 1,
},
{
text: "GTA / Toronto",
value: 58,
},
{
text: "United Arab Emirates",
value: 1,
},
{
text: "Indonesia",
value: 1,
},
{
text: "Saskatchewan",
value: 1,
},
];
export const D8 = [
{
category: "High School Diploma",
value: 2,
},
{
category: "College Diploma",
value: 6,
},
{
category: "Bachelor's Degree",
value: 43,
},
{
category: "Master's Degree",
value: 33,
},
{
category: "Doctoral Degree",
value: 17,
},
{
category: "Not Applicable",
value: 1,
},
{
category: "Prefer not to say",
value: 2,
},
];
export const D9 = [
{
category: "0-50",
value: 9,
},
{
category: "51-100",
value: 28,
},
{
category: "101-150",
value: 22,
},
{
category: "151-200",
value: 23,
},
{
category: "201-250",
value: 7,
},
{
category: "251-300",
value: 4,
},
{
category: "301+",
value: 5,
},
{
category: "Prefer not to say",
value: 6,
},
];
export const D10 = [
{
category: "0",
value: 74,
},
{
category: "1",
value: 17,
},
{
category: "2",
value: 5,
},
{
category: "3",
value: 2,
},
{
category: "4",
value: 4,
},
{
category: "5",
value: 2,
},
];
export const D11 = [
{
category: "No religious affiliation",
value: 80,
},
{
category: "Christianity",
value: 16,
},
{
category: "Judaism",
value: 3,
},
{
category: "Buddhism",
value: 2,
},
{
category: "Islam",
value: 1,
},
{
category: "Hinduism",
value: 5,
},
{
category: "Jainism",
value: 1,
},
{
category: "Prefer not to say",
value: 2,
},
];

View File

@ -1,479 +0,0 @@
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: 51,
},
{
category: "Extrovert",
value: 11,
},
{
category: "Ambivert",
value: 38,
},
];
export const F3 = [
{
category: "None",
value: 5,
},
{
category: "Half",
value: 25,
},
{
category: "Some",
value: 28,
},
{
category: "Majority",
value: 42,
},
{
category: "All",
value: 3,
},
];
export const F4 = [
{
category: "Rarely",
value: 20,
},
{
category: "Sometimes",
value: 32,
},
{
category: "Often",
value: 33,
},
{
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: 37,
},
{
category: "Never",
value: 17,
},
{
category: "Always",
value: 1,
},
];
export const F7 = [
{
category: "Often",
value: 35,
},
{
category: "Sometimes",
value: 34,
},
{
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: "All",
value: 4,
},
{
category: "Most",
value: 41,
},
{
category: "Some",
value: 49,
},
{
category: "Barely",
value: 8,
},
{
category: "None",
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: "E7",
value: 9,
},
{
category: "CIF",
value: 5,
},
{
category: "DP",
value: 4,
},
{
category: "E5",
value: 3,
},
{
category: "Plaza",
value: 3,
},
{
category: "AL",
value: 2,
},
];
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: 48,
},
{
category: "Some",
value: 35,
},
{
category: "All",
value: 9,
},
{
category: "Few",
value: 6,
},
{
category: "None",
value: 2,
},
];

View File

@ -1,422 +0,0 @@
export const I1 = [
{
category: "Held hands romantically",
values: {
"Experienced first before university": 55,
"Experienced first during university": 21,
},
},
{
category: "Been on a date",
values: {
"Experienced first before university": 50,
"Experienced first during university": 30,
},
},
{
category: "Kissed someone romantically",
values: {
"Experienced first before university": 47,
"Experienced first during university": 27,
},
},
{
category: "Been in a committed relationship",
values: {
"Experienced first before university": 41,
"Experienced first during university": 29,
},
},
{
category: "Been in a long distance relationship",
values: {
"Experienced first before university": 14,
"Experienced first during university": 42,
},
},
{
category: "Had friends with benefits",
values: {
"Experienced first before university": 12,
"Experienced first during university": 20,
},
},
{
category: "Sent/received nudes",
values: {
"Experienced first before university": 23,
"Experienced first during university": 17,
},
},
{
category: "Given/received oral sex",
values: {
"Experienced first before university": 30,
"Experienced first during university": 29,
},
},
{
category: "Engaged in sexual intercourse",
values: {
"Experienced first before university": 20,
"Experienced first during university": 33,
},
},
{
category: "Engaged in casual sex",
values: {
"Experienced first before university": 21,
"Experienced first during university": 8,
},
},
{
category: "Had sex with 2+ people at same time",
values: {
"Experienced first before university": 1,
"Experienced first during university": 3,
},
},
];
export const I2 = [
{
category: "Caffeine",
values: {
"Tried/used first before university": 80,
"Tried/used first during university": 9,
},
},
{
category: "Alcohol",
values: {
"Tried/used first before university": 63,
"Tried/used first during university": 22,
},
},
{
category: "Marijuana",
values: {
"Tried/used first before university": 43,
"Tried/used first during university": 15,
},
},
{
category: "Nicotine (Vaping)",
values: {
"Tried/used first before university": 16,
"Tried/used first during university": 7,
},
},
{
category: "Nicotine (Other)",
values: {
"Tried/used first before university": 12,
"Tried/used first during university": 1,
},
},
{
category: "Cigarettes",
values: {
"Tried/used first before university": 12,
"Tried/used first during university": 5,
},
},
{
category: "Adderall/Ritalin",
values: {
"Tried/used first before university": 5,
"Tried/used first during university": 1,
},
},
{
category: "Magic Mushrooms",
values: {
"Tried/used first before university": 0,
"Tried/used first during university": 10,
},
},
{
category: "LSD",
values: {
"Tried/used first before university": 0,
"Tried/used first during university": 6,
},
},
{
category: "Cocaine",
values: {
"Tried/used first before university": 0,
"Tried/used first during university": 5,
},
},
{
category: "Ecstasy",
values: {
"Tried/used first before university": 0,
"Tried/used first during university": 5,
},
},
{
category: "Other",
values: {
"Tried/used first before university": 1,
"Tried/used first during university": 4,
},
},
];
export const I3 = [
{
category: "0",
value: 29,
},
{
category: "1",
value: 39,
},
{
category: "2",
value: 16,
},
{
category: "3",
value: 7,
},
{
category: "4",
value: 1,
},
{
category: "5",
value: 3,
},
];
export const I4 = [
{
category: "0",
value: 29,
},
{
category: "1",
value: 29,
},
{
category: "2",
value: 14,
},
{
category: "3",
value: 8,
},
{
category: "4",
value: 3,
},
{
category: "5",
value: 1,
},
{
category: "6",
value: 2,
},
{
category: "8",
value: 2,
},
{
category: "11",
value: 1,
},
{
category: "20",
value: 1,
},
{
category: "50",
value: 1,
},
{
category: "120",
value: 1,
},
];
export const I5 = [
{
category: "No",
value: 85,
},
{
category: "Yes",
value: 15,
},
];
export const I6 = [
{
category: "No",
value: 73,
},
{
category: "Yes",
value: 27,
},
];
export const I6i = [
{
category: "No",
value: 60,
},
{
category: "Yes",
value: 40,
},
];
export const I7 = [
{
category: "No",
value: 37,
},
{
category: "Yes",
value: 36,
},
];
export const I8 = [
{
category: "No",
value: 51,
},
{
category: "Yes",
value: 44,
},
{
category: "It's complicated",
value: 3,
},
];
export const I8i = [
{
category: "No",
value: 15,
},
{
category: "Yes",
value: 25,
},
{
category: "Unsure",
value: 9,
},
];
export const I9 = [
"Talk to one another. Communication is the one thing that makes or breaks your relationship and you have to learn how to properly get to the root of your problems. Sometimes resolving a problem means really understanding what your partner is worried about. Also, learn each others' core values. This is very important for long term relationships",
"It's drastically changed. I feel like when I was first entering university, I was really obsessed with the idea of being in a relationship it felt like if I couldn't get in one, then that meant that I was undesirable/unlovable. This is obviously not the case. Being in a relationship just means you have a higher degree of dedication and commitment to someone, and you don't always have to date with the intention to marry them/be with them forever. If it's fun now, and you're being responsible, go for it!",
"Communication is key! Minor inconveniences to help the other can go a very long way.",
"I took a course on dating but am failing the course",
"they're a part-time job",
"Relationships take a lot of work, but they're worth it with the right people.",
"It takes a lot of work and patience",
"My understanding of dating and relationships got a lot more detailed. The reality takes a lot more work and emotional maturity.",
"I stopped simping",
"I didn't know that soulmates exist, but I guess I do now.",
"Learning to co-exist intimately with (an)other human being(s) is almost always difficult. However, if you can make it work, it is absolutely worth it.",
"I have become lost in the sauce",
"nill",
"Co-dependency is bad",
"Relationships are very difficult to maintain, and are a lottttt of work",
"Relationships do not solve all your problems",
"Much deeper understanding ",
"Communication is the most important things in a relationship. You gotta figure out how to get to the root of a problem in order to truly tackle it. Sometimes what people say isn't what they're actually concerned about. Also, people often don't understand you and they don't understand themselves.",
"I know I am not yet wanting to be in a relationship.",
"Hasn't",
"I've changed. ",
"tbh it hasn't",
"I've become more understanding/open to long-distance relationships, especially after graduation since me and my partner are not living in the same city",
"I now understand relationships are different for everyone, and that there isn't a particular way to be in a relationship. As long as you are happy in your relationship, it is good for you and works for you.",
"Communication is very important",
"I'm still a mega virgin",
"Completely",
"I asked a girl out for the first time! I feel like I know more about what I don't know when it comes to relationships and dating, and feel more confident than before about social situations in general.",
"As someone who's been rejected and rejected, it's fine to just be single",
"People change",
"More casual now polyamorous.",
"How others treat me, how I treat others.",
"yes",
"I've developed a more realistic expectation and now value someone I am comfortable with and can depend on more.",
"You shouldn't depend on it to make you happy, your worth should come from other places too",
"I'm more indifferent now",
"a lot",
"lots of people are very immature/inexperienced/not self aware",
"It's not like the movies.",
"Didn't change",
"Having compatible lifestyles and interests is very important.",
"I'd really like to be in a relationship",
"Communication and honesty are so important!!",
"I thought I would hold out on the 'no sex before marriage' thing. I did not.",
"Relationships are really hard and don't get into one unless you are ready for the work",
"A lot ",
];
export const I10 = [
"Work on yourself, make sure you know yourself pretty well and know what you want to get into. Confidence is attractive. Learn to be better texters and try to be more emotionally, socially intelligent. Try to be genuine.",
"Just be yourself and don't rush it. If you love who you are and are proud of that, then people you're compatible with will start to present themselves. Get out there, meet new people and have fun!",
"Work on yourself! The rest will follow (don't quote me on this).",
"just pick one, work out the kinks when they happen",
"just b urself :)",
"Shoot your shot",
"You have time :) Take it easy.",
"Why you askin' me",
"Be yourself, you don't want to be spending all that time with someone while putting up a front.",
"Dont rush yourself. Wait until you find someone youre really attracted to and then ask them out. Also, be ready to be rejected. Anyone who hasnt been rejected is someone who has gotten very lucky or has simply never made the first move.",
"Work on your looks (fitness, sleep/diet, grooming, plastic surgery if its bad). Improve your status (high ranking job, involvement in social activities, interesting hobbies). Work on your social skills (practice talking to random people, public speaking). Learn how to read others' body language. Work on your mental state (meditation, therapy, close friends). Acquire confidence after doing all this and go approach in social settings. Be honest, upfront, and vulnerable. Don't be overly needy (and if you are, go back to improving yourself). Avoid TheRedPill, incel forums, MGTOW. Profit!!",
"Be forthcoming and don't be afraid to ask :)",
"simping does not help you get girls",
"Just be yourself?",
"Take a risk and make the first move. Be yourself",
"Become a well rounded confident person",
"nope",
"Don't",
"Don't be afraid to explore, not everything needs to be serious.",
"Focus on yourself first! Then read a lot of attachment theory and put yourself out there and hope for the best. ",
"Dont force it, but once youre in it, be intentional ",
"Try to better yourself first, make sure you're the best version of yourself. Know your strengths and weaknesses and take every opportunity to talk to people. Figure out what type of people you vibe with and don't force anything, or you'll be in a world of hurt.",
"Don't lower your standards.",
"Don't look too hard",
"Dont be in one",
"Don't come to loo =). ",
"Relationships are a two way street, try all you might but if the other person puts in no effort, it wont work",
"Go to clubs/events and talk to people with just making friends as your intention! This is the most natural way that relationships start.",
"Let it brew organically. My relationship started off as a friendship, where we spent a lot of our time talking and it made way for a relationship wherein we care deeply about each other and our interests.",
"Figure yourself out first",
"Don't listen to what I say",
"It's tough",
"Confidence comes not from knowing whether you'll succeed, but from knowing you'll be okay no matter the outcome. Stay true to yourself, and find someone such that you can make each other better.",
"5 years later and still don't have any to give sorry xD",
"without sexual more love no cheat",
"I hope you'll come earlier",
"Itll happen when it does :)",
"Reciprocity",
"Good luck :p",
"Improve yourself, get self esteem, and put yourself out there! It's really not this big, super hard thing to attain for the average person. Don't get into a bad one though",
"am unqualified, idk",
"idfk",
"good luck :)",
"Enjoy your life. ",
"Surround yourself with the people you want to attract. Ie. If you're looking for something long term, don't hang out with the party crowd. Start by making some friends, who preferably have other friends, and you'll see your pool of possibilities grow. Most importantly, know what you're after, and if you don't know, figure it out, and be open minded to the people who you meet.",
"Just don't, better off on your own",
"Consider me, I'm alright",
"Be open minded and meet new people in clubs, residence and orientation",
"LDR is hard but possible. It depends on your priorities.",
"Be confident!",
"Date casually till you know what you want",
"It's a lot of work. Must be open-minded.",
];

View File

@ -1,725 +0,0 @@
export const L1 = [
{
category: "Yes",
value: 85,
},
{
category: "No",
value: 15,
},
];
export const L2 = [
{
category: "3+",
value: 85.5,
},
{
category: "2",
value: 12.5,
},
{
category: "1",
value: 1,
},
{
category: "0",
value: 1,
},
];
export const L3 = [
{
category: "Never religious",
value: 76,
},
{
category: "No longer religious",
value: 5,
},
{
category: "Still religious",
value: 19,
},
{
category: "Became religious",
value: 2,
},
];
export const L4 = [
{
category: "Yes",
value: 55,
},
{
category: "No",
value: 12.5,
},
{
category: "Knew",
value: 34,
},
];
export const L5 = [
{
category: "0",
value: 9,
},
{
category: "1",
value: 6,
},
{
category: "2",
value: 12,
},
{
category: "3",
value: 24,
},
{
category: "4",
value: 16,
},
{
category: "5",
value: 17,
},
{
category: "6",
value: 11,
},
{
category: "7",
value: 8,
},
];
export const L6 = [
{
category: "Few times a week",
value: 4,
},
{
category: "Weekly",
value: 6,
},
{
category: "Once every few weeks",
value: 3,
},
{
category: "Monthly",
value: 7,
},
{
category: "Once every few months",
value: 43,
},
{
category: "Never",
value: 41,
},
];
export const L7 = [
{
category: "Strongly agree",
value: 9,
},
{
category: "Agree",
value: 43,
},
{
category: "Neither",
value: 19,
},
{
category: "Disagree",
value: 26,
},
{
category: "Strongly disagree",
value: 7,
},
];
export const L8 = [
{
category: "Almost every week",
value: 12,
},
{
category: "Couple times per month",
value: 36,
},
{
category: "Monthly",
value: 2,
},
{
category: "Holidays only",
value: 18,
},
{
category: "Rarely",
value: 35,
},
];
export const L9 = [
{
category: "Before 9pm",
value: 1,
},
{
category: "9pm - 11pm",
value: 11,
},
{
category: "11pm - 1am",
value: 29,
},
{
category: "1am - 3am",
value: 46,
},
{
category: "3am - 5am",
value: 12,
},
{
category: "5am onwards",
value: 3,
},
];
export const L10 = [
{
category: "0-2",
value: 1,
},
{
category: "3-4",
value: 2,
},
{
category: "5-6",
value: 30,
},
{
category: "7-8",
value: 63,
},
{
category: "9+",
value: 8,
},
];
export const L11 = [
{
category: "0",
value: 8,
},
{
category: "1",
value: 13,
},
{
category: "2",
value: 19,
},
{
category: "3",
value: 21,
},
{
category: "4",
value: 10,
},
{
category: "5",
value: 18,
},
{
category: "6",
value: 6,
},
{
category: "7",
value: 9,
},
];
export const L12 = [
{
text: "Gol's",
value: 15,
},
{
text: "Lazeez Shawarma",
value: 5,
},
{
text: "Nuri Village",
value: 5,
},
{
text: "Ken's sushi",
value: 8,
},
{
text: "Williams Fresh Cafe",
value: 4,
},
{
text: "Song's Lamian",
value: 2,
},
{
text: "Shinwa",
value: 3,
},
{
text: "Oka Sushi",
value: 2,
},
{
text: "Mel's",
value: 2,
},
{
text: "Shawarma Plus",
value: 3,
},
{
text: "iPotato",
value: 3,
},
{
text: "Kim's Kitchen",
value: 2,
},
{
text: "Baba grill",
value: 2,
},
{
text: "Waterloo Star",
value: 1,
},
{
text: "Loobapbap",
value: 1,
},
{
text: "Momo",
value: 1,
},
{
text: "Onnuri",
value: 1,
},
{
text: "Kinkaku",
value: 1,
},
{
text: "Tim Hortons",
value: 1,
},
{
text: "Fresh Burrito",
value: 1,
},
{
text: "Home Garden - Taste of Taiwan",
value: 1,
},
{
text: "Yangyum",
value: 1,
},
{
text: "Mozy's",
value: 1,
},
{
text: "Rolltations",
value: 1,
},
{
text: "Harvey's",
value: 1,
},
{
text: "Fantastic Wok",
value: 1,
},
{
text: "Foodie Fruitie",
value: 1,
},
{
text: "Bao Sandwich Bar",
value: 1,
},
{
text: "Soul Seoul",
value: 1,
},
{
text: "Burrito Boyz",
value: 1,
},
{
text: "Poke Box",
value: 1,
},
{
text: "Thai Express",
value: 1,
},
{
text: "Molly blooms",
value: 1,
},
{
text: "Better Chef",
value: 1,
},
];
export const L13 = [
{
category: "Sometimes easy",
value: 5,
},
{
category: "Always easy",
value: 5,
},
{
category: "Always easy and sometimes medium",
value: 25,
},
{
category: "Always easy and medium",
value: 22,
},
{
category: "Always medium and sometimes hard",
value: 32,
},
{
category: "Always medium and hard",
value: 10,
},
];
export const L14 = [
{
category: "0",
value: 22,
},
{
category: "1",
value: 18,
},
{
category: "2",
value: 22,
},
{
category: "3",
value: 21,
},
{
category: "4",
value: 5,
},
{
category: "5",
value: 8,
},
{
category: "6",
value: 4,
},
{
category: "7",
value: 1,
},
{
category: "8",
value: 1,
},
];
export const L16 = [
{
category: "Never or rarely",
value: 89.1,
},
{
category: "1+ per year",
value: 9.9,
},
{
category: "Weekly",
value: 1,
},
];
export const L17 = [
{
text: "MathSoc",
value: 9,
},
{
text: "Blueprint",
value: 8,
},
{
text: "Muay Thai",
value: 8,
},
{
text: "Volleyball",
value: 6,
},
{
text: "Dodgeball",
value: 6,
},
{
text: "Frisbee",
value: 7,
},
{
text: "CSC",
value: 5,
},
{
text: "Basketball",
value: 6,
},
{
text: "UWACC",
value: 5,
},
{
text: "Badminton",
value: 5,
},
{
text: "Watonomous",
value: 4,
},
{
text: "WiCS",
value: 4,
},
{
text: "Tech+",
value: 4,
},
{
text: "Chess",
value: 4,
},
{
text: "PMC",
value: 3,
},
{
text: "HipHop",
value: 3,
},
{
text: "Orchestra",
value: 3,
},
{
text: "Waterloop",
value: 3,
},
{
text: "Soccer",
value: 3,
},
{
text: "DSC",
value: 3,
},
{
text: "Hack the North",
value: 2,
},
{
text: "ACE",
value: 2,
},
{
text: "Cuban Salsa",
value: 2,
},
{
text: "Aquadrone",
value: 2,
},
{
text: "Magic",
value: 2,
},
{
text: "Fencing",
value: 2,
},
{
text: "CCF",
value: 2,
},
{
text: "DJ",
value: 2,
},
{
text: "Tennis",
value: 2,
},
{
text: "UWCSA",
value: 2,
},
{
text: "mathNEWS",
value: 2,
},
{
text: "Toastmasters",
value: 2,
},
{
text: "Chamber Ensembles",
value: 2,
},
{
text: "UWFA",
value: 2,
},
{
text: "WiSTEM",
value: 1,
},
{
text: "KC",
value: 1,
},
{
text: "WARG",
value: 1,
},
{
text: "Swimming",
value: 1,
},
{
text: "Skating",
value: 1,
},
{
text: "Boxing",
value: 1,
},
{
text: "Movie",
value: 1,
},
{
text: "Theatre",
value: 1,
},
{
text: "Cooking",
value: 1,
},
{
text: "TechNova",
value: 1,
},
{
text: "CTF",
value: 1,
},
{
text: "Robotics Design Team",
value: 1,
},
{
text: "EntSoc",
value: 1,
},
{
text: "UWEN",
value: 1,
},
];
export const L18 = [
{
category: "MC",
value: 23,
},
{
category: "DC",
value: 22,
},
{
category: "Res",
value: 16,
},
{
category: "E7",
value: 11,
},
{
category: "QNC",
value: 9,
},
{
category: "DP",
value: 5,
},
{
category: "SLC",
value: 4,
},
{
category: "E5",
value: 3,
},
{
category: "EV3",
value: 3,
},
{
category: "PHY",
value: 1,
},
];
export const L19 = [
{
category: "No",
value: 78,
},
{
category: "Yes",
value: 22,
},
];

View File

@ -1,480 +0,0 @@
export const H1 = [
{
category: "Yes",
value: 58,
},
{
category: "No",
value: 42,
},
];
export const H2 = [
{
category: "Yes",
value: 83,
},
{
category: "No",
value: 17,
},
];
export const H2i = [
{
category: "Academic Term",
value: 83.9,
},
{
category: "Co-op Term",
value: 16.1,
},
];
export const H2ii = [
{
category: "In person",
value: 51,
},
{
category: "Online",
value: 45,
},
{
category: "Both",
value: 4,
},
];
export const H3 = [
{
category: "Yes",
value: 23,
},
{
category: "No",
value: 77,
},
];
export const H3i = [
{
category: "Yes",
value: 51.3,
},
{
category: "No",
value: 48.7,
},
];
export const H3ii = [
{
category: "Money",
value: 12,
},
{
category: "Stereotypes",
value: 8,
},
{
category: "Unresponsive therapist office",
value: 1,
},
{
category: "Scared",
value: 1,
},
{
category: "Judgment from others",
value: 3,
},
{
category: "Indifference",
value: 1,
},
{
category: "Lack of information",
value: 25,
},
{
category: "Skeptical",
value: 2,
},
{
category: "No strong need",
value: 1,
},
{
category: "Laziness",
value: 6,
},
{
category: "No time",
value: 20,
},
];
export const H4 = [
{
category: "Yes",
value: 24,
},
{
category: "No",
value: 76,
},
];
export const H4i = [
{
category: "Yes",
value: 26.6,
},
{
category: "No",
value: 73.4,
},
];
export const H4ii = [
{
category: "No time",
value: 14,
},
{
category: "Unresponsive therapist office",
value: 3,
},
{
category: "Scared",
value: 1,
},
{
category: "Lack of information",
value: 12,
},
{
category: "Stereotypes",
value: 5,
},
{
category: "Money",
value: 7,
},
{
category: "Judgment from others",
value: 1,
},
{
category: "Laziness",
value: 4,
},
];
export const H5 = [
{
category: "Yes",
value: 21.2,
},
{
category: "No",
value: 78.2,
},
];
export const H5i = [
"Depends on the person you get, some are really good but some I didn't click with",
"Good, although I never attended a session",
"It was average. The people there are kind and care about you.",
"Average",
"Mediocre",
"Pretty good minus how busy they are",
"meh",
"They tried their best, but I felt underwhelmed and it felt like I was wasting my time there.",
"Great",
"It is not as accessible as you would hope, and it is hard to continue to see your doctor",
"Good",
"not half bad.",
"No experience ",
"It was just alright.",
"Meh",
];
export const H6 = [
{
category: "1",
value: 3,
},
{
category: "2",
value: 9,
},
{
category: "3",
value: 19,
},
{
category: "4",
value: 52,
},
{
category: "5",
value: 15,
},
];
export const H7 = [
{
category: "1",
value: 4,
},
{
category: "2",
value: 13,
},
{
category: "3",
value: 35,
},
{
category: "4",
value: 41,
},
{
category: "5",
value: 7,
},
];
export const H8 = [
{
category: "3",
value: 1,
},
{
category: "4",
value: 2,
},
{
category: "5",
value: 1,
},
{
category: "6",
value: 9,
},
{
category: "7",
value: 22,
},
{
category: "8",
value: 27,
},
{
category: "9",
value: 26,
},
{
category: "10",
value: 12,
},
];
export const H9 = [
"Played games, video called, voice called.",
"Playing video games over Discord, meeting up in person and going on walks or picnics",
"Scheduled game nights with a large group of friends (to play mafia/among us) + did secret santa food edition",
];
export const H9i = [
"If you ever feel your mental health is declining, don't be afraid to talk to your profs and TA's about it, they're all there to help you. Don't isolate yourself from your friend group, as that'll only make things worse. The most important thing is to not keep everything bottled up.",
"Mental health at Waterloo is pretty bad. The environment generates a lot of pressure and people crack very much under that pressure.",
"Everyone deals with mental health. You aren't some special snowflake, and you also aren't immune. It will always get better once you accept that and are able to talk about it at least to yourself. ",
"Take breaks",
"I wish some of the people here remembered that at the end of the day, life moves on, and are things that make life worth living besides the prestige and money that comes with being sexy",
"Don't be afraid to reach out for help, therapy is worth it!",
"Competition at Waterloo can be tough on mental health sometimes.",
"It is pretty scary that you could just be totally unknown in university, nobody would never know anything that happens to you. I feel that a lot of people with mental health problems can go down like this.",
"Consider reaching out to professionals if you are struggling with mental health. However, it is completely normal to try multiple therapists until you can find the one that really vibes with you.",
"UW has terrible support nets for students who are struggling. This is the biggest differentiator between UW and say a liberator arts college. Recognizing that you are on your own is an important step to taking control of your own mental health.",
"I think the support systems for mental health in university are definitely less structured, and it's easier to 'fall through the cracks', especially being away from long-time friends and family from your hometown.",
"The school does not seem to care at all",
"I hope we can work on mental health in general, not just for disorders but also just a general wellbeing",
"Mental health at the University of Waterloo in particular is very challenging to navigate. We all hear a lot about the toxic environment and the 'cali or bust' mentality and all this and all that all the time, and for good reason I think it's very tough for an 18 year old growing up with traditional Canadian values dumped into a prestigious tech school to avoid falling into these thought traps and seemingly zero sum games. I think we should all step back and take some time to reflect on how different our university experiences here at the University of Waterloo are compared to those of other schools, just to give us some perspective on things. ",
"Mental health at Waterloo has never been really great. Back in first year, there were a bunch of people that committed suicide and since then, the pandemic has happened. Arguably, that's made it worse (being in quarantine the whole two years). Hopefully it gets better in future years, but Waterloo's mental health generally stems from the highly competitive environment that the students curate themselves. It's a vicious cycle.",
"I find my mental health is the worst when I'm under a lot of stress and spread myself too thin. During the pandemic, I find myself too focused on school work which made the stress worse.",
"Uw provides good resources if you seek them out/really need them. Otherwise, just git gud. ",
"I used to think I was sad in high school, I was stressed in high school, but never have I felt such intense versions of sadness and stress as I have during my undergrad. With that being said, I will never feel as proud and accomplished as I did when I got my first “big coop” or when I pulled off a near perfect in a CS course!",
"You have to look out for yourself, your parents are there with you",
"Having somewhere to vent or someone to listen and bounce thoughts off is really helpful for mental health. You're definitely not alone in experiencing what you're experiencing. It helps to put thoughts into words (by talking/writing/typing it out).",
"You're probably going to struggle a lot at some points and that's ok if you know how to deal with it",
"Will likely deteriorate, especially if you struggle with maintaining friendships.",
"1. Maintaining mental health and believing in yourself are essential conditions for developing your intellectual potential. 2. Pay attention to exploration and innovation in study. 3. Scientific use and rational development of the brain. 4. Focus on self-encouragement and reflection, and constantly awaken self-realization and self-transcendence. 5. Make good use of sound and beauty activities to develop innovative potential.",
"I think the competitive nature of CS forces a lot of student to value coops and school over their mental health. Its hard to not as we came to this program to be the best and its hard to not compare your self to everyone else. ",
"school gives me anxiety but if i care less then it's okay, it's mostly just me placing dumb expectations on myself",
"overthinking is bad",
"No one can truly understand or appreciate your suffering. Your challenge is unique to yourself, but you still likely need some other input (doctor, friend, counsellor etc.) to overcome it. ",
"I didn't feel supported in courses it felt like everything was a competition.",
"Being consistently overwhelmed can lead to mental health problems. That's why it's so important to take breaks. It's also crucial to stay organized (easier said than done). But the way I stay accountable and on top of things is a simple schedule. I put every due date in my calendar on the first day of class and set up a grade calculator. And that's all I do on the first day of class. From then on, I make a table labelled Monday through Friday, and put every task to start/continue/finish underneath. This is where the calendar comes in, which will help you prioritize the tasks. On top of that, I couldn't survive a term without study buddies. My keys to success have literally been keep a calendar of due dates, schedule your week, and find people who can help you when you just don't think you can do it.",
"I really dont know, high school courses were all easy for me but university courses tend to be a lot harder. But i am already in this program so what can i say. I already switched my program once, so i am already behind, if i switch back i will be even more behind and i dont have enough money to delay my gradutaion even more. So what else can i do besides bare with it.",
"I have developed a deep hatred for UW faculty. Avoiding thinking about my time in university is the best thing i can do for my mental health. ",
"Figure out a sleep schedule that works and prioritize it. ",
"Please, please take care of your mental health.",
"Multiple co-op sequences causes people to feel lonely and depressed",
"I think I have ADHD or a learning disability but I never knew what I should do about that, if anything (since I was still passing... mostly)",
"A lot of sudden change going into university, everyone is struggling",
"People need to go outside more",
];
export const H10 = [
{
category: "Yes",
value: 27.4,
},
{
category: "No",
value: 72.6,
},
];
export const H11 = [
"Talk to friends",
"Physical activity, playing guitar/singing, talking with friends, moving to a new city for a fresh start",
"I study therapy and counseling theory",
"Exercise",
"Go on walks, music",
"Go on long walks",
"Talk to close friends",
"I write to myself, go outside, listen to music, watch films about parts of the world I want to visit, do photography",
"Breathing exercises, healthy living, relaxation activities like reading and meditation",
"I vent to friends and meditate",
"Hang out with friends, reading a good book",
"Coffee, League of Legends",
"Friends",
"Write diaries and seeking professional help",
"physical exercise, video games, cooking, spending time with significant other",
"sleep, cry, eat, alcohol",
"hobbies, sport",
"Have a good night sleep",
"meditate",
"drink, sleep, academics, walk, music",
"Journal.",
"Assignments",
"Therapy, spend time alone, find outlets for self-expression, avoid social media, try and eat healthy, exercise, self-reflection/values reevaluation, meditate, incorporate flow",
"Self harm, talking to friends, drinking",
"Friends, self reflection, food",
"Tiktok and talk to friends",
"Distract myself with something I enjoy doing, try to be productive in a different way",
"I talk to and spend time with my friends, and allow myself to wallow and take days off when needed.",
"Step away from work, cry if needed",
"Make sure I have enough time to feel relaxed and do things I enjoy",
"Talking to friends",
"Talking with others",
"Chatting with friends, playing an instrument, talking out loud to myself",
"Try my best. If it doesn't work out \"C'est la vie\" and get high",
"Journaling, watching shows, playing video games, hanging out with friends",
"Feel it out",
"Develop innovation potential.",
"Look at the bigger picture",
"Go for walks, reach out to friends, pick up hobbies to keep busy",
"Meet friends, keep myself distracted",
"Go on Walk, Hang out with friends, talk to girl friend.",
"take a nap",
"Indulge in my hobbies",
"Never focusing too much time or energy on one aspect of life/identity. Sunshine and exercise are underrated. ",
"binge eat",
"See H9",
"Just think at least i passed and i am still alive, and being alive is good, aftet COVID, nothing else is important besides staying alive.",
"Talk to partner",
"Talk to my friends",
"Exercise, pace",
"Bike, pray, walk, call a friend",
"Taking a break, sleeping, going out, having fun.",
"Cry and distract myself with work, go see friends",
"Go for walks by laurel creek",
"Over the years, I've learned to prioritize my physical health (sleep, diet, exercise) and I have found it extremely beneficially to my mental health as well. Sleeping 8 hours a night, eating 3 meals a day, and getting some fresh air will do wonders. ",
"Meditate and exercise",
"Play games with friends",
];
export const H12 = [
"It stresses out the people you love the most. It also makes it 10 times harder to get things done and to push yourself when you're already so strained.",
"Mental health affects every aspect of your life. If you aren't in a good place mentally, everything you do will take a hit. Your relationships will be strained, studying will become harder, and you'll burn out much faster. Always take care of yourself first.",
"I make sure I am ok before I focus on any of those things.",
"It affects my ability to communicate with a clear head and also my productivity during work",
"Hasn't really",
"Affects friendships the most. If I'm not in a good state of mind, I can't even talk to my friends properly or given them the attention they deserve.",
"My stress and anxiety make it harder to put effort into the things I do, even if I like doing them. Tends to make my work worse and makes me a worse boyfriend. ",
"It introduces a lot of unnecessary stress that interferes with everything",
"My productivity and motivation decreases when I am stressed or burnt out. I also don't socialize as much when I am stressed.",
"Quite a lot",
"makes everything else alot more difficult",
"affects my motivation to maintain relationships and be focused on career",
"Honestly I don't really know.",
"Affects my growth in all areas and how I deal with problems ",
"I personally feel like my mental health affects everything. The only way I can describe the affect is that positive mental health leads to positive effects in these areas. ",
"Significant impact ",
"Depression affects the motivation to do anything. Sometimes you just lay in bed and can't get out to face the day. Multiple days waste away and you just can't function properly. Lots of friends have trouble helping me and from my social anxiety, I miss out on a ton of social events. ",
"It can hinder some parts",
"It forces me to prioritize and stay on top of my work, because I have to account for the sporadic and spontaneous bad days that prevent me from getting things done. Its also made my hyper aware of being a burden on my friends, and occasionally made me less productive on work terms than I should have been.",
"Its necessary to be successful/have fun when pursuing relationships, doing work/studying",
"It affects my relationship with my parents the most, because they are the most invested in me. It is hard to make them understand how I feel. My relationship with my boyfriend is generally great, because I feel I can share whatever I like with him. Similarly with friends, mental health does not affect my relationships with them, because we have 0 expectations from each other but are always supportive of each other. My academics have definitely suffered, but speak to your profs, they are amazing and very understanding! You will be surprised at the accommodations they can offer. ",
"Negatively affects relationships",
"It's easier to study when your mental is good",
"It definitely affects my mood, which unconsciously affects how I go about the various aspects of my life.",
"Bad mental health affects all of them negatively.",
"Occupation",
"Anxious about risks and failure",
"It just takes time out of my day, even though there are sometimes that I'd want to be more productive/meet new people anxiety or other issues make that difficult sometimes",
"Makes me less motivated in all aspects of life",
"Motivation loss in everything",
"makes it harder to maintain consistent output/effort",
"I am too tired to do anything just want to lay in the bed for the whole day.",
"Makes me less interested in pursuing relationships with others. I cut myself off from people. ",
"Not much at all anymore",
"Definitely makes studying/work much harder if I'm not feeling great.",
"Friendships feel painful sometimes due to anxiety",
"Stress of school and time taken by procrastination leaves little time for enjoying life",
"Very adversely",
];
export const H13 = [
{
category: "Yes",
value: 73.2,
},
{
category: "No",
value: 26.8,
},
];
export const H14 = [
"Help people be more aware, provide more resources and accomodation.",
"Promote better school involvement and school spirit! Also offer and push counselling/therapy services more. ",
"communicate what situations warrant a trip to see a professional ",
"More accessible mental health services, wait times are too long",
"Better and standardized accommodations for students going through mental health difficulties during the term. Some instructors are just so insensitive. UW's accessibility services are pretty good in my experience, and should be better publicized as a resource for everyone.",
"Definitely, for me it's that I don't really feel a sense of belonging in the school community. Waterloo never really felt like home, it was just somewhere I stayed for a few months at a time.",
"Promote more dialogue on mental health in general.",
"Hire better mental health professionals",
"There are many things that can be done but all of which are too expensive to actually implement for UW.",
"Not throwing me false Policy 71 accusations, then having me fight it for a whole month.",
"Maybe a webpage for easy to understand instructions on how to get resources",
"more accessible counselling",
"Normalize reduce course loads",
"Not sure UW can do anything to help. Maybe more awareness and attempts at supporting us throughout the terms.",
"never go fully remote ever again :)",
"Have more visibility on mental health services + improve wait times",
"Maybe not make such terrible CS Finals geez.",
"Stimulate learning motivation, motivation is to promote people to engage in something idea or desire, is directly to promote a person to carry out activities of the internal power. Learning motivation is an internal psychological process or internal psychological state that stimulates individual learning activities, maintains the learning activities that have been caused, and makes behavior toward a certain learning goal.",
"I think they need to be more lenient with failed/dropped courses, the student here value their program a lot and the fear of failing out is one of the main drivers of mental health struggles (IMO), so giving the students who are struggling academic flexibility will help imo.",
"hire more counsellors",
"I would say make the finals easier but that's not going to happen so i think there's nothing you can do.",
"Ask professors to pretend to care about students success",
"Better promotion of available services, more availability.",
"Be more accommodating of student stress",
"Support study group opportunities for students without friends to even the playing field first year calculus was very stressful :(",
];

View File

@ -1,380 +0,0 @@
export const M1 = [
{
category: "Almost every day",
value: 8,
},
{
category: "A few times weekly",
value: 8,
},
{
category: "A few times monthly",
value: 25,
},
{
category: "Rarely",
value: 69,
},
];
export const M2 = [
{
category: "0",
value: 12,
},
{
category: "1",
value: 32,
},
{
category: "2",
value: 23,
},
{
category: "3",
value: 13,
},
{
category: "4",
value: 4,
},
{
category: "5",
value: 2,
},
{
category: "6",
value: 3,
},
{
category: "7",
value: 3,
},
{
category: "8",
value: 3,
},
{
category: "9",
value: 1,
},
{
category: "10",
value: 4,
},
];
export const M3 = [
{
category: "CS / CS/BBA / CFM",
value: 84,
},
{
category: "Software Engineering",
value: 6,
},
{
category: "Psychology",
value: 2,
},
{
category: "FARM",
value: 1,
},
{
category: "BBA",
value: 1,
},
];
export const M4 = [
{
category: "Yes",
value: 27,
},
{
category: "No",
value: 73,
},
];
export const M5 = [
{
category: "Yes",
value: 16,
},
{
category: "No",
value: 84,
},
];
export const M6 = [
{
text: "Go to UofT",
value: 33,
},
{
text: "UBC",
value: 9,
},
{
text: "A different university...",
value: 15,
},
{
text: "UOttawa",
value: 1,
},
{
text: "Start a business",
value: 5,
},
{
text: "Take a gap year and try again",
value: 8,
},
{
text: "Learn a trade",
value: 3,
},
{
text: "UofWindsor",
value: 3,
},
{
text: "Start working",
value: 1,
},
{
text: "Travel",
value: 2,
},
{
text: "UAlberta",
value: 1,
},
{
text: "McGill",
value: 1,
},
{
text: "Stanford",
value: 1,
},
{
text: "UIUC",
value: 1,
},
{
text: "No idea",
value: 3,
},
{
text: "Die...",
value: 3,
},
{
text: "Teacher's College",
value: 2,
},
{
text: "Resting and Learning",
value: 1,
},
{
text: "Be a doctor",
value: 2,
},
{
text: "Study biology",
value: 2,
},
];
export const M7 = [
{
text: "Communication",
value: 4,
},
{
text: "Become more social",
value: 7,
},
{
text: "Cooking",
value: 12,
},
{
text: "Handling stress",
value: 3,
},
{
text: "Dance",
value: 4,
},
{
text: "Sing",
value: 3,
},
{
text: "Weightlifting",
value: 2,
},
{
text: "Snowboard",
value: 2,
},
{
text: "Improved Relationship",
value: 5,
},
{
text: "Public Speaking",
value: 2,
},
{
text: "Self-confidence",
value: 6,
},
{
text: "Video games",
value: 5,
},
{
text: "Grown as a Person",
value: 2,
},
{
text: "Rock climbing",
value: 3,
},
{
text: "Guitar",
value: 2,
},
{
text: "Piano",
value: 2,
},
{
text: "Tennis",
value: 2,
},
{
text: "Fitness",
value: 2,
},
{
text: "Psychology",
value: 1,
},
{
text: "Responsibility",
value: 1,
},
{
text: "Swimming",
value: 1,
},
{
text: "Philosophy",
value: 2,
},
{
text: "Creative writing",
value: 2,
},
{
text: "Entrepreneurship & leadership",
value: 2,
},
{
text: "Biking",
value: 2,
},
{
text: "Debate",
value: 1,
},
{
text: "Life skills",
value: 2,
},
{
text: "Badminton",
value: 1,
},
{
text: "Ultimate frisbee",
value: 1,
},
{
text: "Volleyball",
value: 1,
},
{
text: "Bodybuilding",
value: 3,
},
{
text: "Mindfulness",
value: 4,
},
{
text: "Self-regulation",
value: 1,
},
{
text: "Religion & Culture",
value: 2,
},
{
text: "Languages",
value: 3,
},
{
text: "Become a Youtuber",
value: 1,
},
{
text: "Drawing",
value: 1,
},
{
text: "Photography",
value: 1,
},
{
text: "Teaching",
value: 1,
},
{
text: "Dating",
value: 2,
},
{
text: "Have Sex",
value: 1,
},
{
text: "Board games",
value: 2,
},
{
text: "Music",
value: 2,
},
{
text: "Improved fashion",
value: 1,
},
{
text: "Cheerleading",
value: 1,
},
{
text: "Figure skating",
value: 1,
},
];

View File

@ -3,225 +3,35 @@
*/
export const mockCategoricalData = [
{
category: "Roboto",
key: "Roboto",
value: 88,
},
{
category: "Open Sans",
key: "Open Sans",
value: 16,
},
{
category: "Lato",
key: "Lato",
value: 14,
},
{
category: "Montserrat",
key: "Montserrat",
value: 73,
},
{
category: "Oswald",
key: "Oswald",
value: 14,
},
{
category: "Source Sans Pro",
key: "Source Sans Pro",
value: 8,
},
{
category: "Slabo 27px",
key: "Slabo 27px",
value: 41,
},
{
category: "Raleway",
key: "Raleway",
value: 29,
},
];
export const mockPieData = [
{
category: "Nightingale",
value: 42,
},
{
category: "Quail",
value: 48,
},
{
category: "Cuckoo",
value: 10,
},
];
export const moreMockCategoricalData = [
{ key: "Python", value: 29.53 },
{ key: "Java", value: 17.06 },
{ key: "JavaScript", value: 8.56 },
{ key: "C", value: 6.49 },
{ key: "Assembly", value: 6.31 },
{ key: "R", value: 5.83 },
{ key: "Objective C", value: 4.43 },
{ key: "Swift", value: 3.89 },
{ key: "PHP", value: 3.85 },
{ key: "Rust", value: 3.33 },
{ key: "Ruby", value: 3.25 },
{ key: "Matlab", value: 3.06 },
{ key: "TypeScript", value: 3.98 },
{ key: "Go", value: 3.85 },
{ key: "Haskell", value: 3.28 },
{ key: "VBA", value: 3.11 },
{ key: "Scala", value: 2.79 },
{ key: "Lua", value: 2.79 },
{ key: "Julia", value: 2.77 },
{ key: "Kotlin", value: 2.7 },
{ key: "Perl", value: 2.41 },
{ key: "Groovy", value: 2.4 },
{ key: "Abap", value: 2.24 },
{ key: "Cobol", value: 2.23 },
{ key: "Ada", value: 2.21 },
{ key: "Dart", value: 2.21 },
];
export const mockStackedBarGraphData = [
{
category: "1A",
"geese watchers": 60,
"geese breeders": 80,
"geese catchers": 90,
},
{
category: "1B",
"geese watchers": 25,
"geese breeders": 37,
"geese catchers": 80,
},
{
category: "2A",
"geese watchers": 40,
"geese breeders": 50,
"geese catchers": 70,
},
{
category: "2B",
"geese watchers": 40,
"geese breeders": 80,
"geese catchers": 88,
},
{
category: "3A",
"geese watchers": 15,
"geese breeders": 30,
"geese catchers": 45,
},
];
export const mockStackedBarKeys = [
"geese watchers",
"geese breeders",
"geese catchers",
];
export const mockLineData = {
xValues: ["1A", "1B", "2A", "2B", "3A", "3B"],
lines: [
{
label: "Java",
yValues: [54, 88, 22, 66, 77, 88],
},
{
label: "C++",
yValues: [45, 22, 83, 98, 24, 33],
},
],
};
export const mockTimelineData = [
{
time: "Fall 2020",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
time: "Winter 2021",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad",
},
{
time: "Spring 2021",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor i",
},
{
time: "Fall 2021",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proid",
},
{
time: "Winter 2022",
text: "Lorem ipsum dolor sit amet, consectetur adipi",
},
{
time: "Spring 2022",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut en",
},
];
export const mockBoxPlotData = [
{
category: "1A",
min: 20,
firstQuartile: 25,
median: 30,
thirdQuartile: 80,
max: 100,
outliers: [],
},
{
category: "1B",
min: 0,
firstQuartile: 20,
median: 30,
thirdQuartile: 50,
max: 100,
outliers: [],
},
{
category: "2A",
min: 25,
firstQuartile: 35,
median: 50,
thirdQuartile: 90,
max: 100,
outliers: [],
},
];
export const mockQuoteData = [
"The quick brown fox jumps over the lazy dog.",
"Sphinx of black quartz, judge my vow!",
"Pack my box with five dozen liquor jugs.",
];
export const mockQuoteDataLong = [
"Here, have some quotes of varying lengths, and see how they look.",
"Hello, world!",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in enim neque. Sed sit amet convallis tellus. Integer condimentum a felis id gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam metus libero, sagittis in consectetur in, scelerisque sed sapien. Nullam ut feugiat sapien. Praesent dictum ac ipsum ac lacinia.",
];
export const mockGroupedBarGraphData = [
{
category: "AJ",
values: {
Shooting: 7,
Melee: 9,
},
},
{
category: "Zen",
values: {
Shooting: 17,
Melee: 5,
},
},
{
category: "Lyra",
values: {
Shooting: 3,
Melee: 14,
},
},
];

View File

@ -1,334 +0,0 @@
export const P2 = [
"I have a bunch, but it might be singing in A Cappella. I've always loved to sing, and being surrounded by so many talented singers was an absolutely amazing experience.",
"Staying up late night and talking to friends about life",
"Travelling to Alaska during online school",
"Getting my fulltime offer after grinding for over 2 months",
"Thanks Mr. Goose",
"Just spending time with friends ",
"HvZ weeklong, Winter 2018",
"Going on dates with my boyfriend",
"Spending time with my significant other",
"Took someone else's backpack by accident",
"hiking in the snow on the grand river trail",
"Chanting 'Truth Tables, Part Marks!' over and over again with my classmates into our Math 145 Midterm",
"Running around outside with my roommates at night or coming back from a late night session.",
"probably running around SLC in my underwear",
"Spending every Friday with a couple friends, barhopping and getting drunk. Telling stories about your life and having a good time after a long week.",
"Watching White Vhicks at V1 study hall with friends instead of studying",
"nothing comes to mind =(",
"Just sitting in random classrooms with friends, hijacking the projector to play music while “studying” but really just enjoying each others company and procrastinating on work together :)",
"Jamming together with friends on campus",
"Going to class with all the other DDs",
"Watching snow",
"Getting a photo taken with friends at Busan and having it blow up on the subreddit O.o",
"Watching Netflix, playing Catan and drinking bubble tea with the boys. Simple but everything. That or anytime in SERVE in 2018/2019.",
"Taiwan trip with UW friends",
"Go shopping hand in hand with the opposite sex for the first time.",
"Meeting my girlfriend in Math 135",
"watching movies and drinking with friends",
"Looking forward to eat from some restaurant",
"meeting friends",
"the 'good ol days'. the first 2 years here were so nice, so much exploration and novelty",
"Nothing specific, but the moments I spent at V1 Center during my first year were very nice.",
"Waking up 6:50 in the morning for class and climbing a mountain of snow because my google map headed me to the wrong direction.",
"Time spent in clubs",
"celebrating with classmates/roommates after exams",
"Probably the first time I got a job I was really interested in.",
"Singing with my friends while having some beers",
"My buddy's bday party in 2B was definitely one of the best, we turned way tf upppp",
];
export const P3 = [
"Have fun! Don't overthink everything and just go for it.",
"Join intramural basketball regardless of skill level",
"you fail 100% of the exams you don't show up to",
"Actually doing hobbies outside of school is so valuable",
"Chill",
"Going into continuous can sometimes be a better decision than accepting a job you don't want in main round",
"Take your time. Everything is going to be okay, there's no rush to do anything.",
"Spend more time on the things you enjoy doing and don't worry about marks too much.",
"Don't be so stressed out about co-op, and don't stay home so much D",
"Life will be ok",
"Stop worrying about grades, make more time to meet new people and pursue your hobbies.",
"Take it easier, buy GME stock",
"Keep your toughness",
"Do not consume alcohol or other substances that inhibit your ability to make good decisions",
"Listen to others talk more; be less cringe",
"diversify your interests",
"talk to more people",
"There actually is light at the end of the tunnel... no seriously",
"Chill the f out and be yourself",
"you're gonna be a legend some day",
"Try and figure out who you are and what you stand for. Be someone who is irreplaceable and surround yourself with people that you want to be.",
"Get your resume roasted more.",
"Get out of your comfort zone by meeting more people and trying new things!",
"drink and eat edibles !",
"stop being religious, go to parties, be open minded",
"Its okay to take breaks from work!! Go get food with a friend, say yes to the spontaneous outing! Go to that weekend hackathon! youll be okay and you wont fall behind!",
"Stick with theatre! Its a lot of work but its fun after all",
"Put yourself and everything you want first!",
"Drink less",
"Pick a different program",
"Grades don't matter",
"Try more new things, uni goes by quicker than you think",
"Don't stay at home and study all night. Enjoy university life before it's over. With that said first year low-key brutal so study hard",
"Try to experience life beyond school and coop",
"u r the best people to make money !",
"Chill out my guy.",
"Join a company you love.",
"Dont copy assignments, getting a 60 and actually understanding the material is better than getting a 90 and not, you will pay for it come finals. ",
"Stop worrying about grades so much and go meet new people, nobody cares after graduation",
"ur not special, and also you should draw more",
"Try to make more friends and be more social",
"staying on track",
"Put yourself out there more while school is still in person. ",
"Your hard work paid off! good job.",
"The geese won't actually attack you. ",
"Get organized with your calendar, make a grade calculator, and find friends in every class",
"You guys did really well.",
"Take it easy on yourself. It's ok to not be perfect.",
"Just pass the classes. Don't even consider caring about learning or doing well in them. ",
"It gets better, but you've also gotta get better. It's not high school anymore, you've gotta change how you study!",
"STOP PLAYING LEAGUE and go get involved in school activities!",
"Dont get in a relationship ",
"You're not unloveable. Don't take this time for granted. Make lots of friends, work on yourself, have lots of sex. It's a process!",
];
export const P4 = [
"If you don't believe in yourself, nobody else will.",
"I see says the blind man",
"lift to gain not to lift the weights",
"It smells like updog in here",
"The most important step someone can take isn't the first one. It's the next one.",
"Don't choke on your aspirations Darth Vader",
"The imagination is precious. Don't lose it. Don't lose the child in you.",
"“He who has a why to live for can bear almost any how.”",
"Due tomorrow do tomorrow",
"Always double and triple check, just to be safe.",
"All the lovely math theorems",
"Listen to others talk more; be less cringe",
"Not all those who wander are lost",
"Learning is like rowing upstream, not to advance is to fall behind. (More precisely, 學如逆水行舟,不進則退)",
"We do this, not because it is easy, but because it is hard",
"Your strength will come from self acceptance. ",
"Run it",
"Live each week as you would want to live every week",
"Do it, otherwise you'll regret not doing it.",
"Comparison is the thief of joy",
"I am the master of my fate, I am the captain of my soul. Invictus poem.",
"Just because you may have gotten a bit lucky, doesnt mean you dont deserve it",
"It matters not how strait the gate, How charged with punishments the scroll, I am the master of my fate, I am the captain of my soul.",
"Carpe diem",
"Believe in yourself",
"Yesterday is history, tomorrow is a mystery, but today is a gift. Thats why it is called the present Master Oogway, Kung Fu Panda",
"C'est la vie",
"TIME IS MONEY",
"Selfdistrust is the cause of most of our failures.",
"Treat others how you would like to be treated",
"Nothing in life is more important than happiness.",
"If you're not enough without it, you'll never be enough with it. ",
"Due tomorrow, do tomorrow",
"The best is yet to come",
"Expect disappointment and you will never be disappointed",
"F*** it",
];
export const P5 = [
"Took notes for me while I fell asleep.",
"They brought me McDonald's when I had a late exam",
"ask me out",
"Lent me a pencil",
"Gave me all their notes when I lost my notebook",
"Did my assignment",
"Be in a committed relationship with me",
"Compiled my code every time I wanted to test it, for a whole semester, because I was too lazy to set up the student environment",
"Teaching me even though they are not currently taking the course",
"i had a classmate who got a 17% on an assignment, and that gave me a great chuckle",
"I think sometimes the most touching thing someone can do for me is just ask if I'm doing okay and genuinely care about the answer.",
"Gave me class notes",
"Held my hand and guided me through my hell of a first year.",
"Let me stay/live at their place for an extended period of time.",
"saved a seat for me every class in Daves cs135 packed section strangers at the time but still friends to this day <3",
"One time after having a heavy conversation after a club meeting, I was sitting alone on campus looking kind of down. A stranger came up to me and asked me if I was okay and chatted with me for a bit.",
"My clicker died in class and my classmate swapped their clickers batteries with me for very question!",
"Help me out with an assignment, by helping me come up with multiple solutions to each question to ensure I understood it properly",
"My roommate brought my clicker to school while I was in the middle of class",
"Offered to help me not fail japanese ",
"Be concerned about your life.",
"Sent me assignment answers ",
"Answer my question when I was confused in class? idk",
"give iclicker answers",
"Walked me through assignments so I could learn to get the right answers",
"Helped me out for an assignment question that i struggled for days",
"Brought me food after a family member died right before finals which i was forced to take. ",
"IDK, strike up a conversation randomly while waiting.",
"Bake me a cake",
];
export const P6 = [
"Have a routine. Have breakfast, workout, and make time for hobbies. Also reframing perspective; helps you to see the positives in situations.",
"Movie tickets are cheaper when you buy them at slc turnkey",
"always carry a condom on campus",
"Install autojump and fig for your terminal, use Atom as your text editor.",
"Compile your code with -fsanitize=address",
"Set the bar so low that you can't trip over it",
"Cook 4 portions of food each time. Now you won't have to cook for the next day or two.",
"Keep things in perspective. Read about the struggles of those less fortunate.",
"Go to the MathSoc office (MC 3038) for free snacks if you're hungry while on campus, and too lazy to go buy actual food.",
"When it comes to school/career, build your meta-skills first. Before studying, always think about how to study.",
"Figuring out what you want, finding out the steps to get there, and executing the steps",
"Go to Needles Hall for your class overrides... they don't care if you have an advisor signature, as long as you have a prof signature.... aka, step aside advisors lol",
"Always ask for forgiveness, never permission. ",
"optimize your bird courses and your undergrad becomes a breeze",
"Travel when you're on co-op. Know that if you have extra funds, it's always nice to do some exploring on weekends. You'll regret not doing so if you get the opportunity. Also, I try to sit next to someone new every term. Say hi to people on the first class, and if you don't vibe, try someone new next class. I've met friends in every term by doing this.",
"Sleep enough and exercise. Also drink enough water.",
"download linux and do all your work on it. THen after the conditioning, when you boot into linux, you are 110% focused.",
"submitting half an assignment is better than submitting no assignment at all",
"Let the rice cool down so it doesn't stick to the rice cooker",
"Sleep is important",
"You get more motivation when the assignment is due in a few hours",
"Document your life. Vlog or photos. You'll want to look back on them ",
"Live a self-disciplined life.",
"Air fryers are the best",
"be critical of people's opinions, lots of people bulls*** frequently & have bad sources for their opinions",
"Get organized with your calendar, make a grade calculator, and find friends in every class",
"Onky do things that make u happy",
"Get an oversized bowl and spoon for meals. Cook food, dump into bowl, mix, scoop into mouth. ",
"you can avoid bad weather by using the bridges/tunnels that connect most buildings",
"Get a rice cooker. You can make so much s*** in it, and you'll stop messing up rice.",
"Crowdmark PWA bookmark on iPhone with fingerprint-controlled password manager. Makes handing in assignments at the last minute much easier just take pic with CamScanner, export to photos, tap Crowdmark 'app', fingerprint to log in, and upload pic from photos library directly to Crowdmark without stumbling over typing your password at 11:58.",
"Eat healthy and move ",
"F*** PD",
];
export const P7 = [
"Time is fleeting! It's insane that I've spent almost 5 years as a UW student. As I move into the next stage of my life and complete that, I'm sure I'll feel the same. So, lesson is live in the moment and do what you want to do.",
"Instead of cali or bust, we should have dream or bust. Don't chase after the hype! Figure out what you are passionate about and run with it.",
"people r real idiots and they'll only get dumber",
"Taking care of my mental health is the most important thing. Coffee works.",
"Grind never stops",
"Just saying 'yes' can lead you to a lot of new experiences.",
"Capitalism is a meat grinder that grants us with lots of nice amenities.",
"Patience",
"People aren't judging you as much as you think they are.",
"No pain no gain",
"Past a certain point, the efforts you invest towards a goal are more important than your innate talent",
"I'm not the smartest guy I know",
"Even if you don't think you can do it, you can probably push through and make it.",
"you have to let go if you want to be free",
"Jump at every opportunity. Say yes to more things. You'll find yourself meeting more people, potentially meeting your next best friend or next SO. You might also find yourself advancing faster career-wise/co-op-wise simply because you're taking on new challenges.",
"To enjoy life in moments.",
"people who work full time can be equally as clueless, if not more clueless, as you are",
"Everyone is just as scared and clueless as you, so crack a joke, compliment someone, start a conversation!",
"Friendships are important",
"Grades don't matter",
"Learn how to do multiple choice questions. Look for contradictory answers. Look for long answers. Look for too specific answers. ",
"One day at a time.",
"Mass media and politics.",
"At the end of the day its your life, do what makes you happy and what you will remember 20 years from now. ",
"I took living with my parents for granted",
"going to office hours",
"How to move on from rejection/failure. ",
"perceptions are as important than work output in the real world",
"Nobody cares about your grades. ",
"Your friends will get you through",
"I am now on my own, and i need to deal with whatever comes by myself",
"Improve myself. ",
"It's fine to take L's from time to time. You can't always win.",
"Doing something is better than nothing ",
"that noone cares about you. That is both a good thing (noone remembers your f****ups) and also a bad thing (casual indifference of society is hard). ",
];
export const P8 = [
"Spending time with friends and constantly pursuing what I love. Right now that means playing as many sports as possible and making time to see my friends.",
"Being Christian",
"morning coffee",
"Playing music and teaching others",
"Spending time with close friends",
"Seeing beauty when looking at ordinary things from a different angle, I try to do that as much as possible when shooting photos as a hobby.",
"My relationships with others",
"Kyu Min",
"Being able to pursue my hobbies.",
"Being able to put efforts into work and seeing the results.",
"Sharing my achievements with my significant other",
"Friends",
"being alive",
"I'm 22, and I have a good amount of stories to tell... and I'm just getting started ;)",
"Eating and spending time with my friends",
"my ability to break the rules",
"My relationship ",
"Being able to spend time with those that I love.",
"My ability to be independent",
"rock climbing",
"sports lol",
"my friends!! i love them so much",
"Having friends and a girlfriend who support me and I can be myself with and have fun with",
"Friends and Boyfriend!",
"Spending time with my friends",
"Family/Friends",
"I finally go to the gym not out of hatred",
"Friends, games, shows",
"MY HEALTH",
"Personal growth.",
"In order to study music。",
"my friends and girl friend ",
"i like drawing",
"Feeling like I secured my future after university",
"My relationship with my parents improved a lot over university.",
"my personality and strengths",
"To be honest, feeling more mature mentally and mathematically.",
"My boyfriend",
"Music and anime and BL novel",
"my besties",
"My high school friends",
"Making stuff that makes others happier or people can find useful.",
"My friends",
"Tacos",
];
export const P9 = [
"Take a genuine interest in class material",
"have friends not in CS, the perspective of how life is enjoyable without the competition of coop is nice",
"Don't give up. It gets better",
"Prioritize your mental health, because if you're under the weather, it affects almost everything else in your life. Also, coffee works, kids",
"The hardest problems are solved with some food and a good night's sleep.",
"Treat co-op as a 6th course",
"Your time here is so precious and it goes by so quick, make sure to make lots of memories and try new things as often as you can. You likely won't have another period in your life when you're as free and as able-bodied as now.",
"Cs get degrees. You experience life as longer when undergoing new experiences, so try lots of new things!",
"Call || bust actually works! ",
"Learn. To. Cook. It's healthier and cheaper.",
"Keep your GPA high if you want to do grad school",
"Try to figure out what you want to do after graduation as soon as possible. Invest your time through classes and co-ops towards this goal. Focused effort in one direction is almost always better than scattered efforts everywhere.",
"Live your life, storytellably",
"Don't stress too much about jobs and grades, try to enjoy your time with friends and make some good memories. Things always work out.",
"legends live forever. rebels never die.",
"Go work out more, it's important and it'll help your mental health. Sleeping is actually more important than looking 'cool' and not sleeping. Getting 7-8 hours feels great and is very much worth it. Choose your friends wisely. Not everyone needs to be your friend and you choose who you allot that time to. Like people say, you are the average of the 5 people that surround you. Give yourself a break. It's okay to fail and it's okay to stop. Learn when to do so. Take some fun electives or electives that make you think differently (than just programming all the time). It's nice to be more well rounded despite all the hate on breadth and depth courses. I recommend PHIL121, PHIL101, RS121.",
"Don't compare yourself to others",
"co-op doesn't matter. In fact I would recommend not doing co-op; do something your passionate about during summer.",
"try and make at least one friend here. there are great people at this school, they help make your life much easier by being there with you when you struggle through tough courses and unsuccessful coop recruitment cycles. it really does make a world of a difference.",
"Don't stress too much about job search",
"Still care about your grades but dont let it consume your life :)",
"Make sure to spend time doing social/fun clubs. If you don't feel you have the time for this, you are too busy and need to make changes to be less busy.",
"Make sure to have time for yourself and your friends",
"Grades don't matter",
"Try to experience life beyond school and coop",
"JUST ENJOY UR SCHOOLS LIFE",
"Youll get through it :)",
"Students are more willing to learn and do better when their intrinsic motivation is stronger than their extrinsic motivation.",
"School teaches you how to be diligent and hardworking at a job. Grades arent the most important thing, just pass and do your best",
"CS is hard and you just gotta focus and grind out the work, but dont stress too much on the actual grade cause within the next year you (and everyone else) wont care what grade you got.",
"make time for your hobbies it's good for the brains or whatever",
"Meet people, make friends and have fun, you don't need to study that hard and grades aren't everything to be concerned about",
"Its a marathon not a sprint. Go to class. ",
"don't be worried, youll do fine & enjoy your time",
"Manage your time and don't feel too much pressure to get high grades. It does not matter in the long run. ",
"Get organized with your calendar, make a grade calculator, and find friends in every class",
"If you didn't like CS in high school dont think that you will like it in university, even if you enjoyed Racket.",
"Classes are easy if you want them to be. Do the minimum but not less",
"start assignments early",
"Try to not compare yourself with others too much. It's still helpful to do so at times, but sometimes, you've gotta accept that some people may end up doing better than you but that's fine, focus on yourself!",
"Make friends",
"Have fun, enjoy your time, thing will happen soon enough ",
"Grind leetcode.",
"Enjoy your life. F*** SCHOOL. have fun",
];

View File

@ -1,243 +0,0 @@
export const P1 = [
{
category: "No",
value: 64.1,
},
{
category: "Not sure",
value: 20.4,
},
{
category: "Masters",
value: 5,
},
{
category: "PhD",
value: 4,
},
{
category: "PhD + Masters",
value: 6.8,
},
];
export const P2 = [
{
category: "Yes",
value: 78.2,
},
{
category: "No",
value: 21.8,
},
];
export const P3 = [
{
text: "Seattle",
value: 8,
},
{
text: "New York",
value: 20,
},
{
text: "Chicago",
value: 4,
},
{
text: "San Francisco",
value: 13,
},
{
text: "California",
value: 13,
},
{
text: "GTA / Toronto",
value: 10,
},
{
text: "Boston",
value: 2,
},
];
export const P4 = [
{
category: "0",
value: 1,
},
{
category: "1",
value: 19,
},
{
category: "2",
value: 31,
},
{
category: "3",
value: 17,
},
{
category: "4",
value: 6,
},
{
category: "5",
value: 5,
},
];
export const P5 = [
{
category: "0",
value: 20,
},
{
category: "1",
value: 7,
},
{
category: "2",
value: 7,
},
{
category: "3",
value: 10,
},
{
category: "4",
value: 5,
},
{
category: "5",
value: 8,
},
{
category: "6",
value: 2,
},
{
category: "7",
value: 2,
},
{
category: "8",
value: 2,
},
{
category: "10",
value: 3,
},
{
category: "12",
value: 1,
},
{
category: "15",
value: 1,
},
{
category: "35",
value: 1,
},
];
export const P6 = [
{
category: "Yes",
value: 61.7,
},
{
category: "No",
value: 38.3,
},
];
export const P7 = [
{
category: "51k-100k",
value: 2,
},
{
category: "101k-150k",
value: 6,
},
{
category: "151k-200k",
value: 16,
},
{
category: "201k-250k",
value: 18,
},
{
category: "251k-300k",
value: 15,
},
{
category: "300k+",
value: 21,
},
];
export const P8 = [
{
text: "Web development",
value: 11,
},
{
text: "Finance",
value: 8,
},
{
text: "Cloud Computing",
value: 6,
},
{
text: "Artificial Intelligence",
value: 5,
},
{
text: "Operating System",
value: 2,
},
{
text: "Robotics",
value: 3,
},
{
text: "Data Science",
value: 10,
},
{
text: "Research",
value: 6,
},
{
text: "Cybersecurity",
value: 2,
},
{
text: "Hardware",
value: 4,
},
{
text: "Mobile Development",
value: 1,
},
{
text: "Computer Networking",
value: 2,
},
{
text: "Programming Languages",
value: 5,
},
{
text: "Compilers",
value: 1,
},
];

View File

@ -1,70 +0,0 @@
export interface PageRoute {
name: string;
url: string;
}
type PageID =
| "home"
| "demographics"
| "academics"
| "coop"
| "lifestyleAndInterests"
| "intimacyAndDrugs"
| "postGrad"
| "friends"
| "miscellaneous"
| "mentalHealth"
| "personal"
| "contributors";
export type PageRoutes = { [key in PageID]: PageRoute };
export const pageRoutes: PageRoutes = {
home: {
name: "Home",
url: "/",
},
demographics: {
name: "Demographics",
url: "/demographics",
},
academics: {
name: "Academics",
url: "/academics",
},
coop: {
name: "Co-op",
url: "/coop",
},
lifestyleAndInterests: {
name: "Lifestyle and Interests",
url: "/lifestyle-and-interests",
},
intimacyAndDrugs: {
name: "Intimacy and Drugs",
url: "/intimacy-and-drugs",
},
postGrad: {
name: "Post-grad",
url: "/post-grad",
},
friends: {
name: "Friends",
url: "/friends",
},
miscellaneous: {
name: "Miscellaneous",
url: "/miscellaneous",
},
mentalHealth: {
name: "Mental Health",
url: "/mental-health",
},
personal: {
name: "Personal",
url: "/personal",
},
contributors: {
name: "Contributors",
url: "/contributors",
},
};

View File

@ -1,27 +0,0 @@
#!/usr/bin/env bash
set -ex
ulimit -u 512
DIR=$(mktemp --directory)
trap "rm -rf $DIR" EXIT
pushd $DIR
git clone file:///srv/git/www/cs-2022-class-profile.git --depth=1
cd cs-2022-class-profile
export NEXT_PUBLIC_BASE_PATH="/classprofile/2022"
npm install
npm run build
npm run export
chgrp -R www out
chmod -R g+w out
shopt -s dotglob
rm -rf /srv/classprofile/2022/*
mv out/* /srv/classprofile/2022/
popd

View File

@ -3,6 +3,6 @@
- Follow instructions on [CSC cloud](https://docs.cloud.csclub.uwaterloo.ca/kubernetes/) to setup csccloud.
- Setup the repository to store your docker images on [CSC Harbour](https://docs.cloud.csclub.uwaterloo.ca/registry/).
- Make sure to add harbour auth tokens to drone. Click the my profile page on harbour, and set HARBOUR_USERNAME and HARBOUR_PASSWORD on drone secrets to the username and cli secret from the harbour profile page.
- Clone the [server repo](https://git.csclub.uwaterloo.ca/snedadah/csc-webhooks), fill in desired links, update env file with the auth token, update STAGING_AUTH_TOKEN in drone to match. Run `npm start` to start server in the background.
- Clone the [server repo](https://git.csclub.uwaterloo.ca/snedadah/csc-webhooks), fill in desired links, update env file with the auth token, update STAGING_AUTH_TOKEN in drone to match. Run `./run.sh` to start server in the background.
- Possibly put a crontab to restart the script on [startup](https://stackoverflow.com/questions/12973777/how-to-run-a-shell-script-at-startup)

View File

@ -1,19 +1,6 @@
/** @type {import('next').NextConfig} */
let basePath = process.env.NEXT_PUBLIC_BASE_PATH ? process.env.NEXT_PUBLIC_BASE_PATH : "";
const nextConfig = {
basePath: basePath,
assetPrefix: basePath + "/",
publicRuntimeConfig : { basePath: basePath },
// test comment
reactStrictMode: true,
trailingSlash: true,
// This image loader supports `next export`, for optimizing next <Image /> tags
images: {
loader: 'akamai',
path: basePath,
},
}
module.exports = nextConfig

4264
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -16,19 +16,9 @@
},
"dependencies": {
"@visx/axis": "^2.10.0",
"@visx/event": "^2.6.0",
"@visx/grid": "^2.10.0",
"@visx/group": "^2.10.0",
"@visx/legend": "^2.10.0",
"@visx/mock-data": "^2.1.2",
"@visx/scale": "^2.2.2",
"@visx/shape": "^2.10.0",
"@visx/stats": "^2.10.0",
"@visx/text": "^2.10.0",
"@visx/tooltip": "^2.10.0",
"@visx/wordcloud": "^2.10.0",
"next": "12.1.6",
"npm": "^8.19.0",
"react": "18.1.0",
"react-dom": "18.1.0"
},
@ -45,7 +35,6 @@
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"eslint-plugin-unused-imports": "^2.0.0",
"postcss": "^8.4.14",
"postcss-calc": "^8.2.4",
"postcss-flexbugs-fixes": "^5.0.2",

View File

@ -1,184 +0,0 @@
html {
scroll-behavior: smooth;
scroll-padding-top: calc(92rem / 16);
}
@-moz-document url-prefix() {
/* Firefox has a bug relating to smooth scrolling
https://github.com/vercel/next.js/issues/22858
*/
html {
scroll-behavior: auto;
}
}
body {
/* Theme colours */
--pink: #EF839D;
--light-pink: #FFCAD0;
--lighter-pink: #FFE7E7;
--orange: #F5917B;
--light-orange: #FFC4A9;
--lighter-orange: #ffddcd;
--navy: #252D41;
--light-navy: #354265;
--dark-navy: #141D34;
/* Default is dark theme */
--light--primary-background: #FFFFEF;
--light--secondary-background: #FDF5ED;
--light--primary-accent: #CA634D;
--light--primary-accent-light: var(--orange);
--light--primary-accent-lighter: #FFBC9F;
--light--secondary-accent: #E55F98;
--light--translucent-accent: rgba(255, 231, 231, 0.75);
--light--secondary-accent-light: #FEA0C8;
--light--primary-heading: #D02B53;
--light--primary-text: #483B35;
--light--link: var(--orange);
--light--link-hover: #FFBC9F;
--light--card-background: #FFFFFF;
--light--label: #A98778;
--dark--primary-background: var(--navy);
--dark--secondary-background: var(--dark-navy);
--dark--tertiary-background: var(--light-navy);
--dark--primary-accent: var(--pink);
--dark--primary-accent-light: var(--light-pink);
--dark--primary-accent-lighter: var(--lighter-pink);
--dark--primary-accent-dark: #dc538e;
--dark--primary-accent-darker: #c8417c;
--dark--secondary-accent: var(--orange);
--dark--secondary-accent-light: var(--light-orange);
--dark--secondary-accent-lighter: var(--lighter-orange);
--dark--translucent-accent: rgba(239, 131, 157, 0.75);
--dark--primary-heading: #FFC48D;
--dark--secondary-heading: var(--pink);
--dark--link: var(--pink);
--dark--link-hover: var(--light-pink);
--dark--primary-text: #FDF5ED;
--dark--secondary-text: var(--light-pink);
--dark--card-background: #2C3651;
--dark--label: #FFFFFF;
--primary-background: var(--dark--primary-background);
--secondary-background: var(--dark--secondary-background);
--tertiary-background: var(--dark--tertiary-background);
--primary-accent: var(--dark--primary-accent);
--primary-accent-light: var(--dark--primary-accent-light);
--primary-accent-lighter: var(--dark--primary-accent-lighter);
--primary-accent-dark: var(--dark--primary-accent-dark);
--primary-accent-darker: var(--dark--primary-accent-darker);
--secondary-accent: var(--dark--secondary-accent);
--secondary-accent-light: var(--dark--secondary-accent-light);
--secondary-accent-lighter: var(--dark--secondary-accent-lighter);
--translucent-accent: var(--dark--translucent-accent);
--primary-heading: var(--dark--primary-heading);
--secondary-heading: var(--dark--secondary-heading);
--link: var(--dark--link);
--link-hover: var(--dark--link-hover);
--primary-text: var(--dark--primary-text);
--card-background: var(--dark--card-background);
--label: var(--dark--label);
background-color: var(--primary-background);
color: var(--primary-text);
font-family: "Inconsolata", monospace;
margin: 0;
position: relative;
/* Font styling for body */
font-size: calc(18rem / 16);
font-weight: 500;
}
/* Page titles (e.g. Demographics) */
h1 {
font-size: calc(48rem / 16);
font-weight: 700;
color: var(--primary-accent-light);
margin-top: calc(32rem / 16);
margin-bottom: calc(16rem / 16);
}
/* Major section headings (e.g. About the Programs) */
h2 {
font-size: calc(36rem / 16);
font-weight: 700;
color: var(--primary-heading);
margin-top: calc(32rem / 16);
margin-bottom: calc(16rem / 16);
}
/* Minor section headings & questions (e.g. What Program Are You In?) */
h3 {
font-size: calc(32rem / 16);
font-weight: 700;
color: var(--secondary-heading);
margin-top: calc(24rem / 16);
margin-bottom: calc(16rem / 16);
}
/* Titles within paragraphs (e.g. About the Programs -> Computer Science)*/
h4 {
font-size: calc(24rem / 16);
font-weight: 700;
color: var(--secondary-heading);
margin-top: calc(24rem / 16);
margin-bottom: calc(8rem / 16);
}
p {
color: var(--primary-text);
margin-top: 1rem;
margin-bottom: 1rem;
}
a {
color: var(--link);
text-decoration: none;
transition: color 0.5s ease-out;
}
a:hover {
color: var(--link-hover);
}
@media only screen and (prefers-color-scheme: dark) {
body {
--primary-background: var(--dark--primary-background);
--secondary-background: var(--dark--secondary-background);
--tertiary-background: var(--dark--tertiary-background);
--primary-accent: var(--dark--primary-accent);
--primary-accent-light: var(--dark--primary-accent-light);
--primary-accent-lighter: var(--dark--primary-accent-lighter);
--primary-accent-dark: var(--dark--primary-accent-dark);
--secondary-accent: var(--dark--secondary-accent);
--secondary-accent-light: var(--dark--secondary-accent-light);
--secondary-accent-dark: var(--primary-accent-dark);
--primary-heading: var(--dark--primary-heading);
--secondary-heading: var(--dark--secondary-heading);
--link: var(--dark--link);
--link-hover: var(--dark--link-hover);
--primary-text: var(--dark--primary-text);
--card-background: var(--dark--card-background);
--label: var(--dark--label);
}
}
/* Custom styles for scroll bars on chromium */
::-webkit-scrollbar {
width: 1em;
height: 1em;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track:horizontal {
background: var(--card-background);
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:horizontal {
background-color: var(--tertiary-background);
}

View File

@ -1,20 +1,6 @@
import type { AppProps } from "next/app";
import Head from "next/head";
import React from "react";
import "./_app.css";
import "./font.css";
export default function App({ Component, pageProps }: AppProps): JSX.Element {
return (
<>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"
/>
</Head>
<Component {...pageProps} />
</>
);
return <Component {...pageProps} />;
}

View File

@ -1,539 +0,0 @@
import {
A1,
A2,
A3,
A4,
A5,
A6,
A7,
A8,
A9,
A10,
A11,
A12,
A12i,
A12iKeys,
A13,
A13i,
A13ii,
A13iii,
A14,
A15,
A16,
A16Keys,
A18,
A18i,
A18ii,
A19,
A19i,
A20,
A21,
A21i,
A21ii,
A21iii,
A21iv,
A21v,
} from "data/academics";
import { pageRoutes } from "data/routes";
import React from "react";
import { Color } from "utils/Color";
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 { BodyLink } from "@/components/BlankLink";
import { BottomNav } from "@/components/BottomNav";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { PieChart } from "@/components/PieChart";
import { QuotationCarousel } from "@/components/QuotationCarousel";
import { SectionHeader } from "@/components/SectionHeader";
import { SectionWrapper } from "@/components/SectionWrapper";
import {
StackedBarGraphHorizontal,
StackedBarGraphVertical,
} from "@/components/StackedBarGraph";
import { Title } from "@/components/Title";
import { WordCloud } from "@/components/WordCloud";
import styles from "./samplePage.module.css";
export default function Academics() {
const pageWidth = useWindowDimensions().width;
const isMobile = useIsMobile();
return (
<div className={styles.page}>
<Header />
<Title>Academics</Title>
<SectionHeader title="Academics" />
<SectionWrapper title="Programming" />
<ComponentWrapper
heading="How many years of coding experience did you have prior to 1A?"
bodyText="Almost 70% of the students that participated had minimal to no coding experience (0 - 2 years), prior to coming into UW. It goes to show that years of programming knowledge is not required to be admitted into CS / CFM / CS/BBA at UW."
>
<div className={styles.graphContainer}>
<PieChart data={A1} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Is your expected graduation date the same as when you enrolled in the program?"
bodyText="Most people stayed on track with their original plans, but its not unheard of for students to delay their graduation date due to retaking failed classes, gap terms, completing minors, etc. Students are also able to shorten their undergraduate career through various ways such as removing co-op from their degree. It's normal to diverge from the planned route for your degree!"
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={A2} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What is your favourite text editor or IDE?"
bodyText="The class favours VS Code, a versatile and customizable code editor. This is no surprise as VS Code is known to be a sweet spot between Vim and more complex IDEs like IntelliJ. It's fast, lightweight, easy to use, powerful with its extensions, and offers a plethora of themes. Shout out to the one Microsoft Word user out there!"
align="right"
>
<BarGraphHorizontal
data={A3}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 180 } }}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What is your favourite programming language?"
bodyText="The favourite programming language award for the class of 2022 goes to… PYTHON! No surprise here - it reads the most like English. C++ is a very notable language as a part of the CS program; thus, its no surprise it comes in second. It looks like weve come a long way from the days of Racket in first year!"
align="center"
noBackground
>
<BarGraphHorizontal data={A4} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="How many programming languages do you know?"
bodyText="85%+ of individuals that participated in the survey know 4 or more languages. It's evident that, as students take more internships and classes, they learn more programming languages, especially in a field that is continuously evolving!"
>
<BarGraphVertical data={A5} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="What operating system(s) do you mainly use?"
bodyText="MacOS and Windows are the predominant operating systems used by our respondents. Each OS provides its own benefits, capabilities, and downsides. As such, choosing the right operating system largely boils down to personal preference and comfort for daily use or programming. We can establish that UNIX based OS (MacOS and Linux) are favoured by our respondents, due to the various tools and features that cater to programmers."
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={A6} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<SectionWrapper title="Courses and Grade Averages" />
<ComponentWrapper
heading="What category of electives for your degree did you enjoy most?"
bodyText="It seems like the class really enjoyed their humanities courses! Perhaps this is due to the stark contrast between the content of courses that belong in this category compared to their mandatory math and computer science courses. The refreshing subject matter, combined with the overall ease of the courses, makes for some of students' favourite electives. For context, these electives are a part of the computer science degrees at UW due to breadth and depth requirements for graduation."
>
<BarGraphHorizontal
data={A7}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 180 } }}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Which non-math elective was your favourite?"
bodyText={
<p>
There are lots of amazing non-math electives mentioned in the list,
with{" "}
<BodyLink href="https://uwflow.com/course/music140">
MUSIC 140
</BodyLink>
,{" "}
<BodyLink href="https://uwflow.com/course/music246">
MUSIC 246
</BodyLink>
, and{" "}
<BodyLink href="https://uwflow.com/course/clas104">
CLAS 104
</BodyLink>{" "}
being crowd favourites!
</p>
}
align="center"
noBackground
>
<WordCloud
data={A8}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={30}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Which CS course was your favourite?"
bodyText={
<p>
<BodyLink href="https://uwflow.com/course/cs343">CS 343</BodyLink>{" "}
and{" "}
<BodyLink href="https://uwflow.com/course/cs486">CS 486</BodyLink>{" "}
both tied up in first place. CS 343 teaches concurrent parallel
programming while CS 486 delves into the realm of artificial
intelligence. Both are very interesting courses, exploring niche
aspects of computer science!{" "}
<BodyLink href="https://uwflow.com/course/cs246">CS 246</BodyLink>{" "}
is the third most popular CS course for the class of 2022. This
course introduces object-oriented programming, a fundamental
programming paradigm that is used in many places. No wonder this
course is so well-liked!
</p>
}
align="right"
>
<WordCloud
data={A9}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={8}
desktopMaxFontSize={60}
desktopMinFontSize={15}
mobileMaxFontSize={60}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Which CS course was your least favourite?"
bodyText={
<p>
<BodyLink href="https://uwflow.com/course/cs245">CS 245</BodyLink>,
Logic and Computation, was the least favourite CS course students
took by large margin. It can probably be explained by its
difficulty, the theoretical focus of the course, the content being
less applicable outside of class, plus it being a core CS course. As
of December 2022, the course has a 28% liked rating on UWFlow.
Coming in second place is{" "}
<BodyLink href="https://uwflow.com/course/cs348">CS 348</BodyLink>,
Introduction to Database Management, which has a 36% liked rating on
UWFlow. Some common complaints of these courses include organization
of the course and how interesting the course content is.
</p>
}
noBackground
>
<WordCloud
data={A10}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={11}
desktopMaxFontSize={80}
mobileMaxFontSize={70}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Which course did you find the most useful for job preparation?"
bodyText={
<p>
<BodyLink href="https://uwflow.com/course/cs341">CS 341</BodyLink>,
Algorithms, was deemed the most useful CS core course for job
preparation according to respondents. This could be linked to how
common software engineering positions are among computing students,
and how LeetCode practice is crucial for passing technical
interviews! Meanwhile, CS 246, Object-Oriented Software Development,
is ranked second. This can be correlated with students ranking it as
one of their favourite CS classes!
</p>
}
>
<WordCloud
data={A11}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={20}
desktopMaxFontSize={80}
mobileMaxFontSize={80}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Did you take any advanced/enriched courses?"
bodyText="45% of the class has taken at least 1 advanced/enriched course before their graduation. Advanced and enriched courses have a reputation to be time-consuming and contain much more difficult course material, which can already be hard in the first place! However, for those seeking an academic challenge or are curious about math and computer science topics, this deeper dive into the content can be worth the additional struggle. Additionally, many students claim that some courses are simply taught better. Ultimately, it is up to every individual student to decide what they are capable of and desire. Looks like most of the participants were not afraid to take on this challenge!
"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={A12} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="If you took any advanced or enriched courses, how much did you enjoy each course?"
bodyText="Advanced/enriched CS courses are rated pretty high overall, and it looks like most respondents decide to take them in earlier terms. Trying out advanced courses early and seeing if theyre right for you can be a good strategy to figure out what youre comfortable with before the workload starts ramping up."
align="right"
>
<StackedBarGraphHorizontal
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={A12iKeys}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
]}
data={A12i}
margin={{ ...barGraphMargin, ...{ left: 90 } }}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Who is your favourite professor in all of UW?"
bodyText={
<p>
The class of 2022 would like to give a shout out to &nbsp;
<BodyLink href="https://uwflow.com/professor/alice_gao">
Alice Gao
</BodyLink>
,&nbsp;
<BodyLink href="https://uwflow.com/professor/carmen_bruni">
Carmen Bruni
</BodyLink>
,&nbsp;
<BodyLink href="https://uwflow.com/professor/lesley_istead">
Lesley Istead
</BodyLink>
, and&nbsp;
<BodyLink href="https://uwflow.com/professor/brad_lushman">
Brad Lushman
</BodyLink>
&nbsp; as some of the best professors at UW! Go read their ratings
UWFlow! We would also like to give an honourable mention to every
professor who has poured their passion into teaching. This has
helped the CS Class of 2022 grow and succeed! You guys are all
amazing!
</p>
}
align="right"
noBackground
>
<WordCloud
data={A14}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={3}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Which study term did you think was the hardest?"
bodyText="Second year seems to be the hardest year for most respondents with a whooping 52% of respondents agreeing on this. 2B has the second highest vote which comparatively makes the later terms look almost relaxing…🤔"
>
<BarGraphVertical data={A15} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="What were your termly and cumulative averages?"
bodyText="The majority of people did their best in 1A and their worst in 1B, 2A, or 2B, likely because of the mandatory challenging computer science and math courses that lie around that period of time. Students started getting better grades in 3A, correlating with the term difficulty question. As a clarification, CAV stands for Cumulative Average."
align="center"
noBackground
>
<StackedBarGraphVertical
width={600}
height={400}
keys={A16Keys}
colorRange={[
Color.primaryAccentLighter,
Color.secondaryAccentLighter,
Color.secondaryAccentLight,
Color.primaryAccentLight,
Color.primaryAccent,
Color.primaryAccentDark,
Color.primaryAccentDarker,
]}
data={A16}
margin={barGraphMargin}
displayPercentage={true}
/>
</ComponentWrapper>
<ComponentWrapper
heading="How many classes have you failed?"
bodyText="Most people tend to complete their degree without failing a course, but clearly it's not over if you have failed some."
align="right"
>
<BarGraphVertical data={A20} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="Did you complete an option, specialization or minor?"
bodyText="50% of the students have completed some form of option, specialization, or minor during their undergrad. These are ways you can add qualifications to your degree using the electives that you have. That's what they mean when they say you can customize your CS degree!"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={A18} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper heading="Which option(s), specialization(s), or minor(s) did you complete?">
<WordCloud
data={A18i}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={60}
desktopMinFontSize={15}
mobileMaxFontSize={30}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What made you want to complete the option, specialization or minor?"
align="center"
noBackground
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel data={A18ii} circleDiameter={0} height={300} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Have you overloaded any of your semesters?"
align="right"
>
<div className={styles.graphContainer}>
<PieChart data={A19} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How many overloaded semesters did you take?"
bodyText="UW academic terms can already be challenging; however, over 45% of participants were able to overload at least 1 term. 20% of students overloaded 3 or more terms. 🤯"
noBackground
>
<BarGraphVertical data={A19i} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<SectionWrapper title="Transfer" />
<ComponentWrapper
heading="Did you transfer into your current program?"
bodyText="23% of respondents transferred into their current program, which is a surprisingly high number. We can assume that the majority, if not all, of the people that transferred programs transferred into CS as getting into CS/BBA and CFM after initial applications can be exceedingly difficult."
>
<div className={styles.graphContainer}>
<PieChart data={A13} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What program did you transfer from?"
bodyText="Most transfers came from Math and CFM. Math and CS share a lot of courses through the first year of the degree, which might have resulted in many of those students pursuing their passion for CS directly by transferring. CFM transfers may be due to students disliking the finance side of their degree."
noBackground
>
<BarGraphVertical data={A13i} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="What term did you transfer into your program?"
bodyText="Most of the transfers occurred during 2A and 2B terms, which makes sense since students have time to re-evaluate their academic/career path after spending a year in their original program."
align="right"
>
<BarGraphVertical
data={A13ii}
{...barGraphProps(isMobile, pageWidth)}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What was your reasoning behind transferring?"
bodyText="Program interest, flexible course requirements, and a flexible schedule were the most common reasons people transferred into their current program. Many respondents also justified their transfer due to future job prospects and to avoid mandatory courses in their original program. With so many industries relying on technology, it's no wonder computing degrees are so in demand!
"
noBackground
>
<BarGraphVertical
data={A13iii}
widthAlternatingLabel={1000}
alternatingLabelSpace={200}
lowerLabelDy="60px"
{...barGraphProps(isMobile, pageWidth)}
/>
</ComponentWrapper>
<SectionWrapper title="Exchange" />
<ComponentWrapper
heading="Did you take any exchange terms?"
bodyText="Students can apply to the exchange program starting in their second year to experience studying abroad for a term! Note that exchange does not necessarily imply switching schools with another student. It seems that not many students took exchange terms from this sample."
>
<div className={styles.graphContainer}>
<PieChart data={A21} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What term did you take an exchange in?"
bodyText="Only 7% of students decided to take an exchange term during their undergrad with most students going during their 3A and 4B terms. Unfortunately, 21% of students were interested in going on an exchange term but were interrupted and unable to go due to the COVID-19 pandemic."
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={A21i} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Where did you take your exchange term?"
bodyText="Only three people declared exactly where their exchange term was."
align="right"
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel data={A21ii} circleDiameter={0} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Were you unable to complete an exchange term due to the COVID-19 pandemic?"
bodyText="With the severity of the pandemic restrictions in Canada extending from the beginning of 2020 until 2022, it is understandable that most 2022 graduates exchange terms were interrupted. Unfortunately, our results show that a lot more people would have gone on exchange if it wasnt for the pandemic."
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={A21iii} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper heading="What was the hardest thing about going on exchange?">
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel data={A21iv} circleDiameter={0} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What is your favourite memory from your time during the exchange?"
bodyText="Hopefully more students in future classes will have the chance to experience cool opportunities like these as well."
noBackground
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel data={A21v} circleDiameter={0} />
</div>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.demographics}
rightPage={pageRoutes.coop}
/>
</div>
);
}

View File

@ -1,115 +0,0 @@
import { communityReps, designers, webDevs, sysCom } from "data/contributors";
import { pageRoutes } from "data/routes";
import React from "react";
import { BottomNav } from "@/components/BottomNav";
import { CenterWrapper } from "@/components/CenterWrapper";
import { Header } from "@/components/Header";
import { SectionHeader } from "@/components/SectionHeader";
import { Title } from "@/components/Title";
import styles from "./samplePage.module.css";
interface ContributorProfile {
name: string;
link: string;
}
interface ContributorGroupProps {
group: Array<ContributorProfile>;
}
export function ContributorGroup({ group }: ContributorGroupProps) {
return (
<ul>
{group
.sort((a, b) => a.name.localeCompare(b.name))
.map((d, idx) => {
return (
<li key={idx}>
{d.link ? (
<a href={d.link} target="_blank" rel="noreferrer">
{d.name}
</a>
) : (
<a href="#" onClick={(e) => e.preventDefault()}>
{d.name}
</a>
)}
</li>
);
})}
</ul>
);
}
export default function Contributors() {
return (
<div className={styles.page}>
<Header />
<Title>Contributors</Title>
<SectionHeader
title="Contributors"
subtitle="Huge thanks to all CSC members who have contributed to creating the first ever uWaterloo CS class profile!"
/>
<CenterWrapper>
<p>
The 2022 CS Class Profile was completed by members of the UW Computer
Science Club. Specifically, several current and past members (as of
this writing) of the Community Representatives, Designers, Web
Committee, and Systems Committee put lots of time into making it what
it is. Please contact{" "}
<a href="mailto: exec@csclub.uwaterloo.ca">
exec@csclub.uwaterloo.ca
</a>{" "}
for specific concerns for the CS Class Profile, but the specific
contributors include the following:
</p>
<ul>
<li>
Community Representatives
<ContributorGroup group={communityReps} />
</li>
<li>
Designers
<ContributorGroup group={designers} />
</li>
<li>
Website Committee
<ContributorGroup group={webDevs} />
</li>
<li>
Systems Committee
<ContributorGroup group={sysCom} />
</li>
</ul>
<p>
Furthermore, special thanks to former CSC President and Vice
President,{" "}
<a
href="https://www.linkedin.com/in/kallentu/"
target="_blank"
rel="noreferrer"
>
Kallen Tu
</a>{" "}
and{" "}
<a
href=" https://www.linkedin.com/in/gordonle/"
target="_blank"
rel="noreferrer"
>
Gordon Le
</a>
, for kickstarting the existence of the CS Class Profile and for
providing feedback! Note there may be other anonymous contributors on
any of the teams or committees, but their names are not listed here.
</p>
</CenterWrapper>
<BottomNav
leftPage={pageRoutes.personal}
rightPage={pageRoutes.home}
></BottomNav>
</div>
);
}

View File

@ -1,322 +0,0 @@
import {
C1,
C2,
C3,
C4,
C5,
C6,
C7i,
C7ii,
C7iii,
C7iv,
C7v,
C7vKey,
C7vi,
C7viKey,
C7vii,
C7viii,
C7viiiKey,
} from "data/coop";
import { pageRoutes } from "data/routes";
import React from "react";
import { Color } from "utils/Color";
import {
barGraphMargin,
DefaultProp,
pieChartProps,
wordCloudWidth,
} from "utils/defaultProps";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import { BottomNav } from "@/components/BottomNav";
import { BoxPlot } from "@/components/Boxplot";
import { ComponentSwitcher } from "@/components/ComponentSwitcher";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { LineGraph } from "@/components/LineGraph";
import { PieChart } from "@/components/PieChart";
import { SectionHeader } from "@/components/SectionHeader";
import {
StackedBarGraphHorizontal,
StackedBarGraphVertical,
} from "@/components/StackedBarGraph";
import { Title } from "@/components/Title";
import { WordCloud } from "../components/WordCloud";
import styles from "./samplePage.module.css";
export default function CoopPage() {
const pageWidth = useWindowDimensions().width;
const isMobile = useIsMobile();
const colorRange = [
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLight,
Color.secondaryAccent,
];
return (
<div className={styles.page}>
<Header />
<Title>Co-op</Title>
<SectionHeader
title="Co-op"
subtitle="Explore careers, gain experience and earn money through UWaterloo's co-op program!"
/>
{/* C1 */}
<ComponentWrapper
heading="Are you in a co-op program?"
bodyText="Surprisingly, all 106 individuals that participated in this class profile were in a co-op program! Most don't opt out of it because co-op can be one of the best experiences you can get from attending UW!"
>
<div className={styles.graphContainer}>
<PieChart data={C1} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
{/* C7ii */}
<ComponentWrapper
heading="Where were you located during work?"
bodyText="Many students started in the GTA/Toronto or Waterloo region, then slowly progressed to the USA. Software jobs in California in particular are known for their prestige and high paying salary, which may explain why most students eventually try them out. However, due to the pandemic, the last 3 co-op placements were predominantly remote."
align="right"
noBackground
>
<LineGraph
data={C7ii}
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
colorRange={colorRange}
/>
</ComponentWrapper>
{/* C2 */}
<ComponentWrapper
heading="What was your favourite co-op location?"
bodyText="32% of students enjoyed their co-op terms in Toronto. Students really enjoyed their time working in California as a close second."
align="right"
>
<WordCloud
data={C2}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight * 0.7}
wordPadding={15}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
{/* C7i */}
<ComponentWrapper
heading="What company did you work for?"
bodyText="There are lots of companies that people have worked at! This just goes to show that the software world is HUGE."
align="center"
noBackground
>
<ComponentSwitcher
graphList={C7i.map((coopTerm, i) => (
<WordCloud
data={coopTerm}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={38}
key={i}
/>
))}
buttonList={C7i.map((_, i) => "Co-op #" + (i + 1).toString())}
/>
</ComponentWrapper>
{/* c4 */}
<ComponentWrapper
heading="In your opinion, what is the best company to work at?"
bodyText="Theres a fair share of companies around here, with Google being the most popular vote. Jane Street ranks 2nd highest, followed by Meta/Facebook."
>
<WordCloud
data={C4}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={14}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
{/* c3 */}
<ComponentWrapper
heading="Have you ever had a co-op term without a placement?"
bodyText="A sixth of respondents have gone through a term without a co-op placement. Youre not alone if you are here and cant find one! Finding your first job can be especially difficult. Another possible reason for these results can be due to pandemic conditions."
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={C3} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
{/* c5 */}
<ComponentWrapper
heading="Were you ever banned from WaterlooWorks for renegotiating an offer/match?"
bodyText="Reneging an offer can be a risky move, but it can still be beneficial when you believe that your other contract or salary can be better."
align="right"
>
<div className={styles.graphContainer}>
<PieChart data={C5} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
{/* c6 */}
<ComponentWrapper
heading="How many co-op positions did you lose due to COVID-19, if any?"
bodyText="Most people probably lost a position immediately when the pandemic began (Winter 2020), but it seems that the effects have not spread too much. Most CS / CFM / CS/BBA students hold software-related jobs, which make for a relatively easy transition to a remote work environment."
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={C6} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
{/* C7iii */}
<ComponentWrapper
heading="What was your salary per hour in CAD (excluding other forms of compensation)?"
bodyText="Compensation generally increased throughout the terms! For reference, in 2021, the average co-op salaries in the Faculty of Mathematics in Canada were $20.15, $22.05, $24.98, $27.60, $28.96, and $30.95 CAD, respectively. The same amounts in the USA were $28.08, $30.82, $33.65, $34.50, $37.15, and $37.60 USD, respectively. So, CS students tend to get paid more than the faculty average."
align="right"
>
<BoxPlot
width={isMobile ? pageWidth / 1.5 : 500}
height={DefaultProp.graphHeight}
data={C7iii}
margin={{
top: 20,
left: 20,
}}
/>
</ComponentWrapper>
{/* C7iv */}
<ComponentWrapper
heading="How much did you receive in other forms of compensation in CAD? (i.e. bonuses, stock options, relocation, housing, etc.)"
bodyText="Additional compensation had increased as terms progressed and students got better jobs. Its great to see students having accommodations to make their lives easier. We can also note that most participants didn't get any other form of compensation which explains why the first quartile and the minimum is at 0 for all terms."
noBackground
>
<BoxPlot
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
data={C7iv}
valueAxisLeftMargin={75}
margin={{
top: 20,
left: 20,
}}
/>
</ComponentWrapper>
{/* C7v */}
<ComponentWrapper
heading="What was your co-op evaluation rating?"
bodyText="Ratings were pretty positive overall, with “Outstanding” and “Excellent” making up the vast majority of evaluations! Respondents did not receive any ratings below “Very Good” in their 3rd, 4th, and 5th co-op terms."
>
<div>
<StackedBarGraphHorizontal
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={C7vKey}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
Color.secondaryAccent,
]}
data={C7v}
margin={barGraphMargin}
displayPercentage
tooltipBottomLabel="Co-op Term: "
/>
</div>
</ComponentWrapper>
{/* C7vi */}
<ComponentWrapper
heading="How happy were you with your co-op during the work term specified?"
bodyText="The ratio of people rating 4+ in happiness stayed roughly the same throughout the terms. There seems to be more 5s towards the last work term, likely due to students being more satisfied with better jobs that suit their interests."
align="right"
noBackground
>
<div>
<StackedBarGraphVertical
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={C7viKey}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
Color.secondaryAccent,
Color.primaryHeading,
]}
data={C7vi}
margin={barGraphMargin}
tooltipBottomLabel="Co-op Term: "
displayPercentage
/>
</div>
</ComponentWrapper>
{/* C7vii */}
<ComponentWrapper
heading="How did you find your co-op?"
bodyText="People found more co-ops externally and through return offers as the terms progressed, which makes sense as people gain more experience as they learn and grow. WaterlooWorks was still really good in helping people find jobs in the main and continuous rounds."
align="right"
>
<div style={{ padding: "10px" }}>
<LineGraph
data={C7vii}
colorRange={colorRange}
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
/>
</div>
</ComponentWrapper>
{/* C7viii */}
<ComponentWrapper
heading="Were you referred for the co-op?"
bodyText="Interestingly, the referral to non-referral ratio stayed roughly the same as the co-op terms progressed, apart from the first one which had the most referrals. This goes to show that, without a doubt, networking can really give you some great opportunities!"
noBackground
>
<div>
<StackedBarGraphVertical
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={C7viiiKey}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
data={C7viii}
margin={barGraphMargin}
displayPercentage={true}
tooltipBottomLabel="Co-op term: "
/>
</div>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.academics}
rightPage={pageRoutes.lifestyleAndInterests}
/>
</div>
);
}

View File

@ -1,234 +0,0 @@
import {
D1,
D2,
D3,
D4,
D5,
D6,
D7,
D8,
D9,
D10,
D11,
} from "data/demographics";
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 { BodyLink } from "@/components/BlankLink";
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 { Title } from "@/components/Title";
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 />
<Title>Demographics</Title>
<SectionHeader
title="Demographics"
subtitle="An insight into the demographics of UWs CS programs"
/>
<ComponentWrapper
heading="What program are you in?"
bodyText="There are a total of 106 respondents of the CS Class Profile. The majority of students are just in CS, due to CS being the largest program in size compared to CFM and CS/BBA. Breaking it down, 89 respondents were in CS, 12 were CS/BBA, and 5 were in CFM."
>
<div className={styles.graphContainer}>
<PieChart data={D1} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Please select the gender identity option(s) with which you identify."
bodyText={
<p>
Unsurprisingly, most respondents were men at around 69%. About 31%
of students identified as women or gender non-conforming. This
statistic has been steadily increasing throughout the years, as seen{" "}
<BodyLink href="https://uwaterloo.ca/women-in-computer-science/statistics">
here.
</BodyLink>{" "}
According to the same source, in 2017/2018 (when many 2022 graduates
were admitted), around 24% of CS admits, 34% of CFM admits, and 41%
of CS/BBA admits were women or queer. Underrepresented gender
identities is a popular topic in the tech community, and so it is
promising that a more diverse range of people are becoming
interested in CS! Take a look at clubs such as{" "}
<BodyLink href="https://wics.uwaterloo.ca/"> WiCS </BodyLink> and
<BodyLink href="https://www.techplusuw.com/"> Tech+</BodyLink> that
address these issues and work to provide an inclusive environment in
UW&apos;s tech scene.
</p>
}
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={D2} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper heading="Please indicate the pronouns that you use.">
<div className={styles.graphContainer}>
<PieChart
data={D3}
{...pieChartProps(isMobile, pageWidth)}
labelTextSize={20}
labelTextRadialOffset={-45}
/>
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Please select the racial category or categories with which you primarily identify."
bodyText={
<p>
The largest racial group was East Asian at about 64%, followed by
White at 17%, and South Asian at 12%. Note that certain respondents
have chosen two or more of the listed categories. We have counted
each of them as a separate entry rather than a category itself.
Check out clubs such as
<BodyLink href="https://www.techplusuw.com/"> Tech+</BodyLink>,
which supports ethnic minorities in tech!
</p>
}
align="left"
noBackground
>
<BarGraphVertical data={D4} {...barGraphProps(isMobile, pageWidth)} />
</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}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="Please select the sexual identity option(s) you identify with."
bodyText={
<p>
Over 27% of respondents identified as LGBTQ+. UW has plenty of
groups that support the LGBTQ+ community that can be found
<BodyLink href="https://uwaterloo.ca/human-rights-equity-inclusion/equity-office/pride-uwaterloo">
{" "}
here
</BodyLink>
. Clubs such as{" "}
<BodyLink href="https://www.techplusuw.com/"> Tech+ </BodyLink>
and <BodyLink href="https://ostem.clubs.wusa.ca/"> oSTEM </BodyLink>
support queer and trans students in tech and STEM environments!
</p>
}
align="right"
noBackground
>
<BarGraphVertical
data={D6}
{...barGraphProps(isMobile, pageWidth)}
widthAlternatingLabel={700}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Where did you live before coming to UW?"
bodyText="The UW computing programs receive the most students from the GTA/Toronto, as most people may expect. But its always great to meet people from all over the world."
align="right"
>
<WordCloud
data={D7}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What is the highest education level of your parents?"
bodyText="The most common education level of parents indicated by respondents was a Bachelor's Degree. That means that students will meet or surpass this level of education! The trend seems to be that children will follow in their parents' footsteps to graduate from a university. Find out later in the class profile how students want to continue past this stage of education..."
noBackground
>
<BarGraphVertical data={D8} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="What was your family income before entering your current UW program?"
bodyText={
<p>
Most families made more than the average family income in Canada in
2020 (
<BodyLink href="https://www150.statcan.gc.ca/t1/tbl1/en/tv.action?pid=1110001201">
$104,350
</BodyLink>
) The range of 51k to 200k was the most common among families. To
sustain a first-year tuition fee that can hover between $8,000 to
$55,000, it would make sense for many families to rely on other
sources of financial support.
</p>
}
align="right"
>
<BarGraphVertical
// TODO: change when histogram component is ready
data={D9}
{...barGraphProps(isMobile, pageWidth)}
/>
</ComponentWrapper>
<ComponentWrapper
heading="How many close relatives have attended UW?"
bodyText="Wow! The vast majority of students are the first in the family to be a UW graduate. This could be explained by older relatives receiving education in other countries, or simply the vast number of other universities in Canada."
align="left"
noBackground
>
<BarGraphVertical
data={D10}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="Please indicate your religion and/or spiritual affiliation."
bodyText="80 respondents identified themselves as non-religious, which is a surprising 72% of the total responses to this question. According to Statistics Canada, in 2019, 68% of Canadians reported being religious. However, this number has decreased over the years, and this is heavily reflected in the younger generations such as the students in this class profile."
align="right"
>
<BarGraphHorizontal
data={D11}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 220 } }}
/>
</ComponentWrapper>
<BottomNav leftPage={pageRoutes.home} rightPage={pageRoutes.academics} />
</div>
);
}

View File

@ -1,80 +0,0 @@
/* inconsolata-200 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 200;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-200.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-200.woff') format('woff');
}
/* inconsolata-300 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 300;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-300.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-300.woff') format('woff');
}
/* inconsolata-regular - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-regular.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-regular.woff') format('woff');
}
/* inconsolata-500 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 500;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-500.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-500.woff') format('woff');
}
/* inconsolata-600 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 600;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-600.woff2') format('woff2'),
/* Super Modern Browsers */
url('../public/fonts/inconsolata-v30-latin-600.woff') format('woff');
}
/* inconsolata-700 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 700;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-700.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-700.woff') format('woff');
}
/* inconsolata-800 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 800;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-800.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-800.woff') format('woff');
}
/* inconsolata-900 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 900;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-900.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-900.woff') format('woff');
}

View File

@ -1,261 +0,0 @@
import {
F1,
F2,
F3,
F4,
F5,
F6,
F7,
F8,
F9,
F10,
F11,
F13,
F14,
F15,
F16,
F12,
} 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 { Title } from "@/components/Title";
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 />
<Title>Friends</Title>
<SectionHeader
title="Friends"
subtitle="The friends you make in university are friends youll have for life."
/>
<ComponentWrapper
heading="Rate how social you are."
bodyText="It looks like most people were neither antisocial or extremely sociable."
align="right"
>
<BarGraphVertical
data={F1}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How would you describe yourself?"
bodyText="Introverts dominate CS at UW. Still, contrary to popular opinion, it seems that introverted people do not necessarily comprise such a large majority of the CS student population. Extroverts and ambiverts make up almost half of the CS student population!"
align="left"
noBackground
>
<div className={styles.graphContainer}>
<PieChart
data={F2}
{...pieChartProps(isMobile, pageWidth)}
labelWidth={145}
labelTextRadialOffset={-50}
/>
</div>
</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. This goes to show how university is an important point in life where people form their most valuable relationships!"
align="left"
>
<BarGraphVertical
data={F12}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How many close friends throughout university were also in your program?"
bodyText="For a lot of people, the majority of their friends are in the same program. Perhaps the shared classes, career goals, and pain from shared assignments make scheduling and conversations easier."
noBackground
>
<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 high friends in one way or another! Keeping in touch with high school friends can be especially difficult, given that high school friends often drift away from each other due to different career and/or academic paths."
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="Its nice to know that the majority of our respondents have a few friends that are going to be in their city post-grad."
noBackground
>
<BarGraphVertical data={F5} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="How often do you stay in touch with friends that you made during co-op?"
bodyText="Many people dont keep in touch with friends made during co-op. This makes sense as each co-op term only lasts a short period of time and a remote co-op experience can also affect friendships. It can also be difficult for many students to keep in touch afterwards due to the fact that interns can be from different programs and universities."
align="left"
>
<div className={styles.graphContainer}>
<PieChart
data={F6}
{...pieChartProps(isMobile, pageWidth)}
labelTextRadialOffset={-30}
labelTextSize={20}
minWidth={600}
/>
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How often do you stay in touch with friends that you made during school terms?"
bodyText="In comparison to co-op friends, more people keep in touch with friends made during school terms. This could be because they hang out with each other during multiple school terms while on campus."
noBackground
>
<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 the university experience. Due to all math faculty sequences having their 1A and 1B terms aligned, students take their shared core introductory courses at the same time. However, it is still possible to make friends in 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. These friend groups can come from classes, extracurriculars, and high school."
noBackground
>
<BarGraphVertical
data={F9}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="What is the average size of your friend groups?"
bodyText="Our respondents friend groups typically consist of 3-4 people."
align="left"
>
<BarGraphVertical
data={F10}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How open are you to meeting new people?"
bodyText="Although they are graduating, most of our respondents are still somewhat open to meeting new people. Meeting new people can make your life more exciting and make you discover new perspectives that change the way you approach life!"
noBackground
>
<BarGraphVertical
data={F11}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How many of your friendships were made after starting university?"
bodyText="For a lot of people, some or most friendships are made during university. This goes to show how university is an important point in life where people form their most valuable relationships!"
align="right"
>
<BarGraphVertical
data={F12}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</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 common ways include classes, mutual friends, and extracurriculars."
noBackground
>
<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 hang out. Looking at our data, hanging out at someones residence seems to be the most popular option. It makes sense as having fun outside of school buildings enables people to take their mind off schoolwork. In addition, MC and DC are fairly popular spots since MC has a variety of club offices, computer labs, and classrooms for studying, while DC has a library where many students study."
align="left"
>
<BarGraphVertical data={F14} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="What is your go-to activity when hanging out with friends?"
bodyText="There are a variety of activities enjoyed by everyone! Most people enjoy eating food with their friends - who doesn't love eating and trying out new restaurants? Talking and going to the gym are the social activities that are the next most favoured by students. Hanging out with friends doesn't have to be complicated!"
noBackground
>
<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! As mentioned previously, university is an experience where people make most of their long-term friends!"
align="right"
>
<div className={styles.graphContainer}>
<PieChart data={F16} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.postGrad}
rightPage={pageRoutes.miscellaneous}
/>
</div>
);
}

View File

@ -1,151 +0,0 @@
.main {
display: flex;
flex-direction: column;
align-items: center;
}
.main > * {
margin-bottom: calc(65rem / 16);
}
.title {
position: relative;
width: 80vw;
height: 90vh;
}
.titleImage {
position: absolute;
top: 10vh;
margin: auto;
max-width: 800px;
}
.titleImage img {
max-width: 100%;
height: auto;
}
.blurb {
position: absolute;
bottom: 10vh;
right: 10vw;
width: fit-content;
height: fit-content;
padding: calc(30rem / 16);
background-color: var(--translucent-accent);
border: calc(2rem / 16) solid var(--primary-text);
box-shadow: 0 calc(1rem / 16) calc(10rem / 16) var(--primary-accent);
border-radius: calc(50rem / 16);
z-index: 1;
}
.blurb h1 {
margin-top: 0;
}
.classYear {
color: var(--primary-text);
}
.classProfile {
color: var(--primary-heading)
}
.blurb h3 {
color: var(--primary-accent-light);
}
.decoratorSolid {
position: absolute;
top: 2vh;
right: 13vw;
width: 16vw;
height: 24vh;
background-color: var(--primary-accent-lighter);
opacity: 50%;
border-radius: calc(50rem / 16);
}
.decoratorDots {
position: absolute;
top: 40vh;
right: 0.8vw;
width: 11vw;
height: 36vh;
background-image: radial-gradient(var(--link) 35%, transparent 35%);
background-position: 0 0;
background-size: calc(25rem / 16) calc(25rem / 16);
z-index: -1;
}
.viewButton {
background: none;
display: flex;
border: none;
font-size: calc(30rem / 16);
color: var(--primary-accent-light);
font-weight: 700;
font-family: 'Inconsolata';
position: relative;
cursor: pointer;
padding: 0;
transition: color 0.5s ease-out;
}
.viewButton:hover {
color: var(--label);
}
.viewButton:after {
content: '';
position: absolute;
width: 100%;
height: calc(2rem / 16);
bottom: 0px;
background-color: var(--primary-accent-lighter);
cursor: pointer;
transition: background-color 0.5s ease-out;
}
.viewButton:hover:after {
background-color: var(--primary-accent-light);
}
@media screen and (max-width: 700px) {
.decoratorDots {
display: none;
}
.decoratorSolid {
display: none;
}
.titleImage {
top: 2vh;
}
.blurb {
right: 0;
top: 30vh;
margin: 0.5rem 0;
}
.blurb h1 {
font-size: calc(38rem / 16);
}
.blurb h3 {
font-size: calc(25rem / 16);
}
.viewButton {
font-size: calc(25rem / 16);
}
}
.homeSectionsStyles {
width: 70vw;
max-width: 1000px;
}

View File

@ -1,89 +1,11 @@
import { pageRoutes } from "data/routes";
import Link from "next/link";
import React from "react";
import { basePath } from "utils/getBasePath";
import { About } from "@/components/About";
import { BodyLink } from "@/components/BlankLink";
import { CenterWrapper } from "@/components/CenterWrapper";
import { Header } from "@/components/Header";
import { Sections } from "@/components/Sections";
import { Title } from "@/components/Title";
import styles from "./frontpage.module.css";
export default function Home() {
return (
<>
<Header />
<div className={styles.main}>
<Title>Home</Title>
<div className={styles.title}>
<div className={styles.titleImage}>
<img
src={basePath + "/images/frontPageTitle.png"}
alt="A picture of the University of Waterloo campus"
/>
</div>
<div className={styles.blurb}>
<h1 className={styles.classYear}>UW Computer Science 2022</h1>
<h1 className={styles.classProfile}>Class Profile</h1>
<h3>Welcome to UW Computer Science 2022 Class Profile.</h3>
<a href="#about">
<button className={styles.viewButton}>View</button>
</a>
</div>
<div className={styles.decoratorSolid} />
<div className={styles.decoratorDots} />
</div>
<About />
<CenterWrapper>
<h1>Preface</h1>
<p>
The 2022 CS Class Profile consists of data relevant to CS, CFM, and
CS/BBA students completing their undergrad in 2022. These were
combined with the knowledge that students in these programs tend to
have similar experiences, as they share many core courses. In the
standard co-op offering, CS and CFM take 4 years and 2 terms to
complete, while CS/BBA can take up to a full 5 years.
Click <Link href="/playground">here</Link> to visit the playground, test 6
updated
</p>
<p>
The University of Waterloos computer science programs are known to
be prestigious and well-known in Canada as well as across the world.
As of 2022, it ties for first place in Macleans university
rankings, and 25th internationally as a subject by the QS World
University rankings. For prospective students or anyone who is
interested in learning more about what the students are like, this
CS Class Profile will attempt to answer some of your questions, and
you may even learn a thing or two you didnt expect!
</p>
<p>
According to the{" "}
<b>
<BodyLink href="https://uwaterloo.ca/institutional-analysis-planning/university-data-and-statistics/student-data/degrees-granted-0">
Institutional Analysis & Planning (IAP)
</BodyLink>
</b>
, there were a 613 graduates from CS, CFM, and CS/BBA, leading to a
overall survey turnout of 17%. By program, this is a 17% turnout
from CS graduates, 22% turnout from CS/BBA graduates, and 14%
turnout from CFM graduates.
</p>
<p>
The survey questions were approved by the IAP, where all University
of Waterloo stakeholders that are interested in conducting a
non-academic research survey involving a large portion of the UW
population are reviewed and approved. The entirety of the survey
creation and data processing was done by the{" "}
<b>
<BodyLink href="https://csclub.uwaterloo.ca">
UW Computer Science Club
</BodyLink>
</b>
, so please check us out if you enjoy what you see!
</p>
</CenterWrapper>
<Sections data={pageRoutes} className={styles.homeSectionsStyles} />
</div>
</>
);
}

View File

@ -1,225 +0,0 @@
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>
);
}

View File

@ -1,268 +0,0 @@
import {
L1,
L2,
L3,
L4,
L5,
L6,
L7,
L8,
L9,
L10,
L11,
L12,
L13,
L14,
L16,
L17,
L18,
L19,
} from "data/lifestyle-and-interests";
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 { Header } from "@/components/Header";
import { PieChart } from "@/components/PieChart";
import { SectionHeader } from "@/components/SectionHeader";
import { Title } from "@/components/Title";
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 />
<Title>Lifestyle and Interests</Title>
<SectionHeader
title="Lifestyle and Interests"
subtitle="What did the class of 2022 do in their free time?"
/>
<ComponentWrapper
heading="Did you move back home during the beginning of the COVID-19 pandemic?"
bodyText="The vast majority of respondents moved back home during the beginning of the COVID-19 pandemic, which makes sense given the situation."
>
<div className={styles.graphContainer}>
<PieChart data={L1} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How many doses of the COVID-19 vaccination have you received?"
bodyText="Proof of vaccination used to be a requirement for entering campus, barring special circumstances. Here, we can see that everyone except for 2 people had 2 or more doses. The large majority had 3+ doses."
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={L2} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How did your outlook on religion change during university?"
bodyText="Although most of our respondents were never religious, most religious students continued to stay religious throughout their undergraduate years."
>
<BarGraphVertical
data={L3}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="Did you learn how to cook during university?"
bodyText="Only 12 people indicated that they have not learned to cook. As for the rest, more of them stated that they learned to cook during university as opposed to before. This may be because going to university is the first time that many students move out from their parents/guardians home and live on their own.
"
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={L4} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How many days are you physically active in a week now?"
bodyText="Contrary to stereotypes, most UW students are active at least a few days a week! CS is an especially sedentary major so its important to stay active and take care of your body."
>
<BarGraphVertical
data={L5}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How often did you pull all-nighters throughout university?"
bodyText="84 people have either never pulled an all-nighter or do so only once every few months. With decent time management skills, work is definitely doable and sleep does not have to be sacrificed."
noBackground
>
<BarGraphVertical data={L6} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading='Rate how strongly you agree with the following statement: "Throughout my university experience, I felt like I had enough time to pursue my own hobbies."'
bodyText="52 respondents agree or strongly agree with this statement, contrasted to the 33 who disagree or strongly disagree. Based on our data, It seems like many people did not find enough time for their hobbies. Workload can often pile up."
align="right"
>
<BarGraphVertical data={L7} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="How often did you attend parties/gatherings?"
bodyText="A lot of students attend social events to relieve some stress and build relationships. Many UW students are no exception. Although we are not known for our parties, they can still frequently be found in residential areas around campus."
align="left"
noBackground
>
<BarGraphHorizontal
data={L8}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 200 } }}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What time do you usually sleep?"
bodyText="Looks like we have a lot of night owls!"
align="right"
>
<BarGraphVertical data={L9} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="How many hours of sleep do you get on average per night?"
bodyText="Although many of our respondents sleep late, most people are getting 7+ hours every night. Our class schedules are typically somewhat flexible and morning classes are usually not super popular among students."
align="left"
noBackground
>
<BarGraphVertical data={L10} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="While on campus, how many days of the week do you eat out at a restaurant?"
bodyText="Waterloo students have a wide variety of options when it comes to food. We have a plaza filled with restaurants that serve all sorts of food such as Mexican, East Asian, Persian, Indian, etc. Although most students have learned to cook, we still enjoy eating out every so often."
align="right"
>
<BarGraphVertical
data={L11}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="What is your favourite restaurant to go to on/around campus?"
bodyText="With all the diverse restaurants around campus, it seems like the most popular food choices are sushi, noodles, and shawarma."
noBackground
>
<WordCloud
data={L12}
width={isMobile ? pageWidth / 1.5 : 800}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What is your LeetCode proficiency level?"
bodyText="Most respondents can consistently solve medium LeetCode questions, which are often asked by large tech companies during interviews. Some people also responded with being able to solve hard level questions on LeetCode, going above and beyond."
align="right"
>
<BarGraphHorizontal
data={L13}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 270 } }}
/>
</ComponentWrapper>
<ComponentWrapper
heading="How many side projects have you completed during university, if any?"
bodyText="Students invest time into side projects to show companies their software experiences and skills. Building side projects is a great way to compensate for a lack of relevant work experience. Many of our respondents have completed a few side projects. However, a large number of them have indicated that they have not done any at all during university. This could be explained by the time-consuming academic obligations that take away time to do projects. Furthermore, this also demonstrates that recent side projects are not the only factor to landing a job.
"
noBackground
>
<BarGraphVertical
data={L14}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How often do you attend hackathons now?"
bodyText="Similar to side projects, hackathons allow students to show companies their software skills and passion in technology. Despite this, hackathons are definitely not a necessity for graduating students. In fact, we see that the vast majority of our respondents never or very rarely attend hackathons currently."
align="right"
>
<div className={styles.graphContainer}>
<PieChart
data={L16}
{...pieChartProps(isMobile, pageWidth)}
labelTextSize={20}
minWidth={600}
/>
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Which extracurricular activities did you participate in?"
bodyText="Many of our respondents are involved with one or more extracurricular activities during university. These include sports, programming, council positions, and many more!"
noBackground
>
<WordCloud
data={L17}
width={isMobile ? pageWidth / 1.5 : 800}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Where is your favourite place to study on campus?"
bodyText="The most popular study locations according to our respondents are the Mathematics & Computer Building (MC) and the William G. Davis Computer Research Centre (DC), having 23 and 22 votes respectively. Other popular places include on residence, QNC, and E7."
align="right"
>
<BarGraphHorizontal
data={L18}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 50 } }}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Have you done an Undergraduate Research Assistantship (URA)?"
bodyText="URAs are great for students interested in gaining research experience. Students work under a professor of their choice and also get paid! Almost a quarter of the respondents had completed a URA."
noBackground
>
<PieChart data={L19} {...pieChartProps(isMobile, pageWidth)} />
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.coop}
rightPage={pageRoutes.intimacyAndDrugs}
/>
</div>
);
}

View File

@ -1,357 +0,0 @@
import {
H1,
H2,
H2i,
H2ii,
H3,
H3i,
H3ii,
H4,
H4i,
H4ii,
H5,
H5i,
H6,
H7,
H8,
H9,
H9i,
H10,
H11,
H12,
H13,
H14,
} from "data/mental-health";
import { pageRoutes } from "data/routes";
import React from "react";
import {
barGraphProps,
pieChartProps,
barGraphWidth,
} from "utils/defaultProps";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import { BarGraphVertical } from "@/components/BarGraph";
import { BodyLink } from "@/components/BlankLink";
import { BottomNav } from "@/components/BottomNav";
import { ComponentWrapper } from "@/components/ComponentWrapper";
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 styles from "./samplePage.module.css";
export default function Demographics() {
const pageWidth = useWindowDimensions().width;
const isMobile = useIsMobile();
return (
<div className={styles.page}>
<Header />
<Title>Mental Health</Title>
<SectionHeader title="Mental Health" />
<ComponentWrapper
heading="Have you struggled with mental health during undergrad?"
bodyText="Mental health is a serious issue that affects the well-being of countless students. More than half of our respondents reported that they have struggled with mental health during undergrad. Oftentimes, university can be the cause of stress, anxiety or other forms of mental health problems. Thus, it is crucial to take care of yourself as well as support one another during tough times."
>
<div className={styles.graphContainer}>
<PieChart data={H1} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Have you ever experienced burnout?"
bodyText="Burnouts are extremely common in our respondents, with the vast majority of people reporting that they have experienced it at some point. The constant demand for work is likely to leave students feeling overwhelmed or emotionally drained. Just keep in mind that it is completely normal to feel this way and remember to let yourself take breaks."
align="center"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={H2} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Do you feel burnout more during co-op or academic term?"
bodyText="Most of our respondents indicated that they are more likely to experience a burnout during their academic terms. This could be due to heavy course work and assessments, as well as interview preparation and co-op search. Co-op terms may be preferred because it gives students a break from studying."
align="right"
>
<div className={styles.graphContainer}>
<PieChart data={H2i} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Do you feel burnout more online or in person?"
bodyText="It seems like both online and in-person terms can cause burnout. It looks like for many respondents, being forced to learn online due to COVID-19 has helped a bit with burnout."
align="left"
noBackground
>
<BarGraphVertical
data={H2ii}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="Have you ever been to therapy?"
bodyText="The words therapy and counselling are often used interchangeably, but therapy is generally more long-term and focuses on you as an individual. Meanwhile, counselling is usually for a specific issue for a limited amount of time. Although some respondents have sought out therapy, this number is less than half of the number of respondents who reported struggling with mental health. This could speak to the need to have more accessible and available resources in regards to therapy around UW. In the meantime, if youre struggling with mental health, dont hesitate to reach out to professionals."
>
<div className={styles.graphContainer}>
<PieChart data={H3} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="If you havent been to therapy, have you considered going?"
bodyText="Around half of those who responded to this question reported that they have considered therapy. Again, this is almost double the number of respondents who have actually been to therapy."
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={H3i} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="If you have considered going to therapy, what factors prevented you from going?"
bodyText="Seeking professional help can dramatically improve one's well-being. However, many avoidance factors prevent people from doing so. According to our respondents, some of the most common barriers for them include the lack of information, money, stereotypes, and the lack of time."
align="right"
>
<BarGraphVertical
data={H3ii}
{...barGraphProps(isMobile, pageWidth)}
widthAlternatingLabel={1000}
minWidth={700}
lowerLabelDy="60px"
valueAxisLabelOffset={0}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Have you ever been to counselling?"
bodyText="Out of the 101 respondents who answered this question, 24 said yes to having gone to counselling before. This number is very similar to the number of people who have been to therapy."
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={H4} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="If you havent been to counselling, have you considered going?"
bodyText={
<p>
Not many of our respondents have considered going to counselling.
This is significantly less than the number of people who have
considered going to therapy. UW Health Services offers great
counselling services and resources for all students, you can check
them out
<BodyLink href="https://uwaterloo.ca/campus-wellness/counselling-services">
{" "}
here
</BodyLink>
.
</p>
}
align="left"
>
<div className={styles.graphContainer}>
<PieChart data={H4i} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="If you have considered going to counselling, what factors prevented you from going?"
bodyText="The factors that inhibit people from going to counselling are similar to those that limit people from trying out therapy."
align="right"
noBackground
>
<BarGraphVertical
data={H4ii}
{...barGraphProps(isMobile, pageWidth)}
widthAlternatingLabel={680}
lowerLabelDy="50px"
/>
</ComponentWrapper>
<ComponentWrapper
heading="Have you used UW Health Services for your mental health?"
bodyText={
<p>
UW Health Services is a program that provides accessible medical
services. Its great to see a chunk of our respondents were able to
utilize it for their benefit and we hope that these services
continue to be used even more in the future. University life is
stressful, and turning to UW Health Services is something you would
not be alone in doing. To book an appointment with them, you can
call (519) 888-4096 or{" "}
<BodyLink href="mailto:hsforms@uwaterloo.ca">
email hsforms@uwaterloo.ca
</BodyLink>{" "}
if you are unable to book by phone.
</p>
}
>
<div className={styles.graphContainer}>
<PieChart data={H5} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How was your experience with UW Health Services?"
bodyText="Our respondents have a wide range of opinions and feedback about their experiences with UW Health Services. Here is some of the feedback that was provided."
noBackground
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel
data={H5i}
circleDiameter={0}
width={barGraphWidth(isMobile, pageWidth)}
height={200}
/>
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How would you rate your mental health over your entire undergraduate career?"
bodyText="Overall, the majority of respondents rated their mental health over their undergrad career as a 3 or 4 out of 5."
align="right"
>
<BarGraphVertical
data={H7}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How would you rate your current mental health?"
bodyText="Similar to the question above, most students rated their current mental health as a 3 or 4 out of 5. However, more people indicated a mental health score of 4 or 55, showing a slight increase in general mental health status after graduation."
noBackground
>
<BarGraphVertical
data={H6}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How much do you value your mental health?"
bodyText="Thankfully, most people do highly value their mental health. As shown by the stats, most people gave a score on the higher end."
>
<BarGraphVertical
data={H8}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="What are some ways you have kept in touch with others during co-op and the pandemic?"
bodyText="Co-op and the pandemic can separate friends you make at UW. However, here are some ways that our respondents kept in touch with their friends."
align="right"
noBackground
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel
data={H9}
circleDiameter={0}
width={barGraphWidth(isMobile, pageWidth)}
height={200}
/>
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Please give any general comments about mental health in university."
bodyText="With mental health being such a large concern in university, many of our respondents have commented on this topic. Here are some quotes from students that describe how UWs environment affects students mental health as well as suggestions for improving mental health."
align="right"
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel
data={H9i}
circleDiameter={0}
width={barGraphWidth(isMobile, pageWidth)}
height={800}
/>
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Do you feel like you have enough support for your mental health?"
bodyText="Most of our respondents indicated that they did not feel like they received enough support for their mental health. Its important to remember that there are people and services out there looking to help you. UW is a very stressful environment, so dont be afraid to turn to loved ones or professionals for help."
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={H10} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What do you do to help cope with your mental health issues?"
align="right"
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel
data={H11}
circleDiameter={0}
width={barGraphWidth(isMobile, pageWidth)}
height={250}
/>
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How does mental health affect different aspects of your life (e.g., relationships, studies, career)?"
align="center"
noBackground
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel
data={H12}
circleDiameter={0}
width={barGraphWidth(isMobile, pageWidth)}
height={600}
/>
</div>
</ComponentWrapper>
<ComponentWrapper
heading='Do you feel "senioritis" at this time?'
bodyText="Most students feel “senioritis” at the time of this survey. This makes sense, as theyre so close to being free."
align="right"
>
<div className={styles.graphContainer}>
<PieChart data={H13} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What do you think UW can do better to accommodate your mental health?"
align="center"
noBackground
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel
data={H14}
circleDiameter={0}
width={barGraphWidth(isMobile, pageWidth)}
height={500}
/>
</div>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.miscellaneous}
rightPage={pageRoutes.personal}
/>
</div>
);
}

View File

@ -1,142 +0,0 @@
import { M1, M2, M3, M4, M5, M6, M7 } from "data/miscellaneous";
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 { BodyLink } from "@/components/BlankLink";
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 { Title } from "@/components/Title";
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 />
<Title>Miscellaneous</Title>
<SectionHeader title="Miscellaneous" subtitle="" />
<ComponentWrapper
heading="How often did you cry per school term?"
bodyText="University is an experience where students face all kinds of rough patches as they grow. To those reading this and feeling down, it does get better! We all need someone to talk to when things don't go well, so don't bury your feelings away with you."
noBackground
>
<BarGraphVertical
data={M1}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How many hours per week do you spend on the UW subreddit?"
bodyText={
<p>
Theres a reason why{" "}
<BodyLink href="https://www.reddit.com/r/uwaterloo/">
r/uwaterloo{" "}
</BodyLink>
is one of the most popular university Reddit communities. It is very
highly propelled by students, with over 87k members as of January
2023, and even has some profs on there too! Check it out if you
havent heard of it!
</p>
}
align="right"
>
<BarGraphVertical
data={M2}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="If you had to restart university, what program would you enroll in?"
bodyText="As expected, most respondents would still choose CS if given the chance to start over, but its great to see some respondents wanting to branch out into other areas like business and psychology! University provides you a great avenue to explore your interests, and its totally okay if the program you start out in is different from what you end up liking!"
noBackground
>
<BarGraphHorizontal
data={M3}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 220 } }}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Have you considered dropping/transferring out of your program?"
bodyText="Roughly a quarter of respondents have considered dropping out at some point. Staying in a program that doesn't align with your interests or is too demanding are probably the main reasons a student might consider switching out to another program."
align="right"
>
<div className={styles.graphContainer}>
<PieChart data={M4} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Have you considered dropping out of university or transferring to another university?"
bodyText="Around one in six respondents thought about leaving or transferring, so youre not alone if you have also considered this option! Wanting to transfer to another university can be caused by students feeling lonely in their program, feeling overwhelmed by the schoolwork required in that program, or disliking the UW campus/campus life."
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={M5} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="If you couldn't go to UW, what would you have done instead?"
bodyText="The University of Toronto (UofT) was a popular answer possibly due to similarly reputable CS programs and for their research, but for better or for worse, all of our students choose UW instead. Meanwhile, the University of British Columbia (UBC) is known for its visually-appealing campus and number of highly-ranked programs, which could also explain its popularity."
align="right"
>
<WordCloud
data={M6}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="In what areas have you grown that are unrelated to CS?"
bodyText="University is an unforgettable, life-changing, and learning experience that we only get once in a lifetime! Make the most out of it!"
align="center"
noBackground
>
<WordCloud
data={M7}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.friends}
rightPage={pageRoutes.mentalHealth}
/>
</div>
);
}

View File

@ -1,112 +0,0 @@
import { P2, P3, P4, P5, P6, P7, P8, P9 } from "data/personal";
import { pageRoutes } from "data/routes";
import React from "react";
import { BottomNav } from "@/components/BottomNav";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { QuotationCarousel } from "@/components/QuotationCarousel";
import { SectionHeader } from "@/components/SectionHeader";
import { Title } from "@/components/Title";
import styles from "./samplePage.module.css";
export default function Personal() {
return (
<div className={styles.page}>
<Header />
<Title>Personal</Title>
<SectionHeader title="Personal" subtitle="Life lessons from students" />
<ComponentWrapper
heading="What is your favourite memory from your time at UW?"
bodyText="Most students' favourite memories relate to their time spent with friends and significant others! This goes to show how important the people around us are!"
align="right"
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel data={P2} circleDiameter={0} height={300} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What is one thing that you wish you could tell your first year self?"
bodyText="In summary, don't spend too much time worrying about your grades or co-op during university. Develop new hobbies, be more open-minded, and talk to more people. There's a lot to experience in university that you don't want to miss or regret not being a part of. And as always, remember to drink responsibly!"
noBackground
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel data={P3} circleDiameter={0} height={300} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What is your favourite inspirational quote/words to live by?"
align="right"
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel data={P4} circleDiameter={0} height={300} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What is the nicest thing a classmate did for you?"
bodyText="Any small act of kindness can make someone else's day and possibly remain etched in their memory for a lifetime. We see that a lot of respondents' classmates helped them with their assignments and exams. Some respondents fondly remember when their classmate asked them if they were okay and struck up a conversation with them."
noBackground
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel data={P5} circleDiameter={0} height={300} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What is the best life hack/tip?"
bodyText="We have a wide range of life hacks about submitting assignments, coding shortcuts, and living healthily. Take notes and use them to your advantage!"
align="right"
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel data={P6} circleDiameter={0} height={300} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What is the best lesson you learned from your time at UW?"
bodyText="In short, challenge yourself to get out of your comfort zone; new opportunities and experiences can help you grow and you might even find something new that you really enjoy! A lot of the small, insignificant things you worry about won't matter in the end. Most importantly, be sure to take care of yourself, enjoy your life and savour each moment!"
noBackground
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel data={P7} circleDiameter={0} height={300} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What is one aspect of your life that makes you the happiest?"
bodyText="Both romantic and platonic relationships, as well as hobbies, are the areas of respondents lives that make them the happiest!"
align="right"
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel data={P8} circleDiameter={0} height={300} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What advice would you give current/future CS students at UW?"
bodyText="The main takeaways here are to be social, take care of yourself and your mental health, and do things beyond just school and co-op. UW is a truly unique experience and you should try to make the most of all aspects of it!"
noBackground
align="center"
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel
data={P9}
circleDiameter={0}
height={500}
width={800}
/>
</div>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.mentalHealth}
rightPage={pageRoutes.contributors}
/>
</div>
);
}

View File

@ -1,15 +0,0 @@
.page {
padding: calc(8rem / 16);
}
.barGraphDemo {
border: calc(1rem / 16) solid black;
}
.quotationCarouselDemo {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(48rem / 16);
margin: calc(32rem / 16);
}

View File

@ -1,304 +1,11 @@
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { BoxPlot } from "components/Boxplot";
import {
mockCategoricalData,
moreMockCategoricalData,
mockStackedBarKeys,
mockStackedBarGraphData,
mockBoxPlotData,
mockLineData,
mockQuoteData,
mockQuoteDataLong,
mockPieData,
mockTimelineData,
mockGroupedBarGraphData,
} from "data/mocks";
import { pageRoutes } from "data/routes";
import React from "react";
import { Color } from "utils/Color";
import { About } from "@/components/About";
import {
GroupedBarGraphHorizontal,
GroupedBarGraphVertical,
} from "@/components/GroupedBarGraph";
import { LineGraph } from "@/components/LineGraph";
import { PieChart } from "@/components/PieChart";
import { QuotationCarousel } from "@/components/QuotationCarousel";
import { Sections } from "@/components/Sections";
import {
StackedBarGraphVertical,
StackedBarGraphHorizontal,
} from "@/components/StackedBarGraph";
import { Timeline } from "@/components/Timeline";
import { BottomNav } from "../components/BottomNav";
import { CenterWrapper } from "../components/CenterWrapper";
import { ColorPalette } from "../components/ColorPalette";
import { WordCloud } from "../components/WordCloud";
import styles from "./playground.module.css";
export default function Home() {
return (
<div className={styles.page} suppressHydrationWarning>
<>
<h1>Playground</h1>
<p>Show off your components here!</p>
<ColorPalette />
<h2>
<code>Text Styles</code>
</h2>
<h1>h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1</h1>
<h2>h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2</h2>
<h3>h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3</h3>
<h4>h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4</h4>
<p>p p p p p p p p p p p p p p p p p p p p p p p p p p p p</p>
<a href="#">a a a a a a a a a a a a a a a a a a a a a a a a a a a a</a>
<h2>
<code>{"<PieChart />"}</code>
</h2>
<div style={{ padding: "30px" }}>
<PieChart data={mockPieData} width={800} labelWidth={215} />
</div>
<h2>
<code>{"<BarGraphHorizontal />"}</code>
</h2>
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={800}
height={500}
margin={{
top: 25,
bottom: 40,
left: 150,
right: 20,
}}
/>
<h2>
<code>{"<BarGraphVertical />"}</code>
</h2>
<p>
<code>{"<BarGraphVertical />"}</code> takes the same props as{" "}
<code>{"<BarGraphHorizontal />"}</code>.
</p>
<BarGraphVertical
className={styles.barGraphDemo}
data={mockCategoricalData}
width={800}
height={500}
margin={{
top: 20,
bottom: 80,
left: 60,
right: 20,
}}
/>
<h2>
<code>{"<WordCloud />"}</code>
</h2>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
/>
<h2>
<code>{"<StackedBarGraphVertical />"}</code>
</h2>
<StackedBarGraphVertical
width={600}
height={400}
keys={mockStackedBarKeys}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
]}
data={mockStackedBarGraphData}
margin={{
top: 20,
left: 28,
right: 20,
bottom: 20,
}}
/>
<h2>
<code>{"<StackedBarGraphHorizontal />"}</code>
</h2>
<p>
<code>{"<StackedBarGraphHorizontal />"}</code> takes the same props as{" "}
<code>{"<StackedBarGraphVertical />"}</code>.
</p>
<StackedBarGraphHorizontal
width={600}
height={400}
keys={mockStackedBarKeys}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
]}
data={mockStackedBarGraphData}
margin={{
top: 60,
left: 20,
right: 20,
bottom: 40,
}}
/>
<h2>
<code>{"<Timeline />"}</code>
</h2>
<Timeline data={mockTimelineData} />
<h2>
<code>{"<Textbox />"}</code>
</h2>
<CenterWrapper>
<h1>Preface</h1>
<p>
The CS Class Profile consists of data relevant to CS, CFM, and CS/BBA
students. These were combined with the knowledge that students in
these programs tend to have similar experiences, as many of the same
CS required courses are shared. In the standard co-op offering, CS and
CFM take 4 years and 2 semesters to complete, while CS/BBA can take up
to a full 5 years.
</p>
<p>
Computer Science (and the others) is known to be a very prestigious
program, and is very well known in Canada as well as across the world.
For prospective students or anyone who is interested in learning more
about what the students are like, this CS Class Profile will attempt
to answer some of your questions, and you may even learn a thing or
two you didnt expect!
</p>
<p>
The survey questions were approved by the Institutional Analysis &
Planning, where all University of Waterloo stakeholders that are
interested in conducting a non-academic research survey involving a
large portion of the UWaterloo population are reviewed and approved.
The entirety of the survey creation and data processing was done by
the UW Computer Science Club, so please check us out if you enjoy what
you see!
</p>
</CenterWrapper>
<h2>
<code>{"<LineGraph />"}</code>
</h2>
<LineGraph
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
data={mockLineData}
width={600}
height={400}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
/>
<h2>
<code>{"<Sections />"}</code>
</h2>
<Sections data={pageRoutes} />
<h2>
<code>{"<About />"}</code>
</h2>
<About />
<h2>
<code>{"<BoxPlot />"}</code>
</h2>
<BoxPlot
width={600}
height={400}
data={mockBoxPlotData}
margin={{
top: 20,
left: 20,
}}
/>
<h2>
<code>{"<QuotationCarousel />"}</code>
</h2>
<div className={styles.quotationCarouselDemo}>
<QuotationCarousel data={mockQuoteData} circleDiameter={0} />
<QuotationCarousel
data={mockQuoteDataLong}
width={800}
height={160}
circleDiameter={180}
/>
</div>
<h2>
<code>{"<BottomNav />"}</code>
</h2>
<BottomNav
leftPage={pageRoutes.demographics}
rightPage={pageRoutes.coop}
></BottomNav>
<h2>
<code>{"<GroupedBarGraphVertical />"}</code>
</h2>
<GroupedBarGraphVertical
className={styles.barGraphDemo}
data={mockGroupedBarGraphData}
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,
}}
/>
<h2>
<code>{"<GroupedBarGraphHorizontal />"}</code>
</h2>
<p>
<code>{"<GroupedBarGraphHorizontal />"}</code> takes the same props as{" "}
<code>{"<GroupedBarGraphVertical />"}</code>.
</p>
<GroupedBarGraphHorizontal
className={styles.barGraphDemo}
data={mockGroupedBarGraphData}
barColors={[Color.primaryAccentLight, Color.secondaryAccentLight]}
barHoverColorsMap={{
[Color.primaryAccentLight]: Color.primaryAccent,
[Color.secondaryAccentLight]: Color.secondaryAccent,
}}
width={600}
height={400}
margin={{
top: 20,
bottom: 40,
left: 60,
right: 20,
}}
/>
</div>
test 6 updated
</>
);
}

View File

@ -1,145 +0,0 @@
import { P1, P2, P3, P4, P5, P6, P7, P8 } from "data/post-grad";
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 { Title } from "@/components/Title";
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 />
<Title>Post-grad</Title>
<SectionHeader
title="Post-grad"
subtitle="Furthering your Computer Science Academic Journey"
/>
<ComponentWrapper
heading="Do you plan on pursuing postgraduate education?"
bodyText="There are a total of 103 respondents to this section. There is a large number of students not pursuing postgraduate studies. Postgraduate education is not necessarily for everyone!"
align="center"
noBackground
>
<div className={styles.graphContainer}>
<PieChart
data={P1}
{...pieChartProps(isMobile, pageWidth)}
labelTextSize={20}
minWidth={500}
/>
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Have you secured a full-time position post-grad? "
bodyText="Most students have secured a full-time position, but how many of those received return offers from the companies that theyve interned at? Regardless, it seems that the 2 years worth of work experience in the co-op program has paid off!"
>
<div className={styles.graphContainer}>
<PieChart data={P2} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Are you returning to a prior co-op?"
bodyText="It looks like most people that have a full-time position have gotten it from a return offer! This goes to show how the co-op program improves the students' employability and allows them to find jobs that they enjoy."
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={P6} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Where will you be working from post grad? (City, State/Province, Country)"
bodyText="New York and California are huge hot spots here, and its great to see that these programs can propel students to go to so many different places. Interestingly, a large majority of respondents will be working in the USA post-grad. This brain drain shows the wealth of opportunities available in computer science in the USA compared to Canada."
align="right"
>
<WordCloud
data={P3}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="How many offers did you decide between?"
bodyText="Over half of the respondents only had to decide between 1 or 2 offers and 35% of them chose between 3+ offers!"
noBackground
>
<BarGraphVertical data={P4} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="How many onsites/interviews did you get?"
bodyText="49 out of 69 respondents had at least one onsite/interview. Out of these students, more people had at least 4 of them! Note that some respondents may not have had any interviews because they could be taking a return offer. "
align="right"
>
<BarGraphHorizontal
data={P5}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={barGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What will be your first-year total compensation in CAD?"
bodyText="The tech field has interesting levels of annual compensation - these numbers speak for themselves… Compensation can include a combination of salary, signing, first-year stock, and bonus. Many numbers are converted from USD to CAD. The conversion rate was approximately 1 USD = 1.26 CAD during the time frame of the survey."
noBackground
>
<BarGraphVertical
data={P7}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin }}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What field/career path will you be in post-grad?"
bodyText="Computer science degrees can lead to so many different things these days! Web development is a popular field with the presence of web apps. Artificial intelligence and data science are also becoming increasingly popular fields as they continue to innovate our approaches to solving business problems. Cloud computing is also growing in demand by virtualizing IT infrastructure, reducing its costs, and improving its scalability."
align="right"
>
<WordCloud
data={P8}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={10}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.intimacyAndDrugs}
rightPage={pageRoutes.friends}
/>
</div>
);
}

View File

@ -1,34 +0,0 @@
.page {
display: flex;
flex-direction: column;
justify-content: center;
}
.graphContainer {
padding: 0 calc(70rem / 16);
}
.quotationCarouselContainer {
display: flex;
flex-direction: column;
gap: calc(48rem / 16);
margin: calc(32rem / 16);
}
@media screen and (max-width: 1200px) {
.graphContainer {
padding: 0 calc(40rem / 16);
}
}
@media screen and (max-width: 1100px) {
.graphContainer {
padding: 0 calc(20rem / 16);
}
}
@media screen and (max-width: 900px) {
.graphContainer {
padding: 0;
}
}

View File

@ -1,313 +0,0 @@
import {
mockBoxPlotData,
mockCategoricalData,
mockLineData,
moreMockCategoricalData,
} from "data/mocks";
import { pageRoutes } from "data/routes";
import React from "react";
import { Color } from "utils/Color";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
import { BottomNav } from "@/components/BottomNav";
import { BoxPlot } from "@/components/Boxplot";
import { ComponentSwitcher } from "@/components/ComponentSwitcher";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { LineGraph } from "@/components/LineGraph";
import { SectionHeader } from "@/components/SectionHeader";
import { SectionWrapper } from "@/components/SectionWrapper";
import { WordCloud } from "@/components/WordCloud";
import styles from "./samplePage.module.css";
export default function SamplePage() {
const { width } = useWindowDimensions();
const isMobile = useIsMobile();
// For components that are in the side wrappers, it looks better if they fill a certain amount of width, so we can make the width dynamic like this
const defaultGraphWidth = isMobile ? width / 1.25 : width / 2;
const defaultGraphHeight = 500;
// Make vars for common configs such as common margins
const defaultVerticalBarGraphMargin = {
top: 20,
bottom: 80,
left: 60,
right: 20,
};
const defaultHorizontalBarGraphMargin = {
top: 20,
bottom: 80,
left: 120,
right: 20,
};
return (
<div className={styles.page}>
<Header />
<SectionWrapper title="Transfer" />
<SectionHeader
title="Demographics"
subtitle="An insight into the demographics of UWs CS programs"
/>
<ComponentWrapper
heading="TESTING?"
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."
align="right"
noBackground
>
<ComponentSwitcher
graphList={[
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultHorizontalBarGraphMargin}
key={1}
/>,
<LineGraph
data={mockLineData}
width={defaultGraphWidth}
height={417}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
key={1}
/>,
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultHorizontalBarGraphMargin}
key={1}
/>,
<LineGraph
data={mockLineData}
width={defaultGraphWidth}
height={417}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
key={1}
/>,
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultHorizontalBarGraphMargin}
key={1}
/>,
<LineGraph
data={mockLineData}
width={defaultGraphWidth}
height={417}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
key={1}
/>,
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultHorizontalBarGraphMargin}
key={1}
/>,
<LineGraph
data={mockLineData}
width={defaultGraphWidth}
height={417}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
key={1}
/>,
]}
buttonList={["1A", "1B", "2A", "2B", "3A", "3B", "4A", "4B"]}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
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."
>
<BarGraphVertical
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultVerticalBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
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."
align="center"
noBackground
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
// For components that we don't want to match the width necessarily we can provide direct values
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="right">
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
// You can override specific margins if needed
margin={defaultHorizontalBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
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."
align="left"
noBackground
>
<BarGraphHorizontal
className={styles.barGrapDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultHorizontalBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="left">
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultHorizontalBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
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."
align="left"
noBackground
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in? " align="right">
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
align="center"
noBackground
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="left">
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
width={defaultGraphWidth}
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
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."
align="left"
>
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultHorizontalBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
align="center"
noBackground
>
<BoxPlot
width={600}
height={400}
data={mockBoxPlotData}
margin={{
top: 20,
left: 20,
}}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
align="right"
bodyText="Pariatur deserunt aute laborum ea adipisicing. Labore labore ipsum duis nisi ea incididunt ipsum occaecat. Ut occaecat et exercitation incididunt sit sit duis deserunt velit culpa nisi et dolore."
>
<LineGraph
data={mockLineData}
width={600}
height={400}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
/>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.demographics}
rightPage={pageRoutes.contributors}
></BottomNav>
</div>
);
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 115 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Some files were not shown because too many files have changed in this diff Show More