diff options
| -rw-r--r-- | src/App.js | 73 | ||||
| -rw-r--r-- | src/Card.js | 25 | ||||
| -rw-r--r-- | src/History.js | 17 | ||||
| -rw-r--r-- | src/MainPage.js | 49 |
4 files changed, 141 insertions, 23 deletions
@@ -58,6 +58,79 @@ function App() { })} /> </Route> + <Route path="/totalstaff"> + <History + name="Total Staff Cases" + data={data.map((d) => { + return { value: d.total_staff, date: d.last_updated }; + })} + /> + </Route> + <Route path="/newstudents"> + <History + name="New Student Cases" + data={data.map((d) => { + return { value: d.new_students, date: d.last_updated }; + })} + /> + </Route> + <Route path="/newstaff"> + <History + name="New Staff Cases" + data={data.map((d) => { + return { value: d.new_staff, date: d.last_updated }; + })} + /> + </Route> + <Route path="/quarantineoncampus"> + <History + name="Quarantine On Campus" + data={data.map((d) => { + return { value: d.quarantine_on_campus, date: d.last_updated }; + })} + /> + </Route> + <Route path="/quarantineoffcampus"> + <History + name="Quarantine Off Campus" + data={data.map((d) => { + return { value: d.quarantine_off_campus, date: d.last_updated }; + })} + /> + </Route> + + <Route path="/isolationoncampus"> + <History + name="Isolation On Campus" + data={data.map((d) => { + return { value: d.isolation_on_campus, date: d.last_updated }; + })} + /> + </Route> + <Route path="/isolationoffcampus"> + <History + name="Isolation Off Campus" + data={data.map((d) => { + return { value: d.isolation_off_campus, date: d.last_updated }; + })} + /> + </Route> + <Route path="/tests"> + <History + name="Tests Administered" + data={data.map((d) => { + return { value: d.tests_administered, date: d.last_updated }; + })} + /> + </Route> + <Route path="/beds"> + <History + name="Bed Availability" + data={data.map((d) => { + return { value: d.beds_available, date: d.last_updated }; + })} + /> + </Route> </Switch> </div> </BrowserRouter> diff --git a/src/Card.js b/src/Card.js index 5710881..626cec0 100644 --- a/src/Card.js +++ b/src/Card.js @@ -1,4 +1,5 @@ import React from "react"; +import { Link } from "react-router-dom"; import "./Card.css"; const Card = (props) => { @@ -8,17 +9,19 @@ const Card = (props) => { } return ( <div className="Card bg-white rounded-lg border-2 border-orange-300 p-4 m-4"> - <p> - <span className="text-2xl"> - {props.latest} - {props.suffix}{" "} - </span> - <span className="Diff text-gray-600 text-sm"> - ({diff} - {props.suffix}) - </span> - </p> - <h3 className="text-base">{props.name}</h3> + <Link to={props.link}> + <p> + <span className="text-2xl"> + {props.latest} + {props.suffix}{" "} + </span> + <span className="Diff text-gray-600 text-sm"> + ({diff} + {props.suffix}) + </span> + </p> + <h3 className="text-base">{props.name}</h3> + </Link> </div> ); }; diff --git a/src/History.js b/src/History.js index 1fd39a3..c559d83 100644 --- a/src/History.js +++ b/src/History.js @@ -1,6 +1,17 @@ import { React, PureComponent } from "react"; import { DateTime } from "luxon"; -import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer, Label } from "recharts"; +import { + BarChart, + Bar, + LineChart, + Line, + CartesianGrid, + XAxis, + YAxis, + Tooltip, + ResponsiveContainer, + Label, +} from "recharts"; const History = (props) => { const offset = DateTime.fromSQL(props.data[0].date, { zone: "UTC" }).setZone(DateTime.local().zoneName).toSeconds(); @@ -10,7 +21,7 @@ const History = (props) => { date: DateTime.fromSQL(d.date, { zone: "UTC" }).setZone(DateTime.local().zoneName).toSeconds(), }; }); - + return ( <> <h3 className="text-3xl">{props.name}</h3> @@ -21,7 +32,7 @@ const History = (props) => { margin={{ top: 15, right: 30, left: 20, bottom: 5 }} data={data} > - <Line type="monotone" dataKey="value" stroke="#8884d8" /> + <Line type="monotone" dataKey="value" stroke="#8884d8" dot={false} /> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="date" diff --git a/src/MainPage.js b/src/MainPage.js index 3ce4c22..82cb196 100644 --- a/src/MainPage.js +++ b/src/MainPage.js @@ -10,16 +10,21 @@ const MainPage = (props) => { <div id="total"> <h4 className="text-2xl">Total Positive Cases Since August 19 (First Day of Classes)</h4> <div className="Section"> - <Card name="Students" latest={latest.total_students} prior={prior.total_students} /> - <Card name="Staff" latest={latest.total_staff} prior={prior.total_staff} /> + <Card + name="Students" + latest={latest.total_students} + prior={prior.total_students} + link="/totalstudents" + /> + <Card name="Staff" latest={latest.total_staff} prior={prior.total_staff} link="/totalstaff" /> </div> </div> <br /> <div id="new"> <h4 className="text-2xl">New Positive Cases From Past 14 Days</h4> <div className="Section"> - <Card name="Students" latest={latest.new_students} prior={prior.new_students} /> - <Card name="Staff" latest={latest.new_staff} prior={prior.new_staff} /> + <Card name="Students" latest={latest.new_students} prior={prior.new_students} link="/newstudents" /> + <Card name="Staff" latest={latest.new_staff} prior={prior.new_staff} link="/newstaff" /> </div> </div> <br /> @@ -30,8 +35,18 @@ const MainPage = (props) => { to see if they become sick. </h5> <div className="Section"> - <Card name="On Campus" latest={latest.quarantine_on_campus} prior={prior.quarantine_on_campus} /> - <Card name="Off Campus" latest={latest.quarantine_off_campus} prior={prior.quarantine_off_campus} /> + <Card + name="On Campus" + latest={latest.quarantine_on_campus} + prior={prior.quarantine_on_campus} + link="/quarantineoncampus" + /> + <Card + name="Off Campus" + latest={latest.quarantine_off_campus} + prior={prior.quarantine_off_campus} + link="/quarantineoffcampus" + /> </div> </div> <br /> @@ -41,15 +56,30 @@ const MainPage = (props) => { Isolation separates sick people with a contagious disease from people who are not sick. </h5> <div className="Section"> - <Card name="On Campus" latest={latest.isolation_on_campus} prior={prior.isolation_on_campus} /> - <Card name="Off Campus" latest={latest.isolation_off_campus} prior={prior.isolation_off_campus} /> + <Card + name="On Campus" + latest={latest.isolation_on_campus} + prior={prior.isolation_on_campus} + link="isolationoncampus" + /> + <Card + name="Off Campus" + latest={latest.isolation_off_campus} + prior={prior.isolation_off_campus} + link="isolationoffcampus" + /> </div> </div> <br /> <div id="tests"> <h4 className="text-2xl">Number of Tests Administered by Student Health Center</h4> <div className="Section"> - <Card name="Tests to date" latest={latest.tests_administered} prior={prior.tests_administered} /> + <Card + name="Tests to date" + latest={latest.tests_administered} + prior={prior.tests_administered} + link="/tests" + /> </div> </div> <br /> @@ -61,6 +91,7 @@ const MainPage = (props) => { latest={latest.beds_available} prior={prior.beds_available} suffix="%" + link="/beds" /> </div> </div> |