peity.bundle.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  1. // Peity jQuery plugin version 3.3.0
  2. // (c) 2018 Ben Pickles
  3. //
  4. // http://benpickles.github.io/peity
  5. //
  6. // Released under MIT license.
  7. (function($, document, Math, undefined) {
  8. var peity = $.fn.peity = function(type, options) {
  9. if (svgSupported) {
  10. this.each(function() {
  11. var $this = $(this)
  12. var chart = $this.data('_peity')
  13. if (chart) {
  14. if (type) chart.type = type
  15. $.extend(chart.opts, options)
  16. } else {
  17. chart = new Peity(
  18. $this,
  19. type,
  20. $.extend({},
  21. peity.defaults[type],
  22. $this.data('peity'),
  23. options)
  24. )
  25. $this
  26. .change(function() { chart.draw() })
  27. .data('_peity', chart)
  28. }
  29. chart.draw()
  30. });
  31. }
  32. return this;
  33. };
  34. var Peity = function($el, type, opts) {
  35. this.$el = $el
  36. this.type = type
  37. this.opts = opts
  38. }
  39. var PeityPrototype = Peity.prototype
  40. var svgElement = PeityPrototype.svgElement = function(tag, attrs) {
  41. return $(
  42. document.createElementNS('http://www.w3.org/2000/svg', tag)
  43. ).attr(attrs)
  44. }
  45. // https://gist.github.com/madrobby/3201472
  46. var svgSupported = 'createElementNS' in document && svgElement('svg', {})[0].createSVGRect
  47. PeityPrototype.draw = function() {
  48. var opts = this.opts
  49. peity.graphers[this.type].call(this, opts)
  50. if (opts.after) opts.after.call(this, opts)
  51. }
  52. PeityPrototype.fill = function() {
  53. var fill = this.opts.fill
  54. return $.isFunction(fill)
  55. ? fill
  56. : function(_, i) { return fill[i % fill.length] }
  57. }
  58. PeityPrototype.prepare = function(width, height) {
  59. if (!this.$svg) {
  60. this.$el.hide().after(
  61. this.$svg = svgElement('svg', {
  62. "class": "peity"
  63. })
  64. )
  65. }
  66. return this.$svg
  67. .empty()
  68. .data('_peity', this)
  69. .attr({
  70. height: height,
  71. width: width
  72. })
  73. }
  74. PeityPrototype.values = function() {
  75. return $.map(this.$el.text().split(this.opts.delimiter), function(value) {
  76. return parseFloat(value)
  77. })
  78. }
  79. peity.defaults = {}
  80. peity.graphers = {}
  81. peity.register = function(type, defaults, grapher) {
  82. this.defaults[type] = defaults
  83. this.graphers[type] = grapher
  84. }
  85. peity.register(
  86. 'pie',
  87. {
  88. fill: ['#ff9900', '#fff4dd', '#ffc66e'],
  89. radius: 8
  90. },
  91. function(opts) {
  92. if (!opts.delimiter) {
  93. var delimiter = this.$el.text().match(/[^0-9\.]/)
  94. opts.delimiter = delimiter ? delimiter[0] : ","
  95. }
  96. var values = $.map(this.values(), function(n) {
  97. return n > 0 ? n : 0
  98. })
  99. if (opts.delimiter == "/") {
  100. var v1 = values[0]
  101. var v2 = values[1]
  102. values = [v1, Math.max(0, v2 - v1)]
  103. }
  104. var i = 0
  105. var length = values.length
  106. var sum = 0
  107. for (; i < length; i++) {
  108. sum += values[i]
  109. }
  110. if (!sum) {
  111. length = 2
  112. sum = 1
  113. values = [0, 1]
  114. }
  115. var diameter = opts.radius * 2
  116. var $svg = this.prepare(
  117. opts.width || diameter,
  118. opts.height || diameter
  119. )
  120. var width = $svg.width()
  121. , height = $svg.height()
  122. , cx = width / 2
  123. , cy = height / 2
  124. var radius = Math.min(cx, cy)
  125. , innerRadius = opts.innerRadius
  126. if (this.type == 'donut' && !innerRadius) {
  127. innerRadius = radius * 0.5
  128. }
  129. var pi = Math.PI
  130. var fill = this.fill()
  131. var scale = this.scale = function(value, radius) {
  132. var radians = value / sum * pi * 2 - pi / 2
  133. return [
  134. radius * Math.cos(radians) + cx,
  135. radius * Math.sin(radians) + cy
  136. ]
  137. }
  138. var cumulative = 0
  139. for (i = 0; i < length; i++) {
  140. var value = values[i]
  141. , portion = value / sum
  142. , $node
  143. if (portion == 0) continue
  144. if (portion == 1) {
  145. if (innerRadius) {
  146. var x2 = cx - 0.01
  147. , y1 = cy - radius
  148. , y2 = cy - innerRadius
  149. $node = svgElement('path', {
  150. d: [
  151. 'M', cx, y1,
  152. 'A', radius, radius, 0, 1, 1, x2, y1,
  153. 'L', x2, y2,
  154. 'A', innerRadius, innerRadius, 0, 1, 0, cx, y2
  155. ].join(' '),
  156. 'data-value': value,
  157. })
  158. } else {
  159. $node = svgElement('circle', {
  160. cx: cx,
  161. cy: cy,
  162. 'data-value': value,
  163. r: radius
  164. })
  165. }
  166. } else {
  167. var cumulativePlusValue = cumulative + value
  168. var d = ['M'].concat(
  169. scale(cumulative, radius),
  170. 'A', radius, radius, 0, portion > 0.5 ? 1 : 0, 1,
  171. scale(cumulativePlusValue, radius),
  172. 'L'
  173. )
  174. if (innerRadius) {
  175. d = d.concat(
  176. scale(cumulativePlusValue, innerRadius),
  177. 'A', innerRadius, innerRadius, 0, portion > 0.5 ? 1 : 0, 0,
  178. scale(cumulative, innerRadius)
  179. )
  180. } else {
  181. d.push(cx, cy)
  182. }
  183. cumulative += value
  184. $node = svgElement('path', {
  185. d: d.join(" "),
  186. 'data-value': value,
  187. })
  188. }
  189. $node.attr('fill', fill.call(this, value, i, values))
  190. $svg.append($node)
  191. }
  192. }
  193. )
  194. peity.register(
  195. 'donut',
  196. $.extend(true, {}, peity.defaults.pie),
  197. function(opts) {
  198. peity.graphers.pie.call(this, opts)
  199. }
  200. )
  201. peity.register(
  202. "line",
  203. {
  204. delimiter: ",",
  205. fill: "#c6d9fd",
  206. height: 16,
  207. min: 0,
  208. stroke: "#4d89f9",
  209. strokeWidth: 1,
  210. width: 32
  211. },
  212. function(opts) {
  213. var values = this.values()
  214. if (values.length == 1) values.push(values[0])
  215. var max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max))
  216. , min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min))
  217. var $svg = this.prepare(opts.width, opts.height)
  218. , strokeWidth = opts.strokeWidth
  219. , width = $svg.width()
  220. , height = $svg.height() - strokeWidth
  221. , diff = max - min
  222. var xScale = this.x = function(input) {
  223. return input * (width / (values.length - 1))
  224. }
  225. var yScale = this.y = function(input) {
  226. var y = height
  227. if (diff) {
  228. y -= ((input - min) / diff) * height
  229. }
  230. return y + strokeWidth / 2
  231. }
  232. var zero = yScale(Math.max(min, 0))
  233. , coords = [0, zero]
  234. for (var i = 0; i < values.length; i++) {
  235. coords.push(
  236. xScale(i),
  237. yScale(values[i])
  238. )
  239. }
  240. coords.push(width, zero)
  241. if (opts.fill) {
  242. $svg.append(
  243. svgElement('polygon', {
  244. fill: opts.fill,
  245. points: coords.join(' ')
  246. })
  247. )
  248. }
  249. if (strokeWidth) {
  250. $svg.append(
  251. svgElement('polyline', {
  252. fill: 'none',
  253. points: coords.slice(2, coords.length - 2).join(' '),
  254. stroke: opts.stroke,
  255. 'stroke-width': strokeWidth,
  256. 'stroke-linecap': 'square'
  257. })
  258. )
  259. }
  260. }
  261. );
  262. peity.register(
  263. 'bar',
  264. {
  265. delimiter: ",",
  266. fill: ["#4D89F9"],
  267. height: 16,
  268. min: 0,
  269. padding: 0.1,
  270. width: 32
  271. },
  272. function(opts) {
  273. var values = this.values()
  274. , max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max))
  275. , min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min))
  276. var $svg = this.prepare(opts.width, opts.height)
  277. , width = $svg.width()
  278. , height = $svg.height()
  279. , diff = max - min
  280. , padding = opts.padding
  281. , fill = this.fill()
  282. var xScale = this.x = function(input) {
  283. return input * width / values.length
  284. }
  285. var yScale = this.y = function(input) {
  286. return height - (
  287. diff
  288. ? ((input - min) / diff) * height
  289. : 1
  290. )
  291. }
  292. for (var i = 0; i < values.length; i++) {
  293. var x = xScale(i + padding)
  294. , w = xScale(i + 1 - padding) - x
  295. , value = values[i]
  296. , valueY = yScale(value)
  297. , y1 = valueY
  298. , y2 = valueY
  299. , h
  300. if (!diff) {
  301. h = 1
  302. } else if (value < 0) {
  303. y1 = yScale(Math.min(max, 0))
  304. } else {
  305. y2 = yScale(Math.max(min, 0))
  306. }
  307. h = y2 - y1
  308. if (h == 0) {
  309. h = 1
  310. if (max > 0 && diff) y1--
  311. }
  312. $svg.append(
  313. svgElement('rect', {
  314. 'data-value': value,
  315. fill: fill.call(this, value, i, values),
  316. x: x,
  317. y: y1,
  318. width: w,
  319. height: h
  320. })
  321. )
  322. }
  323. }
  324. );
  325. })(jQuery, document, Math);
  326. document.addEventListener('DOMContentLoaded', function () {
  327. /* Starts peity
  328. DOC: searches for the class and init. peity based on class
  329. */
  330. $(".peity-pie").peity("pie");
  331. $('.peity-donut').peity('donut');
  332. $(".peity-line").peity("line");
  333. $(".peity-bar").peity("bar");
  334. });