class SimpleDonut {
    constructor(options) {
        this.options = options;
    
        var {data, width, height, element} = this.options;
    
        const svg = d3.select(element)
            .append('svg')
            .attr('class', 'donut-chart-svg')
            .attr('width', width)
            .attr('height', height);
        
        var tooltip = d3.select('body')
            .append('div')
            .attr('class', 'd3-tooltip')
            .style('position', 'absolute')
            .style('z-index', '10')
            .style('visibility', 'hidden')
            .style('padding', '10px')
            .style('background', 'rgba(0,0,0,0.6)')
            .style('border-radius', '4px')
            .style('color', '#fff')
            .text('a simple tooltip');
        
        const color = d3.scaleOrdinal(d3.schemePuBu[9]);
        
        const r = Math.min(width, height) / 2;
        const arc = d3.arc()
        	.innerRadius(r - 50)
        	.outerRadius(r);
        
        const pie = d3.pie()
        	.value(d => d.value);
        
        const g = svg.append('g')
        	.attr('transform', `translate(${width/2},${height/2})`);
        
        g.selectAll('.chart-arc')
        	.data(pie(data))
        	.enter()
        	.append('path')
        	.attr('class', 'chart-arc')
        	.attr('d', arc)
        	.style('fill', d => color(d.data.label))
        	.on('mouseover', function(event, d, i) {
                tooltip
                    .html('<div>Agent: ' + d.data.label + '</div><div>Value: ' + d.data.value + '</div>')
                    .style('visibility', 'visible');
            })
        	.on('mousemove', function(event, d) {
                tooltip
                    .style('left', (event.pageX + 10) + "px")
                    .style('top', (event.pageY - 10) + "px");
            })
        	.on('mouseout', function(event, d) {
                tooltip
                    .html('')
                    .style('visibility', 'hidden');
            });
    }
}