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

make changes for screen tests

Browse Source
This commit is contained in:
prisar
2023-07-08 18:59:29 +05:30
parent 924a24d334
commit 0ce14ddb21
7 changed files with 115 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
package-lock.json generated
View File

@@ -1,11 +1,11 @@
{
"name": "smi-dashboard",
"name": "hpos-dashboard",
"version": "0.1.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "smi-dashboard",
"name": "hpos-dashboard",
"version": "0.1.0",
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
@@ -16,6 +16,7 @@
"firebase": "^9.23.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-flip-numbers": "^3.0.8",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
@@ -15825,6 +15826,19 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-flip-numbers": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/react-flip-numbers/-/react-flip-numbers-3.0.8.tgz",
"integrity": "sha512-iEh4WScZFiGYkIWw3ATA352+XVWBsiKLg97CQHGXvpBetJFYazaYWMqv/mR2fGHdoDLA/2uES74e2wdEgy69BQ==",
"dependencies": {
"react-simple-animate": "^3.0.1"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18",
"react-dom": "^16.8.0 || ^17 || ^18",
"react-simple-animate": "^3.0.1"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -15910,6 +15924,14 @@
}
}
},
"node_modules/react-simple-animate": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/react-simple-animate/-/react-simple-animate-3.5.2.tgz",
"integrity": "sha512-xLE65euP920QMTOmv5haPlml+hmOPDkbIr5WeF7ADIXWBYt5kW/vwpNfWg8EKMab8aeDxIZ6QjffVh8v2dUyhg==",
"peerDependencies": {
"react-dom": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -30025,6 +30047,14 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"react-flip-numbers": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/react-flip-numbers/-/react-flip-numbers-3.0.8.tgz",
"integrity": "sha512-iEh4WScZFiGYkIWw3ATA352+XVWBsiKLg97CQHGXvpBetJFYazaYWMqv/mR2fGHdoDLA/2uES74e2wdEgy69BQ==",
"requires": {
"react-simple-animate": "^3.0.1"
}
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -30090,6 +30120,12 @@
"workbox-webpack-plugin": "^6.4.1"
}
},
"react-simple-animate": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/react-simple-animate/-/react-simple-animate-3.5.2.tgz",
"integrity": "sha512-xLE65euP920QMTOmv5haPlml+hmOPDkbIr5WeF7ADIXWBYt5kW/vwpNfWg8EKMab8aeDxIZ6QjffVh8v2dUyhg==",
"requires": {}
},
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

1
package.json
View File

@@ -11,6 +11,7 @@
"firebase": "^9.23.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-flip-numbers": "^3.0.8",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},

10
public/manifest.json
View File

@@ -1,19 +1,19 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "HPOS Dashboard",
"name": "HPOS Sickel Cell Test Dashboard",
"icons": [
{
"src": "favicon.ico",
"src": "logo.png",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"src": "logo.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"src": "logo.png",
"type": "image/png",
"sizes": "512x512"
}

73
src/App.css
View File

@@ -37,16 +37,23 @@ body {
}
.dashboard-title {
width: 100%;
font-family: Arial Black;
text-align: center;
align-self: center;
justify-content: center;
align-items: center;
display: inline-flex;
flex-direction: row;
font-size: xx-large;
background-color: rgb(215, 192, 252);
}
.last-update {
width: 100%;
font-size: small;
text-align: end;
font-weight: 500;
}
.developer {
@@ -62,6 +69,28 @@ body {
width: 1em;
}
.gov-logo {
width: 1em;
}
.title-text {
margin: 0 1em 0 1em;
font-size: medium;
}
.numeric-card {
height: 30vh;
width: 28vw;
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;
}
@media screen and (min-width: 320px) {
.numeric-card {
height: 200px;
@@ -172,7 +201,7 @@ body {
.card-title {
color: black;
font-size: 1em;
font-size: 2em;
font-weight: 600;
font-family: sans-serif;
}
@@ -201,6 +230,10 @@ body {
font-size: xx-large;
background-color: rgb(215, 192, 252);
}
.title-text {
font-size: x-large;
}
}
@media screen and (min-width: 1200px) {
@@ -219,14 +252,14 @@ body {
.card-title {
color: black;
font-size: 1em;
font-size: 2em;
font-weight: 600;
font-family: sans-serif;
}
.card-data {
color: black;
font-size: 4em;
font-size: 6em;
font-family: sans-serif;
}
@@ -243,17 +276,30 @@ body {
}
.dashboard-title {
height: 10vh;
text-align: center;
align-self: center;
font-size: xx-large;
background-color: rgb(215, 192, 252);
}
.title-text {
font-size: xx-large;
}
.nscm-logo {
width: 2.5em;
}
.gov-logo {
width: 2.5em;
}
}
@media screen and (min-width: 2560px) {
.numeric-card {
height: 200px;
width: 300px;
height: 30vh;
width: 28vw;
padding: 20px;
box-shadow: 5px 10px 8px 10px #888888;
border-radius: 15px;
@@ -266,14 +312,14 @@ body {
.card-title {
color: black;
font-size: 1em;
font-size: 6em;
font-weight: 600;
font-family: sans-serif;
}
.card-data {
color: black;
font-size: 4em;
font-size: 18em;
font-family: sans-serif;
}
@@ -292,9 +338,20 @@ body {
.dashboard-title {
text-align: center;
align-self: center;
font-size: xx-large;
background-color: rgb(215, 192, 252);
}
.title-text {
font-size: 2vw;
}
.nscm-logo {
width: 5em;
}
.gov-logo {
width: 5em;
}
}
div.chart {

13
src/App.js
View File

@@ -1,10 +1,6 @@
import logo from './logo.png';
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";
@@ -84,7 +80,7 @@ function App() {
setPositives(traitCount + diseaseCount);
setTraits(traitCount);
setDiseases(diseaseCount);
setLastUpdate(lastUpdate);
setLastUpdate(Date.now());
});
}, []);
@@ -104,10 +100,13 @@ function App() {
return (
<div>
<div class='dashboard-title'>
<img className="nscm-logo" src={require('./logo_nobg.png')} /> HPOS Sickel Cell Test Dashboard
<img className="nscm-logo" src={require('./logo_nobg.png')} />
<div className='title-text'>HPOS Sickel Cell Test Dashboard</div>
<img className="gov-logo" src={require('./gov_logo2.png')} />
<img className="gov-logo" src={require('./gov_logo3.png')} />
</div>
<div className='last-update'>
Updated At: {Date(lastUpdate).toString()}
Updated At: {Date(lastUpdate).toLocaleString()}
</div>
<div className='cards-container'>
<div className='cards-row'>

BIN
src/gov_logo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/gov_logo3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB