text: class CirclegraphController {
      constructor() {
          'ngInject';
  
          //
      }
  }
  
  export function CirclegraphDirective() {
      return {
          controller: CirclegraphController,
          scope: {
              options: '=',
              item: '='
          },
          link: function(scope, element, attrs, controllers) {
              //
              var defaults = function() {
                  return {
                      width: 80,
                      height: 80,
                      color: '#00ccaa',
                      size: 178,
                      field: 'rank'
                  }
              };
              scope.options = angular.extend(defaults(), scope.options);
              var τ = 2 * Math.PI;
              //Creating the Scale
              var rotate = d3.scale.linear()
                  .domain([1, scope.options.size])
                  .range([1, 0])
                  .clamp(true);
  
              //Creating Elements
              var svg = d3.select(element[0]).append('svg')
                  .attr('width', scope.options.width)
                  .attr('height', scope.options.height)
                  .append('g');
  
              var container = svg.append('g')
                  .attr('transform', 'translate(' + scope.options.width / 2 + ',' + scope.options.height / 2 + ')')
                  .style('font-size', function() {
                      if (scope.options.fontSize) {
                          return scope.options.fontSize + 'px';
                      }
                      return "1em"
                  })
  
              var circleBack = container.append('circle')
                  .attr('r', scope.options.width / 2 - 2)
                  .attr('stroke-width', 2)
                  .attr('stroke', scope.options.color)
                  .style('opacity', '0.6')
                  .attr('fill', 'none');
  
              var arc = d3.svg.arc()
                  .startAngle(0)
                  .innerRadius(function(d) {
                      return scope.options.width / 2 - 4;
                  })
                  .outerRadius(function(d) {
                      return scope.options.width / 2;
                  });
  
              var circleGraph = container.append('path')
                  .datum({
                      endAngle: 2 * Math.PI * 0
                  })
                  .style("fill", scope.options.color)
                  .attr('d', arc);
              var text = container.selectAll('text')
                  .data([0])
                  .enter()
                  .append('text')
                  .text(function(d) {
                      if (!scope.options.hideNumbering)
                          return 'N°' + d;
                      return d + '/' + scope.options.size;
                  })
                  .style("fill", scope.options.color)
                  .style('font-weight', 'bold')
                  .style('font-size', function() {
                      //if(!scope.options.hideNumbering)
                      return '1em';
                      //return '1.5em';
                  })
                  .attr('text-anchor', 'middle')
                  .attr('y', function(d) {
                      //if(!scope.options.hideNumbering)
                      return '0.35em';
                      //return '0.37em'
                  });
  
              //Transition if selection has changed
              function animateIt(radius) {
                  circleBack.transition()
                      .duration(750)
                      .attr('stroke', scope.options.color);
  
  
                  circleGraph.transition()
                      .duration(750)
                      .style("fill", scope.options.color)
                      .call(arcTween, rotate(radius) * 2 * Math.PI);
  
                  text.transition().duration(750).tween('text', function(d) {
                      if (!scope.options.hideNumbering) {
                          var data = this.textContent.split('N°');
                          var i = d3.interpolate(parseInt(data[1]), radius);
                          return function(t) {
                              this.textContent = 'N°' + (Math.round(i(t) * 1) / 1);
                          };
                      } else {
                          var data = this.textContent.split('/');
                          var i = d3.interpolate(parseInt(data[0]), radius);
                          return function(t) {
                              this.textContent = (Math.round(i(t) * 1) / 1) + "/" + scope.options.size;
                          };
                      }
                  }).style("fill", scope.options.color)
              }
  
              //Tween animation for the Arc
              function arcTween(transition, newAngle) {
                  transition.attrTween("d", function(d) {
  
                      var interpolate = d3.interpolate(d.endAngle, newAngle);
                      return function(t) {
                          d.endAngle = interpolate(t);
                          return arc(d);
                      };
                  });
              }
  
              //Watching if selection has changed from another UI element
              scope.$watch('item', function(n, o) {
                  //if(n === o) return;
  
                  if (!n) {
                      n[scope.options.field] = scope.options.size;
                  }
  
                  animateIt(n[scope.options.field]);
  
              });
              scope.$watch('options', function(n, o) {
                  if (n === o || !n) return;
                  animateIt(scope.item[scope.options.field]);
  
              }, true);
          }
      }
  }
  