smiuser/hpos-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add suggested changes

Browse Source 
- logo of nscm
 - dashboard title
 - favicon
 - company name
This commit is contained in:
prisar
2023-07-08 14:07:47 +05:30
parent cb697fdf14
commit 924a24d334
7 changed files with 84 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@@ -2,12 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="HPOS Sickel Cell Test Dashboard"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>HPOS Sickel Cell Test Dashboard</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

66
src/App.css
View File

@@ -1,6 +1,5 @@
body { body {
background-color: rgb(247, 245, 249); background-color: rgb(247, 245, 249);
color: aliceblue;
} }
.App { .App {
@@ -37,6 +36,32 @@ body {
font-weight: 900; 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) { @media screen and (min-width: 320px) {
.numeric-card { .numeric-card {
height: 200px; height: 200px;
@@ -75,6 +100,13 @@ body {
display: flex; display: flex;
flex-direction: column; 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) { @media screen and (min-width: 500px) {
@@ -100,7 +132,7 @@ body {
.card-data { .card-data {
color: black; color: black;
font-size: 4em; font-size: 8em;
font-family: sans-serif; font-family: sans-serif;
} }
@@ -115,6 +147,13 @@ body {
display: flex; display: flex;
flex-direction: column; 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) { @media (min-width: 900px) {
@@ -155,6 +194,13 @@ body {
display: flex; display: flex;
flex-direction: row; 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) { @media screen and (min-width: 1200px) {
@@ -195,6 +241,13 @@ body {
display: flex; display: flex;
flex-direction: row; 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) { @media screen and (min-width: 2560px) {
@@ -231,10 +284,17 @@ body {
} }
.cards-row { .cards-row {
margin: 40px; margin: 20px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.dashboard-title {
text-align: center;
align-self: center;
font-size: xx-large;
background-color: rgb(215, 192, 252);
}
} }
div.chart { div.chart {

23
src/App.js
View File

@@ -1,4 +1,4 @@
import logo from './logo.svg'; import logo from './logo.png';
import './App.css'; import './App.css';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import BarChart from './BarChart'; import BarChart from './BarChart';
@@ -32,8 +32,10 @@ function App() {
const [totalScreened, setTotalScreened] = useState(0); const [totalScreened, setTotalScreened] = useState(0);
const [males, setMales] = useState(0); const [males, setMales] = useState(0);
const [females, setFemales] = useState(0); const [females, setFemales] = useState(0);
const [positives, setPositives] = useState(0);
const [traits, setTraits] = useState(0); const [traits, setTraits] = useState(0);
const [diseases, setDiseases] = useState(0); const [diseases, setDiseases] = useState(0);
const [lastUpdate, setLastUpdate] = useState(Date.now());
useEffect(() => { useEffect(() => {
@@ -46,7 +48,6 @@ function App() {
querySnapshot.forEach((document) => { querySnapshot.forEach((document) => {
const patient = document.data(); const patient = document.data();
patients.push(patient); patients.push(patient);
console.log("patient", patient);
const { gender } = patient; const { gender } = patient;
if (gender === 'Male') { if (gender === 'Male') {
maleCount++; maleCount++;
@@ -58,6 +59,7 @@ function App() {
setTotalScreened(patients.length); setTotalScreened(patients.length);
setMales(maleCount); setMales(maleCount);
setFemales(femaleCount); setFemales(femaleCount);
setLastUpdate(Date.now());
}); });
}, []); }, []);
@@ -79,9 +81,10 @@ function App() {
diseaseCount++; diseaseCount++;
} }
}); });
setTotalScreened(traitCount + diseaseCount); setPositives(traitCount + diseaseCount);
setTraits(traitCount); setTraits(traitCount);
setDiseases(diseaseCount); setDiseases(diseaseCount);
setLastUpdate(lastUpdate);
}); });
}, []); }, []);
@@ -99,7 +102,13 @@ function App() {
} }
return ( return (
<div style={{}}> <div>
<div class='dashboard-title'>
<img className="nscm-logo" src={require('./logo_nobg.png')} /> HPOS Sickel Cell Test Dashboard
</div>
<div className='last-update'>
Updated At: {Date(lastUpdate).toString()}
</div>
<div className='cards-container'> <div className='cards-container'>
<div className='cards-row'> <div className='cards-row'>
<Card title={"Screened"} counter={totalScreened} color={'black'} backgroundColor={'rgb(254, 240, 227)'} /> <Card title={"Screened"} counter={totalScreened} color={'black'} backgroundColor={'rgb(254, 240, 227)'} />
@@ -108,10 +117,14 @@ function App() {
</div> </div>
<div className='cards-row'> <div className='cards-row'>
<Card title={"Tested Positive"} counter={traits + diseases} backgroundColor={'rgb(244,137, 137)'} /> <Card title={"Tested Positive"} counter={positives} backgroundColor={'rgb(244,137, 137)'} />
<Card title={"Trait"} counter={traits} backgroundColor={'rgb(237, 190, 190)'} /> <Card title={"Trait"} counter={traits} backgroundColor={'rgb(237, 190, 190)'} />
<Card title={"Disease"} counter={diseases} backgroundColor={'rgb(249, 195, 195)'} /> <Card title={"Disease"} counter={diseases} backgroundColor={'rgb(249, 195, 195)'} />
</div> </div>
<div className='developer'>
Developed by <img className="dev-logo" src={require('./smi-logo-120x120.webp')} /> ShanMukha
</div>
</div> </div>
</div> </div>
); );

BIN
src/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
src/logo_nobg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
src/smi-logo-120x120.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB