hpos-web/src/components/AbsorbanceGraph.js

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 };
    }
    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));

            });


        // /* test graph */
        // const testData = require('./testData.json').filter(x => { if (x.NM > 397 && x.NM < 580) return x; });

        // 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;