add links to all stats

4 files changed, 141 insertions, 23 deletions

diff --git a/src/App.js b/src/App.js
index b1d1dd1..ea5fcc9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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>