add positiveTests table

2 files changed, 56 insertions, 1 deletions

diff --git a/src/App.js b/src/App.js
index fbee2c1..77d9a41 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import { DateTime } from "luxon";
 import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
 import MainPage from "./MainPage";
 import History from "./History";
+import HistoryTable from "./HistoryTable";
 import "./App.css";
 
 const url = "https://ritcoviddashboard.com/api/v0/history";
@@ -33,7 +34,18 @@ function App() {
     const local = DateTime.local().zoneName;
     const lastUpdate = DateTime.fromSQL(latest.last_updated, { zone: "UTC" }).setZone(local);
     const priorUpdate = DateTime.fromSQL(prior.last_updated, { zone: "UTC" }).setZone(local);
-
+    let positiveCases = [];
+    for (let i = 1; i < data.length; i++) {
+        positiveCases.push({
+            date: data[i].last_updated,
+            value: (
+                ((data[i].total_students - data[i - 1].total_students) * 100) /
+                (data[i].tests_administered - data[i - 1].tests_administered)
+            ).toFixed(1),
+        });
+    }
+    positiveCases = positiveCases.filter((o) => o.value > 0 && o.value <= 100);
+    console.log(positiveCases);
     return (
         <BrowserRouter>
             <div className="App">
@@ -145,6 +157,9 @@ function App() {
                             })}
                         />
                     </Route>
+                    <Route path="/positivetests">
+                        <HistoryTable name="Positive Tests" data={positiveCases} />
+                    </Route>
                     <Route path="/beds">
                         <History
                             name="Bed Availability"
diff --git a/src/HistoryTable.js b/src/HistoryTable.js
new file mode 100644
index 0000000..fb27f0e
--- /dev/null
+++ b/src/HistoryTable.js
@@ -0,0 +1,40 @@
+import { React } from "react";
+import { DateTime } from "luxon";
+import GoatCounter from "./GoatCounter";
+
+const HistoryTable = (props) => {
+    const data = props.data;
+    console.log(data);
+    let table = (
+        <table className="table-auto" style={{ marginLeft: "auto", marginRight: "auto" }}>
+            <tbody>
+                <tr>
+                    <td className="border py-2 px-4">Date</td>
+                    <td className="border py-2 px-4">Positive Case Rate</td>
+                </tr>
+                {data.map((element) => {
+                    return (
+                        <tr>
+                            <td className="border px-4" py-2>
+                                {DateTime.fromSQL(element.date, { zone: "UTC" })
+                                    .setZone(DateTime.local().zoneName)
+                                    .toLocaleString({ weekday: "long", month: "long", day: "2-digit" })}
+                            </td>
+                            <td className="border px-4 py-2">{element.value}%</td>
+                        </tr>
+                    );
+                })}
+            </tbody>
+        </table>
+    );
+
+    return (
+        <>
+            <h3 className="text-3xl">{props.name}</h3>
+            {table}
+            <GoatCounter />
+        </>
+    );
+};
+
+export default HistoryTable;