function _initialize() {
        var _this = this;

        var radius = Math.min(this._width, this._height * 2) / 2;
        var arcStartRad = 0;
        var arcEndRad = 0;
        this._chart = this._el.append('g').attr('transform', "translate(".concat(this._width / 2, ", ").concat(this._height - 10, ")"));
        this._arcs = this._chart.selectAll('.arc') // two arcs one for the KPI percentage green values, and the rest for values outside the KPI red values
        .data((0, _d3Array.range)(1, 3)).enter().append('path').attr('class', function (sectionIndex) {
          return "arc chart-color".concat(sectionIndex);
        }).attr('d', function (sectionIndex) {
          if (sectionIndex == 1) {
            // Green value arc
            arcStartRad = degToRad(270); // start at 270°

            arcEndRad = degToRad(270 + percToDeg(_this._kpi / 100 / 2) - percToDeg(0.4 / 100 / 2));
          } else {
            // Red value arc
            arcStartRad = degToRad(270 + percToDeg(_this._kpi / 100 / 2) + percToDeg(0.4 / 100 / 2));
            arcEndRad = degToRad(450);
          }

          var arc = (0, _d3Shape.arc)().outerRadius(radius - _this._chartInset).innerRadius(radius - _this._chartInset - _this._barWidth).startAngle(arcStartRad).endAngle(arcEndRad);
          return arc(_this);
        });

        if (this._sectionsColors) {
          this._arcs.style('fill', function (sectionIndex) {
            return _this._sectionsColors[sectionIndex - 1];
          });
        }

        this._needle = new Needle({
          animationDelay: this._animationDelay,
          animationDuration: this._animationDuration,
          color: this._needleColor,
          easeType: this._easeType,
          el: this._chart,
          fontsize: this._fontsize,
          kpi: this._kpi,
          length: radius - this._chartInset - this._barWidth - 5,
          percent: this._percent,
          radius: this._needleRadius
        });

        this._update();
      }
/**
      * Initializes the KPI gauge.
      *
      * @private
      */
Initializes the KPI gauge.
@private
Initializes the KPI gauge . @private
function _initialize() {
        var _this = this;
        var radius = Math.min(this._width, this._height * 2) / 2;
        var arcStartRad = 0;
        var arcEndRad = 0;
        this._chart = this._el.append('g').attr('transform', "translate(".concat(this._width / 2, ", ").concat(this._height - 10, ")"));
        this._arcs = this._chart.selectAll('.arc') 
        .data((0, _d3Array.range)(1, 3)).enter().append('path').attr('class', function (sectionIndex) {
          return "arc chart-color".concat(sectionIndex);
        }).attr('d', function (sectionIndex) {
          if (sectionIndex == 1) {
            arcStartRad = degToRad(270); 
            arcEndRad = degToRad(270 + percToDeg(_this._kpi / 100 / 2) - percToDeg(0.4 / 100 / 2));
          } else {
            arcStartRad = degToRad(270 + percToDeg(_this._kpi / 100 / 2) + percToDeg(0.4 / 100 / 2));
            arcEndRad = degToRad(450);
          }
          var arc = (0, _d3Shape.arc)().outerRadius(radius - _this._chartInset).innerRadius(radius - _this._chartInset - _this._barWidth).startAngle(arcStartRad).endAngle(arcEndRad);
          return arc(_this);
        });
        if (this._sectionsColors) {
          this._arcs.style('fill', function (sectionIndex) {
            return _this._sectionsColors[sectionIndex - 1];
          });
        }
        this._needle = new Needle({
          animationDelay: this._animationDelay,
          animationDuration: this._animationDuration,
          color: this._needleColor,
          easeType: this._easeType,
          el: this._chart,
          fontsize: this._fontsize,
          kpi: this._kpi,
          length: radius - this._chartInset - this._barWidth - 5,
          percent: this._percent,
          radius: this._needleRadius
        });
        this._update();
      }
function _initialize ( ) { var _this = this ; var radius = Math . min ( this . _width , this . _height * 2 ) / 2 ; var arcStartRad = 0 ; var arcEndRad = 0 ; this . _chart = this . _el . append ( 'g' ) . attr ( 'transform' , "translate(" . concat ( this . _width / 2 , ", " ) . concat ( this . _height - 10 , ")" ) ) ; this . _arcs = this . _chart . selectAll ( '.arc' ) . data ( ( 0 , _d3Array . range ) ( 1 , 3 ) ) . enter ( ) . append ( 'path' ) . attr ( 'class' , function ( sectionIndex ) { return "arc chart-color" . concat ( sectionIndex ) ; } ) . attr ( 'd' , function ( sectionIndex ) { if ( sectionIndex == 1 ) { arcStartRad = degToRad ( 270 ) ; arcEndRad = degToRad ( 270 + percToDeg ( _this . _kpi / 100 / 2 ) - percToDeg ( 0.4 / 100 / 2 ) ) ; } else { arcStartRad = degToRad ( 270 + percToDeg ( _this . _kpi / 100 / 2 ) + percToDeg ( 0.4 / 100 / 2 ) ) ; arcEndRad = degToRad ( 450 ) ; } var arc = ( 0 , _d3Shape . arc ) ( ) . outerRadius ( radius - _this . _chartInset ) . innerRadius ( radius - _this . _chartInset - _this . _barWidth ) . startAngle ( arcStartRad ) . endAngle ( arcEndRad ) ; return arc ( _this ) ; } ) ; if ( this . _sectionsColors ) { this . _arcs . style ( 'fill' , function ( sectionIndex ) { return _this . _sectionsColors [ sectionIndex - 1 ] ; } ) ; } this . _needle = new Needle ( { animationDelay : this . _animationDelay , animationDuration : this . _animationDuration , color : this . _needleColor , easeType : this . _easeType , el : this . _chart , fontsize : this . _fontsize , kpi : this . _kpi , length : radius - this . _chartInset - this . _barWidth - 5 , percent : this . _percent , radius : this . _needleRadius } ) ; this . _update ( ) ; }
Initializes the KPI gauge.
Initializes the KPI gauge .
// two arcs one for the KPI percentage green values, and the rest for values outside the KPI red values // Green value arc // start at 270° // Red value arc