change graph to normal

- add absorbance graph

src/App.js

@@ -7,7 +7,7 @@ import { getAnalytics } from "firebase/analytics";
 import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "firebase/firestore";
 import Card from './components/Card';
 
-// dev and test
+// /* dev and test */
 // const firebaseConfig = {
 //   apiKey: "AIzaSyBFl_YkJ5PMIvMY3G70313SyrqemjFnUv8",
 //   authDomain: "hpos-af3cc.firebaseapp.com",
@@ -19,7 +19,7 @@ import Card from './components/Card';
 // };
 
 
-// prod
+/* prod */
 const firebaseConfig = {
   apiKey: "AIzaSyBF4pLZReAedU4dWX1eRJNFNIaOIz2xk4s",
   authDomain: "hpos-prod.firebaseapp.com",
@@ -41,6 +41,7 @@ function App() {
   const [totalScreened, setTotalScreened] = useState(0);
   const [males, setMales] = useState(0);
   const [females, setFemales] = useState(0);
+  const [normal, setNormal] = useState(0);
   const [positives, setPositives] = useState(0);
   const [traits, setTraits] = useState(0);
   const [diseases, setDiseases] = useState(0);
@@ -77,12 +78,16 @@ function App() {
 
     const unsub = onSnapshot(q, (querySnapshot) => {
       const hposTests = [];
+      let normalCount = 0;
       let traitCount = 0;
       let diseaseCount = 0;
       querySnapshot.forEach((document) => {
         const hposTestData = document.data();
         hposTests.push(hposTestData);
         const { result } = hposTestData;
+        if (result === "NORMAL") {
+          normalCount++;
+        }
         if (result === 'SICKLECELLTRAIT') {
           traitCount++;
         }
@@ -90,6 +95,7 @@ function App() {
           diseaseCount++;
         }
       });
+      setNormal(normalCount);
       setPositives(traitCount + diseaseCount);
       setTraits(traitCount);
       setDiseases(diseaseCount);
@@ -128,7 +134,7 @@ function App() {
         </div>
 
         <div className='cards-row'>
-          <Card title={"Tested Positive"} counter={positives} backgroundColor={'rgb(244,137, 137)'} />
+          <Card title={"Normal"} counter={normal} backgroundColor={'rgb(192,233, 199)'} />
           <Card title={"Trait"} counter={traits} backgroundColor={'rgb(237, 190, 190)'} />
           <Card title={"Disease"} counter={diseases} backgroundColor={'rgb(249, 195, 195)'} />
         </div>