Compare commits
No commits in common. "5db7c7ce6192991954d4c7789021b0f992990f0d" and "9526f1b0f5bdf5646096de52183789a9c7ab3f7c" have entirely different histories.
5db7c7ce61
...
9526f1b0f5
|
|
@ -1,59 +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;
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
import styles from "./About.module.css";
|
||||
|
||||
export function About() {
|
||||
return (
|
||||
<div className={styles.aboutWrapper}>
|
||||
<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>
|
||||
Offered from the Faculty of Mathematics as most commonly a co-op
|
||||
program, students usually attend 8 school and 6 co-op terms in their
|
||||
degree. However, CS is very flexible, as many students historically
|
||||
have dropped co-ops, taking terms off, and messing with their
|
||||
schedule to fit their desires.
|
||||
</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 offer from the Faculty of
|
||||
Mathematics and the School of Accounting and Finance, and has the
|
||||
same schedule (and flexibility) as CS.
|
||||
</p>
|
||||
<h4>CS/BBA</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 get 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 it’s a bit more work 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ import { Color } from "utils/Color";
|
|||
|
||||
import styles from "./BarGraph.module.css";
|
||||
|
||||
export interface BarGraphProps {
|
||||
interface BarGraphProps {
|
||||
data: BarGraphData[];
|
||||
/** Width of the entire graph, in pixels. */
|
||||
width: number;
|
||||
|
|
@ -33,7 +33,7 @@ export interface BarGraphProps {
|
|||
hoverLabelSize?: number;
|
||||
/** Label text for the category axis. */
|
||||
categoryAxisLabel?: string;
|
||||
/** Font size of the label for the category axis, in pixels. */
|
||||
/** 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;
|
||||
|
|
@ -43,10 +43,6 @@ export interface BarGraphProps {
|
|||
valueAxisLabelSize?: number;
|
||||
/** Controls the distance between the value axis label and the value axis. */
|
||||
valueAxisLabelOffset?: number;
|
||||
/** Controls the space between each bar. */
|
||||
barPadding?: number;
|
||||
/** Shift bottom axis labels to the right and extends grid lines to center bars in the graph if true */
|
||||
shiftBottomAxis?: boolean;
|
||||
}
|
||||
|
||||
interface BarGraphData {
|
||||
|
|
@ -72,9 +68,10 @@ export function BarGraphHorizontal(props: BarGraphProps) {
|
|||
valueAxisLabel,
|
||||
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
|
||||
valueAxisLabelOffset = 0,
|
||||
barPadding = 0.4,
|
||||
} = props;
|
||||
|
||||
const barPadding = 0.4;
|
||||
|
||||
const categoryMax = height - margin.top - margin.bottom;
|
||||
const valueMax = width - margin.left - margin.right;
|
||||
|
||||
|
|
@ -220,11 +217,9 @@ export function BarGraphVertical(props: BarGraphProps) {
|
|||
valueAxisLabel,
|
||||
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
|
||||
valueAxisLabelOffset = 0,
|
||||
barPadding = 0.4,
|
||||
shiftBottomAxis = false,
|
||||
} = props;
|
||||
|
||||
const gridRowExtension = shiftBottomAxis ? margin.left / 4 : 0; // extend the grid lines to center the bars in the graph
|
||||
const barPadding = 0.4;
|
||||
|
||||
const categoryMax = width - margin.left - margin.right;
|
||||
const valueMax = height - margin.top - margin.bottom;
|
||||
|
|
@ -233,7 +228,7 @@ export function BarGraphVertical(props: BarGraphProps) {
|
|||
const getValue = (d: BarGraphData) => d.value;
|
||||
|
||||
const categoryScale = scaleBand({
|
||||
range: [gridRowExtension, categoryMax + gridRowExtension],
|
||||
range: [0, categoryMax],
|
||||
domain: data.map(getCategory),
|
||||
padding: barPadding,
|
||||
});
|
||||
|
|
@ -247,10 +242,6 @@ export function BarGraphVertical(props: BarGraphProps) {
|
|||
const categoryPoint = (d: BarGraphData) => categoryScale(getCategory(d));
|
||||
const valuePoint = (d: BarGraphData) => valueScale(getValue(d));
|
||||
|
||||
const bottomAxisLabelsOffset = shiftBottomAxis
|
||||
? categoryScale.bandwidth() / 2
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<svg className={className} width={width} height={height}>
|
||||
<Group top={margin.top} left={margin.left}>
|
||||
|
|
@ -274,7 +265,7 @@ export function BarGraphVertical(props: BarGraphProps) {
|
|||
</Group>
|
||||
<GridRows
|
||||
scale={valueScale}
|
||||
width={categoryMax + gridRowExtension * 2}
|
||||
width={categoryMax}
|
||||
numTicks={5}
|
||||
stroke={Color.label}
|
||||
strokeWidth={4}
|
||||
|
|
@ -314,7 +305,7 @@ export function BarGraphVertical(props: BarGraphProps) {
|
|||
<AxisBottom
|
||||
scale={categoryScale}
|
||||
top={valueMax + margin.top}
|
||||
left={margin.left + bottomAxisLabelsOffset}
|
||||
left={margin.left}
|
||||
hideAxisLine
|
||||
hideTicks
|
||||
tickLabelProps={() => {
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
.textbox {
|
||||
width: 80%;
|
||||
padding: calc(80rem / 16);
|
||||
background-color: var(--secondary-background);
|
||||
border-radius: calc(20rem / 16);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -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>;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
import { BarGraphVertical, BarGraphProps } from "./BarGraph";
|
||||
|
||||
export function Histogram(props: BarGraphProps) {
|
||||
return <BarGraphVertical {...props} barPadding={0} shiftBottomAxis={true} />;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
.piePath {
|
||||
fill: var(--tertiary-background);
|
||||
}
|
||||
|
||||
.labelPath {
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
.pieText,
|
||||
.labelText {
|
||||
fill: var(--label);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.pieText {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.group:hover > .piePath {
|
||||
fill: var(--primary-accent);
|
||||
filter: drop-shadow(0px 0px calc(6rem / 16) var(--primary-accent));
|
||||
}
|
||||
|
||||
.group:hover .pieText {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
import { Group } from "@visx/group";
|
||||
import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
|
||||
import { Text } from "@visx/text";
|
||||
import React from "react";
|
||||
|
||||
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 text inside the pie, in pixels. */
|
||||
pieTextSize?: number;
|
||||
/** X-axis offset of the pie text, in pixels. */
|
||||
pieTextXOffset?: number;
|
||||
/** Y-axis offset of the pie text, in pixels. */
|
||||
pieTextYOffset?: number;
|
||||
/** Accessor function to get value to display as pie text from datum. */
|
||||
getPieDisplayValueFromDatum?: (datum: PieChartData) => string;
|
||||
/** 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;
|
||||
/** 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 function PieChart({
|
||||
data,
|
||||
width,
|
||||
labelWidth,
|
||||
padRadius = width * 0.35,
|
||||
innerRadius = width * 0.015,
|
||||
pieTextSize = 40,
|
||||
pieTextXOffset = 0,
|
||||
pieTextYOffset = 10,
|
||||
getPieDisplayValueFromDatum = (datum: PieChartData) => `${datum.value}%`,
|
||||
labelTextSize = 40,
|
||||
labelTextXOffset = 0,
|
||||
labelTextYOffset = 0,
|
||||
getLabelDisplayValueFromDatum = (datum: PieChartData) => `${datum.category}`,
|
||||
className,
|
||||
}: PieChartProps) {
|
||||
const pieWidth = width * 0.5 - labelWidth;
|
||||
return (
|
||||
<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={10}
|
||||
padAngle={0.075}
|
||||
padRadius={padRadius}
|
||||
innerRadius={innerRadius}
|
||||
outerRadius={pieWidth}
|
||||
>
|
||||
{(pie) => (
|
||||
<PieSlice
|
||||
{...pie}
|
||||
pieTextSize={pieTextSize}
|
||||
pieTextXOffset={pieTextXOffset}
|
||||
pieTextYOffset={pieTextYOffset}
|
||||
getPieDisplayValueFromDatum={getPieDisplayValueFromDatum}
|
||||
/>
|
||||
)}
|
||||
</Pie>
|
||||
<Pie
|
||||
data={data}
|
||||
pieValue={(d: PieChartData) => d.value}
|
||||
innerRadius={pieWidth}
|
||||
outerRadius={width * 0.5}
|
||||
>
|
||||
{(pie) => (
|
||||
<PieSliceLabel
|
||||
{...pie}
|
||||
labelTextSize={labelTextSize}
|
||||
labelTextXOffset={labelTextXOffset}
|
||||
labelTextYOffset={labelTextYOffset}
|
||||
getLabelDisplayValueFromDatum={getLabelDisplayValueFromDatum}
|
||||
/>
|
||||
)}
|
||||
</Pie>
|
||||
</Group>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
type PieSliceProps<PieChartData> = ProvidedProps<PieChartData> & {
|
||||
pieTextSize: number;
|
||||
pieTextXOffset: number;
|
||||
pieTextYOffset: number;
|
||||
getPieDisplayValueFromDatum: (datum: PieChartData) => string;
|
||||
};
|
||||
|
||||
export function PieSlice({
|
||||
path,
|
||||
arcs,
|
||||
pieTextSize,
|
||||
pieTextXOffset,
|
||||
pieTextYOffset,
|
||||
getPieDisplayValueFromDatum,
|
||||
}: PieSliceProps<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.piePath} d={pathArc} />
|
||||
<Text
|
||||
className={styles.pieText}
|
||||
x={centroidX + pieTextXOffset}
|
||||
y={centroidY + pieTextYOffset}
|
||||
textAnchor="middle"
|
||||
fontSize={pieTextSize}
|
||||
>
|
||||
{`${getPieDisplayValueFromDatum(arc.data)}`}
|
||||
</Text>
|
||||
</Group>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type PieSliceLabelProps<PieChartData> = ProvidedProps<PieChartData> & {
|
||||
labelTextSize: number;
|
||||
labelTextXOffset: number;
|
||||
labelTextYOffset: number;
|
||||
getLabelDisplayValueFromDatum: (datum: PieChartData) => string;
|
||||
};
|
||||
|
||||
export function PieSliceLabel({
|
||||
path,
|
||||
arcs,
|
||||
labelTextSize,
|
||||
labelTextXOffset,
|
||||
labelTextYOffset,
|
||||
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={centroidX + labelTextXOffset}
|
||||
y={centroidY + labelTextYOffset}
|
||||
textAnchor="middle"
|
||||
fontSize={labelTextSize}
|
||||
>
|
||||
{`${getLabelDisplayValueFromDatum(arc.data)}`}
|
||||
</Text>
|
||||
</Group>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.sections {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: calc(15rem / 16);
|
||||
}
|
||||
|
||||
.sections h1 {
|
||||
flex: 3;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.separator {
|
||||
flex: 1;
|
||||
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);
|
||||
}
|
||||
|
||||
.nav li a:hover .linkName {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.nav li .linkName {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
import styles from "./Sections.module.css";
|
||||
|
||||
interface SectionsData {
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface SectionsProps {
|
||||
/* Whether to display the "Sections" title and separator that appears on the left. */
|
||||
showHeader?: boolean;
|
||||
data: SectionsData[];
|
||||
}
|
||||
|
||||
export function Sections({ data, showHeader = true }: SectionsProps) {
|
||||
return (
|
||||
<section className={styles.sections}>
|
||||
{showHeader ? (
|
||||
<>
|
||||
<h1>Sections</h1>
|
||||
<div className={styles.separator} />
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<nav className={styles.nav}>
|
||||
<ul>
|
||||
{data.map((datum, index) => {
|
||||
return (
|
||||
<li key={`${datum.name}-${index}`}>
|
||||
<a href={datum.url}>
|
||||
<span className={styles.linkNumber}>
|
||||
{String(index).padStart(2, "0")}{" "}
|
||||
</span>
|
||||
<span className={styles.linkName}>{datum.name}</span>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,75 +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: center;
|
||||
}
|
||||
|
||||
.time {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
font-size: calc(30rem / 16);
|
||||
font-weight: 700;
|
||||
color: var(--secondary-accent);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.circle {
|
||||
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);
|
||||
}
|
||||
|
|
@ -1,142 +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 time label, in pixels. */
|
||||
timeWidth?: 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,
|
||||
timeWidth = 200,
|
||||
textWidth = 300,
|
||||
gap = 50,
|
||||
className,
|
||||
}: TimelineProps) {
|
||||
const largerMiddleElement =
|
||||
outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
|
||||
const width = timeWidth + gap + largerMiddleElement + gap + textWidth;
|
||||
if (innerCircleWidth > outerCircleWidth) {
|
||||
throw new Error(
|
||||
`<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
className ? `${className} ${styles.wrapper}` : `${styles.wrapper}`
|
||||
}
|
||||
style={{ width: width }}
|
||||
>
|
||||
<div
|
||||
className={styles.line}
|
||||
style={{
|
||||
width: lineWidth,
|
||||
left: width / 2 - lineWidth / 2,
|
||||
}}
|
||||
/>
|
||||
<div className={styles.timelineSections}>
|
||||
{data.map((datum) => (
|
||||
<TimelineSection
|
||||
key={datum.time}
|
||||
datum={datum}
|
||||
width={width}
|
||||
isTimeUppercase={isTimeUppercase}
|
||||
outerCircleWidth={outerCircleWidth}
|
||||
innerCircleWidth={innerCircleWidth}
|
||||
timeWidth={timeWidth}
|
||||
textWidth={textWidth}
|
||||
gap={gap}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface TimelineSectionProps {
|
||||
datum: TimelineData;
|
||||
width: number;
|
||||
isTimeUppercase: boolean;
|
||||
outerCircleWidth: number;
|
||||
innerCircleWidth: number;
|
||||
timeWidth: number;
|
||||
textWidth: number;
|
||||
gap: number;
|
||||
}
|
||||
|
||||
function TimelineSection({
|
||||
datum,
|
||||
width,
|
||||
isTimeUppercase,
|
||||
outerCircleWidth,
|
||||
innerCircleWidth,
|
||||
timeWidth,
|
||||
textWidth,
|
||||
gap,
|
||||
}: TimelineSectionProps) {
|
||||
return (
|
||||
<div className={styles.timelineSection} style={{ gap: gap }}>
|
||||
<div
|
||||
className={styles.time}
|
||||
style={{
|
||||
width: timeWidth,
|
||||
marginLeft: (width - 2 * gap - outerCircleWidth) / 2 - timeWidth,
|
||||
}}
|
||||
>
|
||||
{isTimeUppercase ? datum.time.toUpperCase() : datum.time}
|
||||
</div>
|
||||
<div
|
||||
className={styles.circle}
|
||||
style={{
|
||||
width: outerCircleWidth,
|
||||
height: outerCircleWidth,
|
||||
borderRadius: outerCircleWidth,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={styles.innerCircle}
|
||||
style={{
|
||||
width: innerCircleWidth,
|
||||
height: innerCircleWidth,
|
||||
borderRadius: innerCircleWidth,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={styles.text}
|
||||
style={{
|
||||
width: textWidth,
|
||||
marginRight: (width - 2 * gap - outerCircleWidth) / 2 - textWidth,
|
||||
}}
|
||||
>
|
||||
{datum.text}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -36,21 +36,6 @@ export const mockCategoricalData = [
|
|||
},
|
||||
];
|
||||
|
||||
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 },
|
||||
|
|
@ -80,33 +65,6 @@ export const moreMockCategoricalData = [
|
|||
{ key: "Dart", value: 2.21 },
|
||||
];
|
||||
|
||||
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",
|
||||
|
|
@ -148,16 +106,3 @@ export const mockQuoteDataLong = [
|
|||
"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 mockHistogramData = [
|
||||
{ category: "10", value: 88 },
|
||||
{ category: "20", value: 16 },
|
||||
{ category: "30", value: 22 },
|
||||
{ category: "40", value: 20 },
|
||||
{ category: "50", value: 45 },
|
||||
{ category: "60", value: 17 },
|
||||
{ category: "70", value: 35 },
|
||||
{ category: "80", value: 27 },
|
||||
{ category: "90", value: 54 },
|
||||
{ category: "100", value: 50 },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
export const sectionsData = [
|
||||
{
|
||||
name: "Demographics",
|
||||
url: "/",
|
||||
},
|
||||
{
|
||||
name: "Academics",
|
||||
url: "/",
|
||||
},
|
||||
{
|
||||
name: "Co-op",
|
||||
url: "/",
|
||||
},
|
||||
{
|
||||
name: "Lifestyle and Interests",
|
||||
url: "/",
|
||||
},
|
||||
{
|
||||
name: "Intimacy and Drugs",
|
||||
url: "/",
|
||||
},
|
||||
{
|
||||
name: "Post-grad",
|
||||
url: "/",
|
||||
},
|
||||
{
|
||||
name: "Friends",
|
||||
url: "/",
|
||||
},
|
||||
{
|
||||
name: "Miscellaneous",
|
||||
url: "/",
|
||||
},
|
||||
{
|
||||
name: "Mental Health",
|
||||
url: "/",
|
||||
},
|
||||
{
|
||||
name: "Personal",
|
||||
url: "/",
|
||||
},
|
||||
{
|
||||
name: "Contributors",
|
||||
url: "/",
|
||||
},
|
||||
];
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "cs-2022-class-profile",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@visx/axis": "^2.10.0",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ body {
|
|||
--light--secondary-accent-light: #FEA0C8;
|
||||
--light--primary-heading: #D02B53;
|
||||
--light--primary-text: #483B35;
|
||||
--light--secondary-text: var(--pink);
|
||||
--light--link: var(--orange);
|
||||
--light--link-hover: #FFBC9F;
|
||||
--light--card-background: #FFFFFF;
|
||||
|
|
@ -68,52 +69,22 @@ body {
|
|||
color: var(--primary-text);
|
||||
font-family: "Inconsolata", monospace;
|
||||
margin: 0;
|
||||
|
||||
/* 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) */
|
||||
h1,
|
||||
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);
|
||||
font-size: calc(45rem / 16);
|
||||
}
|
||||
|
||||
/* Titles within paragraphs (e.g. About the Programs -> Computer Science)*/
|
||||
h4 {
|
||||
font-size: calc(24rem / 16);
|
||||
font-weight: 700;
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
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 {
|
||||
|
|
@ -125,6 +96,10 @@ a:hover {
|
|||
color: var(--link-hover);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: calc(28rem / 16);
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--primary-background: var(--dark--primary-background);
|
||||
|
|
|
|||
|
|
@ -1,26 +1,16 @@
|
|||
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
|
||||
import { BoxPlot } from "components/Boxplot";
|
||||
import { Histogram } from "components/Histogram";
|
||||
import {
|
||||
mockCategoricalData,
|
||||
moreMockCategoricalData,
|
||||
mockBoxPlotData,
|
||||
mockQuoteData,
|
||||
mockQuoteDataLong,
|
||||
mockHistogramData,
|
||||
mockPieData,
|
||||
mockTimelineData,
|
||||
} from "data/mocks";
|
||||
import { sectionsData } from "data/routes";
|
||||
import React from "react";
|
||||
|
||||
import { About } from "@/components/About";
|
||||
import { PieChart } from "@/components/PieChart";
|
||||
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
||||
import { Sections } from "@/components/Sections";
|
||||
import { Timeline } from "@/components/Timeline";
|
||||
|
||||
import { CenterWrapper } from "../components/CenterWrapper";
|
||||
import { ColorPalette } from "../components/ColorPalette";
|
||||
import { WordCloud } from "../components/WordCloud";
|
||||
|
||||
|
|
@ -31,26 +21,8 @@ export default function Home() {
|
|||
<div className={styles.page}>
|
||||
<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>
|
||||
|
|
@ -97,53 +69,6 @@ export default function Home() {
|
|||
}))}
|
||||
/>
|
||||
|
||||
<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 didn’t 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>{"<Sections />"}</code>
|
||||
</h2>
|
||||
<Sections data={sectionsData} />
|
||||
|
||||
<h2>
|
||||
<code>{"<About />"}</code>
|
||||
</h2>
|
||||
<About />
|
||||
|
||||
<h2>
|
||||
<code>{"<BoxPlot />"}</code>
|
||||
</h2>
|
||||
|
|
@ -169,22 +94,6 @@ export default function Home() {
|
|||
circleDiameter={180}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
<code>{"<Histogram />"}</code>
|
||||
</h2>
|
||||
<Histogram
|
||||
className={styles.barGraphDemo}
|
||||
data={mockHistogramData}
|
||||
width={800}
|
||||
height={500}
|
||||
margin={{
|
||||
top: 20,
|
||||
bottom: 80,
|
||||
left: 50,
|
||||
right: 60,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue