| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397 | // Peity jQuery plugin version 3.3.0// (c) 2018 Ben Pickles//// http://benpickles.github.io/peity//// Released under MIT license.(function($, document, Math, undefined) {  var peity = $.fn.peity = function(type, options) {    if (svgSupported) {      this.each(function() {        var $this = $(this)        var chart = $this.data('_peity')        if (chart) {          if (type) chart.type = type          $.extend(chart.opts, options)        } else {          chart = new Peity(            $this,            type,            $.extend({},              peity.defaults[type],              $this.data('peity'),              options)          )          $this            .change(function() { chart.draw() })            .data('_peity', chart)        }        chart.draw()      });    }    return this;  };  var Peity = function($el, type, opts) {    this.$el = $el    this.type = type    this.opts = opts  }  var PeityPrototype = Peity.prototype  var svgElement = PeityPrototype.svgElement = function(tag, attrs) {    return $(      document.createElementNS('http://www.w3.org/2000/svg', tag)    ).attr(attrs)  }  // https://gist.github.com/madrobby/3201472  var svgSupported = 'createElementNS' in document && svgElement('svg', {})[0].createSVGRect  PeityPrototype.draw = function() {    var opts = this.opts    peity.graphers[this.type].call(this, opts)    if (opts.after) opts.after.call(this, opts)  }  PeityPrototype.fill = function() {    var fill = this.opts.fill    return $.isFunction(fill)      ? fill      : function(_, i) { return fill[i % fill.length] }  }  PeityPrototype.prepare = function(width, height) {    if (!this.$svg) {      this.$el.hide().after(        this.$svg = svgElement('svg', {          "class": "peity"        })      )    }    return this.$svg      .empty()      .data('_peity', this)      .attr({        height: height,        width: width      })  }  PeityPrototype.values = function() {    return $.map(this.$el.text().split(this.opts.delimiter), function(value) {      return parseFloat(value)    })  }  peity.defaults = {}  peity.graphers = {}  peity.register = function(type, defaults, grapher) {    this.defaults[type] = defaults    this.graphers[type] = grapher  }  peity.register(    'pie',    {      fill: ['#ff9900', '#fff4dd', '#ffc66e'],      radius: 8    },    function(opts) {      if (!opts.delimiter) {        var delimiter = this.$el.text().match(/[^0-9\.]/)        opts.delimiter = delimiter ? delimiter[0] : ","      }      var values = $.map(this.values(), function(n) {        return n > 0 ? n : 0      })      if (opts.delimiter == "/") {        var v1 = values[0]        var v2 = values[1]        values = [v1, Math.max(0, v2 - v1)]      }      var i = 0      var length = values.length      var sum = 0      for (; i < length; i++) {        sum += values[i]      }      if (!sum) {        length = 2        sum = 1        values = [0, 1]      }      var diameter = opts.radius * 2      var $svg = this.prepare(        opts.width || diameter,        opts.height || diameter      )      var width = $svg.width()        , height = $svg.height()        , cx = width / 2        , cy = height / 2      var radius = Math.min(cx, cy)        , innerRadius = opts.innerRadius      if (this.type == 'donut' && !innerRadius) {        innerRadius = radius * 0.5      }      var pi = Math.PI      var fill = this.fill()      var scale = this.scale = function(value, radius) {        var radians = value / sum * pi * 2 - pi / 2        return [          radius * Math.cos(radians) + cx,          radius * Math.sin(radians) + cy        ]      }      var cumulative = 0      for (i = 0; i < length; i++) {        var value = values[i]          , portion = value / sum          , $node        if (portion == 0) continue        if (portion == 1) {          if (innerRadius) {            var x2 = cx - 0.01              , y1 = cy - radius              , y2 = cy - innerRadius            $node = svgElement('path', {              d: [                'M', cx, y1,                'A', radius, radius, 0, 1, 1, x2, y1,                'L', x2, y2,                'A', innerRadius, innerRadius, 0, 1, 0, cx, y2              ].join(' '),              'data-value': value,            })          } else {            $node = svgElement('circle', {              cx: cx,              cy: cy,              'data-value': value,              r: radius            })          }        } else {          var cumulativePlusValue = cumulative + value          var d = ['M'].concat(            scale(cumulative, radius),            'A', radius, radius, 0, portion > 0.5 ? 1 : 0, 1,            scale(cumulativePlusValue, radius),            'L'          )          if (innerRadius) {            d = d.concat(              scale(cumulativePlusValue, innerRadius),              'A', innerRadius, innerRadius, 0, portion > 0.5 ? 1 : 0, 0,              scale(cumulative, innerRadius)            )          } else {            d.push(cx, cy)          }          cumulative += value          $node = svgElement('path', {            d: d.join(" "),            'data-value': value,          })        }        $node.attr('fill', fill.call(this, value, i, values))        $svg.append($node)      }    }  )  peity.register(    'donut',    $.extend(true, {}, peity.defaults.pie),    function(opts) {      peity.graphers.pie.call(this, opts)    }  )  peity.register(    "line",    {      delimiter: ",",      fill: "#c6d9fd",      height: 16,      min: 0,      stroke: "#4d89f9",      strokeWidth: 1,      width: 32    },    function(opts) {      var values = this.values()      if (values.length == 1) values.push(values[0])      var max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max))        , min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min))      var $svg = this.prepare(opts.width, opts.height)        , strokeWidth = opts.strokeWidth        , width = $svg.width()        , height = $svg.height() - strokeWidth        , diff = max - min      var xScale = this.x = function(input) {        return input * (width / (values.length - 1))      }      var yScale = this.y = function(input) {        var y = height        if (diff) {          y -= ((input - min) / diff) * height        }        return y + strokeWidth / 2      }      var zero = yScale(Math.max(min, 0))        , coords = [0, zero]      for (var i = 0; i < values.length; i++) {        coords.push(          xScale(i),          yScale(values[i])        )      }      coords.push(width, zero)      if (opts.fill) {        $svg.append(          svgElement('polygon', {            fill: opts.fill,            points: coords.join(' ')          })        )      }      if (strokeWidth) {        $svg.append(          svgElement('polyline', {            fill: 'none',            points: coords.slice(2, coords.length - 2).join(' '),            stroke: opts.stroke,            'stroke-width': strokeWidth,            'stroke-linecap': 'square'          })        )      }    }  );  peity.register(    'bar',    {      delimiter: ",",      fill: ["#4D89F9"],      height: 16,      min: 0,      padding: 0.1,      width: 32    },    function(opts) {      var values = this.values()        , max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max))        , min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min))      var $svg = this.prepare(opts.width, opts.height)        , width = $svg.width()        , height = $svg.height()        , diff = max - min        , padding = opts.padding        , fill = this.fill()      var xScale = this.x = function(input) {        return input * width / values.length      }      var yScale = this.y = function(input) {        return height - (          diff            ? ((input - min) / diff) * height            : 1        )      }      for (var i = 0; i < values.length; i++) {        var x = xScale(i + padding)          , w = xScale(i + 1 - padding) - x          , value = values[i]          , valueY = yScale(value)          , y1 = valueY          , y2 = valueY          , h        if (!diff) {          h = 1        } else if (value < 0) {          y1 = yScale(Math.min(max, 0))        } else {          y2 = yScale(Math.max(min, 0))        }        h = y2 - y1        if (h == 0) {          h = 1          if (max > 0 && diff) y1--        }        $svg.append(          svgElement('rect', {            'data-value': value,            fill: fill.call(this, value, i, values),            x: x,            y: y1,            width: w,            height: h          })        )      }    }  );})(jQuery, document, Math);document.addEventListener('DOMContentLoaded', function () {	/* 	Starts peity		DOC: searches for the class and init. peity based on class	 */	$(".peity-pie").peity("pie");	$('.peity-donut').peity('donut');	$(".peity-line").peity("line");	$(".peity-bar").peity("bar");});
 |