add filter to data

src/App.css

@@ -285,6 +285,8 @@ body {
   }
 
   .cards-container {
+    height: 80vh;
+    justify-content: center;
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -350,6 +352,8 @@ body {
   }
 
   .cards-container {
+    height: 80vh;
+    justify-content: center;
     align-items: center;
     display: flex;
     flex-direction: column;

src/App.js

@@ -17,6 +17,7 @@ function App() {
   const [traits, setTraits] = useState(0);
   const [diseases, setDiseases] = useState(0);
   const [lastUpdate, setLastUpdate] = useState(moment());
+  const [devMode, setDevMode] = useState(false);
 
   useEffect(() => {
 
@@ -116,9 +117,12 @@ function App() {
             Updated at: {moment(lastUpdate).format("DD-MM-YYYY hh:mm:ss a")}
           </div>
 
-          <div className='developer'>
+          <div className='developer' onClick={() => setDevMode(!devMode)}>
             Developed by <img className="dev-logo" src={require('./smi-logo-120x120.webp')} /> ShanMukha
           </div>
+
+          {/* {devMode && 
+          <div>dev mode is on</div>} */}
         </div>
     </div>
   );

src/components/AbsorbanceGraph.js

@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import * as d3 from 'd3';
-import './DeviceGraph.css';
+import { sgg } from 'ml-savitzky-golay-generalized';
 import axios from 'axios';
 
+import './DeviceGraph.css';
+
 class AbsorbanceGraph extends Component {
     constructor(props) {
         super(props);
@@ -25,7 +27,7 @@ class AbsorbanceGraph extends Component {
         // define the line
         var valueline = d3.line()
             .x(function (d) { return x(d.wavelength); })
-            .y(function (d) { return y(d.calculation); });
+            .y(function (d) { return y(d.absorbance); });
 
         // append the svg obgect to the body of the page
         // appends a 'group' element to 'svg'
@@ -49,13 +51,25 @@ class AbsorbanceGraph extends Component {
             .then(response => response.data.text())
             .then((text) => {
                 const testData = d3.csvParse(text.replaceAll('"', '')).filter(x => { if (x.NM > 390 && x.NM < 650) return x; });;
+
+                const options = {
+                    windowSize: 23,
+                    derivative: 0,
+                    polynomial: 3,
+                };
+                const sggResult = sgg(testData.map(x => x.CA), (Math.PI * 2) / testData.length, options);
+                testData.forEach(function (d, index) {
+                    d.NM = d.NM;
+                    d.CA = sggResult[index];
+                });
+
                 testData.forEach(function (d) {
                     d.wavelength = d.NM;
-                    d.calculation = +d.CA;
+                    d.absorbance = +d.CA;
                 });
 
                 x.domain(d3.extent(testData, function (d) { return d.wavelength; }));
-                y.domain([0, d3.max(testData, function (d) { return d.calculation; })]);
+                y.domain([0, d3.max(testData, function (d) { return d.absorbance; })]);
 
                 svg.append("path")
                     .data([testData])
@@ -77,11 +91,11 @@ class AbsorbanceGraph extends Component {
 
         // testData.forEach(function (d) {
         //     d.wavelength = d.NM;
-        //     d.calculation = +d.CA;
+        //     d.absorbance = +d.CA;
         // });
 
         // x.domain(d3.extent(testData, function (d) { return d.wavelength; }));
-        // y.domain([0, d3.max(testData, function (d) { return d.calculation; })]);
+        // y.domain([0, d3.max(testData, function (d) { return d.absorbance; })]);
 
         // svg.append("path")
         //     .data([testData])

src/components/DeviceGraph.css

@@ -1,7 +1,7 @@
 .line {
     fill: none;
     stroke: #009EDC;
-    stroke-width: 5px;
+    stroke-width: 1px;
  }
 
  .graph-card {