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

fix typo

Browse Source 
- remove unwanted code
	- fix dropdown bug
	- add bar graph for test count
This commit is contained in:
Pritimay Sarkar
2023-07-31 10:49:08 +05:30
parent 1b65914b48
commit af54d53f8f
8 changed files with 135 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="HPOS Sickel Cell Test Dashboard"
content="HPOS Sickle 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>HPOS Sickel Cell Test Dashboard</title>
<title>HPOS Sickle Cell Test Dashboard</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

2
src/App.js
View File

@@ -81,7 +81,7 @@ function App() {
<div>
<div className='dashboard-title'>
<img className="nscm-logo" src={require('./logo_nobg.png')} alt='img' />
<div className='title-text'>HPOS Sickel Cell Test Dashboard</div>
<div className='title-text'>HPOS Sickle Cell Test Dashboard</div>
<img className="gov-logo-1" src={require('./gov_logo2.png')} alt='img' />
<img className="gov-logo" src={require('./gov_logo3.png')} alt='img' />
<img className="gov-logo-3" src={require('./gov_logo4.png')} alt='img' />

2
src/components/AbsorbanceGraph.js
View File

@@ -52,7 +52,7 @@ class AbsorbanceGraph extends Component {
.then(response => response.data.text())
.then((text) => {
const testData = d3.csvParse(text.replaceAll('"', '')).filter(x => {
if (x.NM > 350 && x.NM < 600
if (x.NM > 350 && x.NM < 600
&& x.CA !== "-Infinity" && x.CA !== "Infinity"
&& !isNaN(x.CA)) return x;
});

2
src/components/Devices.js
View File

@@ -21,6 +21,8 @@ const Devices = () => {
const changeDevice = ({ value }) => {
setDevice(value);
setTestDate(null);
setCurTest(null);
setDays([...new Set(allTests
.filter((x) => x.deviceSerialNumber === value)
.map(x => moment(x.testTime).format("YYYY-MM-DD")))]

46
src/components/TestAnalytics.js
View File

@@ -1,12 +1,9 @@
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 Select from 'react-select';
import DeviceGraph from "./DeviceGraph";
import db from '../firebase';
import './TestAnalytics.css';
import TestAnalyticsGraph from './TestAnalyticsGraph';
@@ -47,49 +44,6 @@ const TestAnalytics = () => {
const [curDayTests, setCurDayTests] = useState(null);
const [dailyCategoryCounts, setDailyCategoryCounts] = useState(null);
const changeDevice = ({ value }) => {
setDevice(value);
setDays([...new Set(allTests
.filter((x) => {
if (x.deviceSerialNumber === value) return x;
})
.map(x => moment(x.testTime).format("YYYY-MM-DD")))]
.sort()
.reverse());
}
const changeTestDate = ({ value }) => {
setTestDate(value);
setCurTest(null);
setCurTestData(null);
setShowGraph(false);
setTests(allTests
.filter((x) => {
if (x.deviceSerialNumber === device && moment(x.testTime).isBetween(moment(value).startOf('day'), moment(value).endOf('day'))) return x;
})
.map(x => x._id)
.sort());
}
const changeTest = ({ value }) => {
setCurTestData(null); setShowGraph(false);
setCurTest(value);
}
const showTestGraph = () => {
if (!curTest) alert('Select a test');
setCurTestData(allTests.find(x => x._id === curTest));
setShowGraph(true);
}
const toggleShowGraph = () => {
if (!curTestData) {
showTestGraph();
} else {
setCurTest(null); setCurTestData(null);
}
}
useEffect(() => {
if (!allTests) {
const q = query(collection(db, "testData"));

14
src/components/TestAnalyticsGraph.css
View File

@@ -6,6 +6,7 @@
.tests-count-card {
width: 80vw;
height: 80vh;
background-color: white;
margin: 10px;
}
@@ -14,4 +15,15 @@
text-align: center;
font-weight: 600;
padding: 15px;
}
}
.axis-grid line {
/* stroke: #def; */
stroke: lightgrey;
/* stroke-opacity: 0.7; */
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}

121
src/components/TestAnalyticsGraph.js
View File

@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import * as d3 from 'd3';
import moment from 'moment';
import { sgg } from 'ml-savitzky-golay-generalized';
import './TestAnalyticsGraph.css';
@@ -10,7 +11,98 @@ class TestAnalyticsGraph extends Component {
this.state = { data: this.props.data, show: this.props.show };
}
componentDidMount() {
this.drawChart(this.state.data);
// this.drawChart(this.state.data);
this.drawBar(this.state.data);
}
drawBar(data) {
if (!data) return;
data.reverse();
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 900 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("#tests-count-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 + ")");
var xScale = d3.scaleBand().range([0, width]).padding(0.4),
yScale = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 10 + "," + 10 + ")");
xScale.domain(data.map(function (d) { return d.date; }));
yScale.domain([0, d3.max(data, function (d) { return d.count; })]);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function (d) {
return " " + d;
}).ticks(10))
.append("text")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("value");
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.on("mouseover", (event, d) => {
// console.log("event", event);
d3.select(event.srcElement).attr('class', 'highlight');
d3.select(event.srcElement).transition()
.duration(400)
.attr('width', xScale.bandwidth() + 5)
.attr("y", function (d) { return yScale(d.count) - 10; })
.attr("height", function (d) { return height - yScale(d.count) + 10; });
g.append("text")
.attr('class', 'val') // add class to text label
.attr('x', function () {
return xScale(d.date);
})
.attr('y', function () {
return yScale(d.count) - 15;
})
.text(function () {
return [' ' + d.count]; // Value of the text
});
})
.on("mouseout", (event, d) => {
d3.select(event.srcElement).attr('class', 'bar');
d3.select(event.srcElement)
.transition() // adds animation
.duration(400)
.attr('width', xScale.bandwidth())
.attr("y", function (d) { return yScale(d.count); })
.attr("height", function (d) { return height - yScale(d.count); });
d3.selectAll('.val')
.remove()
})
.attr("x", function (d) { return xScale(d.date); })
.attr("y", function (d) { return yScale(d.count); })
.attr("width", xScale.bandwidth())
.transition()
.ease(d3.easeLinear)
.duration(400)
.delay(function (d, i) {
return i * 50;
})
.attr("height", function (d) { return height - yScale(d.count); });
}
drawChart(data) {
@@ -19,12 +111,21 @@ class TestAnalyticsGraph extends Component {
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const INNER_WIDTH = width;// - margin.left - margin.right;
const INNER_HEIGHT = height - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
const xAxis = d3.axisBottom(x).ticks(10);
const yAxis = d3.axisLeft(y).ticks(10);
const xAxisGrid = d3.axisBottom(x).tickSize(-INNER_HEIGHT).tickFormat('').ticks(10);
const yAxisGrid = d3.axisLeft(y).tickSize(-INNER_WIDTH).tickFormat('').ticks(10);
// define the line
var valueline = d3.line()
.curve(d3.curveCatmullRom.alpha(0.5)) // curve
.x(function (d) { return x(moment(d.date)); })
.y(function (d) { return y(d.count); });
@@ -40,11 +141,11 @@ class TestAnalyticsGraph extends Component {
// derivative: 0,
// polynomial: 3,
// };
// const sggResult = sgg(data.map(x => x.CA), (Math.PI * 2) / data.length, options);
// const sggResult = sgg(data.map(x => x.count), (Math.PI * 2) / data.length, options);
// data.forEach(function (d, index) {
// d.NM = d.NM;
// d.CA = sggResult[index];
// d.date = d.date;
// d.count = sggResult[index];
// });
// data.forEach(function (d) {
// d.date = d.date;
@@ -57,7 +158,7 @@ class TestAnalyticsGraph extends Component {
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
.attr("d", valueline(data));
svg.append("g")
.attr("transform", "translate(0," + height + ")")
@@ -71,7 +172,9 @@ class TestAnalyticsGraph extends Component {
.text("Test time");
svg.append("g")
.call(d3.axisLeft(y))
.attr('class', 'y axis-grid')
.call(yAxisGrid)
// .call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -160)
@@ -79,6 +182,12 @@ class TestAnalyticsGraph extends Component {
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Tests Count");
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
}
render() {

6
src/components/TestAnalyticsPie.js
View File

@@ -41,16 +41,12 @@ class TestAnalyticsPie extends Component {
var path = d3.arc()
.outerRadius(radius - 10)
// .innerRadius(0);
.innerRadius(100);
.innerRadius(130);
var label = d3.arc()
.outerRadius(radius)
.innerRadius(radius - 80);
// d3.csv("browseruse.csv", function(error, data) {
// if (error) {
// throw error;
// }
var arc = g.selectAll(".arc")
.data(pie(data))
.enter().append("g")