From 68ef757f96c9de48c7fd8fd1568e901de9c04ca9 Mon Sep 17 00:00:00 2001 From: prisar Date: Fri, 7 Jul 2023 08:48:14 +0530 Subject: [PATCH] update values using snapshot --- package.json | 2 +- src/App.css | 55 +++++++++++++---- src/App.js | 154 +++++++++++++++++++++++++----------------------- src/firebase.js | 16 +++++ 4 files changed, 141 insertions(+), 86 deletions(-) create mode 100644 src/firebase.js diff --git a/package.json b/package.json index d733e80..5f1967b 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "smi-dashboard", + "name": "hpos-dashboard", "version": "0.1.0", "private": true, "dependencies": { diff --git a/src/App.css b/src/App.css index c310710..0183a8c 100644 --- a/src/App.css +++ b/src/App.css @@ -29,7 +29,6 @@ body { color: white; } -/* remove scroll bar */ ::-webkit-scrollbar { display: none; } @@ -42,9 +41,7 @@ body { .numeric-card { height: 200px; width: 300px; - /* border: 1px solid; */ padding: 20px; - /* background-color: #fb9261; */ box-shadow: 5px 10px 8px 10px #888888; border-radius: 15px; margin: 20px; @@ -84,9 +81,7 @@ body { .numeric-card { height: 200px; width: 300px; - /* border: 1px solid; */ padding: 20px; - /* background-color: #fb9261; */ box-shadow: 5px 10px 8px 10px #888888; border-radius: 15px; margin: 20px; @@ -116,7 +111,7 @@ body { } .cards-row { - margin: 50px; + margin: 30px; display: flex; flex-direction: column; } @@ -126,9 +121,7 @@ body { .numeric-card { height: 150px; width: 200px; - /* border: 1px solid; */ padding: 20px; - /* background-color: #fb9261; */ box-shadow: 5px 10px 8px 10px #888888; border-radius: 15px; margin: 20px; @@ -167,10 +160,8 @@ body { @media screen and (min-width: 1200px) { .numeric-card { height: 200px; - width: 300px; - /* border: 1px solid; */ + width: 320px; padding: 20px; - /* background-color: #fb9261; */ box-shadow: 5px 10px 8px 10px #888888; border-radius: 15px; margin: 20px; @@ -200,7 +191,47 @@ body { } .cards-row { - margin: 50px; + margin: 40px; + display: flex; + flex-direction: row; + } +} + +@media screen and (min-width: 2560px) { + .numeric-card { + height: 200px; + width: 300px; + padding: 20px; + box-shadow: 5px 10px 8px 10px #888888; + border-radius: 15px; + margin: 20px; + justify-content: center; + display: flex; + flex-direction: column; + align-items: center; + } + + .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; + } + + .cards-row { + margin: 40px; display: flex; flex-direction: row; } diff --git a/src/App.js b/src/App.js index 5d7507b..a2ad37f 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,7 @@ import RegistraionChart from './RegistraionChart'; import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; -import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; +import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "firebase/firestore"; import Card from './components/Card'; const firebaseConfig = { @@ -29,16 +29,89 @@ const db = getFirestore(app); function App() { const [mtests, setMtests] = useState([]); + const [totalScreened, setTotalScreened] = useState(0); const [males, setMales] = useState(0); + const [females, setFemales] = useState(0); + const [traits, setTraits] = useState(0); + const [diseases, setDiseases] = useState(0); useEffect(() => { if (!mtests.length) { console.log('mtests', mtests); const tests = getTests(); - setMales(tests.length); + // setMales(tests.length); } }, [mtests]); + useEffect(() => { + // db.collection("patientData").onSnapshot((snapshot) => { + // setCustomersData( + // snapshot.docs.map((doc) => ({ + // id: doc.id, + // data: doc.data(), + // })) + // ); + // console.log(snapshot.docs); + // }); + + // h9JzA73TcJgS3CHmCvT5 + const q = query(collection(db, "patientData")); + + const unsub = onSnapshot(q, (querySnapshot) => { + // const source = doc.metadata.hasPendingWrites ? "Local" : "Server"; + // console.log(source, " data: ", doc.data()); + console.log("snapshot", querySnapshot); + + const patients = []; + let maleCount = 0; + let femaleCount = 0; + querySnapshot.forEach((document) => { + const patient = document.data(); + patients.push(patient); + console.log("patient", patient); + const {gender} = patient; + if (gender === 'Male') { + maleCount++; + } + if (gender === 'Female') { + femaleCount++; + } + }); + setTotalScreened(patients.length); + setMales(maleCount); + setFemales(femaleCount); + }); + }, []); + + useEffect(() => { + const q = query(collection(db, "testData")); + + const unsub = onSnapshot(q, (querySnapshot) => { + // const source = doc.metadata.hasPendingWrites ? "Local" : "Server"; + // console.log(source, " data: ", doc.data()); + console.log("snapshot", querySnapshot); + + const hposTests = []; + let traitCount = 0; + let diseaseCount = 0; + querySnapshot.forEach((document) => { + const hposTestData = document.data(); + hposTests.push(hposTestData); + console.log("hposTestData", hposTestData); + const {result} = hposTestData; + if (result === 'Trait') { + traitCount++; + } + if (result === 'Disease') { + diseaseCount++; + } + }); + setTotalScreened(traitCount + diseaseCount); + setTraits(traitCount); + setDiseases(diseaseCount); + }); + }, []); + async function getTests() { try { const testDataCol = collection(db, 'testData'); @@ -54,84 +127,19 @@ function App() { return (
- {/*
-
Age
-
- {mtests.length && { - if (x.birthYear) return 2023 - x.birthYear; - if (x.patientAge) return 2023 - x.patientAge; - })} - width={700} - height={350} />} -
-
*/} - - {/*
-
Total People Screened for the day
-
- {mtests.length && } -
-
- -
-
Registrations
-
- {mtests.length && } -
-
- -
-
Male - Female
-
- {mtests.length && { if (x.birthYear) return x.birthYear; })} - width={700} - height={300} />} -
-
- - -
-
Results
-
- {mtests.length && } -
-
*/} -
- - - + + +
- - - + + +
- - {/* {JSON.stringify( - mtests.group(({ gender }) => { - if (gender === 'Male' || gender === 'Female') - return gender; - else - return "Not Specified"; - }) - )} */}
); } diff --git a/src/firebase.js b/src/firebase.js new file mode 100644 index 0000000..ff1bd1a --- /dev/null +++ b/src/firebase.js @@ -0,0 +1,16 @@ +import firebase from "firebase"; + +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 firebaseApp = firebase.initializeApp(firebaseConfig); +const db = firebase.firestore(); + +export default db; \ No newline at end of file