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>