1/**! 2 * easy-pie-chart 3 * Lightweight plugin to render simple, animated and retina optimized pie charts 4 * 5 * @license 6 * @author Robert Fleischmann <[email protected]> (http://robert-fleischmann.de) 7 * @version 2.1.7 8 **/ 9 10(function (root, factory) { 11 if (typeof define === 'function' && define.amd) { 12 // AMD. Register as an anonymous module unless amdModuleId is set 13 define(["jquery"], function (a0) { 14 return (factory(a0)); 15 }); 16 } else if (typeof exports === 'object') { 17 // Node. Does not work with strict CommonJS, but 18 // only CommonJS-like environments that support module.exports, 19 // like Node. 20 module.exports = factory(require("jquery")); 21 } else { 22 factory(jQuery); 23 } 24}(this, function ($) { 25 26/** 27 * Renderer to render the chart on a canvas object 28 * @param {DOMElement} el DOM element to host the canvas (root of the plugin) 29 * @param {object} options options object of the plugin 30 */ 31var CanvasRenderer = function(el, options) { 32 var cachedBackground; 33 var canvas = document.createElement('canvas'); 34 35 el.appendChild(canvas); 36 37 if (typeof(G_vmlCanvasManager) === 'object') { 38 G_vmlCanvasManager.initElement(canvas); 39 } 40 41 var ctx = canvas.getContext('2d'); 42 43 canvas.width = canvas.height = options.size; 44 45 // canvas on retina devices 46 var scaleBy = 1; 47 if (window.devicePixelRatio > 1) { 48 scaleBy = window.devicePixelRatio; 49 canvas.style.width = canvas.style.height = [options.size, 'px'].join(''); 50 canvas.width = canvas.height = options.size * scaleBy; 51 ctx.scale(scaleBy, scaleBy); 52 } 53 54 // move 0,0 coordinates to the center 55 ctx.translate(options.size / 2, options.size / 2); 56 57 // rotate canvas -90deg 58 ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); 59 60 var radius = (options.size - options.lineWidth) / 2; 61 if (options.scaleColor && options.scaleLength) { 62 radius -= options.scaleLength + 2; // 2 is the distance between scale and bar 63 } 64 65 // IE polyfill for Date 66 Date.now = Date.now || function() { 67 return +(new Date()); 68 }; 69 70 /** 71 * Draw a circle around the center of the canvas 72 * @param {strong} color Valid CSS color string 73 * @param {number} lineWidth Width of the line in px 74 * @param {number} percent Percentage to draw (float between -1 and 1) 75 */ 76 var drawCircle = function(color, lineWidth, percent) { 77 percent = Math.min(Math.max(-1, percent || 0), 1); 78 var isNegative = percent <= 0 ? true : false; 79 80 ctx.beginPath(); 81 ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative); 82 83 ctx.strokeStyle = color; 84 ctx.lineWidth = lineWidth; 85 86 ctx.stroke(); 87 }; 88 89 /** 90 * Draw the scale of the chart 91 */ 92 var drawScale = function() { 93 var offset; 94 var length; 95 96 ctx.lineWidth = 1; 97 ctx.fillStyle = options.scaleColor; 98 99 ctx.save(); 100 for (var i = 24; i > 0; --i) { 101 if (i % 6 === 0) { 102 length = options.scaleLength; 103 offset = 0; 104 } else { 105 length = options.scaleLength * 0.6; 106 offset = options.scaleLength - length; 107 } 108 ctx.fillRect(-options.size/2 + offset, 0, length, 1); 109 ctx.rotate(Math.PI / 12); 110 } 111 ctx.restore(); 112 }; 113 114 /** 115 * Request animation frame wrapper with polyfill 116 * @return {function} Request animation frame method or timeout fallback 117 */ 118 var reqAnimationFrame = (function() { 119 return window.requestAnimationFrame || 120 window.webkitRequestAnimationFrame || 121 window.mozRequestAnimationFrame || 122 function(callback) { 123 window.setTimeout(callback, 1000 / 60); 124 }; 125 }()); 126 127 /** 128 * Draw the background of the plugin including the scale and the track 129 */ 130 var drawBackground = function() { 131 if(options.scaleColor) drawScale(); 132 if(options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1); 133 }; 134 135 /** 136 * Canvas accessor 137 */ 138 this.getCanvas = function() { 139 return canvas; 140 }; 141 142 /** 143 * Canvas 2D context 'ctx' accessor 144 */ 145 this.getCtx = function() { 146 return ctx; 147 }; 148 149 /** 150 * Clear the complete canvas 151 */ 152 this.clear = function() { 153 ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size); 154 }; 155 156 /** 157 * Draw the complete chart 158 * @param {number} percent Percent shown by the chart between -100 and 100 159 */ 160 this.draw = function(percent) { 161 // do we need to render a background 162 if (!!options.scaleColor || !!options.trackColor) { 163 // getImageData and putImageData are supported 164 if (ctx.getImageData && ctx.putImageData) {
165 if (!cachedBackground) { 166 drawBackground(); 167 cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy); 168 } else { 169 ctx.putImageData(cachedBackground, 0, 0); 170 } 171 } else { 172 this.clear(); 173 drawBackground(); 174 } 175 } else { 176 this.clear(); 177 } 178 179 ctx.lineCap = options.lineCap; 180 181 // if barcolor is a function execute it and pass the percent as a value 182 var color; 183 if (typeof(options.barColor) === 'function') { 184 color = options.barColor(percent); 185 } else { 186 color = options.barColor; 187 } 188 189 // draw bar 190 drawCircle(color, options.lineWidth, percent / 100); 191 }.bind(this); 192 193 /** 194 * Animate from some percent to some other percentage 195 * @param {number} from Starting percentage 196 * @param {number} to Final percentage 197 */ 198 this.animate = function(from, to) { 199 var startTime = Date.now(); 200 options.onStart(from, to); 201 var animation = function() { 202 var process = Math.min(Date.now() - startTime, options.animate.duration); 203 var currentValue = options.easing(this, process, from, to - from, options.animate.duration); 204 this.draw(currentValue); 205 options.onStep(from, to, currentValue); 206 if (process >= options.animate.duration) { 207 options.onStop(from, to); 208 } else { 209 reqAnimationFrame(animation); 210 } 211 }.bind(this); 212 213 reqAnimationFrame(animation); 214 }.bind(this); 215}; 216 217var EasyPieChart = function(el, opts) { 218 var defaultOptions = { 219 barColor: '#ef1e25', 220 trackColor: '#f9f9f9', 221 scaleColor: '#dfe0e0', 222 scaleLength: 5, 223 lineCap: 'round', 224 lineWidth: 3, 225 trackWidth: undefined, 226 size: 110, 227 rotate: 0, 228 animate: { 229 duration: 1000, 230 enabled: true 231 }, 232 easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/ 233 t = t / (d/2); 234 if (t < 1) { 235 return c / 2 * t * t + b; 236 } 237 return -c/2 * ((--t)*(t-2) - 1) + b; 238 }, 239 onStart: function(from, to) { 240 return; 241 }, 242 onStep: function(from, to, currentValue) { 243 return; 244 }, 245 onStop: function(from, to) { 246 return; 247 } 248 }; 249 250 // detect present renderer 251 if (typeof(CanvasRenderer) !== 'undefined') { 252 defaultOptions.renderer = CanvasRenderer; 253 } else if (typeof(SVGRenderer) !== 'undefined') { 254 defaultOptions.renderer = SVGRenderer; 255 } else { 256 throw new Error('Please load either the SVG- or the CanvasRenderer'); 257 } 258 259 var options = {}; 260 var currentValue = 0; 261 262 /** 263 * Initialize the plugin by creating the options object and initialize rendering 264 */ 265 var init = function() { 266 this.el = el; 267 this.options = options; 268 269 // merge user options into default options 270 for (var i in defaultOptions) { 271 if (defaultOptions.hasOwnProperty(i)) { 272 options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i]; 273 if (typeof(options[i]) === 'function') { 274 options[i] = options[i].bind(this); 275 } 276 } 277 } 278 279 // check for jQuery easing 280 if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) { 281 options.easing = jQuery.easing[options.easing]; 282 } else { 283 options.easing = defaultOptions.easing; 284 } 285 286 // process earlier animate option to avoid bc breaks 287 if (typeof(options.animate) === 'number') { 288 options.animate = { 289 duration: options.animate, 290 enabled: true 291 }; 292 } 293 294 if (typeof(options.animate) === 'boolean' && !options.animate) { 295 options.animate = { 296 duration: 1000, 297 enabled: options.animate 298 }; 299 } 300 301 // create renderer 302 this.renderer = new options.renderer(el, options); 303 304 // initial draw 305 this.renderer.draw(currentValue); 306 307 // initial update 308 if (el.dataset && el.dataset.percent) { 309 this.update(parseFloat(el.dataset.percent)); 310 } else if (el.getAttribute && el.getAttribute('data-percent')) { 311 this.update(parseFloat(el.getAttribute('data-percent'))); 312 } 313 }.bind(this); 314 315 /** 316 * Update the value of the chart 317 * @param {number} newValue Number between 0 and 100 318 * @return {object} Instance of the plugin for method chaining 319 */ 320 this.update = function(newValue) { 321 newValue = parseFloat(newValue); 322 if (options.animate.enabled) { 323 this.renderer.animate(currentValue, newValue); 324 } else { 325 this.renderer.draw(newValue); 326 } 327 currentValue = newValue; 328 return this; 329 }.bind(this); 330 331 /** 332 * Disable animation 333 * @return {object} Instance of the plugin for method chaining 334 */ 335 this.disableAnimation = function() { 336 options.animate.enabled = false;
337 return this; 338 }; 339 340 /** 341 * Enable animation 342 * @return {object} Instance of the plugin for method chaining 343 */ 344 this.enableAnimation = function() { 345 options.animate.enabled = true; 346 return this; 347 }; 348 349 init(); 350}; 351 352$.fn.easyPieChart = function(options) { 353 return this.each(function() { 354 var instanceOptions; 355 356 if (!$.data(this, 'easyPieChart')) { 357 instanceOptions = $.extend({}, options, $(this).data()); 358 $.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions)); 359 } 360 }); 361}; 362 363 364}));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.