You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.8 KiB
68 lines
1.8 KiB
4 years ago
|
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>
|
||
|
);
|
||
|
};
|