Add Charts page and display graph of member counts

webclient/src/App.js

@@ -18,6 +18,7 @@ import { Paste } from './Paste.js';
 import { Courses, CourseDetail } from './Courses.js';
 import { Classes, ClassDetail } from './Classes.js';
 import { Members, MemberDetail } from './Members.js';
+import { Charts } from './Charts.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 import { Footer } from './Footer.js';
 
@@ -196,6 +197,10 @@ function App() {
 						<Paste token={token} />
 					</Route>
 
+					<Route path='/charts'>
+						<Charts />
+					</Route>
+
 					{user && user.member.set_details ?
 						<Switch>
 							<Route path='/account'>

webclient/src/Charts.js

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, useReducer, useContext } from 'react';
+import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ReferenceLine } from 'recharts';
+import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
+import { NotFound } from './Misc.js';
+
+let memberCountCache = false;
+
+export function Charts(props) {
+	const [memberCount, setMemberCount] = useState(memberCountCache);
+
+	useEffect(() => {
+		requester('/charts/membercount/', 'GET')
+		.then(res => {
+			setMemberCount(res);
+			memberCountCache = res;
+		})
+		.catch(err => {
+			console.log(err);
+		});
+	}, []);
+
+	return (
+		<Container>
+			<Header size='large'>Charts</Header>
+
+			<Header size='medium'>Member Counts</Header>
+
+			<p>Daily since March 2nd, 2020.</p>
+
+			{memberCount &&
+				<ResponsiveContainer width='100%' height={300}>
+					<LineChart data={memberCount}>
+						<XAxis dataKey='date' minTickGap={10} />
+						<YAxis />
+						<CartesianGrid strokeDasharray='3 3'/>
+						<Tooltip />
+						<Legend />
+
+						<ReferenceLine x='2020-03-25' stroke='red' label='Space Locked' strokeDasharray='3 3' />
+
+						<Line
+							type='monotone'
+							dataKey='member_count'
+							name='Member Count'
+							stroke='#8884d8'
+							strokeWidth={2}
+							dot={false}
+							animationDuration={1000}
+						/>
+						<Line
+							type='monotone'
+							dataKey='green_count'
+							name='Green Count'
+							stroke='#82ca9d'
+							strokeWidth={2}
+							dot={false}
+							animationDuration={1500}
+						/>
+					</LineChart>
+				</ResponsiveContainer>
+			}
+
+		</Container>
+	);
+};

webclient/src/Home.js

@@ -192,7 +192,7 @@ export function Home(props) {
 							<Header size='medium'>Protospace Stats</Header>
 							<p>Next member meeting: {getDateStat('next_meeting')}</p>
 							<p>Next monthly clean: {getDateStat('next_clean')}</p>
-							<p>Member count: {getStat('member_count')}</p>
+							<p>Member count: {getStat('member_count')} <Link to='/charts'>[more]</Link></p>
 							<p>Green members: {getStat('green_count')}</p>
 							<p>Old members: {getStat('paused_count')}</p>
 							<p>Bay 108 (metal) temp: {getStat('bay_108_temp')} °C</p>