103 lines
3.4 KiB
JavaScript
103 lines
3.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import * as d3 from 'd3';
|
|
import { sgg } from 'ml-savitzky-golay-generalized';
|
|
import axios from 'axios';
|
|
|
|
import './DeviceGraph.css';
|
|
|
|
class AbsorbanceGraph extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { url: this.props.url, show: this.props.show };
|
|
}
|
|
componentDidMount() {
|
|
this.drawChart(this.props.url);
|
|
}
|
|
|
|
drawChart(url) {
|
|
if (!url) return;
|
|
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
|
|
width = 960 - margin.left - margin.right,
|
|
height = 500 - margin.top - margin.bottom;
|
|
|
|
// set the ranges
|
|
var x = d3.scaleTime().range([0, width]);
|
|
var y = d3.scaleLinear().range([height, 0]);
|
|
|
|
// define the line
|
|
var valueline = d3.line()
|
|
.x(function (d) { return x(d.wavelength); })
|
|
.y(function (d) { return y(d.absorbance); });
|
|
|
|
// append the svg obgect to the body of the page
|
|
// appends a 'group' element to 'svg'
|
|
// moves the 'group' element to the top left margin
|
|
var svg = d3.select("#wavelength-graph").append("svg")
|
|
.attr("width", width + margin.left + margin.right)
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
.append("g").attr("transform",
|
|
"translate(" + margin.left + "," + margin.top + ")");
|
|
|
|
axios({
|
|
method: 'get',
|
|
url: url,
|
|
withCredentials: false,
|
|
secure: false,
|
|
responseType: 'blob',
|
|
headers: {
|
|
"Content-Type": "application/octet-stream"
|
|
},
|
|
})
|
|
.then(response => response.data.text())
|
|
.then((text) => {
|
|
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,
|
|
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.absorbance = +d.CA;
|
|
});
|
|
|
|
x.domain(d3.extent(testData, function (d) { return d.wavelength; }));
|
|
y.domain([0, d3.max(testData, function (d) { return d.absorbance; })]);
|
|
|
|
svg.append("path")
|
|
.data([testData])
|
|
.attr("class", "line")
|
|
.attr("d", valueline);
|
|
|
|
svg.append("g")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.axisBottom(x));
|
|
|
|
svg.append("g")
|
|
.call(d3.axisLeft(y));
|
|
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<div className='graph-card'>
|
|
<div id="wavelength-graph" style={{ margin: '1em' }}>
|
|
</div>
|
|
<div className='graph-title'>wavelength vs absorbance</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|
|
}
|
|
export default AbsorbanceGraph; |