easy_pie_chart 0.1.1

data/vendor/assets/javascripts/jquery.easy-pie-chart.js

@@ -0,0 +1,351 @@
+/**!
+ * easyPieChart
+ * Lightweight plugin to render simple, animated and retina optimized pie charts
+ *
+ * @license 
+ * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
+ * @version 2.1.6
+ **/
+
+(function(root, factory) {
+    if(typeof exports === 'object') {
+        module.exports = factory();
+    }
+    else if(typeof define === 'function' && define.amd) {
+        define([], factory);
+    }
+    else {
+        root['EasyPieChart'] = factory();
+    }
+}(this, function() {
+
+/**
+ * Renderer to render the chart on a canvas object
+ * @param {DOMElement} el      DOM element to host the canvas (root of the plugin)
+ * @param {object}     options options object of the plugin
+ */
+var CanvasRenderer = function(el, options) {
+  var cachedBackground;
+  var canvas = document.createElement('canvas');
+
+  el.appendChild(canvas);
+
+  if (typeof(G_vmlCanvasManager) !== 'undefined') {
+    G_vmlCanvasManager.initElement(canvas);
+  }
+
+  var ctx = canvas.getContext('2d');
+
+  canvas.width = canvas.height = options.size;
+
+  // canvas on retina devices
+  var scaleBy = 1;
+  if (window.devicePixelRatio > 1) {
+    scaleBy = window.devicePixelRatio;
+    canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
+    canvas.width = canvas.height = options.size * scaleBy;
+    ctx.scale(scaleBy, scaleBy);
+  }
+
+  // move 0,0 coordinates to the center
+  ctx.translate(options.size / 2, options.size / 2);
+
+  // rotate canvas -90deg
+  ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
+
+  var radius = (options.size - options.lineWidth) / 2;
+  if (options.scaleColor && options.scaleLength) {
+    radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
+  }
+
+  // IE polyfill for Date
+  Date.now = Date.now || function() {
+    return +(new Date());
+  };
+
+  /**
+   * Draw a circle around the center of the canvas
+   * @param {strong} color     Valid CSS color string
+   * @param {number} lineWidth Width of the line in px
+   * @param {number} percent   Percentage to draw (float between -1 and 1)
+   */
+  var drawCircle = function(color, lineWidth, percent) {
+    percent = Math.min(Math.max(-1, percent || 0), 1);
+    var isNegative = percent <= 0 ? true : false;
+
+    ctx.beginPath();
+    ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
+
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+
+    ctx.stroke();
+  };
+
+  /**
+   * Draw the scale of the chart
+   */
+  var drawScale = function() {
+    var offset;
+    var length;
+
+    ctx.lineWidth = 1;
+    ctx.fillStyle = options.scaleColor;
+
+    ctx.save();
+    for (var i = 24; i > 0; --i) {
+      if (i % 6 === 0) {
+        length = options.scaleLength;
+        offset = 0;
+      } else {
+        length = options.scaleLength * 0.6;
+        offset = options.scaleLength - length;
+      }
+      ctx.fillRect(-options.size/2 + offset, 0, length, 1);
+      ctx.rotate(Math.PI / 12);
+    }
+    ctx.restore();
+  };
+
+  /**
+   * Request animation frame wrapper with polyfill
+   * @return {function} Request animation frame method or timeout fallback
+   */
+  var reqAnimationFrame = (function() {
+    return  window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame ||
+        function(callback) {
+          window.setTimeout(callback, 1000 / 60);
+        };
+  }());
+
+  /**
+   * Draw the background of the plugin including the scale and the track
+   */
+  var drawBackground = function() {
+    if(options.scaleColor) drawScale();
+    if(options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
+  };
+
+  /**
+    * Canvas accessor
+   */
+  this.getCanvas = function() {
+    return canvas;
+  };
+
+  /**
+    * Canvas 2D context 'ctx' accessor
+   */
+  this.getCtx = function() {
+    return ctx;
+  };
+
+  /**
+   * Clear the complete canvas
+   */
+  this.clear = function() {
+    ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
+  };
+
+  /**
+   * Draw the complete chart
+   * @param {number} percent Percent shown by the chart between -100 and 100
+   */
+  this.draw = function(percent) {
+    // do we need to render a background
+    if (!!options.scaleColor || !!options.trackColor) {
+      // getImageData and putImageData are supported
+      if (ctx.getImageData && ctx.putImageData) {
+        if (!cachedBackground) {
+          drawBackground();
+          cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
+        } else {
+          ctx.putImageData(cachedBackground, 0, 0);
+        }
+      } else {
+        this.clear();
+        drawBackground();
+      }
+    } else {
+      this.clear();
+    }
+
+    ctx.lineCap = options.lineCap;
+
+    // if barcolor is a function execute it and pass the percent as a value
+    var color;
+    if (typeof(options.barColor) === 'function') {
+      color = options.barColor(percent);
+    } else {
+      color = options.barColor;
+    }
+
+    // draw bar
+    drawCircle(color, options.lineWidth, percent / 100);
+  }.bind(this);
+
+  /**
+   * Animate from some percent to some other percentage
+   * @param {number} from Starting percentage
+   * @param {number} to   Final percentage
+   */
+  this.animate = function(from, to) {
+    var startTime = Date.now();
+    options.onStart(from, to);
+    var animation = function() {
+      var process = Math.min(Date.now() - startTime, options.animate.duration);
+      var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
+      this.draw(currentValue);
+      options.onStep(from, to, currentValue);
+      if (process >= options.animate.duration) {
+        options.onStop(from, to);
+      } else {
+        reqAnimationFrame(animation);
+      }
+    }.bind(this);
+
+    reqAnimationFrame(animation);
+  }.bind(this);
+};
+
+var EasyPieChart = function(el, opts) {
+  var defaultOptions = {
+    barColor: '#ef1e25',
+    trackColor: '#f9f9f9',
+    scaleColor: '#dfe0e0',
+    scaleLength: 5,
+    lineCap: 'round',
+    lineWidth: 3,
+    trackWidth: undefined,
+    size: 110,
+    rotate: 0,
+    animate: {
+      duration: 1000,
+      enabled: true
+    },
+    easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
+      t = t / (d/2);
+      if (t < 1) {
+        return c / 2 * t * t + b;
+      }
+      return -c/2 * ((--t)*(t-2) - 1) + b;
+    },
+    onStart: function(from, to) {
+      return;
+    },
+    onStep: function(from, to, currentValue) {
+      return;
+    },
+    onStop: function(from, to) {
+      return;
+    }
+  };
+
+  // detect present renderer
+  if (typeof(CanvasRenderer) !== 'undefined') {
+    defaultOptions.renderer = CanvasRenderer;
+  } else if (typeof(SVGRenderer) !== 'undefined') {
+    defaultOptions.renderer = SVGRenderer;
+  } else {
+    throw new Error('Please load either the SVG- or the CanvasRenderer');
+  }
+
+  var options = {};
+  var currentValue = 0;
+
+  /**
+   * Initialize the plugin by creating the options object and initialize rendering
+   */
+  var init = function() {
+    this.el = el;
+    this.options = options;
+
+    // merge user options into default options
+    for (var i in defaultOptions) {
+      if (defaultOptions.hasOwnProperty(i)) {
+        options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
+        if (typeof(options[i]) === 'function') {
+          options[i] = options[i].bind(this);
+        }
+      }
+    }
+
+    // check for jQuery easing
+    if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
+      options.easing = jQuery.easing[options.easing];
+    } else {
+      options.easing = defaultOptions.easing;
+    }
+
+    // process earlier animate option to avoid bc breaks
+    if (typeof(options.animate) === 'number') {
+      options.animate = {
+        duration: options.animate,
+        enabled: true
+      };
+    }
+
+    if (typeof(options.animate) === 'boolean' && !options.animate) {
+      options.animate = {
+        duration: 1000,
+        enabled: options.animate
+      };
+    }
+
+    // create renderer
+    this.renderer = new options.renderer(el, options);
+
+    // initial draw
+    this.renderer.draw(currentValue);
+
+    // initial update
+    if (el.dataset && el.dataset.percent) {
+      this.update(parseFloat(el.dataset.percent));
+    } else if (el.getAttribute && el.getAttribute('data-percent')) {
+      this.update(parseFloat(el.getAttribute('data-percent')));
+    }
+  }.bind(this);
+
+  /**
+   * Update the value of the chart
+   * @param  {number} newValue Number between 0 and 100
+   * @return {object}          Instance of the plugin for method chaining
+   */
+  this.update = function(newValue) {
+    newValue = parseFloat(newValue);
+    if (options.animate.enabled) {
+      this.renderer.animate(currentValue, newValue);
+    } else {
+      this.renderer.draw(newValue);
+    }
+    currentValue = newValue;
+    return this;
+  }.bind(this);
+
+  /**
+   * Disable animation
+   * @return {object} Instance of the plugin for method chaining
+   */
+  this.disableAnimation = function() {
+    options.animate.enabled = false;
+    return this;
+  };
+
+  /**
+   * Enable animation
+   * @return {object} Instance of the plugin for method chaining
+   */
+  this.enableAnimation = function() {
+    options.animate.enabled = true;
+    return this;
+  };
+
+  init();
+};
+
+
+return EasyPieChart;
+
+}));

data/vendor/assets/javascripts/jquery.easy-pie-chart.js.coffee

@@ -0,0 +1,316 @@
+###*
+!
+easyPieChart
+Lightweight plugin to render simple, animated and retina optimized pie charts
+
+@license
+@author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
+@version 2.1.6
+###
+((root, factory) ->
+  if typeof exports is "object"
+    module.exports = factory()
+  else if typeof define is "function" and define.amd
+    define [], factory
+  else
+    root["EasyPieChart"] = factory()
+  return
+) this, ->
+  
+  ###*
+  Renderer to render the chart on a canvas object
+  @param {DOMElement} el      DOM element to host the canvas (root of the plugin)
+  @param {object}     options options object of the plugin
+  ###
+  CanvasRenderer = (el, options) ->
+    cachedBackground = undefined
+    canvas = document.createElement("canvas")
+    el.appendChild canvas
+    G_vmlCanvasManager.initElement canvas  if typeof (G_vmlCanvasManager) isnt "undefined"
+    ctx = canvas.getContext("2d")
+    canvas.width = canvas.height = options.size
+    
+    # canvas on retina devices
+    scaleBy = 1
+    if window.devicePixelRatio > 1
+      scaleBy = window.devicePixelRatio
+      canvas.style.width = canvas.style.height = [
+        options.size
+        "px"
+      ].join("")
+      canvas.width = canvas.height = options.size * scaleBy
+      ctx.scale scaleBy, scaleBy
+    
+    # move 0,0 coordinates to the center
+    ctx.translate options.size / 2, options.size / 2
+    
+    # rotate canvas -90deg
+    ctx.rotate (-1 / 2 + options.rotate / 180) * Math.PI
+    radius = (options.size - options.lineWidth) / 2
+    radius -= options.scaleLength + 2  if options.scaleColor and options.scaleLength # 2 is the distance between scale and bar
+    
+    # IE polyfill for Date
+    Date.now = Date.now or ->
+      +(new Date())
+
+    
+    ###*
+    Draw a circle around the center of the canvas
+    @param {strong} color     Valid CSS color string
+    @param {number} lineWidth Width of the line in px
+    @param {number} percent   Percentage to draw (float between -1 and 1)
+    ###
+    drawCircle = (color, lineWidth, percent) ->
+      percent = Math.min(Math.max(-1, percent or 0), 1)
+      isNegative = (if percent <= 0 then true else false)
+      ctx.beginPath()
+      ctx.arc 0, 0, radius, 0, Math.PI * 2 * percent, isNegative
+      ctx.strokeStyle = color
+      ctx.lineWidth = lineWidth
+      ctx.stroke()
+      return
+
+    
+    ###*
+    Draw the scale of the chart
+    ###
+    drawScale = ->
+      offset = undefined
+      length = undefined
+      ctx.lineWidth = 1
+      ctx.fillStyle = options.scaleColor
+      ctx.save()
+      i = 24
+
+      while i > 0
+        if i % 6 is 0
+          length = options.scaleLength
+          offset = 0
+        else
+          length = options.scaleLength * 0.6
+          offset = options.scaleLength - length
+        ctx.fillRect -options.size / 2 + offset, 0, length, 1
+        ctx.rotate Math.PI / 12
+        --i
+      ctx.restore()
+      return
+
+    
+    ###*
+    Request animation frame wrapper with polyfill
+    @return {function} Request animation frame method or timeout fallback
+    ###
+    reqAnimationFrame = (->
+      window.requestAnimationFrame or window.webkitRequestAnimationFrame or window.mozRequestAnimationFrame or (callback) ->
+        window.setTimeout callback, 1000 / 60
+        return
+    ())
+    
+    ###*
+    Draw the background of the plugin including the scale and the track
+    ###
+    drawBackground = ->
+      drawScale()  if options.scaleColor
+      drawCircle options.trackColor, options.trackWidth or options.lineWidth, 1  if options.trackColor
+      return
+
+    
+    ###*
+    Canvas accessor
+    ###
+    @getCanvas = ->
+      canvas
+
+    
+    ###*
+    Canvas 2D context 'ctx' accessor
+    ###
+    @getCtx = ->
+      ctx
+
+    
+    ###*
+    Clear the complete canvas
+    ###
+    @clear = ->
+      ctx.clearRect options.size / -2, options.size / -2, options.size, options.size
+      return
+
+    
+    ###*
+    Draw the complete chart
+    @param {number} percent Percent shown by the chart between -100 and 100
+    ###
+    
+    # do we need to render a background
+    
+    # getImageData and putImageData are supported
+    
+    # if barcolor is a function execute it and pass the percent as a value
+    
+    # draw bar
+    @draw = ((percent) ->
+      if !!options.scaleColor or !!options.trackColor
+        if ctx.getImageData and ctx.putImageData
+          unless cachedBackground
+            drawBackground()
+            cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy)
+          else
+            ctx.putImageData cachedBackground, 0, 0
+        else
+          @clear()
+          drawBackground()
+      else
+        @clear()
+      ctx.lineCap = options.lineCap
+      color = undefined
+      if typeof (options.barColor) is "function"
+        color = options.barColor(percent)
+      else
+        color = options.barColor
+      drawCircle color, options.lineWidth, percent / 100
+      return
+    ).bind(this)
+    
+    ###*
+    Animate from some percent to some other percentage
+    @param {number} from Starting percentage
+    @param {number} to   Final percentage
+    ###
+    @animate = ((from, to) ->
+      startTime = Date.now()
+      options.onStart from, to
+      animation = (->
+        process = Math.min(Date.now() - startTime, options.animate.duration)
+        currentValue = options.easing(this, process, from, to - from, options.animate.duration)
+        @draw currentValue
+        options.onStep from, to, currentValue
+        if process >= options.animate.duration
+          options.onStop from, to
+        else
+          reqAnimationFrame animation
+        return
+      ).bind(this)
+      reqAnimationFrame animation
+      return
+    ).bind(this)
+    return
+
+  EasyPieChart = (el, opts) ->
+    defaultOptions =
+      barColor: "#ef1e25"
+      trackColor: "#f9f9f9"
+      scaleColor: "#dfe0e0"
+      scaleLength: 5
+      lineCap: "round"
+      lineWidth: 3
+      trackWidth: `undefined`
+      size: 110
+      rotate: 0
+      animate:
+        duration: 1000
+        enabled: true
+
+      easing: (x, t, b, c, d) -> # more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
+        t = t / (d / 2)
+        return c / 2 * t * t + b  if t < 1
+        -c / 2 * ((--t) * (t - 2) - 1) + b
+
+      onStart: (from, to) ->
+        return
+
+      onStep: (from, to, currentValue) ->
+        return
+
+      onStop: (from, to) ->
+        return
+
+    
+    # detect present renderer
+    if typeof (CanvasRenderer) isnt "undefined"
+      defaultOptions.renderer = CanvasRenderer
+    else if typeof (SVGRenderer) isnt "undefined"
+      defaultOptions.renderer = SVGRenderer
+    else
+      throw new Error("Please load either the SVG- or the CanvasRenderer")
+    options = {}
+    currentValue = 0
+    
+    ###*
+    Initialize the plugin by creating the options object and initialize rendering
+    ###
+    
+    # merge user options into default options
+    
+    # check for jQuery easing
+    
+    # process earlier animate option to avoid bc breaks
+    
+    # create renderer
+    
+    # initial draw
+    
+    # initial update
+    init = (->
+      @el = el
+      @options = options
+      for i of defaultOptions
+        if defaultOptions.hasOwnProperty(i)
+          options[i] = (if opts and typeof (opts[i]) isnt "undefined" then opts[i] else defaultOptions[i])
+          options[i] = options[i].bind(this)  if typeof (options[i]) is "function"
+      if typeof (options.easing) is "string" and typeof (jQuery) isnt "undefined" and jQuery.isFunction(jQuery.easing[options.easing])
+        options.easing = jQuery.easing[options.easing]
+      else
+        options.easing = defaultOptions.easing
+      if typeof (options.animate) is "number"
+        options.animate =
+          duration: options.animate
+          enabled: true
+      if typeof (options.animate) is "boolean" and not options.animate
+        options.animate =
+          duration: 1000
+          enabled: options.animate
+      @renderer = new options.renderer(el, options)
+      @renderer.draw currentValue
+      if el.dataset and el.dataset.percent
+        @update parseFloat(el.dataset.percent)
+      else @update parseFloat(el.getAttribute("data-percent"))  if el.getAttribute and el.getAttribute("data-percent")
+      return
+    ).bind(this)
+    
+    ###*
+    Update the value of the chart
+    @param  {number} newValue Number between 0 and 100
+    @return {object}          Instance of the plugin for method chaining
+    ###
+    @update = ((newValue) ->
+      newValue = parseFloat(newValue)
+      if options.animate.enabled
+        @renderer.animate currentValue, newValue
+      else
+        @renderer.draw newValue
+      currentValue = newValue
+      this
+    ).bind(this)
+    
+    ###*
+    Disable animation
+    @return {object} Instance of the plugin for method chaining
+    ###
+    @disableAnimation = ->
+      options.animate.enabled = false
+      this
+
+    
+    ###*
+    Enable animation
+    @return {object} Instance of the plugin for method chaining
+    ###
+    @enableAnimation = ->
+      options.animate.enabled = true
+      this
+
+    init()
+    return
+
+  EasyPieChart

data/vendor/assets/stylesheets/jquery.easy-pie-chart.css

@@ -0,0 +1,10 @@
+.easyPieChart {
+    position: relative;
+    text-align: center;
+}
+
+.easyPieChart canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+}