Add graph of signup counts

webclient/src/Charts.js

@@ -1,14 +1,16 @@
 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 { BarChart, Bar, 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;
+let signupCountCache = false;
 
 export function Charts(props) {
 	const [memberCount, setMemberCount] = useState(memberCountCache);
+	const [signupCount, setSignupCount] = useState(signupCountCache);
 
 	useEffect(() => {
 		requester('/charts/membercount/', 'GET')
@@ -19,6 +21,15 @@ export function Charts(props) {
 		.catch(err => {
 			console.log(err);
 		});
+
+		requester('/charts/signupcount/', 'GET')
+		.then(res => {
+			setSignupCount(res);
+			signupCountCache = res;
+		})
+		.catch(err => {
+			console.log(err);
+		});
 	}, []);
 
 	return (
@@ -68,6 +79,35 @@ export function Charts(props) {
 
 			<p>The Green Count is the amount of Prepaid and Current members.</p>
 
+			<Header size='medium'>Signup Count</Header>
+
+			<p>Monthly for the last sixteen months.</p>
+
+			<p>
+				{signupCount &&
+					<ResponsiveContainer width='100%' height={300}>
+						<BarChart data={signupCount}>
+							<XAxis dataKey='month' minTickGap={10} />
+							<YAxis />
+							<CartesianGrid strokeDasharray='3 3'/>
+							<Tooltip />
+							<Legend />
+
+							<Bar
+								type='monotone'
+								dataKey='signup_count'
+								name='Signup Count'
+								fill='#8884d8'
+								maxBarSize={30}
+								animationDuration={1000}
+							/>
+						</BarChart>
+					</ResponsiveContainer>
+				}
+			</p>
+
+			<p>The Signup Count is the number of brand new account registrations per month.</p>
+
 		</Container>
 	);
 };