hpos-web/src/components/TestAnalyticsGraph.js

import React, { Component } from 'react';
import * as d3 from 'd3';
import moment from 'moment';

import './TestAnalyticsGraph.css';

class TestAnalyticsGraph extends Component {
    constructor(props) {
        super(props);
        this.state = { data: this.props.data, show: this.props.show };
    }
    componentDidMount() {
        this.drawChart(this.state.data);
    }

    drawChart(data) {
        if (!data) 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(moment(d.date)); })
            .y(function (d) { return y(d.count); });

        var svg = d3.select("#tests-count-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 + ")");
        // var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // const options = {
        //     windowSize: 5,
        //     derivative: 0,
        //     polynomial: 3,
        // };
        // const sggResult = sgg(data.map(x => x.CA), (Math.PI * 2) / data.length, options);

        // data.forEach(function (d, index) {
        //     d.NM = d.NM;
        //     d.CA = sggResult[index];
        // });
        // data.forEach(function (d) {
        //     d.date = d.date;
        //     d.count = +d.count;
        // });

        x.domain(d3.extent(data, function (d) { return moment(d.date); }));
        y.domain([0, d3.max(data, function (d) { return d.count; })]);

        svg.append("path")
            .data([data])
            .attr("class", "line")
            .attr("d", valueline);

        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x))
            .append("text")
            // .attr("transform", "rotate(-90)")
            .attr("x", 400)
            .attr("y", 30)
            .attr("dx", "0.71em")
            .attr("fill", "#000")
            .text("Test time");

        svg.append("g")
            .call(d3.axisLeft(y))
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("x", -160)
            .attr("y", -36)
            .attr("dy", "0.71em")
            .attr("fill", "#000")
            .text("Tests Count");
    }

    render() {
        return (
            <div>
                <div className='tests-count-card'>
                    <div id="tests-count-graph" style={{ margin: '1em' }}>
                    </div>
                    <div className='graph-title'>test counts per day</div>
                </div>
            </div>
        )
    };
}
export default TestAnalyticsGraph;