Add space activity chart to UI

webclient/src/Charts.js

@@ -7,10 +7,12 @@ import { NotFound } from './Misc.js';
 
 let memberCountCache = false;
 let signupCountCache = false;
+let spaceActivityCache = false;
 
 export function Charts(props) {
 	const [memberCount, setMemberCount] = useState(memberCountCache);
 	const [signupCount, setSignupCount] = useState(signupCountCache);
+	const [spaceActivity, setSpaceActivity] = useState(spaceActivityCache);
 
 	useEffect(() => {
 		requester('/charts/membercount/', 'GET')
@@ -30,6 +32,15 @@ export function Charts(props) {
 		.catch(err => {
 			console.log(err);
 		});
+
+		requester('/charts/spaceactivity/', 'GET')
+		.then(res => {
+			setSpaceActivity(res);
+			spaceActivityCache = res;
+		})
+		.catch(err => {
+			console.log(err);
+		});
 	}, []);
 
 	return (
@@ -79,6 +90,35 @@ export function Charts(props) {
 
 			<p>The Green Count is the amount of Prepaid and Current members.</p>
 
+			<Header size='medium'>Space Activity</Header>
+
+			<p>Daily since March 7th, 2020.</p>
+
+			<p>
+				{spaceActivity &&
+					<ResponsiveContainer width='100%' height={300}>
+						<BarChart data={spaceActivity}>
+							<XAxis dataKey='date' minTickGap={10} />
+							<YAxis />
+							<CartesianGrid strokeDasharray='3 3'/>
+							<Tooltip />
+							<Legend />
+
+							<Bar
+								type='monotone'
+								dataKey='card_scans'
+								name='Card Scans'
+								fill='#8884d8'
+								maxBarSize={20}
+								animationDuration={1000}
+							/>
+						</BarChart>
+					</ResponsiveContainer>
+				}
+			</p>
+
+			<p>Cards Scans is the number of individual members who have scanned to enter the space.</p>
+
 			<Header size='medium'>Signup Count</Header>
 
 			<p>Monthly for the last sixteen months.</p>