import React, { Component } from 'react'
import * as d3 from 'd3'


class RegistraionChart extends Component {

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        // const data = this.props.data;
        // const margin = { left: 10, top: 10 };

        // const svg = d3.select("body")
        //     .append("svg")
        //     .attr("width", 700)
        //     .attr("height", 300);

        // svg.selectAll("rect")
        //     .data(data.map(x => x - 1970))
        //     .enter()
        //     .append("rect")
        //     .attr("x", (d, i) => i * 40)
        //     .attr("y", (d, i) => 300 - 10 * d)
        //     .attr("width", 65)
        //     .attr("height", (d, i) => d * 10)
        //     .attr("fill", "#9338FF")
        //     .on('click', function (x) {
        //         // console.log(x.srcElement);
        //         // alert(x);
        //     });

        // var xScale = d3.scaleBand().range([0, this.props.width]).padding(0.4),
        //     yScale = d3.scaleLinear().range([this.props.height, 0]);

        const data =
            [
                {
                    "gender": "Male",
                    "count": 50,
                },
                {
                    "gender": "Female",
                    "count": 70,
                },
                {
                    "gender": "Not Specified",
                    "count": 60,
                }
            ];
        // d3.select("#gender").append("div")
        //     .attr("class", "chart").selectAll(".bar").data(data).enter()
        //     .append("div")
        //     .attr("class", "bar")
        //     .style("width", function (d) { return d.count + "px" }).style("outline", "1px solid black").text(function (d) { return Math.round(d.count) });

        d3.select("#registration").append("div").attr("class", "chart").selectAll("div.line").data(data)
            .enter()
            .append("div").attr("class", "line");
        d3.selectAll("div.line").append("div")
            .attr("class", "label").text(function (d) { return d.gender });
        d3.selectAll("div.line").append("div")
            .attr("class", "bar")
            .style("width", function (d) { return d.count + "px" }).text(function (d) { return Math.round(d.count) });
    }

    render() {
        return <div id="registration" style={{ margin: '1em' }}></div>
    }
}
export default RegistraionChart;