From 413a6b1455dc2176c4dc35cc6214369345db0f79 Mon Sep 17 00:00:00 2001
From: prisar <prisar230@gmail.com>
Date: Sun, 23 Jul 2023 02:42:53 +0530
Subject: [PATCH] add analytics page for tests conducted

  - add robot.txt entry
  - fix graph render with new set of actions
---
 public/robots.txt                    |   2 +-
 scripts/merge_csv.py                 |   4 +-
 src/components/AbsorbanceGraph.js    |   6 +-
 src/components/Devices.css           |  19 +++-
 src/components/Devices.js            |  25 +++--
 src/components/TestAnalytics.js      | 150 +++++++++++++++++++++++++++
 src/components/TestAnalyticsGraph.js |  97 +++++++++++++++++
 src/components/graph_icon.png        | Bin 0 -> 2325 bytes
 src/index.js                         |   5 +
 9 files changed, 293 insertions(+), 15 deletions(-)
 create mode 100644 src/components/TestAnalytics.js
 create mode 100644 src/components/TestAnalyticsGraph.js
 create mode 100644 src/components/graph_icon.png

diff --git a/public/robots.txt b/public/robots.txt
index e9e57dc..b21f088 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,3 +1,3 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow:
+Disallow: /
diff --git a/scripts/merge_csv.py b/scripts/merge_csv.py
index cb7ee9e..d0276b9 100644
--- a/scripts/merge_csv.py
+++ b/scripts/merge_csv.py
@@ -50,9 +50,11 @@ def consolidate(curdir):
     # df_csv_append.to_csv("D8 Merged.csv", index=False)
 
 
-for file in os.listdir(rootdir):
+if __name__ == "__main__":
+    for file in os.listdir(rootdir):
     d = os.path.join(rootdir, file)
     if os.path.isdir(d):
         # print(d)
         # os.chdir(d)
         consolidate(d)
+        
\ No newline at end of file
diff --git a/src/components/AbsorbanceGraph.js b/src/components/AbsorbanceGraph.js
index 1399af4..78a97f0 100644
--- a/src/components/AbsorbanceGraph.js
+++ b/src/components/AbsorbanceGraph.js
@@ -11,7 +11,7 @@ class AbsorbanceGraph extends Component {
         this.state = { url: this.props.url, show: this.props.show };
     }
     componentDidMount() {
-        this.drawChart(this.props.url);
+        this.drawChart(this.state.url);
     }
 
     drawChart(url) {
@@ -51,7 +51,9 @@ 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 && x.CA !== "-Infinity" && x.CA !== "Infinity") return x;
+                    if (x.NM > 350 && x.NM < 600 
+                        && x.CA !== "-Infinity" && x.CA !== "Infinity"
+                        && !isNaN(x.CA)) return x;
                 });
 
                 const options = {
diff --git a/src/components/Devices.css b/src/components/Devices.css
index 4c0dd02..87839d7 100644
--- a/src/components/Devices.css
+++ b/src/components/Devices.css
@@ -1,3 +1,7 @@
+.dashboard-title::-webkit-scrollbar {
+    display: none;
+}
+
 .title {
     padding: 10px;
     text-align: center;
@@ -72,11 +76,20 @@
 }
 
 .clear-button {
-    background-color: aquamarine;
-    width: 3vw;
+    background-color: rgb(207, 235, 250);
+    width: 10vw;
     height: 5vh;
     margin: 5px;
-    border-radius: 50%;
+    border-radius: 10px;
+    font-size: medium;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.graph-icon {
+    width: 20px;
 }
 
 table,
diff --git a/src/components/Devices.js b/src/components/Devices.js
index 4deb4ed..95d2c7e 100644
--- a/src/components/Devices.js
+++ b/src/components/Devices.js
@@ -69,14 +69,23 @@ const Devices = () => {
     }
 
     const changeTest = ({ value }) => {
-        setCurTest(null); setCurTestData(null); setShowGraph(false);
-        if (curTest) alert('Click clear button first');
+        setCurTestData(null); setShowGraph(false);
         setCurTest(value);
-        setCurTestData(allTests.find(x => x._id === value));
+    }
+
+    const showTestGraph = () => {
+        if (!curTest) alert('Select a test');
+        setCurTestData(allTests.find(x => x._id === curTest));
         setShowGraph(true);
     }
 
-    const menuPortalTarget = document.getElementById('root');
+    const toggleShowGraph = () => {
+        if (!curTestData) {
+            showTestGraph();
+        } else {
+            setCurTest(null); setCurTestData(null);
+        }
+    }
 
     useEffect(() => {
         if (!allTests) {
@@ -103,22 +112,22 @@ const Devices = () => {
     }, [curTestData, curTest, device, testDate]);
 
     return (
-        <div>
+        <div className="devices-page">
             <div className='title'>Insights</div>
             <div className='dropdown-group'>
                 <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an device" />
                 <Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an test date" />
                 <Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an test" />
-                
+
                 {/* <Select className='device-dropdown' options={devices.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeDevice} />
                 <Select className='day-dropdown' options={days.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeTestDate} />
                 <Select className='test-dropdown' options={tests.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={220} menuShouldScrollIntoView={true} onChange={changeTestDate} /> */}
 
-                <button className='clear-button' onClick={() => { setCurTest(null); setCurTestData(null); }}>Clear</button>
+                <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('./graph_icon.png')}></img>{curTestData ? 'Clear' : 'Show'}</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 && <div className='refresh-graph-message'>Select test device, date and person to get the detailed graph. Then, click show button to render graph.</div>}
                 {curTestData?.csvPath && <DeviceGraph url={curTestData?.csvPath} show={showGraph} />}
 
                 {curTestData && <div className='person-details'>
diff --git a/src/components/TestAnalytics.js b/src/components/TestAnalytics.js
new file mode 100644
index 0000000..945c66a
--- /dev/null
+++ b/src/components/TestAnalytics.js
@@ -0,0 +1,150 @@
+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 './Devices.css';
+import TestAnalyticsGraph from './TestAnalyticsGraph';
+
+const styles = {
+    menuList: (base) => ({
+        ...base,
+
+        "::-webkit-scrollbar": {
+            width: "4px",
+            height: "0px",
+        },
+        "::-webkit-scrollbar-track": {
+            background: "#f1f1f1"
+        },
+        "::-webkit-scrollbar-thumb": {
+            background: "#888"
+        },
+        "::-webkit-scrollbar-thumb:hover": {
+            background: "#555"
+        }
+    })
+};
+
+const TestAnalytics = () => {
+    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 [showGraph, setShowGraph] = useState(false);
+    const [dailyResults, setDailyResults] = useState(null);
+
+    const changeDevice = ({ value }) => {
+        console.log(value);
+        // console.log(event);
+
+        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"));
+
+            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);
+
+                // let rsult;
+                const dailyCounts = hposTests.reduce(function (result, test) {
+                    const day = moment(test.testTime).format("YYYY-MM-DD");
+                    if (!result[day]) {
+                        result[day] = 0;
+                    }
+                    result[day]++;
+                    return result;
+                }, {});
+                
+                setDailyResults(Object.entries(dailyCounts).sort().map(x => {
+                    return { date: x[0], count: x[1] };
+                }));
+                const rss = _.groupBy(hposTests, function (test) {
+                    return moment(test.testTime).startOf('day').format();
+                });
+                // setDailyResults(rss);
+            });
+
+            return () => unsub;
+        }
+    }, [curTestData, curTest, device, testDate]);
+
+    return (
+        <div className="devices-page">
+            <div className='title'>Analytics</div>
+            {/* <div className='dropdown-group'>
+                <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an device" />
+                <Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an test date" />
+                <Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an test" />
+
+                <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('./graph_icon.png')}></img>{curTestData ? 'Clear' : 'Show'}</button>
+            </div> */}
+
+            {dailyResults && <TestAnalyticsGraph data={dailyResults} />}
+        </div>
+    )
+}
+
+export default TestAnalytics;
\ No newline at end of file
diff --git a/src/components/TestAnalyticsGraph.js b/src/components/TestAnalyticsGraph.js
new file mode 100644
index 0000000..ea1d459
--- /dev/null
+++ b/src/components/TestAnalyticsGraph.js
@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3';
+import { sgg } from 'ml-savitzky-golay-generalized';
+import axios from 'axios';
+import moment from 'moment';
+
+import './DeviceGraph.css';
+
+class TestAnalyticsGraph extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { data: this.props.data, show: this.props.show };
+    }
+    componentDidMount() {
+        this.drawChart(this.state.data);
+    }
+
+    drawChart(data) {
+        if (!data) 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(moment(d.date)); })
+            .y(function (d) { return y(d.count); });
+
+        var svg = d3.select("#result-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 g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+        // const options = {
+        //     windowSize: 5,
+        //     derivative: 0,
+        //     polynomial: 3,
+        // };
+        // const sggResult = sgg(data.map(x => x.CA), (Math.PI * 2) / data.length, options);
+
+        // data.forEach(function (d, index) {
+        //     d.NM = d.NM;
+        //     d.CA = sggResult[index];
+        // });
+        // data.forEach(function (d) {
+        //     d.date = d.date;
+        //     d.count = +d.count;
+        // });
+
+        x.domain(d3.extent(data, function (d) { return moment(d.date); }));
+        y.domain([0, d3.max(data, function (d) { return d.count; })]);
+
+        svg.append("path")
+            .data([data])
+            .attr("class", "line")
+            .attr("d", valueline);
+
+        svg.append("g")
+            .attr("transform", "translate(0," + height + ")")
+            .call(d3.axisBottom(x))
+            .append("text")
+            // .attr("transform", "rotate(-90)")
+            .attr("x", 400)
+            .attr("y", 30)
+            .attr("dx", "0.71em")
+            .attr("fill", "#000")
+            .text("Test time");
+
+        svg.append("g")
+            .call(d3.axisLeft(y))
+            .append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("y", 6)
+            .attr("dy", "0.71em")
+            .attr("fill", "#000")
+            .text("Tests Count");
+    }
+
+    render() {
+        return (
+            <div>
+                <div className='graph-card'>
+                    <div id="result-graph" style={{ margin: '1em' }}>
+                    </div>
+                    <div className='graph-title'>count vs result</div>
+                </div>
+            </div>
+        )
+    };
+}
+export default TestAnalyticsGraph;
\ No newline at end of file
diff --git a/src/components/graph_icon.png b/src/components/graph_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..766ca641b8c1626850f97b5da6383b3e03c5ee37
GIT binary patch
literal 2325
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

literal 0
HcmV?d00001

diff --git a/src/index.js b/src/index.js
index 974e4aa..8aba1ee 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import Devices from './components/Devices';
+import TestAnalytics from './components/TestAnalytics';
 
 const router = createBrowserRouter([
   {
@@ -21,6 +22,10 @@ const router = createBrowserRouter([
   {
     path: "/insights",
     element: <Devices />,
+  },
+  {
+    path: "/analytics",
+    element: <TestAnalytics />,
   }
 ]);