add filter to data

2023-07-21 08:20:39 +05:30
parent 0f955c4c4a
commit 65d28ad432
6 changed files with 70 additions and 8 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/App.css
+++ b/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;
--- a/src/App.js
+++ b/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>
  );
--- a/src/components/AbsorbanceGraph.js
+++ b/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])
--- a/src/components/DeviceGraph.css
+++ b/src/components/DeviceGraph.css
@@ -1,7 +1,7 @@
 .line {
    fill: none;
    stroke: #009EDC;
-    stroke-width: 5px;
+    stroke-width: 1px;
 }

 .graph-card {