diff --git a/public/index.html b/public/index.html index aa069f2..989096f 100644 --- a/public/index.html +++ b/public/index.html @@ -2,12 +2,12 @@ - + - React App + HPOS Sickel Cell Test Dashboard diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..e3aba52 Binary files /dev/null and b/public/logo.png differ diff --git a/src/App.css b/src/App.css index 0183a8c..4a22498 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,5 @@ body { background-color: rgb(247, 245, 249); - color: aliceblue; } .App { @@ -37,6 +36,32 @@ body { font-weight: 900; } +.dashboard-title { + font-family: Arial Black; + text-align: center; + align-self: center; + font-size: xx-large; + background-color: rgb(215, 192, 252); +} + +.last-update { + font-size: small; + text-align: end; +} + +.developer { + font-size: x-small; + font-weight: 600; +} + +.dev-logo { + width: 1em; +} + +.nscm-logo { + width: 1em; +} + @media screen and (min-width: 320px) { .numeric-card { height: 200px; @@ -75,6 +100,13 @@ body { display: flex; flex-direction: column; } + + .dashboard-title { + text-align: center; + align-self: center; + font-size: xx-large; + background-color: rgb(215, 192, 252); + } } @media screen and (min-width: 500px) { @@ -100,7 +132,7 @@ body { .card-data { color: black; - font-size: 4em; + font-size: 8em; font-family: sans-serif; } @@ -115,6 +147,13 @@ body { display: flex; flex-direction: column; } + + .dashboard-title { + text-align: center; + align-self: center; + font-size: xx-large; + background-color: rgb(215, 192, 252); + } } @media (min-width: 900px) { @@ -155,6 +194,13 @@ body { display: flex; flex-direction: row; } + + .dashboard-title { + text-align: center; + align-self: center; + font-size: xx-large; + background-color: rgb(215, 192, 252); + } } @media screen and (min-width: 1200px) { @@ -195,6 +241,13 @@ body { display: flex; flex-direction: row; } + + .dashboard-title { + text-align: center; + align-self: center; + font-size: xx-large; + background-color: rgb(215, 192, 252); + } } @media screen and (min-width: 2560px) { @@ -231,10 +284,17 @@ body { } .cards-row { - margin: 40px; + margin: 20px; display: flex; flex-direction: row; } + + .dashboard-title { + text-align: center; + align-self: center; + font-size: xx-large; + background-color: rgb(215, 192, 252); + } } div.chart { diff --git a/src/App.js b/src/App.js index 06dc12d..0985b82 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import logo from './logo.svg'; +import logo from './logo.png'; import './App.css'; import React, { useEffect, useState } from 'react'; import BarChart from './BarChart'; @@ -32,8 +32,10 @@ function App() { const [totalScreened, setTotalScreened] = useState(0); const [males, setMales] = useState(0); const [females, setFemales] = useState(0); + const [positives, setPositives] = useState(0); const [traits, setTraits] = useState(0); const [diseases, setDiseases] = useState(0); + const [lastUpdate, setLastUpdate] = useState(Date.now()); useEffect(() => { @@ -46,7 +48,6 @@ function App() { querySnapshot.forEach((document) => { const patient = document.data(); patients.push(patient); - console.log("patient", patient); const { gender } = patient; if (gender === 'Male') { maleCount++; @@ -58,6 +59,7 @@ function App() { setTotalScreened(patients.length); setMales(maleCount); setFemales(femaleCount); + setLastUpdate(Date.now()); }); }, []); @@ -79,9 +81,10 @@ function App() { diseaseCount++; } }); - setTotalScreened(traitCount + diseaseCount); + setPositives(traitCount + diseaseCount); setTraits(traitCount); setDiseases(diseaseCount); + setLastUpdate(lastUpdate); }); }, []); @@ -99,7 +102,13 @@ function App() { } return ( -
+
+
+ HPOS Sickel Cell Test Dashboard +
+
+ Updated At: {Date(lastUpdate).toString()} +
@@ -108,10 +117,14 @@ function App() {
- +
+ +
+ Developed by ShanMukha +
); diff --git a/src/logo.png b/src/logo.png new file mode 100644 index 0000000..e3aba52 Binary files /dev/null and b/src/logo.png differ diff --git a/src/logo_nobg.png b/src/logo_nobg.png new file mode 100644 index 0000000..2e198ce Binary files /dev/null and b/src/logo_nobg.png differ diff --git a/src/smi-logo-120x120.webp b/src/smi-logo-120x120.webp new file mode 100644 index 0000000..9caae85 Binary files /dev/null and b/src/smi-logo-120x120.webp differ