Upload New File

Merge branch 'Sruthikbs-main-patch-74927' into 'main'
Updated report format See merge request sminnovations/hpos-web!2
2023-08-08 09:56:12 +00:00 · 2023-08-08 03:04:33 +00:00 · 2023-08-07 14:24:02 +05:30 · 2023-08-07 14:19:50 +05:30 · 2023-08-07 14:08:58 +05:30 · 2023-08-07 13:41:09 +05:30
22 changed files with 563 additions and 40 deletions
--- a/firmware/hemocube_mock/hemocube_mock.ino
+++ b/firmware/hemocube_mock/hemocube_mock.ino
@@ -0,0 +1,45 @@
 void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
 }
 void loop() {
  // put your main code here, to run repeatedly:
  Serial.println("SN:182829");
  // while (Serial.available() == 0) {}     //wait for data available
  // String bufferCommand = Serial.readString();  //read until timeout
  // bufferCommand.trim();                        // remove any \r \n whitespace at the end of the String
  // if (bufferCommand == "B") {
  //   Serial.println("#Start Buffer");
  //   delay(2000);
  //   Serial.println("#Buffer Completed");
  // }
  // while (Serial.available() == 0) {}     //wait for data available
  // String SampleCommand = Serial.readString();  //read until timeout
  // SampleCommand.trim();                        // remove any \r \n whitespace at the end of the String
  // if (SampleCommand == "S") {
  //   Serial.println("#Sample Started");
  //   delay(2000);
  //   Serial.println("#Sample Completed");
  // }
  // while (Serial.available() == 0) {}     //wait for data available
  // String resultCommand = Serial.readString();  //read until timeout
  // resultCommand.trim();                        // remove any \r \n whitespace at the end of the String
  // if (resultCommand == "R") {
  //   delay(3000);
  //   Serial.println("RESULT SN 18291 1937.23 2828.11 28211.20 121829.12 REND");
  //   delay(15000);
  // }
  while (Serial.available() == 0) {}     //wait for data available
  String resultCommand = Serial.readString();  //read until timeout
  resultCommand.trim();                        // remove any \r \n whitespace at the end of the String
  if (resultCommand == "B") {
    delay(3000);
    Serial.println("ERROR 500 REND");
    delay(15000);
  }
 }
--- a/scripts/224321944144PADGMC.pdf
+++ b/scripts/224321944144PADGMC.pdf
--- a/scripts/UserCollection.py
+++ b/scripts/UserCollection.py
@@ -0,0 +1,64 @@
 import os
 import firebase_admin
 from IPython.core.display import Image
 from IPython.core.display_functions import display
 from firebase_admin import credentials
 from firebase_admin import firestore
 import pandas as pd
 import datetime
 print("pritimay")
 # Initialize Firebase Admin SDK
 cred = credentials.Certificate(r'C:\Users\smila\PycharmProjects\pythonProject\hpos-prod-firebase-adminsdk-bionp-5486f7becd.json')  # Replace with your own service account key path
 firebase_admin.initialize_app(cred)
 # Get a reference to the Firestore database
 db = firestore.client()
 # Specify the collections
 patient_collection = db.collection("patientData")
 test_collection = db.collection("testData")
 start_date = input("Please enter the start date (yyyy-mm-dd): ")
 end_date = input("Please enter the end date (yyyy-mm-dd): ")
 query = patient_collection.where("createdAt", ">=", start_date).where("createdAt", "<", end_date)
 patient_docs = query.stream()
 # Prepare data to store in CSV
 data = []
 for patient_doc in patient_docs:
    patient_data = patient_doc.to_dict()
    patient_id = patient_data["_id"]
    # Query the document from testData collection based on the common _id
    test_docs = test_collection.where("_id", "==", patient_id).stream()
    for test_doc in test_docs:
        test_data = test_doc.to_dict()
        # Combine the data from both collections into a single dictionary
        combined_data = {**patient_data, **test_data}
            # Skip if the csvPath is not a valid URL
        data.append(combined_data)
 # Convert the data to a DataFrame
 df = pd.DataFrame(data)
 print(df.size)
 # Save the DataFrame to a CSV file
 output_filename = "data.csv"
 df.to_csv(output_filename, index=False)
 downloads_dir = os.path.join(os.path.expanduser("~"), "Downloads")
 output_path = os.path.join(downloads_dir, output_filename)
 df.to_csv(output_path, index=False)
 print(f"Data saved to '{output_path}'")
 # Close the Firebase Admin SDK
 firebase_admin.delete_app(firebase_admin.get_app())
--- a/scripts/logo.png
+++ b/scripts/logo.png
--- a/scripts/logo_nobg.png
+++ b/scripts/logo_nobg.png
--- a/scripts/report_template.html
+++ b/scripts/report_template.html
@@ -0,0 +1,235 @@
 <!DOCTYPE html>
 <html>
 <head>
    <style>
        @media print {
            body {
                -webkit-print-color-adjust: exact;
            }
        }
        .person-details-row {
            display: flex;
            flex-direction: row;
        }
        .person-details-col {
            display: flex;
            flex-direction: column;
            height: 90px;
            width: 50%;
            margin: 1px;
            border: 0;
        }
        .test-details-row {
            border: 0;
        }
        .test-details-col {
            height: 100px;
        }
        .test-cell-div {
            /* border: 1px solid black; */
            border-collapse: collapse;
            height: 20px;
            padding: 10px;
        }
        .table-header {
            border: 1px solid black;
            margin: 0 0 -10px 10px;
            background-color: rgb(191, 191, 191);
            text-align: center;
            justify-content: center;
            align-items: center;
            display: flex;
            font-weight: 600;
            height: 50px;
            width: 98%;
        }
        @media print {
            .table-header {
                background-color: rgb(191, 191, 191) !important;
                print-color-adjust: exact;
            }
        }
        @media print {
            .vendorListHeading th {
                color: white !important;
            }
        }
        .test-method {
            font-weight: 200 !important;
            color: rgb(191, 191, 191);
        }
        .result-value {
            justify-content: center;
            align-items: center;
            display: flex;
        }
        .end-of-report {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .logo {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        ul {
            list-style-type: none;
            /* margin: 0; */
            /* padding: 0; */
        }
    </style>
 </head>
 <body>
    <div>
        <div class="logo">
            <img src="./logo_nobg.png" width="128" height="128" alt="sickle cell logo" />
        </div>
        <table style="border: 1px solid black; margin: 10px; width: 98%;">
            <tr class="person-details-row">
                <td class="person-details-col" style="border-right: 2; width: 70%;">
                    <div><strong>Name:</strong></div>
                    <div><strong>Age / Gender:</strong></div>
                    <div><strong>Sample type:</strong></div>
                    <div><strong>Family History of Sickle Cell Anemia:</strong></div>
                </td>
                <td class="person-details-col" style="width: 30%;">
                    <div><strong>Marital Status:</strong></div>
                    <div><strong>Test Date:</strong></div>
                    <div><strong>ABHA ID:</strong></div>
                    <div><strong>Sample ID:</strong></div>
                </td>
            </tr>
        </table>
    </div>
    <div style="height: 2px;width: 98%; background-color: rgb(56, 105, 166); margin: 30px 10px 40px 10px;"></div>
    <div>
        <div class="table-header">POINT OF CARE SICKLE CELL ANEMIA TEST</div>
        <table class="test-details-table" style="border: 1px solid black; margin: 10px; width: 98%;">
            <tr style="height: 50px;">
                <th>
                    Test Description
                </th>
                <th>
                    RESULT
                </th>
                <th>
                    REFERENCE RANGES
                </th>
            </tr>
            <tr class="test-details-row">
                <td class="test-details-col" style="width: 20%; margin: 10px;">
                    <div style="margin: 10px;">Sickle Cell
                        Anemia
                        <div class="test-method">(Method: HPOS)</div>
                    </div>
                </td>
                <td style="width: 30%;">
                    <div class="result-value">Ra = 0.16</div>
                    <!-- <div class="test-cell-div">Normal</div>
                    <div class="test-cell-div">Sickle Cell Trait</div>
                    <div class="test-cell-div">Sickle Cell Disease</div>
                    <div class="test-cell-div">Negative Borderline</div>
                    <div class="test-cell-div">Positive Borderline</div> -->
                </td>
                <td style="width: 50%;">
                    <div class="test-cell-div">
                        < 0.16: Normal (HbA)</div>
                            <div class="test-cell-div">0.165 – 0.235: Sickle-cell Trait (HbAS)</div>
                            <div class="test-cell-div">> 0.24: Sickle-cell Disease (HbSS)</div>
                            <div class="test-cell-div">0.16-0.165: Inconclusive (Negative Borderline)</div>
                            <div class="test-cell-div">0.235 – 0.24: Inconclusive (Positive Borderline)</div>
                </td>
                <!-- <td style="width: 25%;">
                    <div class="test-cell-div">Normal</div>
                    <div class="test-cell-div">Sickle Cell Trait</div>
                    <div class="test-cell-div">Sickle Cell Disease</div>
                    <div class="test-cell-div">Recommended for HPLC or Electrophoresis Tests</div>
                    <div class="test-cell-div">Recommended for HPLC or Electrophore</div>
                </td> -->
            </tr>
        </table>
    </div>
    <div>
        <!-- <div style="font-weight: 600; margin: 10px;">INTERPRETATION:</div> -->
        <div style="margin: 10px;">
            <strong>Test Principle:</strong> This point of care quantitative diagnostic test for sickle-cell anemia
            works on the principle of absorption
            spectroscopy. The test helps in differentiating heterozygous/homozygous hemoglobin from normal hemoglobin.
        </div>
        <div style="margin: 10px;">
            <strong>Method:</strong> High Performance Optical Spectroscopy (HPOS) for detection of Sickle cell trait and
            sickle cell disease in whole blood capillary blood samples.
        </div>
        <div style="margin: 10px;">
            <strong> Note:</strong>
            <!-- <ul>
                <li>a. Blood transfusion may have an impact on the test results.</li>
                <li>
                    b. Patients already on sickle-cell medications may impact test results.
                </li>
            </ul> -->
            Borderline cases are reported as inconclusive. It may occur due to several factors such as medication,
            transfusion, field conditions and assay process. Further clinical tests are recommended in these cases for
            diagnosis.
        </div>
        <div
            style="margin: 80px 10px 20px 50px; width: 88%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
            <div style="margin: 5px;">DATE:</div>
            <div style="margin: 5px;">Hematologist</div>
        </div>
        <!-- <div style="margin: 30px;">
            This report is for the perusal of doctor only. Not for medico legal cases. Clinical correlation is
            essential.
            Please contact us in case of unexpected result.
        </div> -->
        <div style="height: 3px;width: 98%; background-color: black;"></div>
        <div class="end-of-report">
            *** END OF REPORT ***</div>
        <div style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
            <div style="font-style: italic;">
                This is an electronically generated report. Generated at HH:MM hrs on DD-MMM-YYYY.
            </div>
            <div>
                Note: Assay results should be correlated clinically with other clinical findings
            </div>
        </div>
    </div>
 </body>
 </html>
--- a/src/App.css
+++ b/src/App.css
@@ -50,7 +50,7 @@ body {
  display: inline-flex;
  flex-direction: row;
  font-size: xx-large;
-  background-color: rgb(215, 192, 252);
+  background-color: rgb(207, 235, 250);
 }
 .last-update {
@@ -146,7 +146,7 @@ body {
    text-align: center;
    align-self: center;
    font-size: xx-large;
-    background-color: rgb(215, 192, 252);
+    background-color: rgb(207, 235, 250);
  }
  .nscm-logo {
@@ -206,7 +206,7 @@ body {
    text-align: center;
    align-self: center;
    font-size: xx-large;
-    background-color: rgb(215, 192, 252);
+    background-color: rgb(207, 235, 250);
  }
 }
@@ -253,7 +253,7 @@ body {
    text-align: center;
    align-self: center;
    font-size: xx-large;
-    background-color: rgb(215, 192, 252);
+    background-color: rgb(207, 235, 250);
  }
  .title-text {
@@ -289,7 +289,7 @@ body {
  }
  .cards-container {
-    height: 80vh;
+    height: 90vh;
    justify-content: center;
    align-items: center;
    display: flex;
@@ -307,7 +307,7 @@ body {
    text-align: center;
    align-self: center;
    font-size: xx-large;
-    background-color: rgb(215, 192, 252);
+    background-color: rgb(207, 235, 250);
  }
  .title-text {
@@ -356,7 +356,7 @@ body {
  }
  .cards-container {
-    height: 80vh;
+    height: 90vh;
    justify-content: center;
    align-items: center;
    display: flex;
@@ -372,7 +372,7 @@ body {
  .dashboard-title {
    text-align: center;
    align-self: center;
-    background-color: rgb(215, 192, 252);
+    background-color: rgb(207, 235, 250);
  }
  .title-text {
--- a/src/components/Calibrations.css
+++ b/src/components/Calibrations.css
@@ -0,0 +1,9 @@
 .page-title {
    /* width: 100vw; */
    padding: 10px;
    text-align: center;
    background: rgb(207, 235, 250);
    color: black;
    font-size: 30px;
    font-family: sans-serif;
 }
--- a/src/components/Calibrations.js
+++ b/src/components/Calibrations.js
@@ -0,0 +1,78 @@
 import React, { useEffect, useState } from 'react';
 import { query, collection, onSnapshot } from 'firebase/firestore';
 import Dropdown from 'react-dropdown';
 import 'react-dropdown/style.css';
 import moment from 'moment';
 import db from '../firebase';
 import './Calibrations.css';
 const Calibrations = () => {
    const [device, setDevice] = useState("Select a device");
    const [devices, setDevices] = useState([]);
    const [curDeviceData, setCurDeviceData] = useState(null);
    const changeDevice = ({ value }) => {
        setDevice(value);
    }
    const toggleShowDevice = () => {
        console.log(devices.filter(x => x.deviceId === device))
        setCurDeviceData(devices.find(x => x.deviceId === device));
        // if (!device) {
        //     setCurDeviceData(devices.filter(x => x.deviceId === device));
        // } else {
        //     setDevice(null);
        // }
    }
    useEffect(() => {
        if (!devices?.length) {
            const q = query(collection(db, "devices"));
            const unsub = onSnapshot(q, (querySnapshot) => {
                const testDevices = [];
                querySnapshot.forEach((document) => {
                    const deviceData = document.data();
                    testDevices.push(deviceData);
                });
                setDevices(testDevices);
            });
            return () => unsub;
        }
    }, [device, curDeviceData]);
    return (
        <div className="calibrations-page">
            <div className='page-title'>Calibrations</div>
            <div className='dropdown-group'>
                <Dropdown className='device-dropdown' options={devices?.map(x => x.deviceId)} onChange={changeDevice} value={device} placeholder="Select an device" />
                <button className='clear-button' onClick={toggleShowDevice}><img className="graph-icon" src={require('../assets/graph_icon.png')} alt='icon'></img>{device ? 'Clear' : 'Show'}</button>
            </div>
            <div className='graph-person-conatiner'>
                {curDeviceData && <div className='test-details'>
                    <table>
                        <tr>
                            <th>key</th>
                            <th>value</th>
                        </tr>
                        <tr>
                            <td>device</td> <td>{curDeviceData?.deviceId} </td>
                        </tr>
                        <tr>
                            <td>calibratedAt</td> <td>{curDeviceData?.calibratedAt} </td>
                        </tr>
                        <tr>
                            <td>coefficients</td> <td>{curDeviceData?.coefficients?.toString()} </td>
                        </tr>
                    </table>
                </div>}
            </div>
        </div>
    )
 }
 export default Calibrations;
--- a/src/components/Devices.css
+++ b/src/components/Devices.css
@@ -2,12 +2,14 @@
    display: none;
 }
-.title {
+.insights-title {
    /* width: 100vw; */
    padding: 10px;
    text-align: center;
-    background: rgb(215, 192, 252);
+    background: rgb(207, 235, 250);
    color: black;
    font-size: 30px;
    font-family: sans-serif;
 }
 .device-dropdown {
@@ -79,7 +81,7 @@
    background-color: rgb(207, 235, 250);
    width: 10vw;
    height: 5vh;
-    margin: 5px;
+    /* margin: 5px; */
    border-radius: 10px;
    font-size: medium;
    font-weight: 600;
--- a/src/components/Devices.js
+++ b/src/components/Devices.js
@@ -1,8 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { query, collection, onSnapshot } from 'firebase/firestore';
 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';
@@ -18,11 +19,15 @@ const Devices = () => {
    const [tests, setTests] = useState([]);
    const [allTests, setAllTests] = useState(null);
    const [showGraph, setShowGraph] = useState(false);
    const selectDateDropdownRef = useRef();
    const selectTestDropdownRef = useRef();
    const changeDevice = ({ value }) => {
        setDevice(value);
        setTestDate(null);
        setCurTest(null);
        selectDateDropdownRef.current?.setValue("");
        selectTestDropdownRef.current?.setValue("");
        setDays([...new Set(allTests
            .filter((x) => x.deviceSerialNumber === value)
            .map(x => moment(x.testTime).format("YYYY-MM-DD")))]
@@ -32,6 +37,7 @@ const Devices = () => {
    const changeTestDate = ({ value }) => {
        setTestDate(value);
        selectTestDropdownRef.current?.setValue("");
        setCurTest(null);
        setCurTestData(null);
        setShowGraph(false);
@@ -84,22 +90,45 @@ const Devices = () => {
    return (
        <div className="devices-page">
-            <div className='title'>Insights</div>
+            <div className='insights-title'>Insights</div>
            <div className='dropdown-group'>
-                <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an device" />
+                {/* <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" />
+                <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
-                <Select className='day-dropdown' options={days.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeTestDate} />
+                    className='device-dropdown'
-                <Select className='test-dropdown' options={tests.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={220} menuShouldScrollIntoView={true} onChange={changeTestDate} /> */}
+                    defaultValue={{ label: "Select a device", value: "Select a device" }}
                    options={devices.map(x => { return { value: x, label: x }; })}
                    menuPlacement='auto'
                    maxMenuHeight={250}
                    menuShouldScrollIntoView={true}
                    onChange={changeDevice} />
                <Select
                    ref={selectDateDropdownRef}
                    className='day-dropdown'
                    defaultValue={{ label: "Select a test date", value: "Select a test date" }}
                    options={days.map(x => { return { value: x, label: x }; })}
                    menuPlacement='auto'
                    maxMenuHeight={250}
                    menuShouldScrollIntoView={true}
                    onChange={changeTestDate} />
                <Select
                    ref={selectTestDropdownRef}
                    className='test-dropdown'
                    defaultValue={{ label: "Select a test", value: "Select a test" }}
                    options={tests.map(x => { return { value: x, label: x }; })}
                    menuPlacement='auto'
                    maxMenuHeight={220}
                    menuShouldScrollIntoView={true}
                    onChange={changeTest} />
                <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('../assets/graph_icon.png')} alt='icon'></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, click show button to render graph.</div>}
-                {curTestData?.csvPath && <DeviceGraph url={curTestData?.csvPath} show={showGraph} />}
+                {curTestData?.csvPath && curTestData?.testType !== 'HEMOCUBE' && <DeviceGraph url={curTestData?.csvPath} show={showGraph} />}
                {curTestData && <div className='test-details'>
                    <table>
@@ -122,6 +151,26 @@ const Devices = () => {
                        <tr>
                            <td>result</td> <td>{curTestData?.result}</td>
                        </tr>
                        {curTestData?.testType === 'HEMOCUBE' && <tr>
                            <td>calculatedRatio</td>
                            <td>{curTestData?.calculatedRatio}</td>
                        </tr>}
                        {curTestData?.testType === 'HEMOCUBE' && <tr>
                            <td>deviceRatio</td>
                            <td>{curTestData?.deviceRatio}</td>
                        </tr>}
                        {curTestData?.testType === 'HEMOCUBE' && <tr>
                            <td>green led Average</td>
                            <td>{curTestData?.led1Average}</td>
                        </tr>}
                        {curTestData?.testType === 'HEMOCUBE' && <tr>
                            <td>blue led Average</td>
                            <td>{curTestData?.led2Average}</td>
                        </tr>}
                        {curTestData?.testType === 'HEMOCUBE' && <tr>
                            <td>blue led Average</td>
                            <td>{curTestData?.led2Average}</td>
                        </tr>}
                    </table>
                    {/* <img src={curTestData?.userImageURL} width={100} height={150} /> */}
                </div>}
--- a/src/components/Locations.css
+++ b/src/components/Locations.css
@@ -1,6 +1,6 @@
 .locations-card {
    width: 40vw;
-    height: 45vh;
+    height: 40vh;
    background-color: white;
    margin: 10px;
    display: flex;
@@ -15,7 +15,7 @@
 .locations-graph-card {
    width: 40vw;
-    height: 45vh;
+    height: 40vh;
    background-color: white;
    margin: 10px;
    border-style: solid;
@@ -27,7 +27,7 @@
 .locations-card-title {
    text-align: center;
    font-weight: 600;
-    padding-top: 10px;
+    /* padding-top: 10px; */
    display: flex;
    align-items: center;
    justify-content: center;
--- a/src/components/ScatterPlot.css
+++ b/src/components/ScatterPlot.css
@@ -6,7 +6,7 @@
 .resultratio-graph-card {
    width: 40vw;
-    height: 45vh;
+    height: 40vh;
    background-color: white;
    margin: 10px;
    border-style: solid;
--- a/src/components/ScatterPlot.js
+++ b/src/components/ScatterPlot.js
@@ -24,7 +24,7 @@ class ScatterPlot extends Component {
        if (!data) return;
        // set the dimensions and margins of the graph
-        var margin = { top: 10, right: 30, bottom: 30, left: 60 },
+        var margin = { top: 10, right: 30, bottom: 40, left: 60 },
            width = 460 - margin.left - margin.right,
            height = 250 - margin.top - margin.bottom;
--- a/src/components/TestAnalytics.css
+++ b/src/components/TestAnalytics.css
@@ -1,17 +1,38 @@
-.container {
+.analytics-page::-webkit-scrollbar {
    display: none;
 }
 .analytics-title::-webkit-scrollbar {
    display: none;
 }
 .analytics-page {
    width: 100vw;
 }
 .analytics-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
-    height: 50vh;
+    font-family: sans-serif;
 }
 .analytics-title {
    padding: 10px;
    text-align: center;
    background: rgb(207, 235, 250);
    color: black;
    font-size: 30px;
    font-family: sans-serif;
 }
@media screen and (min-width: 900px) {
-    .container {
+    .analytics-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
-        height: 50vh;
+        height: 45vh;
    }
 }
--- a/src/components/TestAnalytics.js
+++ b/src/components/TestAnalytics.js
@@ -82,8 +82,8 @@ const TestAnalytics = () => {
    }, [curTestData, curTest, device, testDate]);
    return (
-        <div className="devices-page">
+        <div className="analytics-page">
-            <div className='title'>Analytics</div>
+            <div className='analytics-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" />
@@ -92,11 +92,11 @@ const TestAnalytics = () => {
                <button className='clear-button' onClick={toggleShowGraph}><img className="graph-icon" src={require('./graph_icon.png')}></img>{curTestData ? 'Clear' : 'Show'}</button>
            </div> */}
-            <div className='container'>
+            <div className='analytics-container'>
                {dailyCategoryCounts && <TestAnalyticsPie data={dailyCategoryCounts} />}
                {dailyResults && <TestAnalyticsGraph data={dailyResults} />}
            </div>
-            <div className='container'>
+            <div className='analytics-container'>
                {allTests && <ScatterPlot data={allTests} />}
                {allTests && <Locations />}
            </div>
--- a/src/components/TestAnalyticsGraph.css
+++ b/src/components/TestAnalyticsGraph.css
@@ -6,7 +6,7 @@
 .tests-count-card {
   width: 40vw;
-   height: 45vh;
+   height: 40vh;
   background-color: white;
   margin: 10px;
   /* display: flex;
@@ -58,4 +58,18 @@
   font-size: x-small;
   font-weight: 400;
   padding: 0.5em;
 }
 div#tests-count-graph {
   height: 180px;
   width: 430px;
   /* border: 2px solid #000; */
   overflow-y: auto;
 }
 svg#bargraph {
   height: 180px; /* 500px; */
   width: 700px; /* 1100px; */
   /* border: 1px dotted #ccc; */
   /* background-color: #ccc; */
 }
--- a/src/components/TestAnalyticsGraph.js
+++ b/src/components/TestAnalyticsGraph.js
@@ -25,11 +25,12 @@ class TestAnalyticsGraph extends Component {
        data.reverse();
-        var margin = { top: 60, right: 20, bottom: 30, left: 50 },
+        var margin = { top: 30, right: 20, bottom: 50, left: 15 },
-            width = 520 - margin.left - margin.right,
+            width = 700 - margin.left - margin.right,
-            height = 220 - margin.top - margin.bottom;
+            height = 180 - margin.top - margin.bottom;
        var svg = d3.select("#tests-count-graph").append('svg')
            .attr("id", "bargraph")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g").attr("transform",
@@ -40,7 +41,7 @@ class TestAnalyticsGraph extends Component {
            yScale = d3.scaleLinear().range([height, 0]);
        var g = svg.append("g")
-            .attr("transform", "translate(" + 10 + "," + 10 + ")");
+            .attr("transform", "translate(" + 5 + "," + 5 + ")");
        xScale.domain(data.map(function (d) { return moment(d.date).format("MM-DD"); }));
--- a/src/components/TestAnalyticsPie.css
+++ b/src/components/TestAnalyticsPie.css
@@ -6,7 +6,7 @@
 .category-graph-card {
   width: 40vw;
-   height: 45vh;
+   height: 40vh;
   background-color: white;
   margin: 10px;
   border-style: solid;
--- a/src/components/TestAnalyticsPie.js
+++ b/src/components/TestAnalyticsPie.js
@@ -24,7 +24,7 @@ class TestAnalyticsPie extends Component {
    drawChart(data) {
        if (!data) return;
-        var margin = { top: 30, right: 10, bottom: 15, left: 25 },
+        var margin = { top: 15, right: 10, bottom: 45, left: 10 },
            width = 480 - margin.left - margin.right,
            height = 250 - margin.top - margin.bottom,
            radius = Math.min(width, height) / 2;
--- a/src/components/WorldMap.js
+++ b/src/components/WorldMap.js
@@ -44,7 +44,7 @@ const WorldMap = () => {
  }
  return (
-    <svg width={ '40vw' } height={ '50vh' } viewBox="0 0 800 450">
+    <svg width={ '40vw' } height={ '35vh' } viewBox="0 0 800 450">
      <g className="countries">
        {
          geographies.map((d,i) => (
--- a/src/index.js
+++ b/src/index.js
@@ -11,6 +11,7 @@ import Devices from './components/Devices';
 import TestAnalytics from './components/TestAnalytics';
 import WorldMap from './components/WorldMap';
 import RegistraionChart from './RegistraionChart';
 import Calibrations from './components/Calibrations';
 const router = createBrowserRouter([
  {
@@ -32,6 +33,10 @@ const router = createBrowserRouter([
  {
    path: "/map",
    element: <RegistraionChart />,
  },
  {
    path: "/calibrations",
    element: <Calibrations />,
  }
 ]);
Author	SHA1	Message	Date
Mariya Varghese	cbd252b6ad	Upload New File	2023-08-08 09:56:12 +00:00
Pritimay Sarkar	31a4b3f278	Merge branch 'Sruthikbs-main-patch-74927' into 'main' Updated report format See merge request sminnovations/hpos-web!2	2023-08-08 03:04:33 +00:00
Pritimay Sarkar	f8a8c6a789	make font italic	2023-08-07 14:24:02 +05:30
Pritimay Sarkar	0715733163	update report text	2023-08-07 14:19:50 +05:30
Pritimay Sarkar	aefcecf90f	fix two page problem	2023-08-07 14:08:58 +05:30
Pritimay Sarkar	ebd9d23f12	add colors for print	2023-08-07 13:41:09 +05:30
Pritimay Sarkar	e681a4a9bf	iadd logo	2023-08-07 13:33:16 +05:30
Pritimay Sarkar	f17408f5ce	Merge branch 'main' of https://gitlab.com/sminnovations/hpos-web	2023-08-07 13:13:28 +05:30
Pritimay Sarkar	60a8044041	update to new format	2023-08-07 13:12:36 +05:30
Sruthi K	2d040ff1c8	Updated report format	2023-08-07 06:15:41 +00:00
Pritimay Sarkar	e9da7a7983	Merge branch 'Sruthikbs-main-patch-93603' into 'main' Update report_template.html See merge request sminnovations/hpos-web!1	2023-08-07 06:14:13 +00:00
Sruthi K	4579ad914d	Update report_template.html	2023-08-07 06:12:08 +00:00
Pritimay Sarkar	b4ab8cbff0	fix css for bar graph and main screen	2023-08-07 09:56:23 +05:30
Pritimay Sarkar	d35510d39a	change margins	2023-08-06 15:34:59 +05:30
Pritimay Sarkar	5af8197664	format the template	2023-08-06 15:25:56 +05:30
Pritimay Sarkar	29b7db446e	add text content in template	2023-08-06 14:01:52 +05:30
Pritimay Sarkar	ca71641341	add report html template - change arduino stub output to generate error	2023-08-06 13:55:17 +05:30
Pritimay Sarkar	45aecc658e	adjust for ring buffer consideration	2023-08-05 10:38:52 +05:30
Pritimay Sarkar	5524f135ff	rename file	2023-08-05 00:29:08 +05:30
Pritimay Sarkar	65f5fdc428	add commands	2023-08-05 00:22:39 +05:30
Pritimay Sarkar	4bf75a2473	add sample flow	2023-08-04 23:57:32 +05:30
Pritimay Sarkar	87e4ca7c9a	add dev firmware for hpos app	2023-08-04 23:50:47 +05:30
Pritimay Sarkar	e34a618198	remove scroll in analytics page - add searchable dropdown in analytics page	2023-08-03 11:51:14 +05:30
Pritimay Sarkar	f9c054c62b	calibration	2023-08-03 00:27:26 +05:30