add three charts

src/App.js

@@ -1,23 +1,109 @@
 import logo from './logo.svg';
 import './App.css';
+import React, { useEffect, useState } from 'react';
+import BarChart from './BarChart';
+import TestResultChart from './TestResultChart';
+import GenderChart from './GenderChart';
+import RegistraionChart from './RegistraionChart';
+
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
+
+const firebaseConfig = {
+  apiKey: "AIzaSyBFl_YkJ5PMIvMY3G70313SyrqemjFnUv8",
+  authDomain: "hpos-af3cc.firebaseapp.com",
+  projectId: "hpos-af3cc",
+  storageBucket: "hpos-af3cc.appspot.com",
+  messagingSenderId: "650071678820",
+  appId: "1:650071678820:web:ce50538bf46632d46c6471",
+  measurementId: "G-6JHQ47S9DD"
+};
+
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+
+const db = getFirestore(app);
+
 
 function App() {
+  const [mtests, setMtests] = useState([]);
+  const [males, setMales] = useState(0);
+
+  useEffect(() => {
+    if (!mtests.length) {
+      console.log('mtests', mtests);
+      const tests = getTests();
+      // setMales(tests.length);
+    }
+  }, [mtests]);
+
+  async function getTests() {
+    const testDataCol = collection(db, 'testData');
+    const testDataSnapshot = await getDocs(testDataCol);
+    const testDataList = testDataSnapshot.docs.map(doc => doc.data());
+    console.log(testDataList);
+    setMtests(testDataList);
+    return testDataList;
+  }
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div style={{}}>
+      {/* <div className='card'>
+        <div className='title'>Age</div>
+        <div id="birthYear">
+          {mtests.length && <BarChart
+            id={1}
+            data={mtests.map(x => {
+              if (x.birthYear) return 2023 - x.birthYear;
+              if (x.patientAge) return 2023 - x.patientAge;
+            })}
+            width={700}
+            height={350} />}
+        </div>
+      </div> */}
+
+      <div className='card'>
+        <div className='title'>Registrations</div>
+        <div id="registration">
+          {mtests.length && <RegistraionChart
+            data={mtests}
+            width={700}
+            height={300} />}
+        </div>
+      </div>
+
+      <div className='card'>
+        <div className='title'>Male - Female</div>
+        <div id="gender">
+          {mtests.length && <GenderChart
+            data={mtests.map(x => { if (x.birthYear) return x.birthYear; })}
+            width={700}
+            height={300} />}
+        </div>
+      </div>
+
+
+      <div className='card'>
+        <div className='title'>Results</div>
+        <div id="results">
+          {mtests.length && <TestResultChart
+            id={2}
+            data={mtests}
+            width={700}
+            height={300} />}
+        </div>
+      </div>
+
+
+      {/* {JSON.stringify(
+        mtests.group(({ gender }) => {
+          if (gender === 'Male' || gender === 'Female')
+            return gender;
+          else
+            return "Not Specified";
+        })
+      )} */}
     </div>
   );
 }