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

add three charts

Browse Source
This commit is contained in:
prisar
2023-07-05 07:12:43 +05:30
parent 5950bd9584
commit ba5ef28a2f
10 changed files with 2791 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/App.css
View File

@@ -1,3 +1,7 @@
body {
/* background-color: #282c34;
color: aliceblue; */
}
.App {
text-align: center;
}
@@ -32,7 +36,35 @@
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* remove scroll bar */
::-webkit-scrollbar {
display: none;
}
.title {
font-weight: 900;
}
.card {
/* height: 300px;
width: 400px; */
border: 1px solid;
padding: 10px;
/* box-shadow: 5px 10px 8px 10px #888888; */
/* justify-content: center;
display: flex;
align-items: center; */
}
div.chart{ font-family:sans-serif; font-size:0.7em;
}
div.bar {
background-color:DarkRed; color:white;
height:3em; line-height:3em; padding-right:1em; margin-bottom:2px; text-align:right;
}

116
src/App.js
View File

@@ -1,23 +1,109 @@
import logo from './logo.svg';
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";
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
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 app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);
function App() {
const [mtests, setMtests] = useState([]);
const [males, setMales] = useState(0);
useEffect(() => {
if (!mtests.length) {
console.log('mtests', mtests);
const tests = getTests();
// setMales(tests.length);
}
}, [mtests]);
async function getTests() {
const testDataCol = collection(db, 'testData');
const testDataSnapshot = await getDocs(testDataCol);
const testDataList = testDataSnapshot.docs.map(doc => doc.data());
console.log(testDataList);
setMtests(testDataList);
return testDataList;
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div style={{}}>
{/* <div className='card'>
<div className='title'>Age</div>
<div id="birthYear">
{mtests.length && <BarChart
id={1}
data={mtests.map(x => {
if (x.birthYear) return 2023 - x.birthYear;
if (x.patientAge) return 2023 - x.patientAge;
})}
width={700}
height={350} />}
</div>
</div> */}
<div className='card'>
<div className='title'>Registrations</div>
<div id="registration">
{mtests.length && <RegistraionChart
data={mtests}
width={700}
height={300} />}
</div>
</div>
<div className='card'>
<div className='title'>Male - Female</div>
<div id="gender">
{mtests.length && <GenderChart
data={mtests.map(x => { if (x.birthYear) return x.birthYear; })}
width={700}
height={300} />}
</div>
</div>
<div className='card'>
<div className='title'>Results</div>
<div id="results">
{mtests.length && <TestResultChart
id={2}
data={mtests}
width={700}
height={300} />}
</div>
</div>
{/* {JSON.stringify(
mtests.group(({ gender }) => {
if (gender === 'Male' || gender === 'Female')
return gender;
else
return "Not Specified";
})
)} */}
</div>
);
}

40
src/BarChart.js Normal file
View File

@@ -0,0 +1,40 @@
import React, { Component } from 'react'
import * as d3 from 'd3'
class BarChart extends Component {
componentDidMount() {
this.drawChart();
}
drawChart() {
const data = this.props.data;
const width = this.props.width;
const height = this.props.height;
const svg = d3.select("#birthYear")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("rect")
.data(data.map(x => x))
.enter()
.append("rect")
.attr("x", (d, i) => i * 40)
.attr("y", (d, i) => 300 - 10 * d)
.attr("width", 65)
.attr("height", (d, i) => d * 10)
.attr("fill", "#9338FF")
.on('click', function (x) {
console.log(x.srcElement);
// alert(x);
});
}
render() {
return <div id={"#" + this.props.id} style={{ margin: '1em' }}></div>
}
}
export default BarChart;

72
src/GenderChart.js Normal file
View File

@@ -0,0 +1,72 @@
import React, { Component } from 'react'
import * as d3 from 'd3'
class GenderChart extends Component {
componentDidMount() {
this.drawChart();
}
drawChart() {
// const data = this.props.data;
// const margin = { left: 10, top: 10 };
// const svg = d3.select("body")
// .append("svg")
// .attr("width", 700)
// .attr("height", 300);
// svg.selectAll("rect")
// .data(data.map(x => x - 1970))
// .enter()
// .append("rect")
// .attr("x", (d, i) => i * 40)
// .attr("y", (d, i) => 300 - 10 * d)
// .attr("width", 65)
// .attr("height", (d, i) => d * 10)
// .attr("fill", "#9338FF")
// .on('click', function (x) {
// // console.log(x.srcElement);
// // alert(x);
// });
// var xScale = d3.scaleBand().range([0, this.props.width]).padding(0.4),
// yScale = d3.scaleLinear().range([this.props.height, 0]);
const data =
[
{
"gender": "Male",
"count": 50,
},
{
"gender": "Female",
"count": 70,
},
{
"gender": "Not Specified",
"count": 60,
}
];
// d3.select("#gender").append("div")
// .attr("class", "chart").selectAll(".bar").data(data).enter()
// .append("div")
// .attr("class", "bar")
// .style("width", function (d) { return d.count + "px" }).style("outline", "1px solid black").text(function (d) { return Math.round(d.count) });
d3.select("#gender").append("div").attr("class", "chart").selectAll("div.line").data(data)
.enter()
.append("div").attr("class", "line");
d3.selectAll("div.line").append("div")
.attr("class", "label").text(function (d) { return d.gender });
d3.selectAll("div.line").append("div")
.attr("class", "bar")
.style("width", function (d) { return d.count + "px" }).text(function (d) { return Math.round(d.count) });
}
render() {
return <div id={"#" + this.props.id} style={{ margin: '1em' }}></div>
}
}
export default GenderChart;

64
src/RegistraionChart.js Normal file
View File

@@ -0,0 +1,64 @@
import React, { Component } from 'react'
import * as d3 from 'd3'
class RegistraionChart extends Component {
componentDidMount() {
this.drawChart();
}
drawChart() {
// const data = this.props.data;
// const margin = { left: 10, top: 10 };
// const svg = d3.select("body")
// .append("svg")
// .attr("width", 700)
// .attr("height", 300);
// svg.selectAll("rect")
// .data(data.map(x => x - 1970))
// .enter()
// .append("rect")
// .attr("x", (d, i) => i * 40)
// .attr("y", (d, i) => 300 - 10 * d)
// .attr("width", 65)
// .attr("height", (d, i) => d * 10)
// .attr("fill", "#9338FF")
// .on('click', function (x) {
// // console.log(x.srcElement);
// // alert(x);
// });
// var xScale = d3.scaleBand().range([0, this.props.width]).padding(0.4),
// yScale = d3.scaleLinear().range([this.props.height, 0]);
const data =
[
{
"type": "Registration",
"count": 60,
}
];
// d3.select("#gender").append("div")
// .attr("class", "chart").selectAll(".bar").data(data).enter()
// .append("div")
// .attr("class", "bar")
// .style("width", function (d) { return d.count + "px" }).style("outline", "1px solid black").text(function (d) { return Math.round(d.count) });
d3.select("#registration").append("div").attr("class", "chart").selectAll("div.line").data(data)
.enter()
.append("div").attr("class", "line");
d3.selectAll("div.line").append("div")
.attr("class", "label").text(function (d) { return d.type });
d3.selectAll("div.line").append("div")
.attr("class", "bar")
.style("width", function (d) { return d.count + "px" }).text(function (d) { return Math.round(d.count) });
}
render() {
return <div id={"#" + this.props.id} style={{ margin: '1em' }}></div>
}
}
export default RegistraionChart;

57
src/TestResultChart.js Normal file
View File

@@ -0,0 +1,57 @@
import React, { Component } from 'react'
import * as d3 from 'd3'
class TestResultChart extends Component {
componentDidMount() {
this.drawChart();
}
drawChart() {
// const data = this.props.data;
const data =
[
{
"result": "NORMAL",
"count": 5,
},
{
"result": "SICKLECELLTRAIT",
"count": 3,
},
{
"result": "SICKLECELLDISEASE",
"count": 6,
},
{
"result": "POSITIVEBORDERLINE",
"count": 9,
},
{
"result": "NEGATIVEBORDERLINE",
"count": 2,
},
];
// d3.select("#gender").append("div")
// .attr("class", "chart").selectAll(".bar").data(data).enter()
// .append("div")
// .attr("class", "bar")
// .style("width", function (d) { return d.count + "px" }).style("outline", "1px solid black").text(function (d) { return Math.round(d.count) });
d3.select("#results").append("div").attr("class", "chart").selectAll("div.line").data(data)
.enter()
.append("div").attr("class", "line");
d3.selectAll("div.line").append("div")
.attr("class", "label").text(function (d) { return d.result });
d3.selectAll("div.line").append("div")
.attr("class", "bar")
.style("width", function (d) { return d.count * 10 + "px" }).text(function (d) { return Math.round(d.count) });
}
render() {
return <div id={"#" + this.props.id} style={{ margin: '1em' }}></div>
}
}
export default TestResultChart;

4
src/index.js
View File

@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
// <React.StrictMode>
<App />
</React.StrictMode>
// </React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function