Added graphs for individual events

src/components/ControlPanel/controlPanel.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from 'components/Button';
+import Event from './event'
 
 export default class ControlPanelComponent extends React.Component {
 	render() {
@@ -41,7 +42,7 @@ export default class ControlPanelComponent extends React.Component {
 						<option>Studio</option>
 						<option>W</option>
 					</select>
-
+					
 				</div>
 			</div>
 		);

src/components/ControlPanel/event.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import EventAnalytics from './eventAnalytics'
+import Config from 'config'
+import { translate } from 'utils'
+
+export default class EventCard extends React.Component {
+
+	render() {
+		const yearData = { 1: 100, 2: 50, 3: 25, 4: 10, 5: 3 };
+		const majorData= { "CS/CSE": 300, "Ling CS": 100, "Math": 25 };
+
+		return(
+			<div className="event-card user-card">
+				<div className="content">
+					<h2>Event Title</h2>
+					<h3>Event Committee</h3>
+
+					<div className="points-container">
+						<div className="points Headline-2Secondary">100</div>
+						<div className="label SubheaderSecondary">attendees</div>
+					</div>
+
+					<div className="subcontent">
+						<span className="time">7:00 am — 11:00 am</span>
+						<p className="location">Event Location</p>
+					</div>
+
+					<EventAnalytics yearData={yearData} majorData={majorData} />
+				</div>
+			</div>
+		);
+	}
+}

src/components/ControlPanel/eventAnalytics.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import Button from 'components/Button';
+import Event from './event.js';
+import { Chart } from 'chart.js'
+import { Bar } from 'react-chartjs-2'
+
+
+
+export default class EventAnalytics extends React.Component {
+
+	render() {
+		const yearData = {
+			labels: ["1", "2", "3", "4", "5+"],
+			datasets: [{
+				label: 'Attendees',
+				data: Object.values(this.props.yearData),
+				backgroundColor: [
+					'rgba(255, 99, 132, 0.2)',
+					'rgba(255, 159, 64, 0.2)',
+					'rgba(255, 206, 86, 0.2)',
+					'rgba(75, 192, 192, 0.2)',
+					'rgba(54, 162, 235, 0.2)'
+				],
+				borderColor: [
+					'rgba(255,99,132,1)',
+					'rgba(255, 159, 64, 1)',
+					'rgba(255, 206, 86, 1)',
+					'rgba(75, 192, 192, 1)',
+					'rgba(54, 162, 235, 1)'
+				],
+				borderWidth: 1
+			}],
+			options: {
+				legend: {
+					display: false
+				}
+			}
+		};
+
+		const majorData = {
+			labels: Object.keys(this.props.majorData),
+			datasets: [{
+				label: 'Attendees',
+				data: Object.values(this.props.majorData),
+				backgroundColor: [
+					'rgba(255, 99, 132, 0.2)',
+					'rgba(75, 192, 192, 0.2)',
+					'rgba(54, 162, 235, 0.2)'
+				],
+				borderColor: [
+					'rgba(255,99,132,1)',
+					'rgba(75, 192, 192, 1)',
+					'rgba(54, 162, 235, 1)'
+				],
+				borderWidth: 1
+			}]
+		};
+
+		return (
+			<div className="chartWrapper">
+				<h3 className="chart-title">Attendees By Year</h3>
+				<Bar data={yearData} options={{legend: { display: false }}} />
+				<h3 className="chart-title">Attendees By Major</h3>
+				<Bar data={majorData} options={{legend: { display: false }}} />
+			</div>
+        );
+	}
+}

src/components/ControlPanel/style.scss

@@ -68,4 +68,115 @@
 			padding: 5px 0px;
 		}
 	}
-}
+
+	.event-card {
+		display: inline-block;
+		vertical-align: top;
+		text-align: left;
+		width: calc((100vw - 550px)/2);
+		margin: 20px;
+		border-radius: 4px;
+		box-shadow: 0px 0px 3px #D2D2D2;
+		background-color: white;
+		transition: 0.125s ease-in-out;
+		// border: 3px solid $light-green;
+
+		@media (max-width: 1224px) {
+			width: calc((100vw - 500px));
+		}
+
+		@media (max-width: 690px) {
+			margin: 20px 0px;
+		}
+
+		@media (max-width: 340px) {
+			width: 300px;
+		}
+
+		&.selected {
+			transform: scale(1.02, 1.02);
+		}
+
+		&.selected:hover {
+			background: white;
+		}
+
+		&.admin-card {
+			margin-left: 10px;
+		}
+
+		.content { 
+			padding: 20px;
+			position: relative;
+
+			h2 {
+				margin-right: 100px;
+			}
+
+			.points-container {
+				position: absolute;
+				height: 60px;
+				width:  85px;
+				border-radius: 50px;
+				line-height: 50px;
+				right: 12px;
+				top: 12px;
+				border: 1px solid #DADADA;
+				background-color: white;
+				text-align: center;
+
+				.label {
+					line-height: 0px;
+					margin-top: -10px;
+					font-size: 0.85em;
+				}
+
+				.points {
+					font-size: 1.1em;
+				}
+			}
+
+			.chartWrapper {
+				margin-top: 20px;
+
+				.chart-title {
+					text-align: center;
+				}
+			}
+		}
+
+		h2 {
+			color: #333333;
+			margin: 0;
+		}
+
+		h3 {
+			text-transform: uppercase;
+			font-size: 1.0em;
+			font-weight: 400;
+			color: #555555;
+			margin: 5px 0px;
+		}
+
+		p {
+			padding-top: 5px;
+		}
+
+		.subcontent {
+			border-top: 1px solid #F2F2F2;
+			margin-top: 10px;
+			padding-top: 10px;
+			color: #666666;
+			font-weight: 300;
+			font-size: 0.8em;
+
+			.time {
+				font-weight: 400;
+			}
+
+			.location {
+				padding-bottom: 0px;
+			}
+		}
+	}
+}

src/components/Leaderboard/leaderboard.js

@@ -83,4 +83,4 @@ export default class Leaderboard extends React.Component {
 			);
 		}
 	}
-}
+}

src/components/Topbar/index.js

@@ -22,6 +22,7 @@ export default class Topbar extends React.Component {
 					<NavLink to="/events" activeClassName="selected"><NavigationItem icon="fa-calendar" text="Events" /></NavLink>
 					<NavLink to="/leaderboard" activeClassName="selected"><NavigationItem icon="fa-list" text="Members" /></NavLink>
 					<NavLink to="/resources" activeClassName="selected"> <NavigationItem icon="fa-building-o" text="Organization" /></NavLink>
+					<NavLink to="/controlpanel" activeClassName="selected"> <NavigationItem icon="fa-gamepad fa-2x" text="Admin" /></NavLink>
 				</div>
 				}
 			</div>

src/config.js

@@ -141,4 +141,129 @@ export default {
 		{ startsAt: 500, rank: "Constant Cheetah" },
 		{ startsAt: 800, rank: "Extraterrestrial Eagle" },
 	],
-};
+	majorMap: [ //order of majors are significant
+		{
+			major: "Ling CS",
+			criteria: [
+				{ type: "regex", val: /ling.*comp.*sci/ },
+				{ type: "regex", val: /ling.*cs/ }
+			]
+		},
+		{
+			major: "Ling",
+			criteria: [
+				{ type: "regex", val: /ling/ }
+			]
+		},
+		{
+			major: "Math CS",
+			criteria: [
+				{ type: "regex", val: /math.*comp/ },
+				{ type: "regex", val: /comp.*math/ },
+				{ type: "regex", val: /math .*cs/ }
+			]
+		},
+		{
+			major: "CS/CSE/CE",
+			criteria: [
+				{ type: "regex", val: /comp.*sci/ },
+				{ type: "regex", val: /^cs$/ },
+				{ type: "regex", val: /^cse$/ },
+				{ type: "regex", val: /comp.*eng./ }
+			]
+		},
+		{
+			major: "EE",
+			criteria: [
+				{ type: "regex", val: /elec.*eng/ },
+				{ type: "regex", val: /^ee$/ }
+			]
+		},
+		{
+			major: "Cog Sci",
+			criteria: [
+				{ type: "regex", val: /cog.*sci/ }
+			]
+		},
+		{
+			major: "CS Bio",
+			criteria: [
+				{ type: "regex", val: /comp.*bio/ },
+				{ type: "regex", val: /cs.*bio/ },
+			]
+		},
+		{
+			major: "Stats",
+			criteria: [
+				{ type: "regex", val: /stat/ },
+			]
+		},
+		{
+			major: "Math",
+			criteria: [
+				{ type: "regex", val: /.*math/ }
+			]
+		},
+		{
+			major: "Econ",
+			criteria: [
+				{ type: "regex", val: /econ/ },
+			]
+		},
+		{
+			major: "Undeclared",
+			criteria: [
+				{ type: "regex", val: /undeclared/ },
+				{ type: "regex", val: /undecided/ }
+			]
+		},
+		{
+			major: "physics",
+			criteria: [
+				{ type: "regex", val: /physics/ }
+			]
+		},
+		{
+			major: "BioE",
+			criteria: [
+				{ type: "regex", val: /bioe.*/ }
+			]
+		},
+		{
+			major: "Biochem",
+			criteria: [
+				{ type: "regex", val: /bio.*chem/ }
+			]
+		},
+		{
+			major: "ChemE",
+			criteria: [
+				{ type: "regex", val: /chem.*e/ }
+			]
+		},
+		{
+			major: "MechE",
+			criteria: [
+				{ type: "regex", val: /mech.*e/ }
+			]
+		},
+		{
+			major: "CivilE",
+			criteria: [
+				{ type: "regex", val: /civil.*e/ }
+			]
+		},
+		{
+			major: "Chem",
+			criteria: [
+				{ type: "regex", val: /chem/ }
+			]
+		},
+		{
+			major: "Neuro",
+			criteria: [
+				{ type: "regex", val: /neuro/ }
+			]
+		}
+	]
+};

src/reducers/leaderboard.js

@@ -53,7 +53,7 @@ const FetchLeaderboard = () => {
 			});
 
 			const status = await response.status;
-      if (status === 401 || status === 403) {
+			if (status === 401 || status === 403) {
 				return dispatch(LogoutUser());
 			}