From 06521cc5fdfe293379411941d3654eb75dbad2e1 Mon Sep 17 00:00:00 2001
From: Tanmay <tanmaylaud@gmail.com>
Date: Fri, 7 Aug 2020 17:33:42 +0530
Subject: [PATCH 1/2] Added active label per country

---
 src/PolygonLabel.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/PolygonLabel.tsx

diff --git a/src/PolygonLabel.tsx b/src/PolygonLabel.tsx
new file mode 100644
index 0000000..1069cd4
--- /dev/null
+++ b/src/PolygonLabel.tsx
@@ -0,0 +1,22 @@
+import { format } from "d3";
+import { FLAG_ENDPOINT } from "./Constants";
+import { numberWithCommas } from "./utils";
+
+export function getPolygonLabel(flagName: string, d: any, c: any): string {
+  return `
+          <div class="card">
+            <img class="card-img" src="${FLAG_ENDPOINT}/${flagName}.png" alt="flag" />
+            <div class="container">
+               <span class="card-title"><b>${d.NAME}</b></span> <br />
+               <div class="card-spacer"></div>
+               <hr />
+               <div class="card-spacer"></div>
+               <span>Cases: ${numberWithCommas(c.confirmed)}</span>  <br />
+               <span>Deaths: ${numberWithCommas(c.deaths)}</span> <br />
+               <span>Recovered: ${numberWithCommas(c.recoveries)}</span> <br />
+               <span>Active: ${numberWithCommas(c.active)}</span>  <br />
+               <span>Population: ${format(".3s")(d.POP_EST)}</span>
+            </div>
+          </div>
+        `;
+}

From 5fc3643d514e9c4235304bb3c5c8489720854f82 Mon Sep 17 00:00:00 2001
From: Tanmay <tanmaylaud@gmail.com>
Date: Fri, 7 Aug 2020 17:34:06 +0530
Subject: [PATCH 2/2] Fixed missing flag for Norway

---
 src/Globe.tsx       | 19 +++++++++++++++----
 src/utils/index.tsx | 20 --------------------
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/src/Globe.tsx b/src/Globe.tsx
index 5ca51ac..e85969c 100644
--- a/src/Globe.tsx
+++ b/src/Globe.tsx
@@ -1,5 +1,5 @@
 import Globe, { GlobeInstance } from "globe.gl";
-import { request, getCoordinates, getPolygonLabel } from "./utils";
+import { request, getCoordinates } from "./utils";
 import {
   GLOBE_IMAGE_URL,
   BACKGROUND_IMAGE_URL,
@@ -9,6 +9,7 @@ import {
 import { interpolateReds, scaleSequential } from "d3";
 import { Countries, Country } from "./Country";
 import { GlobalCounts } from "./GlobalCounts";
+import { getPolygonLabel } from "./PolygonLabel";
 
 const getVal = (feat: any) => {
   return Math.pow(feat.covidData.active / feat.properties.POP_EST, 1 / 4);
@@ -38,8 +39,7 @@ export function initGlobe() {
     .polygonSideColor(() => "rgba(100, 100, 100, 0.05)")
     .polygonStrokeColor(() => "#ffff")
     .polygonLabel(({ properties: d, covidData: c }: any) => {
-      const flagName = d.ADMIN === "France" ? "fr" : d.ISO_A2.toLowerCase();
-
+      const flagName = getFlagName(d);
       return getPolygonLabel(flagName, d, c);
     })
     .onPolygonHover((hoverD: any) =>
@@ -56,6 +56,17 @@ export function initGlobe() {
     world.width(window.innerWidth);
     world.height(window.innerHeight);
   });
+
+  function getFlagName(d: any) {
+    switch (d.ADMIN) {
+      case "France":
+        return "fr";
+      case "Norway":
+        return "no";
+      default:
+        return d.ISO_A2.toLowerCase();
+    }
+  }
 }
 
 let dates: string[] = [];
@@ -66,7 +77,7 @@ async function getCases() {
   countries = await request(CASES_API);
   featureCollection = (await request(GEOJSON_URL)).features;
 
-  dates = Object.keys(countries.China);
+  dates = Object.keys(countries.India);
 
   updateCounters();
   updatePolygonsData();
diff --git a/src/utils/index.tsx b/src/utils/index.tsx
index db07c22..d5902d5 100644
--- a/src/utils/index.tsx
+++ b/src/utils/index.tsx
@@ -1,6 +1,4 @@
 import dayjs from "dayjs";
-import { format } from "d3";
-import { FLAG_ENDPOINT } from "../Constants";
 
 export async function request(url: string) {
   try {
@@ -46,21 +44,3 @@ export const isMobile = (function (a) {
   );
   // @ts-ignore
 })(navigator.userAgent || navigator.vendor || window.opera);
-
-export function getPolygonLabel(flagName: any, d: any, c: any): string {
-  return `
-        <div class="card">
-          <img class="card-img" src="${FLAG_ENDPOINT}/${flagName}.png" alt="flag" />
-          <div class="container">
-             <span class="card-title"><b>${d.NAME}</b></span> <br />
-             <div class="card-spacer"></div>
-             <hr />
-             <div class="card-spacer"></div>
-             <span>Cases: ${numberWithCommas(c.confirmed)}</span>  <br />
-             <span>Deaths: ${numberWithCommas(c.deaths)}</span> <br />
-             <span>Recovered: ${numberWithCommas(c.recoveries)}</span> <br />
-             <span>Population: ${format(".3s")(d.POP_EST)}</span>
-          </div>
-        </div>
-      `;
-}