add suggested changes
- logo of nscm - dashboard title - favicon - company name
This commit is contained in:
prisar
@@ -2,12 +2,12 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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="theme-color" content="#000000" />
|
||||
<meta
|
||||
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" />
|
||||
<!--
|
||||
@@ -24,7 +24,7 @@
|
||||
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`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>HPOS Sickel Cell Test Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
66
src/App.css
66
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 {
|
||||
|
||||
23
src/App.js
23
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 (
|
||||
<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-row'>
|
||||
<Card title={"Screened"} counter={totalScreened} color={'black'} backgroundColor={'rgb(254, 240, 227)'} />
|
||||
@@ -108,10 +117,14 @@ function App() {
|
||||
</div>
|
||||
|
||||
<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={"Disease"} counter={diseases} backgroundColor={'rgb(249, 195, 195)'} />
|
||||
</div>
|
||||
|
||||
<div className='developer'>
|
||||
Developed by <img className="dev-logo" src={require('./smi-logo-120x120.webp')} /> ShanMukha
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
BIN
src/logo.png
Normal file
BIN
src/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
src/logo_nobg.png
Normal file
BIN
src/logo_nobg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/smi-logo-120x120.webp
Normal file
BIN
src/smi-logo-120x120.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Reference in New Issue
Block a user