aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGalen Guyer <galen@galenguyer.com>2020-11-13 21:09:41 -0500
committerGalen Guyer <galen@galenguyer.com>2020-11-13 21:09:41 -0500
commit7c69c7207d9754130a84619d910feaf66754dd04 (patch)
tree717c15222bfe390f437a5a4b7a65ef1e3e0e3773
parent26f0066f9b2daa904d4fe4cac80841cbe40360ca (diff)
Add cards for total cases
-rw-r--r--src/App.css34
-rw-r--r--src/App.js10
-rw-r--r--src/Card.css3
-rw-r--r--src/Card.js24
4 files changed, 38 insertions, 33 deletions
diff --git a/src/App.css b/src/App.css
index 78b8850..0f57d9d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,37 +2,9 @@
text-align: center;
}
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
+.Section {
display: flex;
- flex-direction: column;
- align-items: center;
justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+ margin-left: auto;
+ margin-right: auto;
}
diff --git a/src/App.js b/src/App.js
index 0600437..e7137a2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
import useSWR from "swr";
-import logo from "./logo.svg";
+import Card from "./Card";
import "./App.css";
const url = "https://rcpoller.galenguyer.com/api/v0/history";
@@ -22,10 +22,16 @@ function App() {
</div>
);
+ const latest = data[data.length - 1];
+ const prior = data[data.length - 2];
+
return (
<div className="App">
<h1>RIT Covid Dashboard</h1>
- <h2>Data Loaded</h2>
+ <div className="Section">
+ <Card name="Total Student Cases" latest={latest.total_students} prior={prior.total_students} />
+ <Card name="Total Staff Cases" latest={latest.total_staff} prior={prior.total_staff} />
+ </div>
</div>
);
}
diff --git a/src/Card.css b/src/Card.css
new file mode 100644
index 0000000..68d41ed
--- /dev/null
+++ b/src/Card.css
@@ -0,0 +1,3 @@
+.Card {
+ padding: 16px;
+}
diff --git a/src/Card.js b/src/Card.js
new file mode 100644
index 0000000..310848d
--- /dev/null
+++ b/src/Card.js
@@ -0,0 +1,24 @@
+import React from "react";
+import "./Card.css";
+
+const Card = (props) => {
+ let diff = props.latest - props.prior;
+ if (diff >= 0) {
+ diff = "+" + diff.toString();
+ }
+ return (
+ <div className="Card">
+ <h3>{props.name}</h3>
+ <p>
+ {props.latest}
+ {props.suffix}{" "}
+ <span className="Diff">
+ ({diff}
+ {props.suffix})
+ </span>
+ </p>
+ </div>
+ );
+};
+
+export default Card;