Added Few Charts

package.json

@@ -5,14 +5,17 @@
   "homepage": "http://covid19india.github.io/",
   "dependencies": {
     "axios": "^0.19.2",
+    "chart.js": "^2.9.3",
     "d3": "^5.15.0",
     "d3-svg-legend": "^2.25.6",
     "date-fns": "^2.11.0",
     "install": "^0.13.0",
     "json2csv": "^5.0.0",
+    "moment": "^2.24.0",
     "node-sass": "^4.13.1",
     "npm": "^6.14.3",
     "react": "^16.13.1",
+    "react-chartjs-2": "^2.9.0",
     "react-dom": "^16.13.1",
     "react-feather": "^2.0.3",
     "react-router-dom": "^5.1.2",

src/App.js

@@ -15,7 +15,7 @@ import Links from './components/links';
 import Cluster from './components/cluster';
 import FAQ from './components/faq';
 import Banner from './components/banner';
-/* import PatientDB from './components/patientdb';*/
+import DeepDive from './components/deepdive';
 
 const history = require('history').createBrowserHistory;
 
@@ -39,6 +39,12 @@ function App() {
       displayName: 'Clusters',
       animationDelayForNavbar: 0.4,
     },
+    {
+      pageLink: '/deepdive',
+      view: DeepDive,
+      displayName: 'Deep Dive',
+      animationDelayForNavbar: 0.4,
+    },
     {
       pageLink: '/links',
       view: Links,

src/App.scss

@@ -1676,6 +1676,44 @@ footer {
   }
 }
 
+.cards-container {
+  padding: 4rem;
+  .cards {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .card {
+      margin-bottom: 2em;
+      flex: 0 1 calc(33% - 1em);
+      box-shadow: rgba(#000, 0.2) 0 0 8px 0;
+      &:hover {
+        box-shadow: rgba(#000, 0.3) 0 0 8px 0;
+      }
+      height: 30rem;
+        .charts-header {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-start;
+          .chart-title {
+            font-family: 'archia';
+            font-size: 1.5rem !important;
+            color: #6c757d;
+            font-weight: 900;
+            text-transform: uppercase;
+            padding: 20px 0 20px 0;
+          }
+
+          .chart-content {
+            height: 100%;
+            width: 100%;
+          }
+        }
+    }
+  }
+}
+
 @media (max-width: 769px) {
   .TimeSeries,
   table,
@@ -1768,6 +1806,16 @@ footer {
     }
   }
 
+  .cards-container {
+    padding: 1rem;
+    .cards {
+      .card {
+        flex: 0 1 calc(100%);
+      }
+    }
+  }
+}
+
   .PatientsDB {
     width: 100%;
     .header {
@@ -1791,7 +1839,6 @@ footer {
   .table-fineprint {
     margin-right: 1.25rem;
   }
-}
 
 .iframe-container {
   width: 100%;