www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into add-scrollbar
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Shahan Nedadahandeh 2022-12-28 01:54:51 -05:00
parent b8763a680a 743f050ec8
commit 903a8e1b29
20 changed files with 977 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/BarGraph.tsx
View File

@ -1,17 +1,15 @@
import { AxisBottom, AxisLeft } from "@visx/axis";
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
import { localPoint } from "@visx/event";
import { GridColumns, GridRows } from "@visx/grid";
import { Group } from "@visx/group";
import { Point } from "@visx/point";
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 { TooltipWrapper } from "./TooltipWrapper";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./BarGraph.module.css";
@ -154,17 +152,11 @@ export const BarGraphHorizontal = withTooltip<BarGraphProps, TooltipData>(
<Group className={styles.barGroup} key={`bar-${barName}`}>
<Bar
onMouseMove={(e) => {
const eventSvgCoords = localPoint(
// ownerSVGElement is given by visx docs but not recognized by typescript
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
e.target.ownerSVGElement as Element,
e
) as Point;
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: getValue(d).toString(),
tooltipTop: eventSvgCoords.y,
tooltipLeft: eventSvgCoords.x,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
onMouseOut={hideTooltip}
@ -327,17 +319,11 @@ export const BarGraphVertical = withTooltip<BarGraphProps, TooltipData>(
<Group className={styles.barGroup} key={`bar-${barName}`}>
<Bar
onMouseMove={(e) => {
const eventSvgCoords = localPoint(
// ownerSVGElement is given by visx docs but not recognized by typescript
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
e.target.ownerSVGElement as Element,
e
) as Point;
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: getValue(d).toString(),
tooltipTop: eventSvgCoords.y,
tooltipLeft: eventSvgCoords.x,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
onMouseOut={hideTooltip}

93
components/Boxplot.tsx
View File

@ -11,7 +11,7 @@ import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withToolti
import React from "react";
import { Color } from "utils/Color";
import { TooltipWrapper } from "./TooltipWrapper";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./Boxplot.module.css";
@ -96,8 +96,8 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
valueAxisLabelTopOffset = 5,
valueAxisLabelLeftOffset = 10,
categoryAxisLabelLeftOffset = 30,
toolTipTopOffset = 20,
toolTipLeftOffset = 5,
toolTipTopOffset = 0,
toolTipLeftOffset = 0,
categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
boxPlotWidthFactor = 0.4,
@ -149,6 +149,21 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
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}>
@ -254,81 +269,23 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
strokeWidth={strokeWidth}
valueScale={yScale}
minProps={{
onMouseOver: () => {
showTooltip({
tooltipTop:
(yScale(getMin(d)) ?? 0) + toolTipTopOffset,
tooltipLeft:
xScale(getX(d))! +
constrainedWidth +
toolTipLeftOffset,
tooltipData: {
...d.boxPlot,
category: getX(d),
},
});
},
onMouseLeave: () => {
hideTooltip();
},
onMouseMove: mouseOverEventHandler(d),
onMouseLeave: hideTooltip,
}}
maxProps={{
onMouseOver: () => {
showTooltip({
tooltipTop:
(yScale(getMax(d)) ?? 0) + toolTipTopOffset,
tooltipLeft:
xScale(getX(d))! +
constrainedWidth +
toolTipLeftOffset,
tooltipData: {
...d.boxPlot,
category: getX(d),
},
});
},
onMouseLeave: () => {
hideTooltip();
},
onMouseMove: mouseOverEventHandler(d),
onMouseLeave: hideTooltip,
}}
boxProps={{
onMouseOver: () => {
showTooltip({
tooltipTop:
(yScale(getMedian(d)) ?? 0) + toolTipTopOffset,
tooltipLeft:
xScale(getX(d))! +
constrainedWidth +
toolTipLeftOffset,
tooltipData: {
...d.boxPlot,
category: getX(d),
},
});
},
onMouseMove: mouseOverEventHandler(d),
strokeWidth: 0,
onMouseLeave: () => {
hideTooltip();
},
onMouseLeave: hideTooltip,
}}
medianProps={{
style: {
stroke: Color.label,
},
onMouseOver: () => {
showTooltip({
tooltipTop:
(yScale(getMedian(d)) ?? 0) + toolTipTopOffset,
tooltipLeft:
xScale(getX(d))! +
constrainedWidth +
toolTipLeftOffset,
tooltipData: {
...d.boxPlot,
category: getX(d),
},
});
},
onMouseMove: mouseOverEventHandler(d),
onMouseLeave: () => {
hideTooltip();
},

2
components/ComponentWrapper.module.css
View File

@ -76,7 +76,7 @@
}
.horizontalScrollOnMobile {
overflow: scroll;
overflow-x: scroll;
}
}

3
components/GroupedBarGraph.module.css
View File

@ -2,7 +2,6 @@
display: flex;
flex-direction: column;
align-items: center;
width: min-content;
}
.barBackground {
@ -25,4 +24,4 @@
display: flex;
margin: calc(16rem / 16);
justify-content: center;
}
}

29
components/GroupedBarGraph.tsx
View File

@ -1,11 +1,9 @@
import { AxisBottom, AxisLeft } from "@visx/axis";
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
import { localPoint } from "@visx/event";
import { GridColumns, GridRows } 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 { Bar, BarGroup, BarGroupHorizontal } from "@visx/shape";
import { BarGroupBar as BarGroupBarType } from "@visx/shape/lib/types";
@ -13,7 +11,7 @@ import { withTooltip } from "@visx/tooltip";
import React, { useState } from "react";
import { Color } from "utils/Color";
import { TooltipWrapper } from "./TooltipWrapper";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./GroupedBarGraph.module.css";
@ -257,17 +255,12 @@ export const GroupedBarGraphVertical = withTooltip<
{barGroup.bars.map((bar) => (
<HoverableBar
onMouseMove={(e) => {
const eventSvgCoords = localPoint(
// ownerSVGElement is given by visx docs but not recognized by typescript
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
e.target.ownerSVGElement as Element,
e
) as Point;
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: bar.value.toString(),
tooltipTop: eventSvgCoords.y,
tooltipLeft: eventSvgCoords.x,
tooltipTop: tooltipPos.y,
tooltipLeft: tooltipPos.x,
});
}}
onMouseOut={hideTooltip}
@ -504,17 +497,11 @@ export const GroupedBarGraphHorizontal = withTooltip<
{barGroup.bars.map((bar) => (
<HoverableBar
onMouseMove={(e) => {
const eventSvgCoords = localPoint(
// ownerSVGElement is given by visx docs but not recognized by typescript
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
e.target.ownerSVGElement as Element,
e
) as Point;
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: bar.value.toString(),
tooltipTop: eventSvgCoords.y,
tooltipLeft: eventSvgCoords.x,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
onMouseOut={hideTooltip}

16
components/LineGraph.tsx
View File

@ -1,18 +1,16 @@
import { AxisBottom, AxisLeft } from "@visx/axis";
import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
import { localPoint } from "@visx/event";
import { GridColumns, GridRows } 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 { LinePath } from "@visx/shape";
import { withTooltip } from "@visx/tooltip";
import React from "react";
import { Color } from "utils/Color";
import { TooltipWrapper } from "./TooltipWrapper";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./LineGraph.module.css";
@ -195,17 +193,11 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
<Group key={`line-${i}`}>
<LinePath
onMouseMove={(e) => {
const eventSvgCoords = localPoint(
// ownerSVGElement is given by visx docs but not recognized by typescript
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
e.target.ownerSVGElement as Element,
e
) as Point;
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: data.lines[i].label,
tooltipTop: eventSvgCoords.y,
tooltipLeft: eventSvgCoords.x,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
onMouseOut={hideTooltip}

10
components/PieChart.module.css
View File

@ -1,12 +1,20 @@
.piePath {
fill: var(--tertiary-background);
stroke: var(--label);
stroke-width: 1px;
stroke-dasharray: 0;
stroke-linecap: round;
}
.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));
}
}

34
components/PieChart.tsx
View File

@ -1,12 +1,10 @@
import { localPoint } from "@visx/event";
import { Group } from "@visx/group";
import { Point } from "@visx/point";
import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
import { Text } from "@visx/text";
import { withTooltip } from "@visx/tooltip";
import React from "react";
import { TooltipWrapper } from "./TooltipWrapper";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./PieChart.module.css";
@ -26,6 +24,8 @@ interface PieChartProps {
labelTextXOffset?: number;
/** Y-axis offset of the label text, in pixels. */
labelTextYOffset?: 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;
@ -41,11 +41,12 @@ export const PieChart = withTooltip<PieChartProps>(
data,
width,
labelWidth,
padRadius = width * 0.35,
innerRadius = width * 0.015,
padRadius = width * 0.25,
innerRadius = width * 0,
labelTextSize = 40,
labelTextXOffset = 0,
labelTextYOffset = 0,
minWidth,
getLabelDisplayValueFromDatum = (datum: PieChartData) =>
`${datum.category}`,
className,
@ -56,7 +57,14 @@ export const PieChart = withTooltip<PieChartProps>(
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}>
@ -64,8 +72,8 @@ export const PieChart = withTooltip<PieChartProps>(
<Pie
data={data}
pieValue={(d: PieChartData) => d.value}
cornerRadius={10}
padAngle={0.075}
cornerRadius={cornerRadius}
padAngle={padAngle}
padRadius={padRadius}
innerRadius={innerRadius}
outerRadius={pieWidth}
@ -80,17 +88,11 @@ export const PieChart = withTooltip<PieChartProps>(
>
<path
onMouseMove={(e) => {
const eventSvgCoords = localPoint(
// ownerSVGElement is given by visx docs but not recognized by typescript
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
e.target.ownerSVGElement as Element,
e
) as Point;
const tooltipPos = getTooltipPosition(e);
showTooltip({
tooltipData: `${arc.data.category}: ${arc.data.value}%`,
tooltipTop: eventSvgCoords.y,
tooltipLeft: eventSvgCoords.x,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
onMouseOut={hideTooltip}

1
components/StackedBarGraph.module.css
View File

@ -10,6 +10,7 @@
display: flex;
font-size: calc(16rem / 16);
top: 0;
justify-content: center;
}
.key {

17
components/StackedBarGraph.tsx
View File

@ -1,5 +1,4 @@
import { AxisLeft, AxisBottom } from "@visx/axis";
import { localPoint } from "@visx/event";
import { GridRows, GridColumns } from "@visx/grid";
import { Group } from "@visx/group";
import { LegendOrdinal } from "@visx/legend";
@ -12,7 +11,7 @@ import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withToolti
import React from "react";
import { Color } from "utils/Color";
import { TooltipWrapper } from "./TooltipWrapper";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./StackedBarGraph.module.css";
@ -194,12 +193,11 @@ export const StackedBarGraphVertical = withTooltip<
}}
onMouseMove={(event) => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
const eventSvgCoords = localPoint(event);
const left = bar.x + bar.width / 2;
const tooltipPos = getTooltipPosition(event);
showTooltip({
tooltipData: bar,
tooltipTop: eventSvgCoords?.y,
tooltipLeft: left,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
/>
@ -390,12 +388,11 @@ export const StackedBarGraphHorizontal = withTooltip<
}}
onMouseMove={(event) => {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
const eventSvgCoords = localPoint(event);
const left = bar.x + bar.width / 2;
const tooltipPos = getTooltipPosition(event);
showTooltip({
tooltipData: bar,
tooltipTop: eventSvgCoords?.y,
tooltipLeft: left,
tooltipLeft: tooltipPos.x,
tooltipTop: tooltipPos.y,
});
}}
/>

52
components/TooltipWrapper.tsx
View File

@ -1,3 +1,5 @@
import localPoint from "@visx/event/lib/localPoint";
import { Point } from "@visx/point";
import { Tooltip } from "@visx/tooltip";
import React from "react";
@ -11,6 +13,23 @@ type TooltipWrapperProps = {
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,
@ -32,4 +51,35 @@ const TooltipWrapper = ({
);
};
export { TooltipWrapper };
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 };

35
components/WordCloud.tsx
View File

@ -1,5 +1,3 @@
import { localPoint } from "@visx/event";
import { Point } from "@visx/point";
import { scaleLog } from "@visx/scale";
import { Text } from "@visx/text";
import { useTooltip, withTooltip } from "@visx/tooltip";
@ -9,7 +7,7 @@ import { Color } from "utils/Color";
import { inDevEnvironment } from "utils/inDevEnviroment";
import { useIsMobile } from "utils/isMobile";
import { TooltipWrapper } from "./TooltipWrapper";
import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
import styles from "./WordCloud.module.css";
@ -197,33 +195,22 @@ const WordCloudWords: React.FC<WordCloudWordsProps> = ({
className={styles.word}
textAnchor="middle"
onMouseMove={
((e: React.MouseEvent<SVGTextElement, 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 rootSVGLeft =
eventElement.parentElement?.parentElement?.getBoundingClientRect()
.left ?? 0;
const parentDivLeft =
eventElement.parentElement?.parentElement?.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;
((
e: React.MouseEvent<
SVGTextElement | SVGLineElement,
MouseEvent
>
) => {
const tooltipPos = getTooltipPosition(e);
if (word.text) {
showTooltip(
{
text: word.text,
value: (cloudWords[index] as WordData).value,
},
eventSvgCoords.x -
word.text.length * TOOLTIP_HORIZONTAL_SHIFT_SCALER +
alignmentOffset,
eventSvgCoords.y
tooltipPos.x -
word.text.length * TOOLTIP_HORIZONTAL_SHIFT_SCALER,
tooltipPos.y
);
}
}) as React.MouseEventHandler<SVGTextElement>

481
data/mental-health.ts Normal file
View File

@ -0,0 +1,481 @@
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.",
"Dogshit. long wait times. I was low priority since I was 'well functioning'",
"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 = [
"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.",
"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.",
"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. It’s 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 :(",
];

6
data/post-grad.ts
View File

@ -8,15 +8,15 @@ export const P1 = [
value: 20.4,
},
{
category: "Yes (Masters)",
category: "Masters",
value: 5,
},
{
category: "Yes (PhD)",
category: "PhD",
value: 4,
},
{
category: "Yes (PhD + Masters)",
category: "PhD + Masters",
value: 6.8,
},
];

6
pages/demographics.tsx
View File

@ -68,7 +68,11 @@ export default function Demographics() {
<ComponentWrapper heading="Please indicate the pronouns that you use.">
<div className={styles.graphContainer}>
<PieChart data={D3} {...pieChartProps(isMobile, pageWidth)} />
<PieChart
data={D3}
{...pieChartProps(isMobile, pageWidth)}
labelTextSize={20}
/>
</div>
</ComponentWrapper>

1
pages/friends.tsx
View File

@ -55,6 +55,7 @@ export default function Demographics() {
heading="Rate how social you are."
bodyText="Looks like most people consider themselves to be in the middle."
align="center"
noBackground
>
<BarGraphVertical
data={F1}

324
pages/mental-health.tsx Normal file
View File

@ -0,0 +1,324 @@
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 { 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 styles from "./samplePage.module.css";
export default function Demographics() {
const pageWidth = useWindowDimensions().width;
const isMobile = useIsMobile();
return (
<div className={styles.page}>
<Header />
<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 respondants reported that they have struggled with mental health during undergrad. Often times, university can be the cause of stress, anxiety or other forms of mental struggles. Thus, it is crutial 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 the amount of course work, assessments, and deadlines that must be met during an academic term. On the plus side, co-op terms give 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 in person and online terms can cause burnouts. Ultimately, it depends on the individual to decide which option works best for them."
align="left"
noBackground
>
<BarGraphVertical
data={H2ii}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="Have you ever been to therapy?"
bodyText="Although some people have seeked out therapy, this number is less than half of the number of people who reported struggling with mental health."
>
<div className={styles.graphContainer}>
<PieChart data={H3} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Have you considered going to therapy?"
bodyText="Around half of the people who responded this question reported that they have considered therapy. Again, this is almost double the number of respondents who have actually been to therapy. There might be many factors that influenced their decision, including money, time, lack of availability, and social stigma."
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="It’s almost common knowledge that seeking help from professionals 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 lack of information, money, stereotypes, and lack of time."
align="right"
>
<BarGraphVertical
data={H3ii}
{...barGraphProps(isMobile, pageWidth)}
widthAlternatingLabel={1000}
lowerLabelDy="60px"
/>
</ComponentWrapper>
<ComponentWrapper
heading="Have you ever been to counseling?"
bodyText="Out of the 101 people who has responded to this question, 24 reported yes. This number is very similar to the number of people who has been to therapy."
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={H4} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Have you considered going to counseling?"
bodyText="Interesting, not many of our respondents have considered going to conselling. This is the quit different from the number of people who have considered going to therapy. Perhaps counselling is a generally less well-known service or less referred to terminology than therapy."
align="left"
>
<div className={styles.graphContainer}>
<PieChart data={H4i} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="If you have considered going to counseling, what factors prevented you from going?"
bodyText="The factors that limit people from going to counseling 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="The number of respondents who have used UW health Services for their mental health is similar to those who have seeked out therapy or counselling. UW Health Service provides accessible medical services to all students, mental health being one of them. To book an appointment with them, you can call 519-888-4096."
>
<div className={styles.graphContainer}>
<PieChart data={H5} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How was your experience with UW Health Services?"
bodyText="The general consensus for the services offered by UW Health Services is that they are mediocre and often pretty busy. Here are some of thefeedbacks that our respondents provided:"
noBackground
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel
data={H5i}
circleDiameter={0}
width={barGraphWidth(isMobile, pageWidth)}
height={200}
/>
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Overall, how would you rate your mental health over your entire undergraduate career?"
bodyText="Overall, the majority rated their mental health over their entire undergrad a 3 / 5 or 4 / 5."
align="right"
>
<BarGraphVertical
data={H7}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How would you rate your current mental health?"
bodyText="Similarity, the majority rated their current mental health and 3 or 4 out of 5. However, more people indicate a mental health score of 4 or 5 out of 5, 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 side."
>
<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?"
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. First, here are some of their quotes about how UW’s environment affects students’ mental health. On the other hand, here are some quotes our respondents provided that may provide helpful 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 feel like they have enough support of their mental health. This could come from freinds, family, faculty stuff members, or professionals."
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 do feel “seniioritis” at the time of this survey."
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}
></BottomNav>
</div>
);
}

1
pages/miscellaneous.tsx
View File

@ -107,6 +107,7 @@ export default function Demographics() {
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}

7
pages/post-grad.tsx
View File

@ -41,7 +41,12 @@ export default function Demographics() {
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={P1} {...pieChartProps(isMobile, pageWidth)} />
<PieChart
data={P1}
{...pieChartProps(isMobile, pageWidth)}
labelTextSize={20}
minWidth={500}
/>
</div>
</ComponentWrapper>

15
pages/samplePage.tsx
View File

@ -17,6 +17,7 @@ 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";
@ -46,6 +47,7 @@ export default function SamplePage() {
return (
<div className={styles.page}>
<Header />
<SectionWrapper title="Transfer" />
<SectionHeader
title="Demographics"
subtitle="An insight into the demographics of UW’s CS programs"
@ -65,6 +67,7 @@ export default function SamplePage() {
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) => ({
@ -134,7 +137,11 @@ export default function SamplePage() {
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="center">
<ComponentWrapper
heading="What program are you in?"
align="center"
noBackground
>
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
@ -181,7 +188,11 @@ export default function SamplePage() {
margin={defaultHorizontalBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="center">
<ComponentWrapper
heading="What program are you in?"
align="center"
noBackground
>
<BoxPlot
width={600}
height={400}