https://vertaafood.fi/dist/js/easypiechart.js

1/**!
2 * easyPieChart
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.6
8 **/
9
10(function(root, factory) {
11    if(typeof exports === 'object') {
12        module.exports = factory();
13    }
14    else if(typeof define === 'function' && define.amd) {
15        define([], factory);
16    }
17    else {
18        root['EasyPieChart'] = factory();
19    }
20}(this, function() {
21
22/**
23 * Renderer to render the chart on a canvas object
24 * @param {DOMElement} el      DOM element to host the canvas (root of the plugin)
25 * @param {object}     options options object of the plugin
26 */
27var CanvasRenderer = function(el, options) {
28  var cachedBackground;
29  var canvas = document.createElement('canvas');
30
31  el.appendChild(canvas);
32
33  if (typeof(G_vmlCanvasManager) !== 'undefined') {
34    G_vmlCanvasManager.initElement(canvas);
35  }
36
37  var ctx = canvas.getContext('2d');
38
39  canvas.width = canvas.height = options.size;
40
41  // canvas on retina devices
42  var scaleBy = 1;
43  if (window.devicePixelRatio > 1) {
44    scaleBy = window.devicePixelRatio;
45    canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
46    canvas.width = canvas.height = options.size * scaleBy;
47    ctx.scale(scaleBy, scaleBy);
48  }
49
50  // move 0,0 coordinates to the center
51  ctx.translate(options.size / 2, options.size / 2);
52
53  // rotate canvas -90deg
54  ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
55
56  var radius = (options.size - options.lineWidth) / 2;
57  if (options.scaleColor && options.scaleLength) {
58    radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
59  }
60
61  // IE polyfill for Date
62  Date.now = Date.now || function() {
63    return +(new Date());
64  };
65
66  /**
67   * Draw a circle around the center of the canvas
68   * @param {strong} color     Valid CSS color string
69   * @param {number} lineWidth Width of the line in px
70   * @param {number} percent   Percentage to draw (float between -1 and 1)
71   */
72  var drawCircle = function(color, lineWidth, percent) {
73    percent = Math.min(Math.max(-1, percent || 0), 1);
74    var isNegative = percent <= 0 ? true : false;
75
76    ctx.beginPath();
77    ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
78
79    ctx.strokeStyle = color;
80    ctx.lineWidth = lineWidth;
81
82    ctx.stroke();
83  };
84
85  /**
86   * Draw the scale of the chart
87   */
88  var drawScale = function() {
89    var offset;
90    var length;
91
92    ctx.lineWidth = 1;
93    ctx.fillStyle = options.scaleColor;
94
95    ctx.save();
96    for (var i = 24; i > 0; --i) {
97      if (i % 6 === 0) {
98        length = options.scaleLength;
99        offset = 0;
100      } else {
101        length = options.scaleLength * 0.6;
102        offset = options.scaleLength - length;
103      }
104      ctx.fillRect(-options.size/2 + offset, 0, length, 1);
105      ctx.rotate(Math.PI / 12);
106    }
107    ctx.restore();
108  };
109
110  /**
111   * Request animation frame wrapper with polyfill
112   * @return {function} Request animation frame method or timeout fallback
113   */
114  var reqAnimationFrame = (function() {
115    return  window.requestAnimationFrame ||
116        window.webkitRequestAnimationFrame ||
117        window.mozRequestAnimationFrame ||
118        function(callback) {
119          window.setTimeout(callback, 1000 / 60);
120        };
121  }());
122
123  /**
124   * Draw the background of the plugin including the scale and the track
125   */
126  var drawBackground = function() {
127    if(options.scaleColor) drawScale();
128    if(options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
129  };
130
131  /**
132    * Canvas accessor
133   */
134  this.getCanvas = function() {
135    return canvas;
136  };
137
138  /**
139    * Canvas 2D context 'ctx' accessor
140   */
141  this.getCtx = function() {
142    return ctx;
143  };
144
145  /**
146   * Clear the complete canvas
147   */
148  this.clear = function() {
149    ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
150  };
151
152  /**
153   * Draw the complete chart
154   * @param {number} percent Percent shown by the chart between -100 and 100
155   */
156  this.draw = function(percent) {
157    // do we need to render a background
158    if (!!options.scaleColor || !!options.trackColor) {
159      // getImageData and putImageData are supported
160      if (ctx.getImageData && ctx.putImageData) {

161        if (!cachedBackground) {
162          drawBackground();
163          cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
164        } else {
165          ctx.putImageData(cachedBackground, 0, 0);
166        }
167      } else {
168        this.clear();
169        drawBackground();
170      }
171    } else {
172      this.clear();
173    }
174
175    ctx.lineCap = options.lineCap;
176
177    // if barcolor is a function execute it and pass the percent as a value
178    var color;
179    if (typeof(options.barColor) === 'function') {
180      color = options.barColor(percent);
181    } else {
182      color = options.barColor;
183    }
184
185    // draw bar
186    drawCircle(color, options.lineWidth, percent / 100);
187  }.bind(this);
188
189  /**
190   * Animate from some percent to some other percentage
191   * @param {number} from Starting percentage
192   * @param {number} to   Final percentage
193   */
194  this.animate = function(from, to) {
195    var startTime = Date.now();
196    options.onStart(from, to);
197    var animation = function() {
198      var process = Math.min(Date.now() - startTime, options.animate.duration);
199      var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
200      this.draw(currentValue);
201      options.onStep(from, to, currentValue);
202      if (process >= options.animate.duration) {
203        options.onStop(from, to);
204      } else {
205        reqAnimationFrame(animation);
206      }
207    }.bind(this);
208
209    reqAnimationFrame(animation);
210  }.bind(this);
211};
212
213var EasyPieChart = function(el, opts) {
214  var defaultOptions = {
215    barColor: '#ef1e25',
216    trackColor: '#f9f9f9',
217    scaleColor: '#dfe0e0',
218    scaleLength: 5,
219    lineCap: 'round',
220    lineWidth: 3,
221    trackWidth: undefined,
222    size: 50,
223    rotate: 0,
224    animate: {
225      duration: 1000,
226      enabled: true
227    },
228    easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
229      t = t / (d/2);
230      if (t < 1) {
231        return c / 2 * t * t + b;
232      }
233      return -c/2 * ((--t)*(t-2) - 1) + b;
234    },
235    onStart: function(from, to) {
236      return;
237    },
238    onStep: function(from, to, currentValue) {
239      return;
240    },
241    onStop: function(from, to) {
242      return;
243    }
244  };
245
246  // detect present renderer
247  if (typeof(CanvasRenderer) !== 'undefined') {
248    defaultOptions.renderer = CanvasRenderer;
249  } else if (typeof(SVGRenderer) !== 'undefined') {
250    defaultOptions.renderer = SVGRenderer;
251  } else {
252    throw new Error('Please load either the SVG- or the CanvasRenderer');
253  }
254
255  var options = {};
256  var currentValue = 0;
257
258  /**
259   * Initialize the plugin by creating the options object and initialize rendering
260   */
261  var init = function() {
262    this.el = el;
263    this.options = options;
264
265    // merge user options into default options
266    for (var i in defaultOptions) {
267      if (defaultOptions.hasOwnProperty(i)) {
268        options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
269        if (typeof(options[i]) === 'function') {
270          options[i] = options[i].bind(this);
271        }
272      }
273    }
274
275    // check for jQuery easing
276    if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
277      options.easing = jQuery.easing[options.easing];
278    } else {
279      options.easing = defaultOptions.easing;
280    }
281
282    // process earlier animate option to avoid bc breaks
283    if (typeof(options.animate) === 'number') {
284      options.animate = {
285        duration: options.animate,
286        enabled: true
287      };
288    }
289
290    if (typeof(options.animate) === 'boolean' && !options.animate) {
291      options.animate = {
292        duration: 1000,
293        enabled: options.animate
294      };
295    }
296
297    // create renderer
298    this.renderer = new options.renderer(el, options);
299
300    // initial draw
301    this.renderer.draw(currentValue);
302
303    // initial update
304    if (el.dataset && el.dataset.percent) {
305      this.update(parseFloat(el.dataset.percent));
306    } else if (el.getAttribute && el.getAttribute('data-percent')) {
307      this.update(parseFloat(el.getAttribute('data-percent')));
308    }
309  }.bind(this);
310
311  /**
312   * Update the value of the chart
313   * @param  {number} newValue Number between 0 and 100
314   * @return {object}          Instance of the plugin for method chaining
315   */
316  this.update = function(newValue) {
317    newValue = parseFloat(newValue);
318    if (options.animate.enabled) {
319      this.renderer.animate(currentValue, newValue);
320    } else {
321      this.renderer.draw(newValue);
322    }
323    currentValue = newValue;
324    return this;
325  }.bind(this);
326
327  /**
328   * Disable animation
329   * @return {object} Instance of the plugin for method chaining
330   */
331  this.disableAnimation = function() {
332    options.animate.enabled = false;
333    return this;
334  };
335
336  /**
337   * Enable animation
338   * @return {object} Instance of the plugin for method chaining
339   */
340  this.enableAnimation = function() {
341    options.animate.enabled = true;
342    return this;
343  };
344
345  init();
346};
347
348
349return EasyPieChart;
350
351}));
352!function(){var a=function(a,b){var c=document.createElement("canvas");"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(c);var d=c.getContext("2d");if(c.width=c.height=b.size,a.appendChild(c),window.devicePixelRatio>1){var e=window.devicePixelRatio;c.style.width=c.style.height=[b.size,"px"].join(""),c.width=c.height=b.size*e,d.scale(e,e)}d.translate(b.size/2,b.size/2),d.rotate((-0.5+b.rotate/180)*Math.PI);var f=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(f-=b.scaleLength+2);var g=function(a,b,c){c=Math.min(Math.max(0,c||1),1),d.beginPath(),d.arc(0,0,f,0,2*Math.PI*c,!1),d.strokeStyle=a,d.lineWidth=b,d.stroke()},h=function(){var a,c,e=24;d.lineWidth=1,d.fillStyle=b.scaleColor,d.save();for(var e=24;e>=0;--e)0===e%6?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),d.fillRect(-b.size/2+a,0,c,1),d.rotate(Math.PI/12);

352d.restore()};Date.now=Date.now||function(){return+new Date};var i=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}();this.clear=function(){d.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){this.clear(),b.scaleColor&&h(),b.trackColor&&g(b.trackColor,b.lineWidth),d.lineCap=b.lineCap;var c;c="function"==typeof b.barColor?b.barColor(a):b.barColor,a>0&&g(c,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate),g=b.easing(this,f,a,c-a,b.animate);this.draw(g),b.onStep(a,c,g),f>=b.animate?b.onStop(a,c):i(e)}.bind(this);i(e)}.bind(this)},b=function(b,c){var d,e={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,size:110,rotate:0,animate:1e3,renderer:a,easing:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}},f={},g=0,h=function(){this.el=b,this.options=f;for(var a in e)e.hasOwnProperty(a)&&(f[a]=c&&"undefined"!=typeof c[a]?c[a]:e[a],"function"==typeof f[a]&&(f[a]=f[a].bind(this)));f.easing="string"==typeof f.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[f.easing])?jQuery.easing[f.easing]:e.easing,d=new f.renderer(b,f),d.draw(g),b.dataset&&b.dataset.percent&&this.update(parseInt(b.dataset.percent,10))}.bind(this);this.update=function(a){return a=parseInt(a,10),f.animate?d.animate(g,a):d.draw(a),g=a,this}.bind(this),h()};window.EasyPieChart=b}();
353
354var options = {
355  scaleColor: false,
356  trackColor: 'rgba(0, 0, 0, 0.2)',
357  barColor: '#a6cf5b',
358  lineWidth: 6,
359  lineCap: 'butt',
360};
361
362window.addEventListener('DOMContentLoaded', function() {
363  var charts = [];
364  [].forEach.call(document.querySelectorAll('.easypie'),  function(el) {
365    charts.push(new EasyPieChart(el, options));
366  });
367});