diff --git a/package-lock.json b/package-lock.json index d565be3..e8f1261 100644 --- 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", diff --git a/package.json b/package.json index 3c1a27c..658bdb1 100644 --- 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", diff --git a/src/App.css b/src/App.css index 4031636..fad4f40 100644 --- 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; diff --git a/src/App.js b/src/App.js index ab822aa..c005688 100644 --- 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")} -
+
setDevMode(!devMode)}> Developed by ShanMukha
+ + {/* {devMode && +
dev mode is on
} */}
); diff --git a/src/components/AbsorbanceGraph.js b/src/components/AbsorbanceGraph.js index 6c17569..94d4cbb 100644 --- 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]) diff --git a/src/components/DeviceGraph.css b/src/components/DeviceGraph.css index 890a73b..040ddfb 100644 --- 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 {