From c305c1b7b5f11eb01247b051f719f73269b1d504 Mon Sep 17 00:00:00 2001
From: Tanmay <tanmaylaud@gmail.com>
Date: Mon, 27 Jul 2020 20:31:41 +0530
Subject: [PATCH] Added active cases and hover scaling

---
 src/App.tsx     | 20 +++++++++++++-------
 src/Counter.tsx |  3 ++-
 src/Country.tsx |  1 +
 src/Globe.tsx   | 16 ++++++----------
 src/Spinner.tsx |  3 +++
 src/styles.css  | 50 +++++++++++++++++++++++++++++++++++++++++++++----
 6 files changed, 71 insertions(+), 22 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9a49e20..b3ed2c3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,8 +8,11 @@ import { Spinner } from "./Spinner";
 
 export default function App() {
   const [totals, setTotals] = useState<number[]>([]);
-
+  const [loaderTimeout, timedOut] = useState(false);
   useEffect(() => initGlobe(), []);
+  useEffect(() => {
+    setTimeout(() => timedOut(true), 5000);
+  }, []);
   useEffect(() => {
     setTimeout(() => {
       let total: number[] = [];
@@ -24,13 +27,16 @@ export default function App() {
     <React.Fragment>
       <div id="globeViz"></div>
       <div className="top-info-container">
-        <div className="title">COVID-19</div>
+        <div className="title">COVID-19 Globe Tracker</div>
         <div className="title-desc">
-          Loading countries affected by the virus...
+          Hover on a country or territory to see cases, deaths, and recoveries.
         </div>
       </div>
       <div className="bottom-info-container">
-        <Spinner loaded={GlobalCounts.set} />
+        <span className="gradient-container">
+          LOW<div className="gradient"></div>HIGH
+        </span>
+        <Spinner loaded={GlobalCounts.set || loaderTimeout} />
         {GlobalCounts.set ? (
           <>
             <div
@@ -61,14 +67,14 @@ export default function App() {
             </div>
           </>
         ) : null}
-        <div style={{ marginTop: "5px" }}>
+        <div className="moreInfo" style={{ marginTop: "5px" }}>
           <a
             href="https://github.com/tanmaylaud/covid19-globe-tracker"
             rel="noopener noreferrer"
             target="_BLANK"
-            style={{ color: "#ffffff", textDecoration: "none" }}
+            style={{ color: "yellow", textDecoration: "none" }}
           >
-            More Information
+            Click For More Information
           </a>
         </div>
       </div>
diff --git a/src/Counter.tsx b/src/Counter.tsx
index 143a33f..9961817 100644
--- a/src/Counter.tsx
+++ b/src/Counter.tsx
@@ -10,7 +10,8 @@ export function Counter({ count }: CounterProps) {
 
   useEffect(() => {
     if (counter != count) {
-      if (count - counter <= 1000) setCounter(counter + 1);
+      if (count - count <= 200) setCounter(counter + 1);
+      if (count - counter <= 1000) setCounter(counter + 100);
       else if (counter < 10000) setCounter(counter + 1000);
       else setCounter(counter + 10000);
     }
diff --git a/src/Country.tsx b/src/Country.tsx
index 205d8be..1214d51 100644
--- a/src/Country.tsx
+++ b/src/Country.tsx
@@ -8,4 +8,5 @@ export interface Country {
   confirmed: number;
   recoveries: number;
   deaths: number;
+  active: number;
 }
diff --git a/src/Globe.tsx b/src/Globe.tsx
index 472562b..5ca51ac 100644
--- a/src/Globe.tsx
+++ b/src/Globe.tsx
@@ -11,7 +11,7 @@ import { Countries, Country } from "./Country";
 import { GlobalCounts } from "./GlobalCounts";
 
 const getVal = (feat: any) => {
-  return Math.pow(feat.covidData.confirmed / feat.properties.POP_EST, 1 / 4);
+  return Math.pow(feat.covidData.active / feat.properties.POP_EST, 1 / 4);
 };
 
 interface Feature {
@@ -66,10 +66,6 @@ async function getCases() {
   countries = await request(CASES_API);
   featureCollection = (await request(GEOJSON_URL)).features;
 
-  // world.polygonsData(countriesWithCovid);
-  document.querySelector(".title-desc")!.innerHTML =
-    "Hover on a country or territory to see cases, deaths, and recoveries.";
-
   dates = Object.keys(countries.China);
 
   updateCounters();
@@ -78,11 +74,6 @@ async function getCases() {
   updatePointOfView();
 }
 
-//const infectedEl = document.querySelector("#infected")!;
-//const deathsEl = document.querySelector("#deaths")!;
-//const recoveriesEl = document.querySelector("#recovered")!;
-//const updatedEl = document.querySelector(".updated")!;
-
 function updateCounters() {
   let totalConfirmed = 0;
   let totalDeaths = 0;
@@ -112,12 +103,17 @@ function updatePolygonsData() {
         confirmed: countries[country][dates[date]].confirmed,
         deaths: countries[country][dates[date]].deaths,
         recoveries: countries[country][dates[date]].recoveries,
+        active:
+          countries[country][dates[date]].confirmed -
+          countries[country][dates[date]].deaths -
+          countries[country][dates[date]].recoveries,
       };
     } else {
       featureCollection[x].covidData = {
         confirmed: 0,
         deaths: 0,
         recoveries: 0,
+        active: 0,
       };
     }
   }
diff --git a/src/Spinner.tsx b/src/Spinner.tsx
index d6e9c80..4431066 100644
--- a/src/Spinner.tsx
+++ b/src/Spinner.tsx
@@ -4,6 +4,9 @@ export function Spinner(props: { loaded: boolean }) {
   return !props.loaded ? (
     <div className="spinbody">
       <div className="spinner"></div>
+      <p style={{ position: "absolute", left: "40%", bottom: "50px" }}>
+        Loading latest data...
+      </p>
     </div>
   ) : null;
 }
diff --git a/src/styles.css b/src/styles.css
index 2a1974d..ffc6221 100755
--- a/src/styles.css
+++ b/src/styles.css
@@ -4,7 +4,7 @@
 }
 
 body {
-  font-family: "Space Mono", monospace;
+  font-family: "Calibri", monospace;
   overflow: hidden;
   background: black;
 }
@@ -13,7 +13,7 @@ body {
   z-index: 1;
   top: 20px;
   position: absolute;
-  color: white;
+  color: red;
   text-align: center;
   width: 100%;
 }
@@ -29,7 +29,7 @@ body {
 
 .title {
   font-size: 35px;
-  color: #e6f1ff;
+  color: red;
 }
 
 .title-desc {
@@ -41,15 +41,29 @@ body {
 #infected {
   color: goldenrod;
 }
+#infected:hover {
+  font-size: 40px;
+}
 
 #deaths {
   color: #ff4848;
 }
+#deaths:hover {
+  font-size: 40px;
+}
 
 #recovered {
   color: #1ae021;
 }
-
+#recovered:hover {
+  font-size: 40px;
+}
+#active {
+  color: #04ffff;
+}
+#active:hover {
+  font-size: 40px;
+}
 .card {
   font-family: "Space Mono", monospace;
   transition: 0.3s;
@@ -93,7 +107,35 @@ body {
 .scene-tooltip {
   z-index: 2;
 }
+.gradient-container {
+  text-align: center;
+}
+.gradient-container > div {
+  position: relative;
+  display: inline-block;
+}
+.gradient {
+  margin-left: 10px;
+  margin-right: 10px;
+  width: 200px;
+  height: 20px;
+  background-color: red;
+  background-image: linear-gradient(
+    to right,
+    rgb(248, 231, 231),
+    rgb(255, 2, 2),
+    #850000
+  );
+}
 
+.moreInfo {
+  border-bottom: #ff4848;
+  border-color: red;
+  color: yellow;
+}
+.moreInfo:hover {
+  font-size: 40px;
+}
 @media only screen and (max-width: 768px) {
   .bottom-info-container {
     z-index: 1;