add analytics page for tests conducted

- add robot.txt entry - fix graph render with new set of actions
2023-07-23 02:42:53 +05:30
parent 7d9ae020af
commit 413a6b1455
9 changed files with 293 additions and 15 deletions
--- a/src/components/TestAnalyticsGraph.js
+++ b/src/components/TestAnalyticsGraph.js
@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import * as d3 from 'd3';
+import { sgg } from 'ml-savitzky-golay-generalized';
+import axios from 'axios';
+import moment from 'moment';
+
+import './DeviceGraph.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("#result-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("y", 6)
+            .attr("dy", "0.71em")
+            .attr("fill", "#000")
+            .text("Tests Count");
+    }
+
+    render() {
+        return (
+            <div>
+                <div className='graph-card'>
+                    <div id="result-graph" style={{ margin: '1em' }}>
+                    </div>
+                    <div className='graph-title'>count vs result</div>
+                </div>
+            </div>
+        )
+    };
+}
+export default TestAnalyticsGraph;