diff --git a/src/components/TestAnalytics.js b/src/components/TestAnalytics.js
index 945c66a..2ae53df 100644
--- a/src/components/TestAnalytics.js
+++ b/src/components/TestAnalytics.js
@@ -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] };
}));
diff --git a/src/components/TestAnalyticsGraph.js b/src/components/TestAnalyticsGraph.js
index ea1d459..590f511 100644
--- a/src/components/TestAnalyticsGraph.js
+++ b/src/components/TestAnalyticsGraph.js
@@ -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 {
-
count vs result
+
test counts per day
)
diff --git a/src/components/TestAnalyticsPie.js b/src/components/TestAnalyticsPie.js
new file mode 100644
index 0000000..d61cc34
--- /dev/null
+++ b/src/components/TestAnalyticsPie.js
@@ -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 (
+
+
+
+
+
test counts per day
+
+