smiuser/hpos-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add per day test graph

Browse Source
This commit is contained in:
prisar
2023-07-23 09:58:23 +05:30
parent 413a6b1455
commit a709d83693
3 changed files with 150 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/TestAnalytics.js
View File

@@ -10,6 +10,7 @@ import DeviceGraph from "./DeviceGraph";
import db from '../firebase';
import './Devices.css';
import TestAnalyticsGraph from './TestAnalyticsGraph';
import TestAnalyticsPie from './TestAnalyticsPie';
const styles = {
menuList: (base) => ({
@@ -117,7 +118,7 @@ const TestAnalytics = () => {
result[day]++;
return result;
}, {});
setDailyResults(Object.entries(dailyCounts).sort().map(x => {
return { date: x[0], count: x[1] };
}));

5
src/components/TestAnalyticsGraph.js
View File

@@ -76,7 +76,8 @@ class TestAnalyticsGraph extends Component {
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("x", -160)
.attr("y", -36)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Tests Count");
@@ -88,7 +89,7 @@ class TestAnalyticsGraph extends Component {
<div className='graph-card'>
<div id="result-graph" style={{ margin: '1em' }}>
</div>
<div className='graph-title'>count vs result</div>
<div className='graph-title'>test counts per day</div>
</div>
</div>
)

145
src/components/TestAnalyticsPie.js Normal file
View File

@@ -0,0 +1,145 @@
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 TestAnalyticsPie extends Component {
constructor(props) {
super(props);
this.state = { data: this.props.data, show: this.props.show };
}
componentDidMount() {
this.drawChart(this.state.data);
}
drawChart(data2) {
// 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("x", -160)
// .attr("y", -36)
// .attr("dy", "0.71em")
// .attr("fill", "#000")
// .text("Tests Count");
var data = [2, 4, 8, 10];
var margin = { top: 50, right: 10, bottom: 15, left: 50 },
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var radius = Math.min(width, height) / 2;
// var svg = d3.select("#result-graph").append("svg"),
// width = svg.attr("width"),
// height = svg.attr("height"),
// radius = Math.min(width, height) / 2,
// g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
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 + ")");
var color = d3.scaleOrdinal(['#4daf4a', '#377eb8', '#ff7f00', '#984ea3', '#e41a1c']);
// Generate the pie
var pie = d3.pie();
// Generate the arcs
var arc = d3.arc()
.innerRadius(0)
.outerRadius(radius);
//Generate groups
var arcs = g.selectAll("arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc")
//Draw arc paths
arcs.append("path")
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", arc);
}
render() {
return (
<div>
<div className='graph-card'>
<div id="result-graph" style={{ margin: '1em' }}>
</div>
<div className='graph-title'>test counts per day</div>
</div>
</div>
)
};
}
export default TestAnalyticsPie;