add History and totalstudent cases graph

2 files changed, 99 insertions, 16 deletions

diff --git a/src/App.js b/src/App.js
index e456b5c..b1d1dd1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,8 @@
 import useSWR from "swr";
 import { DateTime } from "luxon";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 import MainPage from "./MainPage";
+import History from "./History";
 import "./App.css";
 
 const url = "https://rcpoller.galenguyer.com/api/v0/history";
@@ -29,22 +31,36 @@ function App() {
     const lastUpdate = DateTime.fromSQL(latest.last_updated, { zone: "UTC" }).setZone(local);
 
     return (
-        <div className="App">
-            <h1 className="text-4xl">RIT Covid Dashboard</h1>
-            <h3>
-                Last Updated:{" "}
-                {lastUpdate.toLocaleString({
-                    weekday: "long",
-                    month: "long",
-                    day: "2-digit",
-                    hour: "2-digit",
-                    minute: "2-digit",
-                })}
-            </h3>
-            <br />
-            <br />
-            <MainPage latest={latest} prior={prior} />
-        </div>
+        <BrowserRouter>
+            <div className="App">
+                <h1 className="text-4xl">RIT Covid Dashboard</h1>
+                <h3>
+                    Last Updated:{" "}
+                    {lastUpdate.toLocaleString({
+                        weekday: "long",
+                        month: "long",
+                        day: "2-digit",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                    })}
+                </h3>
+                <br />
+                <br />
+                <Switch>
+                    <Route exact path="/">
+                        <MainPage latest={latest} prior={prior} />{" "}
+                    </Route>
+                    <Route path="/totalstudents">
+                        <History
+                            name="Total Student Cases"
+                            data={data.map((d) => {
+                                return { value: d.total_students, date: d.last_updated };
+                            })}
+                        />
+                    </Route>
+                </Switch>
+            </div>
+        </BrowserRouter>
     );
 }
 
diff --git a/src/History.js b/src/History.js
new file mode 100644
index 0000000..1fd39a3
--- /dev/null
+++ b/src/History.js
@@ -0,0 +1,67 @@
+import { React, PureComponent } from "react";
+import { DateTime } from "luxon";
+import { 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();
+    const data = props.data.map((d) => {
+        return {
+            value: d.value,
+            date: DateTime.fromSQL(d.date, { zone: "UTC" }).setZone(DateTime.local().zoneName).toSeconds(),
+        };
+    });
+    
+    return (
+        <>
+            <h3 className="text-3xl">{props.name}</h3>
+            <LineChart
+                style={{ marginLeft: "auto", marginRight: "auto" }}
+                width={730}
+                height={500}
+                margin={{ top: 15, right: 30, left: 20, bottom: 5 }}
+                data={data}
+            >
+                <Line type="monotone" dataKey="value" stroke="#8884d8" />
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis
+                    dataKey="date"
+                    type="number"
+                    tickCount={14}
+                    domain={["dataMin", "dataMax"]}
+                    tick={<CustomizedAxisTick />}
+                    height={90}
+                />
+                <YAxis dataKey="value" type="number"></YAxis>
+                <Tooltip content={CustomTooltip} />
+            </LineChart>
+        </>
+    );
+};
+
+class CustomizedAxisTick extends PureComponent {
+    render() {
+        const { x, y, payload } = this.props;
+
+        return (
+            <g transform={`translate(${x},${y})`}>
+                <text className="Graph-Label" x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-40)">
+                    {DateTime.fromSeconds(payload.value).toLocaleString()}
+                </text>
+            </g>
+        );
+    }
+}
+
+const CustomTooltip = ({ active, payload, label }) => {
+    if (active) {
+        return (
+            <div className="custom-tooltip bg-white border-blue-300 border-2 rounded-lg p-1">
+                <p className="label">{DateTime.fromSeconds(label).toLocaleString()}</p>
+                <p className="desc">{payload[0].value}</p>
+            </div>
+        );
+    }
+    return null;
+};
+
+export default History;