cards

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "hpos-af3cc"
+  }
+}

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.firebase

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/App.css

@@ -1,7 +1,8 @@
 body {
-  /* background-color: #282c34;
+  background-color: rgb(247,245,249);
-  color: aliceblue; */
+  color: aliceblue;
 }
+
 .App {
   text-align: center;
 }
@@ -28,20 +29,6 @@ body {
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 /* remove scroll bar */
 ::-webkit-scrollbar {
   display: none;
@@ -51,20 +38,58 @@ body {
   font-weight: 900;
 }
 
-.card {
+.numeric-card {
-  /* height: 300px;
+  height: 200px;
-  width: 400px; */
+  width: 300px;
-  border: 1px solid;
+  /* border: 1px solid; */
-  padding: 10px;
+  padding: 20px;
-  /* box-shadow: 5px 10px 8px 10px #888888; */
+  /* background-color: #fb9261; */
-  /* justify-content: center;
+  box-shadow: 5px 10px 8px 10px #888888;
+  border-radius: 15px;
+  margin: 20px;
+  justify-content: center;
   display: flex;
-  align-items: center; */
+  flex-direction: column;
+  align-items: center;
 }
 
-div.chart{ font-family:sans-serif; font-size:0.7em;
+.card-title {
+  color: black;
+  font-size: 1em;
+  font-weight: 600;
+  font-family: sans-serif;
 }
+
+.card-data {
+  color: black;
+  font-size: 4em;
+  font-family: sans-serif;
+}
+
+.cards-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+
+div.chart {
+  font-family: sans-serif;
+  font-size: 0.7em;
+}
+
+.cards-row {
+  margin: 50px;
+  display: flex;
+  flex-direction: row;
+}
+
 div.bar {
-background-color:DarkRed; color:white;
+  background-color: DarkRed;
-height:3em; line-height:3em; padding-right:1em; margin-bottom:2px; text-align:right;
+  color: white;
+  height: 3em;
+  line-height: 3em;
+  padding-right: 1em;
+  margin-bottom: 2px;
+  text-align: right;
 }
+

src/App.js

@@ -9,6 +9,7 @@ import RegistraionChart from './RegistraionChart';
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
 import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
+import Card from './components/Card';
 
 const firebaseConfig = {
   apiKey: "AIzaSyBFl_YkJ5PMIvMY3G70313SyrqemjFnUv8",
@@ -34,17 +35,21 @@ function App() {
     if (!mtests.length) {
       console.log('mtests', mtests);
       const tests = getTests();
-      // setMales(tests.length);
+      setMales(tests.length);
     }
   }, [mtests]);
 
   async function getTests() {
-    const testDataCol = collection(db, 'testData');
+    try {
-    const testDataSnapshot = await getDocs(testDataCol);
+      const testDataCol = collection(db, 'testData');
-    const testDataList = testDataSnapshot.docs.map(doc => doc.data());
+      const testDataSnapshot = await getDocs(testDataCol);
-    console.log(testDataList);
+      const testDataList = testDataSnapshot.docs.map(doc => doc.data());
-    setMtests(testDataList);
+      console.log(testDataList);
-    return testDataList;
+      setMtests(testDataList);
+      return testDataList;
+    } catch (err) {
+      // log error
+    }
   }
 
   return (
@@ -63,6 +68,16 @@ function App() {
         </div>
       </div> */}
 
+      {/* <div className='card'>
+        <div className='title'>Total People Screened for the day</div>
+        <div id="registration">
+          {mtests.length && <RegistraionChart
+            data={mtests}
+            width={700}
+            height={300} />}
+        </div>
+      </div>
+
       <div className='card'>
         <div className='title'>Registrations</div>
         <div id="registration">
@@ -93,8 +108,21 @@ function App() {
             width={700}
             height={300} />}
         </div>
-      </div>
+      </div> */}
 
+      <div className='cards-container'>
+        <div className='cards-row'>
+          <Card title={"Screened"} counter={"123"} color={'black'} backgroundColor={'rgb(254, 240, 227)'} />
+          <Card title={"Male"} counter={"24"} backgroundColor={'rgb(234, 240, 230)'} />
+          <Card title={"Female"} counter={"12"} backgroundColor={'rgb(234, 246, 245)'} />
+        </div>
+
+        <div className='cards-row'>
+          <Card title={"Tested Positive"} counter={"2"} backgroundColor={'yellow'} />
+          <Card title={"Trait"} counter={"56"} backgroundColor={'brown'} />
+          <Card title={"Disease"} counter={"40"} backgroundColor={'azure'} />
+        </div>
+      </div>
 
       {/* {JSON.stringify(
         mtests.group(({ gender }) => {

src/RegistraionChart.js

@@ -37,7 +37,15 @@ class RegistraionChart extends Component {
         const data =
             [
                 {
-                    "type": "Registration",
+                    "gender": "Male",
+                    "count": 50,
+                },
+                {
+                    "gender": "Female",
+                    "count": 70,
+                },
+                {
+                    "gender": "Not Specified",
                     "count": 60,
                 }
             ];
@@ -51,7 +59,7 @@ class RegistraionChart extends Component {
             .enter()
             .append("div").attr("class", "line");
         d3.selectAll("div.line").append("div")
-            .attr("class", "label").text(function (d) { return d.type });
+            .attr("class", "label").text(function (d) { return d.gender });
         d3.selectAll("div.line").append("div")
             .attr("class", "bar")
             .style("width", function (d) { return d.count + "px" }).text(function (d) { return Math.round(d.count) });

src/TestResultChart.js

@@ -10,6 +10,12 @@ class TestResultChart extends Component {
 
     drawChart() {
         // const data = this.props.data;
+        // const groups = data.group(({result}) => result);
+        // // console.log();
+        // for (const [key, value] of Object.entries(groups)) {
+        //     console.log(`${key}: ${value}`);
+        //   }
+        // groups.entries(x => console.log(x));
 
         const data =
             [
@@ -34,6 +40,7 @@ class TestResultChart extends Component {
                     "count": 2,
                 },
             ];
+
         // d3.select("#gender").append("div")
         //     .attr("class", "chart").selectAll(".bar").data(data).enter()
         //     .append("div")

src/components/Card.js

@@ -0,0 +1,13 @@
+const Card = ({title, counter, color, backgroundColor}) => {
+    return (
+        <div className='numeric-card' style={{color: color, backgroundColor: backgroundColor}}>
+            <div className='card-title'>
+                {title}
+            </div>
+            <div className='card-data'>
+                {counter}
+            </div>
+        </div>
+    );
+}
+export default Card;