tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add graph of signup counts

Browse Source
This commit is contained in:
Tanner Collin 2020-05-01 01:22:26 +00:00
parent def5c31d0b
commit 1d0456089f
1 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
webclient/src/Charts.js
View File

@ -1,14 +1,16 @@
import React, { useState, useEffect, useReducer, useContext } from 'react'; import React, { useState, useEffect, useReducer, useContext } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom'; 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 { 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 { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
import { NotFound } from './Misc.js'; import { NotFound } from './Misc.js';
let memberCountCache = false; let memberCountCache = false;
let signupCountCache = false;
export function Charts(props) { export function Charts(props) {
const [memberCount, setMemberCount] = useState(memberCountCache); const [memberCount, setMemberCount] = useState(memberCountCache);
const [signupCount, setSignupCount] = useState(signupCountCache);
useEffect(() => { useEffect(() => {
requester('/charts/membercount/', 'GET') requester('/charts/membercount/', 'GET')
@ -19,6 +21,15 @@ export function Charts(props) {
.catch(err => { .catch(err => {
console.log(err); console.log(err);
}); });
requester('/charts/signupcount/', 'GET')
.then(res => {
setSignupCount(res);
signupCountCache = res;
})
.catch(err => {
console.log(err);
});
}, []); }, []);
return ( return (
@ -68,6 +79,35 @@ export function Charts(props) {
<p>The Green Count is the amount of Prepaid and Current members.</p> <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> </Container>
); );
}; };