pie_chart.js

import * as d3 from 'd3';
import css from './pie.css'

var contentSuppliers = require('./reports/suppliers.csv')

var margin = {  top: 40, right: 20, bottom: 30, left: 20 };
var width = 600 - margin.left - margin.right;
var height = 360 - margin.top - margin.bottom;
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal(d3.schemeCategory20b);
var donutWidth = 75;

var suppliers = d3.select('.suppliers')
  .append('ul')
  .attr('class', 'nav flex-column')
  .selectAll('li')
  .data(contentSuppliers)
  .enter()
  .append('li')
  .append('a')
  .attr('class', function(d) { return d.code })
  .attr('href', '#')
  .text(function(d) { return d.name })
  .on('click', function(d) {
    draw('./reports/overviews/' + d.code + '-overview.csv')
  });

var svg = d3.select('.chart.pie')
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + (margin.left + width / 2) +  ',' + (margin.top + height / 2) + ')');

var arc = d3.arc()
  .innerRadius(radius - donutWidth)
  .outerRadius(radius);

function type(d) {
  d.value = +d.value;
  d.enabled = true;
  return d;
}

var legendRectSize = 15;
var legendSpacing = 4;

var tooltip = d3.select('.chart.pie')
  .append('div')
  .attr('class', 'tooltipD3');

tooltip.append('div')
  .attr('class', 'name');

tooltip.append('div')
  .attr('class', 'value');

tooltip.append('div')
  .attr('class', 'percent');

var draw = function(dataFile) {
  svg.html('')
  d3.csv(dataFile, type, function(error, data) {
    var pie = d3.pie()
     .value(function(d) {
       var percent = d.value / (d3.sum(data, function(d) { return d.value })) * 100
       return percent
     })
     .sort(null);

    var path = svg.selectAll('path')
      .data(pie(data))
      .enter()
      .append('path')
      .attr('d', arc)
      .attr('fill', function(d, i) {
        return color(d.data.name);
      })
      .each(function(d) { this._current = d; }); 

    path.on('mouseover', function(d) {
      var total = d3.sum(data.map(function(d) {
        return (d.enabled) ? d.value : 0;
      }));

      var percent = Math.round(d.data.value / total * 100)

      tooltip.select('.percent').html(percent + '%')
      tooltip.select('.name').style('color', 'red').html(d.data.name);
      tooltip.select('.value').html(d.data.value);
      tooltip.style('display', 'block');
    });

    path.on('mouseout', function(d) {
      tooltip.style('display', 'none');
    });

    path.on('mousemove', function(d) {
      tooltip.style('top', (d3.event.layerY + 10) + 'px')
        .style('left', (d3.event.layerX + 10) + 'px');
    });

    var legend = svg.selectAll('.legend')
      .data(color.domain())
      .enter()
      .append('g')
      .attr('class', 'legend')
      .attr('transform', function(d, i) {
        var height = legendRectSize + legendSpacing;
        var offset =  height * color.domain().length / 2;
        var horz = 200;
        var vert = i * height - offset;
        return 'translate(' + horz + ',' + vert + ')';
      });

      legend.append('rect')
        .attr('width', legendRectSize)
        .attr('height', legendRectSize)
        .style('fill', color)
        .style('stroke', color)
        .on('click', function(name) {
          var rect = d3.select(this);
          var enabled = true;
          var totalEnabled = d3.sum(data.map(function(d) {
            return (d.enabled) ? 1 : 0;
          }));

          console.log(totalEnabled)

          if (rect.attr('class') === 'disabled') {
            rect.attr('class', '');
          } else {
            if (totalEnabled < 2) return;
            rect.attr('class', 'disabled');
            enabled = false;
          }

          pie.value(function(d) {
            if (d.name === name) d.enabled = enabled;
            return (d.enabled) ? d.value : 0;
          });

          path = path.data(pie(data));

          path.transition()
            .duration(750)
            .attrTween('d', function(d) {
              var interpolate = d3.interpolate(this._current, d);
              this._current = interpolate(0);
              return function(t) {
                return arc(interpolate(t));
              };
            });
        });

      var lText = d3.max(data, function(d) { return d.name.length });

      legend.append('text')
        .attr('x', lText * 7)
        .attr('y', legendRectSize - legendSpacing)
        .text(function(d) { return d; });
   });
};