hpos-web/src/components/TestAnalyticsPie.js

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 './TestAnalyticsPie.css';
import constants from '../constants';

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(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")
            .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}`);
                return tooltip
                    .style("visibility", "visible")
                    .style("font-size", "0.75em")
                    .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='graph-card'>
                    <div id="category-diagram" style={{ margin: '1em' }}>
                    </div>
                    <div className='graph-title'>category data on daily basis</div>
                </div>
            </div>
        )
    };
}
export default TestAnalyticsPie;