github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/js/charts/easypiechart/jquery.easy-pie-chart.js (about)

     1  // Generated by CoffeeScript 1.6.3
     2  /*
     3  Easy pie chart is a jquery plugin to display simple animated pie charts for only one value
     4  
     5  Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
     6  and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
     7  
     8  Built on top of the jQuery library (http://jquery.com)
     9  
    10  @source: http://github.com/rendro/easy-pie-chart/
    11  @autor: Robert Fleischmann
    12  @version: 1.2.5
    13  
    14  Inspired by: http://dribbble.com/shots/631074-Simple-Pie-Charts-II?list=popular&offset=210
    15  Thanks to Philip Thrasher for the jquery plugin boilerplate for coffee script
    16  */
    17  
    18  (function($) {
    19    $.easyPieChart = function(el, options) {
    20      var addScaleLine, animateLine, drawLine, easeInOutQuad, rAF, renderBackground, renderScale, renderTrack,
    21        _this = this;
    22      this.el = el;
    23      this.$el = $(el);
    24      this.$el.data("easyPieChart", this);
    25      this.init = function() {
    26        var percent, scaleBy;
    27        _this.options = $.extend({}, $.easyPieChart.defaultOptions, options);
    28        percent = parseInt(_this.$el.data('percent'), 10);
    29        _this.percentage = 0;
    30        _this.canvas = $("<canvas width='" + _this.options.size + "' height='" + _this.options.size + "'></canvas>").get(0);
    31        _this.$el.append(_this.canvas);
    32        if (typeof G_vmlCanvasManager !== "undefined" && G_vmlCanvasManager !== null) {
    33          G_vmlCanvasManager.initElement(_this.canvas);
    34        }
    35        _this.ctx = _this.canvas.getContext('2d');
    36        if (window.devicePixelRatio > 1) {
    37          scaleBy = window.devicePixelRatio;
    38          $(_this.canvas).css({
    39            width: _this.options.size,
    40            height: _this.options.size
    41          });
    42          _this.canvas.width *= scaleBy;
    43          _this.canvas.height *= scaleBy;
    44          _this.ctx.scale(scaleBy, scaleBy);
    45        }
    46        _this.ctx.translate(_this.options.size / 2, _this.options.size / 2);
    47        _this.ctx.rotate(_this.options.rotate * Math.PI / 180);
    48        _this.$el.addClass('easyPieChart');
    49        _this.$el.css({
    50          width: _this.options.size,
    51          height: _this.options.size,
    52          lineHeight: "" + _this.options.size + "px"
    53        });
    54        _this.update(percent);
    55        return _this;
    56      };
    57      this.update = function(percent) {
    58        percent = parseFloat(percent) || 0;
    59        if (_this.options.animate === false) {
    60          drawLine(percent);
    61        } else {
    62          if (_this.options.delay) {
    63            animateLine(_this.percentage, 0);
    64            setTimeout(function() {
    65              return animateLine(_this.percentage, percent);
    66            }, _this.options.delay);
    67          } else {
    68            animateLine(_this.percentage, percent);
    69          }
    70        }
    71        return _this;
    72      };
    73      renderScale = function() {
    74        var i, _i, _results;
    75        _this.ctx.fillStyle = _this.options.scaleColor;
    76        _this.ctx.lineWidth = 1;
    77        _results = [];
    78        for (i = _i = 0; _i <= 24; i = ++_i) {
    79          _results.push(addScaleLine(i));
    80        }
    81        return _results;
    82      };
    83      addScaleLine = function(i) {
    84        var offset;
    85        offset = i % 6 === 0 ? 0 : _this.options.size * 0.017;
    86        _this.ctx.save();
    87        _this.ctx.rotate(i * Math.PI / 12);
    88        _this.ctx.fillRect(_this.options.size / 2 - offset, 0, -_this.options.size * 0.05 + offset, 1);
    89        _this.ctx.restore();
    90      };
    91      renderTrack = function() {
    92        var offset;
    93        offset = _this.options.size / 2 - _this.options.lineWidth / 2;
    94        if (_this.options.scaleColor !== false) {
    95          offset -= _this.options.size * 0.08;
    96        }
    97        _this.ctx.beginPath();
    98        _this.ctx.arc(0, 0, offset, 0, Math.PI * 2, true);
    99        _this.ctx.closePath();
   100        _this.ctx.strokeStyle = _this.options.trackColor;
   101        
   102        if (_this.options.color) {
   103          _this.ctx.fillStyle = _this.options.color;
   104          _this.ctx.fill();
   105        }
   106  
   107        _this.ctx.lineWidth = _this.options.lineWidth;
   108        _this.ctx.stroke();
   109      };
   110      renderBackground = function() {
   111        if (_this.options.scaleColor !== false) {
   112          renderScale();
   113        }
   114        if (_this.options.trackColor !== false) {
   115          renderTrack();
   116        }
   117      };
   118      drawLine = function(percent) {
   119        var offset;
   120        renderBackground();
   121        _this.ctx.strokeStyle = $.isFunction(_this.options.barColor) ? _this.options.barColor(percent) : _this.options.barColor;
   122        _this.ctx.lineCap = _this.options.lineCap;
   123        _this.ctx.lineWidth = _this.options.lineWidth;
   124        offset = _this.options.size / 2 - _this.options.lineWidth / 2;
   125        if (_this.options.scaleColor !== false) {
   126          offset -= _this.options.size * 0.08;
   127        }
   128        _this.ctx.save();
   129        _this.ctx.rotate(-Math.PI / 2);
   130        _this.ctx.beginPath();
   131        _this.ctx.arc(0, 0, offset, 0, Math.PI * 2 * percent / 100, false);
   132        _this.ctx.stroke();
   133        _this.ctx.restore();
   134      };
   135      rAF = (function() {
   136        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
   137          return window.setTimeout(callback, 1000 / 60);
   138        };
   139      })();
   140      animateLine = function(from, to) {
   141        var anim, startTime;
   142        _this.options.onStart.call(_this);
   143        _this.percentage = to;
   144        Date.now || (Date.now = function() {
   145          return +(new Date);
   146        });
   147        startTime = Date.now();
   148        anim = function() {
   149          var currentValue, process;
   150          process = Math.min(Date.now() - startTime, _this.options.animate);
   151          _this.ctx.clearRect(-_this.options.size / 2, -_this.options.size / 2, _this.options.size, _this.options.size);
   152          renderBackground.call(_this);
   153          currentValue = [easeInOutQuad(process, from, to - from, _this.options.animate)];
   154          _this.options.onStep.call(_this, currentValue);
   155          drawLine.call(_this, currentValue);
   156          if (process >= _this.options.animate) {
   157            return _this.options.onStop.call(_this, currentValue, to);
   158          } else {
   159            return rAF(anim);
   160          }
   161        };
   162        rAF(anim);
   163      };
   164      easeInOutQuad = function(t, b, c, d) {
   165        var easeIn, easing;
   166        easeIn = function(t) {
   167          return Math.pow(t, 2);
   168        };
   169        easing = function(t) {
   170          if (t < 1) {
   171            return easeIn(t);
   172          } else {
   173            return 2 - easeIn((t / 2) * -2 + 2);
   174          }
   175        };
   176        t /= d / 2;
   177        return c / 2 * easing(t) + b;
   178      };
   179      return this.init();
   180    };
   181    $.easyPieChart.defaultOptions = {
   182      barColor: '#ef1e25',
   183      trackColor: '#f2f2f2',
   184      scaleColor: '#dfe0e0',
   185      lineCap: 'round',
   186      rotate: 0,
   187      size: 110,
   188      lineWidth: 3,
   189      animate: false,
   190      delay: false,
   191      onStart: $.noop,
   192      onStop: $.noop,
   193      onStep: $.noop
   194    };
   195    $.fn.easyPieChart = function(options) {
   196      return $.each(this, function(i, el) {
   197        var $el, instanceOptions;
   198        $el = $(el);
   199        if (!$el.data('easyPieChart')) {
   200          instanceOptions = $.extend({}, options, $el.data());
   201          return $el.data('easyPieChart', new $.easyPieChart(el, instanceOptions));
   202        }
   203      });
   204    };
   205    return void 0;
   206  })(jQuery);