hpos-web/src/components/TestAnalytics.js

import React, { useEffect, useState } from 'react';
import { query, collection, onSnapshot, getDocs } from 'firebase/firestore';
import * as _ from 'lodash';
import 'react-dropdown/style.css';
import moment from 'moment';

import db from '../firebase';
import './TestAnalytics.css';
import TestAnalyticsGraph from './TestAnalyticsGraph';
import TestAnalyticsPie from './TestAnalyticsPie';
import WorldMap from './WorldMap';

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 [curDayTests, setCurDayTests] = useState(null);
    const [dailyCategoryCounts, setDailyCategoryCounts] = useState(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);
                });
                const groups = [...testDevices];
                setDevices(groups);
                setAllTests(hposTests);

                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;
                }, {});
                const dailyCountsList = Object.entries(dailyCounts).sort().map(x => {
                    return { date: x[0], count: x[1] };
                });
                setDailyResults(dailyCountsList);
                const rss = _.groupBy(hposTests, function (test) {
                    return moment(test.testTime).startOf('day').format();
                });
                // setDailyResults(rss);

                const [lastTested] = dailyCountsList.reverse();
                const { date: lastTestedDate } = lastTested;
                const todaysTests = hposTests.filter((x) => moment(x.testTime).isBetween(moment(lastTestedDate).startOf('day'), moment(lastTestedDate).endOf('day')));
                setCurDayTests(todaysTests);
                const dailyCategoryCounts = todaysTests.reduce(function (result, test) {
                    const category = test.result;
                    if (!result[category]) {
                        result[category] = 0;
                    }
                    result[category]++;
                    return result;
                }, {});

                setDailyCategoryCounts(Object.entries(dailyCategoryCounts).sort().map(x => {
                    return { category: x[0], count: x[1] };
                }));
            });

            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> */}

            <div className='container'>
                {dailyCategoryCounts && <TestAnalyticsPie data={dailyCategoryCounts} />}
                {dailyResults && <TestAnalyticsGraph data={dailyResults} />}
            </div>
            <div className='container'>
                <WorldMap />
            </div>

        </div>
    )
}

export default TestAnalytics;