diff --git a/src/components/AbsorbanceGraph.js b/src/components/AbsorbanceGraph.js
index 9690ec5..236abae 100644
--- a/src/components/AbsorbanceGraph.js
+++ b/src/components/AbsorbanceGraph.js
@@ -8,7 +8,7 @@ import './DeviceGraph.css';
class AbsorbanceGraph extends Component {
constructor(props) {
super(props);
- this.state = { url: this.props.url };
+ this.state = { url: this.props.url, show: this.props.show };
}
componentDidMount() {
this.drawChart(this.props.url);
diff --git a/src/components/DeviceGraph.js b/src/components/DeviceGraph.js
index ede3206..f54b30b 100644
--- a/src/components/DeviceGraph.js
+++ b/src/components/DeviceGraph.js
@@ -7,7 +7,7 @@ import './DeviceGraph.css';
import AbsorbanceGraph from './AbsorbanceGraph';
import db from '../firebase';
-function DeviceGraph({url}) {
+function DeviceGraph({url, show}) {
const [devices, setDevices] = useState([]);
const [hposTests, setHposTests] = useState(null);
@@ -63,7 +63,7 @@ function DeviceGraph({url}) {
return (
);
}
diff --git a/src/components/Devices.css b/src/components/Devices.css
index c05b3f7..7d922ee 100644
--- a/src/components/Devices.css
+++ b/src/components/Devices.css
@@ -36,8 +36,8 @@
/* display: flex; */
padding: 15px;
margin: 15px 0 10px 0;
- font-weight: 600;
- font-size: larger;
+ /* font-weight: 600; */
+ font-size: small;
background-color: white;
}
@@ -55,7 +55,7 @@
.clear-button {
background-color: aquamarine;
- width: 5vw;
+ width: 3vw;
height: 5vh;
margin: 5px;
border-radius: 50%;
diff --git a/src/components/Devices.js b/src/components/Devices.js
index bc92936..fcedcda 100644
--- a/src/components/Devices.js
+++ b/src/components/Devices.js
@@ -18,6 +18,7 @@ const Devices = () => {
const [days, setDays] = useState([]);
const [tests, setTests] = useState([]);
const [allTests, setAllTests] = useState(null);
+ const [showGraph, setShowGraph] = useState(false);
const changeDevice = ({ value }) => {
console.log(value);
@@ -27,7 +28,9 @@ const Devices = () => {
.filter((x) => {
if (x.deviceSerialNumber === device) return x;
})
- .map(x => moment(x.testTime).format("YYYY-MM-DD")))]);
+ .map(x => moment(x.testTime).format("YYYY-MM-DD")))]
+ .sort()
+ .reverse());
// setTests(allTests
// .filter((x) => {
// if (x.deviceSerialNumber === device && x.testTime === ) return x;
@@ -39,18 +42,21 @@ const Devices = () => {
setTestDate(value);
setCurTest(null);
setCurTestData(null);
+ setShowGraph(false);
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));
+ .map(x => x._id)
+ .sort());
}
const changeTest = ({ value }) => {
- setCurTest(null); setCurTestData(null);
+ setCurTest(null); setCurTestData(null); setShowGraph(false);
if (curTest) alert('Click clear button first');
setCurTest(value);
setCurTestData(allTests.find(x => x._id === value));
+ setShowGraph(true);
}
useEffect(() => {
@@ -79,15 +85,15 @@ const Devices = () => {
Insights
-
-
-
+
+
+
{!curTestData &&
Select test device, date and person to get the detailed graph. Then, refresh or click clear button to render another entry.
}
- {curTestData?.csvPath &&
}
+ {curTestData?.csvPath &&
}
{curTestData &&
@@ -96,10 +102,10 @@ const Devices = () => {
| value |
- | deviceid | {curTestData?.deviceId} |
+ device | {curTestData?.deviceId} |
- | kit serial | {curTestData?.kitSerial} |
+ kit | {curTestData?.kitSerial} |
| test time | {curTestData?.testTime} |
diff --git a/src/index.js b/src/index.js
index 85a5755..974e4aa 100644
--- a/src/index.js
+++ b/src/index.js
@@ -19,7 +19,7 @@ const router = createBrowserRouter([
element: ,
},
{
- path: "/inshights",
+ path: "/insights",
element: ,
}
]);