add filter to data

package-lock.json

@@ -16,6 +16,7 @@
         "d3-selection": "^3.0.0",
         "firebase": "^9.23.0",
         "lodash": "^4.17.21",
+        "ml-savitzky-golay-generalized": "^4.0.1",
         "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -6756,6 +6757,11 @@
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.2.tgz",
       "integrity": "sha512-HBiYvXvn9Z70Z88XKjz3AEKd4HJhBXsa3j7xFnITAzoS8+q6eIGi8qDB8FKPBAjtuxjI/zFpwuiCb8oDtKOYrA=="
     },
+    "node_modules/cheminfo-types": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/cheminfo-types/-/cheminfo-types-1.7.2.tgz",
+      "integrity": "sha512-Zz7HPnh6wB2beEK7nfsXlNSK1Tpl4O0DpYUod8L6gI/5+INpn/d5UgJLI+3ck6CYY5Qsq34ylyKhERmZ5Wks2A=="
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -10563,6 +10569,11 @@
         "node": ">= 10"
       }
     },
+    "node_modules/is-any-array": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-any-array/-/is-any-array-2.0.1.tgz",
+      "integrity": "sha512-UtilS7hLRu++wb/WBAw9bNuP1Eg04Ivn1vERJck8zJthEvXCBEBpGR/33u/xLKWEQf95803oalHrVDptcAvFdQ=="
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -13596,6 +13607,15 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/ml-savitzky-golay-generalized": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/ml-savitzky-golay-generalized/-/ml-savitzky-golay-generalized-4.0.1.tgz",
+      "integrity": "sha512-I3z6aEj9f+VaqoqWoTmyXOsIngOCW2JtpcZfoeqnLFFFuIyK4uXOEIRVft3XgQbbtivIvTBJKHpfxyN8sgB5vA==",
+      "dependencies": {
+        "cheminfo-types": "^1.0.0",
+        "is-any-array": "^2.0.0"
+      }
+    },
     "node_modules/moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -23765,6 +23785,11 @@
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.2.tgz",
       "integrity": "sha512-HBiYvXvn9Z70Z88XKjz3AEKd4HJhBXsa3j7xFnITAzoS8+q6eIGi8qDB8FKPBAjtuxjI/zFpwuiCb8oDtKOYrA=="
     },
+    "cheminfo-types": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/cheminfo-types/-/cheminfo-types-1.7.2.tgz",
+      "integrity": "sha512-Zz7HPnh6wB2beEK7nfsXlNSK1Tpl4O0DpYUod8L6gI/5+INpn/d5UgJLI+3ck6CYY5Qsq34ylyKhERmZ5Wks2A=="
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -26526,6 +26551,11 @@
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
       "integrity": "sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ=="
     },
+    "is-any-array": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-any-array/-/is-any-array-2.0.1.tgz",
+      "integrity": "sha512-UtilS7hLRu++wb/WBAw9bNuP1Eg04Ivn1vERJck8zJthEvXCBEBpGR/33u/xLKWEQf95803oalHrVDptcAvFdQ=="
+    },
     "is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -28722,6 +28752,15 @@
         "minimist": "^1.2.6"
       }
     },
+    "ml-savitzky-golay-generalized": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/ml-savitzky-golay-generalized/-/ml-savitzky-golay-generalized-4.0.1.tgz",
+      "integrity": "sha512-I3z6aEj9f+VaqoqWoTmyXOsIngOCW2JtpcZfoeqnLFFFuIyK4uXOEIRVft3XgQbbtivIvTBJKHpfxyN8sgB5vA==",
+      "requires": {
+        "cheminfo-types": "^1.0.0",
+        "is-any-array": "^2.0.0"
+      }
+    },
     "moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",

package.json

@@ -11,6 +11,7 @@
     "d3-selection": "^3.0.0",
     "firebase": "^9.23.0",
     "lodash": "^4.17.21",
+    "ml-savitzky-golay-generalized": "^4.0.1",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

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 {