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