fix graph data issue with infinty

- add header
  - present test details in table

src/components/AbsorbanceGraph.js

@@ -50,7 +50,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) return x; });;
+                const testData = d3.csvParse(text.replaceAll('"', '')).filter(x => {
+                    if (x.NM > 350 && x.NM < 600 && x.CA !== "-Infinity" && x.CA !== "Infinity") return x;
+                });
 
                 const options = {
                     windowSize: 65,

src/components/DeviceGraph.css

@@ -13,4 +13,5 @@
  .graph-title {
     text-align: center;
     font-weight: 600;
+    padding: 15px;
  }

src/components/Devices.css

@@ -1,3 +1,11 @@
+.title {
+    padding: 10px;
+    text-align: center;
+    background: rgb(215, 192, 252);
+    color: black;
+    font-size: 30px;
+  }
+
 .device-dropdown {
     width: 15vw;
     margin: 5px;
@@ -51,4 +59,10 @@
     height: 5vh;
     margin: 5px;
     border-radius: 50%;
+}
+
+table,
+th,
+td {
+    border: 1px solid rgb(183, 228, 241);
 }

src/components/Devices.js

@@ -77,6 +77,7 @@ const Devices = () => {
 
     return (
         <div>
+            <div className='title'>Insights</div>
             <div className='dropdown-group'>
                 <Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an option" />
                 <Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an option" />
@@ -89,11 +90,25 @@ const Devices = () => {
                 {curTestData?.csvPath && <DeviceGraph url={curTestData?.csvPath} />}
 
                 {curTestData && <div className='person-details'>
-                    deviceid: {curTestData?.deviceId},
-                    kit serial: {curTestData?.kitSerial},
-                    test time: {curTestData?.testTime},
-                    result: {curTestData?.result}
-                    <img src={curTestData?.userImageURL} width={100} height={150} />
+                    <table>
+                        <tr>
+                            <th>key</th>
+                            <th>value</th>
+                        </tr>
+                        <tr>
+                            <td>deviceid</td> <td>{curTestData?.deviceId}</td>
+                        </tr>
+                        <tr>
+                            <td>kit serial</td> <td>{curTestData?.kitSerial}</td>
+                        </tr>
+                        <tr>
+                            <td>test time</td> <td>{curTestData?.testTime}</td>
+                        </tr>
+                        <tr>
+                            <td>result</td> <td>{curTestData?.result}</td>
+                        </tr>
+                    </table>
+                    {/* <img src={curTestData?.userImageURL} width={100} height={150} /> */}
                 </div>}
             </div>
         </div>

src/firebase.js

@@ -3,28 +3,28 @@ import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "fireb
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
 
-/* dev and test */
-const firebaseConfig = {
-    apiKey: "AIzaSyBFl_YkJ5PMIvMY3G70313SyrqemjFnUv8",
-    authDomain: "hpos-af3cc.firebaseapp.com",
-    projectId: "hpos-af3cc",
-    storageBucket: "hpos-af3cc.appspot.com",
-    messagingSenderId: "650071678820",
-    appId: "1:650071678820:web:ce50538bf46632d46c6471",
-    measurementId: "G-6JHQ47S9DD"
+// /* dev and test */
+// const firebaseConfig = {
+//     apiKey: "AIzaSyBFl_YkJ5PMIvMY3G70313SyrqemjFnUv8",
+//     authDomain: "hpos-af3cc.firebaseapp.com",
+//     projectId: "hpos-af3cc",
+//     storageBucket: "hpos-af3cc.appspot.com",
+//     messagingSenderId: "650071678820",
+//     appId: "1:650071678820:web:ce50538bf46632d46c6471",
+//     measurementId: "G-6JHQ47S9DD"
+//   };
+  
+  
+  /* prod */
+  const firebaseConfig = {
+    apiKey: "AIzaSyBF4pLZReAedU4dWX1eRJNFNIaOIz2xk4s",
+    authDomain: "hpos-prod.firebaseapp.com",
+    projectId: "hpos-prod",
+    storageBucket: "hpos-prod.appspot.com",
+    messagingSenderId: "1012719870714",
+    appId: "1:1012719870714:web:fcd00acef93f6612de5f43",
+    measurementId: "G-B0NZ7DEF69"
   };
-  
-  
-  // /* prod */
-  // const firebaseConfig = {
-  //   apiKey: "AIzaSyBF4pLZReAedU4dWX1eRJNFNIaOIz2xk4s",
-  //   authDomain: "hpos-prod.firebaseapp.com",
-  //   projectId: "hpos-prod",
-  //   storageBucket: "hpos-prod.appspot.com",
-  //   messagingSenderId: "1012719870714",
-  //   appId: "1:1012719870714:web:fcd00acef93f6612de5f43",
-  //   measurementId: "G-B0NZ7DEF69"
-  // };
 
 
 const app = initializeApp(firebaseConfig);

src/index.js

@@ -17,6 +17,10 @@ const router = createBrowserRouter([
   {
     path: "/testgraphs",
     element: <Devices />,
+  },
+  {
+    path: "/inshights",
+    element: <Devices />,
   }
 ]);