121 lines
4.4 KiB
JavaScript
121 lines
4.4 KiB
JavaScript
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 { FaBeer, FaInfoCircle } from "react-icons/fa";
|
|
|
|
import './TestAnalyticsPie.css';
|
|
import constants from '../configs/constants';
|
|
|
|
class TestAnalyticsPie extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
data: this.props.data,
|
|
show: this.props.show,
|
|
showCardInfo: false
|
|
};
|
|
}
|
|
componentDidMount() {
|
|
this.drawChart(this.state.data);
|
|
}
|
|
|
|
drawChart(data) {
|
|
if (!data) return;
|
|
|
|
var margin = { top: 30, right: 10, bottom: 15, left: 25 },
|
|
width = 480 - margin.left - margin.right,
|
|
height = 250 - margin.top - margin.bottom,
|
|
radius = Math.min(width, height) / 2;
|
|
|
|
var svg = d3.select("#category-diagram").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(" + width / 2 + "," + height / 2 + ")");
|
|
|
|
var color = d3.scaleOrdinal(['#4daf4a', '#377eb8', '#ff7f00', '#984ea3', '#e41a1c']);
|
|
|
|
var pie = d3.pie().value(function (d) {
|
|
return d.count;
|
|
});
|
|
|
|
var path = d3.arc()
|
|
.outerRadius(radius - 10)
|
|
// .innerRadius(0);
|
|
.innerRadius(50);
|
|
|
|
var label = d3.arc()
|
|
.outerRadius(radius)
|
|
.innerRadius(radius - 40);
|
|
|
|
var arc = g.selectAll(".arc")
|
|
.data(pie(data))
|
|
.enter().append("g")
|
|
.attr("class", "arc");
|
|
|
|
var tooltip = d3.select("#category-diagram")
|
|
.append("div")
|
|
.attr("class", "category-tooltip")
|
|
.style("position", "absolute")
|
|
.style("z-index", "10")
|
|
.style("visibility", "hidden")
|
|
.style("background", "#fff")
|
|
.text("a simple tooltip");
|
|
|
|
arc.append("path")
|
|
.attr("d", path)
|
|
.attr("fill", function (d) { return color(d.data.category); })
|
|
.on('mouseover', (event, d) => {
|
|
tooltip.text(`${d.data.category}: ${d.data.count}, ${Math.floor(100 * d.data.count / data.reduce((a, c) => a + c.count, 0)).toFixed(2)}%`);
|
|
return tooltip
|
|
.style("visibility", "visible")
|
|
.style("font-size", "0.65em")
|
|
.style("font-weight", "600")
|
|
.style("z-index", "9999")
|
|
.style("width", "200px")
|
|
.style("height", "50px")
|
|
.style("display", "flex")
|
|
.style("align-items", "center")
|
|
.style("justify-content", "center")
|
|
.style("border-radius", "3px")
|
|
.style("box-shadow", "1px 1px 1px 1px #888888");
|
|
})
|
|
.on('mouseout', (event, d) => {
|
|
return tooltip
|
|
.style("visibility", "hidden");
|
|
});
|
|
|
|
arc.append("text")
|
|
.attr("transform", function (d) {
|
|
return "translate(" + label.centroid(d) + ")";
|
|
})
|
|
.style("font-size", "0.75em")
|
|
.text(function (d) { return constants.categoryshortname[d.data.category]; });
|
|
|
|
// svg.append("g")
|
|
// .attr("transform", "translate(" + (width / 2 - 170) + "," + 1 + ")")
|
|
// .append("text")
|
|
// .text("category counts per day")
|
|
// .attr("class", "title")
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<div className='category-graph-card'>
|
|
<div className='category-card-title'>Category data on daily basis<span className='category-info-icon' onClick={() => !this.setState({ showCardInfo: !this.state.showCardInfo })}><FaInfoCircle /></span>
|
|
{this.state.showCardInfo && <div className='category-info-card'>Current day test data or the last tested day data is taken into account</div>}
|
|
</div>
|
|
<div id="category-diagram" style={{ margin: '1em' }}>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|
|
}
|
|
export default TestAnalyticsPie; |