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

add test graphs with device, date and test filters

Browse Source
This commit is contained in:
prisar
2023-07-21 03:56:24 +05:30
parent 37dd99a18b
commit 0f955c4c4a
10 changed files with 449 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/App.js
View File

@@ -3,39 +3,9 @@ import './App.css';
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "firebase/firestore";
import Card from './components/Card';
/* dev and test */
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"
};
// /* prod */
// const firebaseConfig = {
// apiKey: "AIzaSyBF4pLZReAedU4dWX1eRJNFNIaOIz2xk4s",
// authDomain: "hpos-prod.firebaseapp.com",
// projectId: "hpos-prod",
// storageBucket: "hpos-prod.appspot.com",
// messagingSenderId: "1012719870714",
// appId: "1:1012719870714:web:fcd00acef93f6612de5f43",
// measurementId: "G-B0NZ7DEF69"
// };
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);
import db from './firebase';
function App() {
const [mtests, setMtests] = useState([]);
@@ -46,7 +16,7 @@ function App() {
const [positives, setPositives] = useState(0);
const [traits, setTraits] = useState(0);
const [diseases, setDiseases] = useState(0);
const [lastUpdate, setLastUpdate] = useState('');
const [lastUpdate, setLastUpdate] = useState(moment());
useEffect(() => {
@@ -143,7 +113,7 @@ function App() {
<div className='footer'>
<div className='last-update'>
Updated at: {moment(lastUpdate).format("DD-MM-YYYY HH:mm:ss a")}
Updated at: {moment(lastUpdate).format("DD-MM-YYYY hh:mm:ss a")}
</div>
<div className='developer'>

111
src/components/AbsorbanceGraph.js Normal file
View File

@@ -0,0 +1,111 @@
import React, { Component } from 'react';
import * as d3 from 'd3';
import './DeviceGraph.css';
import axios from 'axios';
class AbsorbanceGraph extends Component {
constructor(props) {
super(props);
this.state = { url: this.props.url };
}
componentDidMount() {
this.drawChart(this.props.url);
}
drawChart(url) {
if (!url) return;
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
.x(function (d) { return x(d.wavelength); })
.y(function (d) { return y(d.calculation); });
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#wavelength-graph").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
axios({
method: 'get',
url: url,
withCredentials: false,
secure: false,
responseType: 'blob',
headers: {
"Content-Type": "application/octet-stream"
},
})
.then(response => response.data.text())
.then((text) => {
const testData = d3.csvParse(text.replaceAll('"', '')).filter(x => { if (x.NM > 390 && x.NM < 650) return x; });;
testData.forEach(function (d) {
d.wavelength = d.NM;
d.calculation = +d.CA;
});
x.domain(d3.extent(testData, function (d) { return d.wavelength; }));
y.domain([0, d3.max(testData, function (d) { return d.calculation; })]);
svg.append("path")
.data([testData])
.attr("class", "line")
.attr("d", valueline);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
});
// /* test graph */
// const testData = require('./testData.json').filter(x => { if (x.NM > 397 && x.NM < 580) return x; });
// testData.forEach(function (d) {
// d.wavelength = d.NM;
// d.calculation = +d.CA;
// });
// x.domain(d3.extent(testData, function (d) { return d.wavelength; }));
// y.domain([0, d3.max(testData, function (d) { return d.calculation; })]);
// svg.append("path")
// .data([testData])
// .attr("class", "line")
// .attr("d", valueline);
// svg.append("g")
// .attr("transform", "translate(0," + height + ")")
// .call(d3.axisBottom(x));
// svg.append("g")
// .call(d3.axisLeft(y));
}
render() {
return (
<div>
<div className='graph-card'>
<div id="wavelength-graph" style={{ margin: '1em' }}>
</div>
<div className='graph-title'>wavelength vs absorbance</div>
</div>
</div>
)
};
}
export default AbsorbanceGraph;

2
src/components/DeviceGraph.css
View File

@@ -7,8 +7,10 @@
.graph-card {
width: 80vw;
background-color: white;
margin: 10px;
}
.graph-title {
text-align: center;
font-weight: 600;
}

172
src/components/DeviceGraph.js
View File

@@ -1,130 +1,70 @@
import React, { Component } from 'react';
import React, { useEffect, useState } from 'react';
import * as d3 from 'd3';
import axios from 'axios';
import { query, collection, onSnapshot, getDocs } from 'firebase/firestore';
import './DeviceGraph.css';
import AbsorbanceGraph from './AbsorbanceGraph';
import db from '../firebase';
class DeviceGraph extends Component {
function DeviceGraph({url}) {
const [devices, setDevices] = useState([]);
const [hposTests, setHposTests] = useState(null);
componentDidMount() {
this.drawChart();
async function getTests() {
try {
const testDataCol = collection(db, 'testData');
const testDataSnapshot = await getDocs(testDataCol);
const testDataList = testDataSnapshot.docs.map(doc => doc.data());
console.log(testDataList);
// setHposTests(testDataList);
return testDataList;
} catch (err) {
// log error
}
}
drawChart() {
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// useEffect(() => {
// const q = query(collection(db, "testData"));
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// const unsub = onSnapshot(q, (querySnapshot) => {
// const testDevices = [];
// querySnapshot.forEach((document) => {
// const hposTestData = document.data();
// // testDevices.push(hposTestData);
// // const { deviceSerialNo } = hposTestData;
// // console.log(document.data());
// });
// // setDevices(testDevices);
// });
// define the line
var valueline = d3.line()
.x(function (d) { return x(d.wavelength); })
.y(function (d) { return y(d.calculation); });
// return () => unsub;
// }, []);
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#wavelength-graph").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g").attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// useEffect(() => {
// // const q = query(collection(db, "testData"));
// d3.csv("https://thingproxy.freeboard.io/fetch/https://firebasestorage.googleapis.com/v0/b/hpos-af3cc.appspot.com/o/255668896558B%204DDG%2FHPOSSC_255668896558B%204DDG.csv?alt=media&token=d63d0e5f-0845-4cb6-98c6-cbfb6904cfd7", function (error, data) {
// alert(data.length)
// // var data = [
// // {
// // "year": 2006,
// // "population": 40
// // },
// // {
// // "year": 2008,
// // "population": 45
// // },
// // {
// // "year": 2010,
// // "population": 48
// // },
// // {
// // "year": 2012,
// // "population": 51
// // },
// // {
// // "year": 2014,
// // "population": 53
// // },
// // {
// // "year": 2016,
// // "population": 57
// // },
// // {
// // "year": 2017,
// // "population": 62
// // }
// // ];
// // console.log(data);
// // // if (error) throw error;
// // // format the data
// // data.forEach(function (d) {
// // d.year = d.year;
// // d.population = +d.population;
// // });
// // const unsub = onSnapshot(q, (querySnapshot) => {
// // const testDevices = [];
// // querySnapshot.forEach((document) => {
// // const hposTestData = document.data();
// // // testDevices.push(hposTestData);
// // // const { deviceSerialNo } = hposTestData;
// // console.log(document.data());
// // });
// // setDevices(testDevices);
// // });
// // // Scale the range of the data
// // x.domain(d3.extent(data, function (d) { return d.year; }));
// // y.domain([0, d3.max(data, function (d) { return d.population; })]);
// if (hposTests !== null) {
// const result = getTests();
// setHposTests(result);
// }
// }, []);
// // // Add the valueline path.
// // svg.append("path")
// // .data([data])
// // .attr("class", "line")
// // .attr("d", valueline);
// // // Add the X Axis
// // svg.append("g")
// // .attr("transform", "translate(0," + height + ")")
// // .call(d3.axisBottom(x));
// // // Add the Y Axis
// // svg.append("g")
// // .call(d3.axisLeft(y));
// });
/* test graph */
const testData = require('./testData.json').filter(x => { if (x.NM > 397 && x.NM < 580) return x; });
testData.forEach(function (d) {
d.wavelength = d.NM;
d.calculation = +d.CA;
});
x.domain(d3.extent(testData, function (d) { return d.wavelength; }));
y.domain([0, d3.max(testData, function (d) { return d.calculation; })]);
svg.append("path")
.data([testData])
.attr("class", "line")
.attr("d", valueline);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
}
render() {
return (<div>
<div className='graph-card'>
<div id="wavelength-graph" style={{ margin: '1em' }}>
</div>
<div className='graph-title'>wavelength vs absorbance</div>
</div>
</div>);
}
return (
<div>
<AbsorbanceGraph url={url} />
</div>
);
}
export default DeviceGraph;

49
src/components/Devices.css Normal file
View File

@@ -0,0 +1,49 @@
.device-dropdown {
width: 15vw;
margin: 5px;
font-weight: 600;
}
.day-dropdown {
width: 15vw;
margin: 5px;
font-weight: 600;
}
.test-dropdown {
width: 20vw;
margin: 5px;
font-weight: 600;
}
.dropdown-group {
display: flex;
flex-direction: row;
margin: 10px;
}
.person-details {
margin: 15px;
font-weight: 600;
font-size: larger;
}
.graph-person-conatiner {
display: flex;
flex-direction: row;
width: 100vw;
}
.refresh-graph-message {
margin: 15px;
font-weight: 600;
font-size: larger;
}
.clear-button {
background-color: aquamarine;
width: 5vw;
height: 5vh;
margin: 5px;
border-radius: 50%;
}

103
src/components/Devices.js Normal file
View File

@@ -0,0 +1,103 @@
import React, { useEffect, useState } from 'react';
import { query, collection, onSnapshot, getDocs } from 'firebase/firestore';
import * as _ from 'lodash';
import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';
import moment from 'moment';
import DeviceGraph from "./DeviceGraph";
import db from '../firebase';
import './Devices.css';
const Devices = () => {
const [device, setDevice] = useState("Select a device");
const [testDate, setTestDate] = useState("Select a test date");
const [curTest, setCurTest] = useState("Select a test");
const [curTestData, setCurTestData] = useState(null);
const [devices, setDevices] = useState([]);
const [days, setDays] = useState([]);
const [tests, setTests] = useState([]);
const [allTests, setAllTests] = useState(null);
const changeDevice = ({ value }) => {
console.log(value);
setDevice(value);
setDays([...new Set(allTests
.filter((x) => {
if (x.deviceSerialNumber === device) return x;
})
.map(x => moment(x.testTime).format("YYYY-MM-DD")))]);
// setTests(allTests
// .filter((x) => {
// if (x.deviceSerialNumber === device && x.testTime === ) return x;
// })
// .map(x => x.testTime));
}
const changeTestDate = ({ value }) => {
setTestDate(value);
setCurTest(null);
setCurTestData(null);
setTests(allTests
.filter((x) => {
if (x.deviceSerialNumber === device && moment(x.testTime).isBetween(moment(testDate).startOf('day'), moment(testDate).endOf('day'))) return x;
})
.map(x => x._id));
}
const changeTest = ({ value }) => {
setCurTest(null); setCurTestData(null);
if (curTest) alert('Click clear button first');
setCurTest(value);
setCurTestData(allTests.find(x => x._id === value));
}
useEffect(() => {
const q = query(collection(db, "testData"));
const unsub = onSnapshot(q, (querySnapshot) => {
const testDevices = new Set();
const hposTests = [];
querySnapshot.forEach((document) => {
const hposTestData = document.data();
hposTests.push(hposTestData);
const { deviceSerialNumber } = hposTestData;
testDevices.add(deviceSerialNumber);
// console.log(document.data());
});
const groups = [...testDevices];
// console.log(groups);
setDevices(groups);
setAllTests(hposTests);
});
return () => unsub;
}, [curTestData, curTest]);
return (
<div>
<div className='dropdown-group'>
<Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an option" />
<Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an option" />
<Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an option" />
<button className='clear-button' onClick={() => { setCurTest(null); setCurTestData(null); }}>Clear</button>
</div>
<div className='graph-person-conatiner'>
{!curTestData && <div className='refresh-graph-message'>Select test device, date and person to get the detailed graph. Then, refresh or click clear button to render another entry.</div>}
{curTestData?.csvPath && <DeviceGraph url={curTestData?.csvPath} />}
{curTestData && <div className='person-details'>
deviceid: {curTestData?.deviceId},
kit serial: {curTestData?.kitSerial},
test time: {curTestData?.testTime},
result: {curTestData?.result}
<img src={curTestData?.userImageURL} width={100} height={150} />
</div>}
</div>
</div>
)
}
export default Devices;

43
src/firebase.js
View File

@@ -1,16 +1,35 @@
import firebase from "firebase";
import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "firebase/firestore";
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"
};
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
// /* dev and test */
// 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"
// };
/* prod */
const firebaseConfig = {
apiKey: "AIzaSyBF4pLZReAedU4dWX1eRJNFNIaOIz2xk4s",
authDomain: "hpos-prod.firebaseapp.com",
projectId: "hpos-prod",
storageBucket: "hpos-prod.appspot.com",
messagingSenderId: "1012719870714",
appId: "1:1012719870714:web:fcd00acef93f6612de5f43",
measurementId: "G-B0NZ7DEF69"
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);
export default db;

7
src/index.js
View File

@@ -7,8 +7,7 @@ import {
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import RegistraionChart from './RegistraionChart';
import DeviceGraph from './components/DeviceGraph';
import Devices from './components/Devices';
const router = createBrowserRouter([
{
@@ -16,8 +15,8 @@ const router = createBrowserRouter([
element: <App />,
},
{
path: "/absorbance",
element: <DeviceGraph />,
path: "/testgraphs",
element: <Devices />,
}
]);