Add classroom dust levels to /charts page

webclient/src/Charts.js

@@ -4,16 +4,19 @@ import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Hea
 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';
+import moment from 'moment-timezone';
 
 let memberCountCache = false;
 let signupCountCache = false;
 let spaceActivityCache = false;
+let dustLevelCache = false;
 
 export function Charts(props) {
 	const [memberCount, setMemberCount] = useState(memberCountCache);
 	const [signupCount, setSignupCount] = useState(signupCountCache);
 	const [spaceActivity, setSpaceActivity] = useState(spaceActivityCache);
 	const [fullActivity, setFullActivity] = useState(false);
+	const [dustLevel, setDustLevel] = useState(dustLevelCache);
 
 	useEffect(() => {
 		requester('/charts/membercount/', 'GET')
@@ -42,6 +45,15 @@ export function Charts(props) {
 		.catch(err => {
 			console.log(err);
 		});
+
+		requester('https://ps-iot.dns.t0.vc/sensors/air/0/pm25/week', 'GET')
+		.then(res => {
+			setDustLevel(res.result);
+			dustLevelCache = res.result;
+		})
+		.catch(err => {
+			console.log(err);
+		});
 	}, []);
 
 	return (
@@ -281,6 +293,37 @@ export function Charts(props) {
 
 			<p>Retained Count: number of those signups who are still a member currently.</p>
 
+
+			<Header size='medium'>Dust Level</Header>
+
+			<p>Averaged every 15 minutes for the past week.</p>
+
+			<p>
+				{dustLevel &&
+					<ResponsiveContainer width='100%' height={300}>
+						<LineChart data={dustLevel}>
+							<XAxis dataKey='time' tickFormatter={(t) => moment(t).format('ddd h:mm a')} minTickGap={10} />
+							<YAxis />
+							<CartesianGrid strokeDasharray='3 3'/>
+							<Tooltip formatter={v => v.toFixed(2) + ' μg/m³'} labelFormatter={t => 'Time: ' + moment(t).format('ddd h:mm a')}  />
+							<Legend />
+
+							<Line
+								type='monotone'
+								dataKey='value'
+								name='Classroom PM2.5'
+								stroke='#8884d8'
+								strokeWidth={2}
+								dot={false}
+								animationDuration={1000}
+							/>
+						</LineChart>
+					</ResponsiveContainer>
+				}
+			</p>
+
+			<p>Classroom PM2.5: Amount of PM2.5 particles measured from the classroom ceiling. Units are μg/m³.</p>
+
 		</Container>
 	);
 };