2022-07-27 19:46:08 -04:00
|
|
|
|
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
|
2022-09-03 11:13:58 -04:00
|
|
|
|
import { BoxPlot } from "components/Boxplot";
|
2022-09-02 21:53:05 -04:00
|
|
|
|
import {
|
|
|
|
|
mockCategoricalData,
|
|
|
|
|
moreMockCategoricalData,
|
2022-10-01 20:54:05 -04:00
|
|
|
|
mockStackedBarKeys,
|
|
|
|
|
mockStackedBarGraphData,
|
2022-09-03 11:13:58 -04:00
|
|
|
|
mockBoxPlotData,
|
2022-10-02 15:01:17 -04:00
|
|
|
|
mockLineData,
|
2022-09-02 21:53:05 -04:00
|
|
|
|
mockQuoteData,
|
|
|
|
|
mockQuoteDataLong,
|
2022-09-07 22:20:30 -04:00
|
|
|
|
mockPieData,
|
2022-09-12 20:00:01 -04:00
|
|
|
|
mockTimelineData,
|
2022-10-02 13:11:42 -04:00
|
|
|
|
mockGroupedBarGraphData,
|
2022-09-02 21:53:05 -04:00
|
|
|
|
} from "data/mocks";
|
2022-11-05 14:06:24 -04:00
|
|
|
|
import { pageRoutes } from "data/routes";
|
2022-06-03 01:31:07 -04:00
|
|
|
|
import React from "react";
|
2022-10-01 20:54:05 -04:00
|
|
|
|
import { Color } from "utils/Color";
|
2022-06-03 01:31:07 -04:00
|
|
|
|
|
2022-09-12 20:07:03 -04:00
|
|
|
|
import { About } from "@/components/About";
|
2022-10-02 13:11:42 -04:00
|
|
|
|
import {
|
|
|
|
|
GroupedBarGraphHorizontal,
|
|
|
|
|
GroupedBarGraphVertical,
|
|
|
|
|
} from "@/components/GroupedBarGraph";
|
2022-10-05 21:07:49 -04:00
|
|
|
|
import { LineGraph } from "@/components/LineGraph";
|
2022-09-07 22:20:30 -04:00
|
|
|
|
import { PieChart } from "@/components/PieChart";
|
2022-09-02 21:53:05 -04:00
|
|
|
|
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
2022-09-12 20:07:03 -04:00
|
|
|
|
import { Sections } from "@/components/Sections";
|
2022-10-01 20:54:05 -04:00
|
|
|
|
import {
|
|
|
|
|
StackedBarGraphVertical,
|
|
|
|
|
StackedBarGraphHorizontal,
|
|
|
|
|
} from "@/components/StackedBarGraph";
|
2022-09-12 20:00:01 -04:00
|
|
|
|
import { Timeline } from "@/components/Timeline";
|
2022-09-02 21:53:05 -04:00
|
|
|
|
|
2022-10-05 21:07:49 -04:00
|
|
|
|
import { BottomNav } from "../components/BottomNav";
|
2022-09-09 17:01:34 -04:00
|
|
|
|
import { CenterWrapper } from "../components/CenterWrapper";
|
2022-07-01 14:30:57 -04:00
|
|
|
|
import { ColorPalette } from "../components/ColorPalette";
|
2022-08-04 02:17:19 -04:00
|
|
|
|
import { WordCloud } from "../components/WordCloud";
|
2022-07-01 14:30:57 -04:00
|
|
|
|
|
2022-07-27 19:46:08 -04:00
|
|
|
|
import styles from "./playground.module.css";
|
|
|
|
|
|
2022-06-03 01:31:07 -04:00
|
|
|
|
export default function Home() {
|
|
|
|
|
return (
|
2022-10-01 20:54:05 -04:00
|
|
|
|
<div className={styles.page} suppressHydrationWarning>
|
2022-06-03 01:31:07 -04:00
|
|
|
|
<h1>Playground</h1>
|
|
|
|
|
<p>Show off your components here!</p>
|
2022-09-12 20:00:01 -04:00
|
|
|
|
|
2022-09-12 20:07:03 -04:00
|
|
|
|
<ColorPalette />
|
2022-09-12 20:00:01 -04:00
|
|
|
|
|
2022-09-12 10:08:01 -04:00
|
|
|
|
<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>
|
|
|
|
|
|
2022-09-12 20:07:03 -04:00
|
|
|
|
<h2>
|
|
|
|
|
<code>{"<PieChart />"}</code>
|
|
|
|
|
</h2>
|
|
|
|
|
<div style={{ padding: "30px" }}>
|
|
|
|
|
<PieChart data={mockPieData} width={800} labelWidth={215} />
|
|
|
|
|
</div>
|
|
|
|
|
|
2022-07-27 19:46:08 -04:00
|
|
|
|
<h2>
|
|
|
|
|
<code>{"<BarGraphHorizontal />"}</code>
|
|
|
|
|
</h2>
|
|
|
|
|
<BarGraphHorizontal
|
|
|
|
|
className={styles.barGraphDemo}
|
|
|
|
|
data={mockCategoricalData}
|
|
|
|
|
width={800}
|
|
|
|
|
height={500}
|
|
|
|
|
margin={{
|
2022-09-03 11:13:58 -04:00
|
|
|
|
top: 25,
|
2022-07-27 19:46:08 -04:00
|
|
|
|
bottom: 40,
|
|
|
|
|
left: 150,
|
|
|
|
|
right: 20,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2022-09-12 20:00:01 -04:00
|
|
|
|
|
2022-07-27 19:46:08 -04:00
|
|
|
|
<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,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2022-09-12 20:00:01 -04:00
|
|
|
|
|
2022-08-04 02:17:19 -04:00
|
|
|
|
<h2>
|
|
|
|
|
<code>{"<WordCloud />"}</code>
|
|
|
|
|
</h2>
|
|
|
|
|
<WordCloud
|
|
|
|
|
data={moreMockCategoricalData.map((word) => ({
|
|
|
|
|
text: word.key,
|
|
|
|
|
value: word.value,
|
|
|
|
|
}))}
|
|
|
|
|
/>
|
2022-09-12 20:00:01 -04:00
|
|
|
|
|
2022-10-01 20:54:05 -04:00
|
|
|
|
<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: 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: 20,
|
|
|
|
|
left: 20,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
|
2022-09-12 20:00:01 -04:00
|
|
|
|
<h2>
|
|
|
|
|
<code>{"<Timeline />"}</code>
|
|
|
|
|
</h2>
|
|
|
|
|
<Timeline data={mockTimelineData} />
|
|
|
|
|
|
2022-09-09 17:01:34 -04:00
|
|
|
|
<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>
|
2022-09-02 21:53:05 -04:00
|
|
|
|
|
2022-10-02 15:01:17 -04:00
|
|
|
|
<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,
|
|
|
|
|
}}
|
2022-11-30 21:48:36 -05:00
|
|
|
|
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
|
2022-10-02 15:01:17 -04:00
|
|
|
|
/>
|
|
|
|
|
|
2022-09-12 20:07:03 -04:00
|
|
|
|
<h2>
|
|
|
|
|
<code>{"<Sections />"}</code>
|
|
|
|
|
</h2>
|
2022-11-05 14:06:24 -04:00
|
|
|
|
<Sections data={pageRoutes} />
|
2022-09-12 20:07:03 -04:00
|
|
|
|
|
2022-09-12 10:20:10 -04:00
|
|
|
|
<h2>
|
|
|
|
|
<code>{"<About />"}</code>
|
|
|
|
|
</h2>
|
2022-09-12 20:07:03 -04:00
|
|
|
|
<About />
|
2022-09-12 10:20:10 -04:00
|
|
|
|
|
2022-09-03 11:13:58 -04:00
|
|
|
|
<h2>
|
|
|
|
|
<code>{"<BoxPlot />"}</code>
|
|
|
|
|
</h2>
|
|
|
|
|
<BoxPlot
|
|
|
|
|
width={600}
|
|
|
|
|
height={400}
|
|
|
|
|
data={mockBoxPlotData}
|
|
|
|
|
margin={{
|
|
|
|
|
top: 20,
|
|
|
|
|
left: 20,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
|
2022-09-02 21:53:05 -04:00
|
|
|
|
<h2>
|
|
|
|
|
<code>{"<QuotationCarousel />"}</code>
|
|
|
|
|
</h2>
|
|
|
|
|
<div className={styles.quotationCarouselDemo}>
|
|
|
|
|
<QuotationCarousel data={mockQuoteData} circleDiameter={0} />
|
|
|
|
|
<QuotationCarousel
|
|
|
|
|
data={mockQuoteDataLong}
|
|
|
|
|
width={800}
|
|
|
|
|
height={160}
|
|
|
|
|
circleDiameter={180}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
2022-10-02 13:11:42 -04:00
|
|
|
|
|
2022-10-05 21:07:49 -04:00
|
|
|
|
<h2>
|
|
|
|
|
<code>{"<BottomNav />"}</code>
|
|
|
|
|
</h2>
|
|
|
|
|
<BottomNav
|
2022-11-05 14:06:24 -04:00
|
|
|
|
leftPage={pageRoutes.demographics}
|
|
|
|
|
rightPage={pageRoutes.coop}
|
2022-10-05 21:07:49 -04:00
|
|
|
|
></BottomNav>
|
|
|
|
|
|
2022-10-02 13:11:42 -04:00
|
|
|
|
<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,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2022-07-27 19:46:08 -04:00
|
|
|
|
</div>
|
2022-06-03 01:31:07 -04:00
|
|
|
|
);
|
|
|
|
|
}
|