add analytics page for tests conducted

- add robot.txt entry
  - fix graph render with new set of actions

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;