draw = function draw(txt, id) {
  try {
    var parser = _parser_pie__WEBPACK_IMPORTED_MODULE_2___default.a.parser;
    parser.yy = _pieDb__WEBPACK_IMPORTED_MODULE_1__["default"];
    _logger__WEBPACK_IMPORTED_MODULE_3__["logger"].debug('Rendering info diagram\n' + txt); // Parse the Pie Chart definition

    parser.yy.clear();
    parser.parse(txt);
    _logger__WEBPACK_IMPORTED_MODULE_3__["logger"].debug('Parsed info diagram');
    var elem = document.getElementById(id);
    w = elem.parentElement.offsetWidth;

    if (typeof w === 'undefined') {
      w = 1200;
    }

    if (typeof conf.useWidth !== 'undefined') {
      w = conf.useWidth;
    }

    var h = 450;
    elem.setAttribute('height', '100%'); // Set viewBox

    elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h); // Fetch the default direction, use TD if none was found

    var width = w; // 450

    var height = 450;
    var margin = 40;
    var legendRectSize = 18;
    var legendSpacing = 4;
    var radius = Math.min(width, height) / 2 - margin;
    var svg = d3__WEBPACK_IMPORTED_MODULE_0__["select"]('#' + id).append('svg').attr('width', width).attr('height', height).append('g').attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
    var data = _pieDb__WEBPACK_IMPORTED_MODULE_1__["default"].getSections();
    var sum = 0;
    Object.keys(data).forEach(function (key) {
      sum += data[key];
    });
    _logger__WEBPACK_IMPORTED_MODULE_3__["logger"].info(data); // set the color scale

    var color = d3__WEBPACK_IMPORTED_MODULE_0__["scaleOrdinal"]().domain(data).range(d3__WEBPACK_IMPORTED_MODULE_0__["schemeSet2"]); // Compute the position of each group on the pie:

    var pie = d3__WEBPACK_IMPORTED_MODULE_0__["pie"]().value(function (d) {
      return d.value;
    });
    var dataReady = pie(d3__WEBPACK_IMPORTED_MODULE_0__["entries"](data)); // shape helper to build arcs:

    var arcGenerator = d3__WEBPACK_IMPORTED_MODULE_0__["arc"]().innerRadius(0).outerRadius(radius); // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.

    svg.selectAll('mySlices').data(dataReady).enter().append('path').attr('d', arcGenerator).attr('fill', function (d) {
      return color(d.data.key);
    }).attr('stroke', 'black').style('stroke-width', '2px').style('opacity', 0.7); // Now add the Percentage. Use the centroid method to get the best coordinates

    svg.selectAll('mySlices').data(dataReady).enter().append('text').text(function (d) {
      return (d.data.value / sum * 100).toFixed(0) + '%';
    }).attr('transform', function (d) {
      return 'translate(' + arcGenerator.centroid(d) + ')';
    }).style('text-anchor', 'middle').attr('class', 'slice').style('font-size', 17);
    svg.append('text').text(parser.yy.getTitle()).attr('x', 0).attr('y', -(h - 50) / 2).attr('class', 'pieTitleText'); //Add the slegend/annotations for each section

    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 = 12 * legendRectSize;
      var vert = i * height - offset;
      return 'translate(' + horz + ',' + vert + ')';
    });
    legend.append('rect').attr('width', legendRectSize).attr('height', legendRectSize).style('fill', color).style('stroke', color);
    legend.append('text').attr('x', legendRectSize + legendSpacing).attr('y', legendRectSize - legendSpacing).text(function (d) {
      return d;
    });
  } catch (e) {
    _logger__WEBPACK_IMPORTED_MODULE_3__["logger"].error('Error while rendering info diagram');
    _logger__WEBPACK_IMPORTED_MODULE_3__["logger"].error(e.message);
  }
}
Draws a Pie Chart with the data given in text.
@param text
@param id