<commit_before><link rel="import" href="../polymer/polymer.html">

<!--
`svg-piechart` draws a piechart using SVG. The absolut values are defined as an array in `data`.

    <svg-piechart data="[10,20,40,50]"></svg-piechart>

Height and width in pixels can be changed by setting `size`:

    <svg-piechart size="250" data="[10,20,40,50]"></svg-piechart>

There are three default color palettes included. They all use the official <a href="http://www.google.com/design/spec/style/color.html">Material Colors</a>. One has 4 different colors, one 8 and one 16. The chart element automatically uses the smallest palette that covers the amount of given values. (So with 6 given values, the 8-color-palette is used.)

To use custom colors, set the `colors` property to an array of rgb or rgba values:

    <svg-piechart
      colors='["red", "#666", "#1e88e5", "rgba(255, 0, 20, .4)"]'
      data="  [ 10,    20,     40,        50]">
    </svg-piechart>



@demo
@element
@blurb Draws a piechart using SVG.
@status alpha
@homepage http://timeu.github.io/svg-piechart
-->

<dom-module id="svg-piechart">
  <style>
    :host {
      display:block;
    }
   </style>

   <template>
    <svg id="svg" width$="[[size]]" height$="[[size]]" viewBox="0 0 360 360"></svg>
  </template>

</dom-module>

<script>
(function() {

  var DEFAULT_COLORS16 = [
    '#f44336',
    '#e91e63',
    '#9c27b0',
    '#673ab7',
    '#3f51b5',
    '#1e88e5',
    '#03a9f4',
    '#00bcd4',
    '#009688',
    '#4caf50',
    '#8bc34a',
    '#cddc39',
    '#ffeb3b',
    '#ffc107',
    '#ff9800',
    '#ff5722'
  ];
  var DEFAULT_COLORS8 = [
    '#f44336',
    '#9c27b0',
    '#3f51b5',
    '#03a9f4',
    '#009688',
    '#8bc34a',
    '#ffeb3b',
    '#ff9800'
  ];
  var DEFAULT_COLORS4 = [
    '#f44336',
    '#3f51b5',
    '#8bc34a',
    '#ffeb3b',
  ];


  Polymer({

    is: 'svg-piechart',

    properties: {
      /**
      * The `colors` attribute specifies the colors to be used for each slice.
      * If no colors are specified then the default-colors are used.
      *
      * @attribute colors
      */
      colors: {
        type: Array,
        value: []
      },

      /**
      * The `size` property specifies the size of the piechart (Default: 150).
      *
      * @attribute size
      */
      size: {
        type: Number,
        value: 150
      },

      /**
      * The `data` property specifies the values for each slice .
      *
      * @attribute data
      */
      data: {
        type: Array,
        value: []
      }
    },

    observers: [
      '_render(colors, data)'
    ],

    _calculateTotal: function(data) {
      var total = 0;
      for (var i = 0; i < data.length; i++) {
        total += data[i];
      }
      return total;
    },

    _computePath: function(arc) {
      return 'M180,180 L' + arc.x1 + ',' + arc.y1 + ' A180,180 0 ' + arc.largeArcFlag + ',1 ' + arc.x2 + ',' + arc.y2 + ' z';
    },

    _getColors: function(colors) {
      if (!colors || colors.length == 0) {
        if (this.data.length > 8) {
          colors = DEFAULT_COLORS16;
        }
        else if (this.data.length > 4) {
          colors = DEFAULT_COLORS8;
        }
        else {
          colors = DEFAULT_COLORS4;
        }
      }
      return colors;
    },

    _calculateArcs: function(colors, data) {
      var total = this._calculateTotal(data);
      colors = this._getColors(colors);
      var startAngle = 0;
      var endAngle = -90;
      var arcs = [];

      for (var i = 0; i < data.length; i++) {
        var angle = (360*data[i]/total);
        var largeArcFlag = 0;
        if (angle > 180) {
          largeArcFlag = 1;
        }

        startAngle = endAngle;
        endAngle = startAngle + angle;
        var arc = {
          x1: 180 + 180*Math.cos(Math.PI*startAngle/180),
          y1: 180 + 180*Math.sin(Math.PI*startAngle/180),
          x2: 180 + 180*Math.cos(Math.PI*endAngle/180),
          y2: 180 + 180*Math.sin(Math.PI*endAngle/180),
          largeArcFlag: largeArcFlag,
          color: colors[i]
        };
        if (arc.x2 > 179.9 && arc.y2 === 0 && arc.largeArcFlag === 1) {
          arc.x2 = 179.99;
        }
        arcs.push(arc);
      }

      return arcs;
    },

    _render: function(colors, data) {
      var arcs = this._calculateArcs(colors, data);
      var svg = Polymer.dom(this.$.svg);

      while (svg.firstChild) {
        svg.removeChild(svg.firstChild);
      }

      for (var i = 0; i < arcs.length; i++) {
        var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        // IE11 does not support classList on SVG elements
        if (path.classList) {
          path.classList.add('slice');
        }
        else {
          var c = path.getAttribute('class');
          path.setAttribute('class','slice');
        }
        path.style.fill = arcs[i].color;
        path.setAttribute('d', this._computePath(arcs[i]));
        svg.appendChild(path);
      }<commit_msg>Fix eslint error<commit_after><link rel="import" href="../polymer/polymer.html">

<!--
`svg-piechart` draws a piechart using SVG. The absolut values are defined as an array in `data`.

    <svg-piechart data="[10,20,40,50]"></svg-piechart>

Height and width in pixels can be changed by setting `size`:

    <svg-piechart size="250" data="[10,20,40,50]"></svg-piechart>

There are three default color palettes included. They all use the official <a href="http://www.google.com/design/spec/style/color.html">Material Colors</a>. One has 4 different colors, one 8 and one 16. The chart element automatically uses the smallest palette that covers the amount of given values. (So with 6 given values, the 8-color-palette is used.)

To use custom colors, set the `colors` property to an array of rgb or rgba values:

    <svg-piechart
      colors='["red", "#666", "#1e88e5", "rgba(255, 0, 20, .4)"]'
      data="  [ 10,    20,     40,        50]">
    </svg-piechart>



@demo
@element
@blurb Draws a piechart using SVG.
@status alpha
@homepage http://timeu.github.io/svg-piechart
-->

<dom-module id="svg-piechart">
  <style>
    :host {
      display:block;
    }
   </style>

   <template>
    <svg id="svg" width$="[[size]]" height$="[[size]]" viewBox="0 0 360 360"></svg>
  </template>

</dom-module>

<script>
(function() {

  var DEFAULT_COLORS16 = [
    '#f44336',
    '#e91e63',
    '#9c27b0',
    '#673ab7',
    '#3f51b5',
    '#1e88e5',
    '#03a9f4',
    '#00bcd4',
    '#009688',
    '#4caf50',
    '#8bc34a',
    '#cddc39',
    '#ffeb3b',
    '#ffc107',
    '#ff9800',
    '#ff5722'
  ];
  var DEFAULT_COLORS8 = [
    '#f44336',
    '#9c27b0',
    '#3f51b5',
    '#03a9f4',
    '#009688',
    '#8bc34a',
    '#ffeb3b',
    '#ff9800'
  ];
  var DEFAULT_COLORS4 = [
    '#f44336',
    '#3f51b5',
    '#8bc34a',
    '#ffeb3b',
  ];


  Polymer({

    is: 'svg-piechart',

    properties: {
      /**
      * The `colors` attribute specifies the colors to be used for each slice.
      * If no colors are specified then the default-colors are used.
      *
      * @attribute colors
      */
      colors: {
        type: Array,
        value: []
      },

      /**
      * The `size` property specifies the size of the piechart (Default: 150).
      *
      * @attribute size
      */
      size: {
        type: Number,
        value: 150
      },

      /**
      * The `data` property specifies the values for each slice .
      *
      * @attribute data
      */
      data: {
        type: Array,
        value: []
      }
    },

    observers: [
      '_render(colors, data)'
    ],

    _calculateTotal: function(data) {
      var total = 0;
      for (var i = 0; i < data.length; i++) {
        total += data[i];
      }
      return total;
    },

    _computePath: function(arc) {
      return 'M180,180 L' + arc.x1 + ',' + arc.y1 + ' A180,180 0 ' + arc.largeArcFlag + ',1 ' + arc.x2 + ',' + arc.y2 + ' z';
    },

    _getColors: function(colors) {
      if (!colors || colors.length == 0) {
        if (this.data.length > 8) {
          colors = DEFAULT_COLORS16;
        }
        else if (this.data.length > 4) {
          colors = DEFAULT_COLORS8;
        }
        else {
          colors = DEFAULT_COLORS4;
        }
      }
      return colors;
    },

    _calculateArcs: function(colors, data) {
      var total = this._calculateTotal(data);
      colors = this._getColors(colors);
      var startAngle = 0;
      var endAngle = -90;
      var arcs = [];

      for (var i = 0; i < data.length; i++) {
        var angle = (360*data[i]/total);
        var largeArcFlag = 0;
        if (angle > 180) {
          largeArcFlag = 1;
        }

        startAngle = endAngle;
        endAngle = startAngle + angle;
        var arc = {
          x1: 180 + 180*Math.cos(Math.PI*startAngle/180),
          y1: 180 + 180*Math.sin(Math.PI*startAngle/180),
          x2: 180 + 180*Math.cos(Math.PI*endAngle/180),
          y2: 180 + 180*Math.sin(Math.PI*endAngle/180),
          largeArcFlag: largeArcFlag,
          color: colors[i]
        };
        if (arc.x2 > 179.9 && arc.y2 === 0 && arc.largeArcFlag === 1) {
          arc.x2 = 179.99;
        }
        arcs.push(arc);
      }

      return arcs;
    },

    _render: function(colors, data) {
      var arcs = this._calculateArcs(colors, data);
      var svg = Polymer.dom(this.$.svg);

      while (svg.firstChild) {
        svg.removeChild(svg.firstChild);
      }

      for (var i = 0; i < arcs.length; i++) {
        var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        // IE11 does not support classList on SVG elements
        if (path.classList) {
          path.classList.add('slice');
        }
        else {
          path.setAttribute('class','slice');
        }
        path.style.fill = arcs[i].color;
        path.setAttribute('d', this._computePath(arcs[i]));
        svg.appendChild(path);
      }
{'fraction_non_alphanumeric': 0.15491247596883537, 'fraction_numerical': 0.054234544166750984, 'mean_word_length': 2.01157830591103, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1730298', 'n_tokens_mistral': 3741, 'n_tokens_neox': 3416, 'n_words': 825}