all files / src/import/ pieChart.js

6.9% Statements 2/29
0% Branches 0/2
0% Functions 0/8
7.14% Lines 2/28
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108                                                                                                                                                                                                                   
/* eslint-env browser */
const d3 = Object.assign({},
  require('d3-selection'),
  require('d3-scale'),
  require('d3-axis'),
  require('d3-shape'));
/**
 * Builds an Pie Chart.
 * @constructor
 * @param {String} mode (init / refresh)
 * @exports pieChart
 */
 
const pieChart = function chart() {
  const svgContainer = d3.select(`#${this.chartData.selector}`);
  let cs = {
    radius: null,
    ordinalColors: ['#d1f4fa', '#005792', '#ffe6eb', '#ffcdcd'],
  };
  cs.radius = this.height > this.width ? (
    this.width - this.width * 0.1) / 2 : (this.height - this.height * 0.1) / 2;
 
  const color = d3.scaleOrdinal()
    .range(cs.ordinalColors);
 
  /**
   * @method getColor
   * @description Returns colors for pie chart
   */
  const getColor = (d, i) => color(i);
 
  /**
     * @method mouseOver
     * @param {Object} d (svg element)
     * @description Adds a tooltip on mouse over
     */
  const mouseOver = (d) => {
    this.addTooltip(d.data, window.event);
  };
 
  /**
     * @method mouseOut
     * @param {Object} d (svg element)
     * @description Removes tooltip on mouse out
     */
  const mouseOut = (d) => {
    this.removeTooltip(d);
  };
 
  const path = d3.arc()
    .outerRadius(cs.radius - 10)
    .innerRadius(25);
 
  /**
   * @method enter
   * @param {Object} arc (svg element)
   * @description Runs when a new element is added to the dataset
   */
  const enter = (arc) => {
    arc.enter()
      .append('g')
      .attr('transform', `translate(${this.width / 2},${this.height / 2})`)
      .append('path')
      .merge(arc)
      .attr('class', 'arc')
      .attr('d', path)
      .attr('fill', getColor)
      .on('mouseover', mouseOver)
      .on('mouseout', mouseOut)
      .attr('transform', `translate(0,${this.header})`);
    return arc;
  };
  /**
    * @method transition
    * @param {Object} arc (svg element)
    * @description Runs when a value of an element in dataset is changed
    */
  const transition = (arc) => {
    arc.transition()
      .attr('d', path)
      .attr('fill', getColor);
    return arc;
  };
  /**
   * @method exit
   * @param {Object} arc (svg element)
   * @description Runs when an element is removed from the dataset
   */
  const exit = (arc) => {
    arc.exit().remove();
    return arc;
  };
 
  const pie = d3.pie()
    .sort(null)
    .value(d => d.metric);
 
  const arc = svgContainer.selectAll('.arc')
    .data(pie(this.ds));
 
  cs = this.setOverrides(cs, this.chartData.overrides); 
  enter(arc);
  transition(arc);
  exit(arc);
};
 
export default pieChart;