jquery.peity.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. // Peity jQuery plugin version 3.2.1
  2. // (c) 2016 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. })
  157. } else {
  158. $node = svgElement('circle', {
  159. cx: cx,
  160. cy: cy,
  161. r: radius
  162. })
  163. }
  164. } else {
  165. var cumulativePlusValue = cumulative + value
  166. var d = ['M'].concat(
  167. scale(cumulative, radius),
  168. 'A', radius, radius, 0, portion > 0.5 ? 1 : 0, 1,
  169. scale(cumulativePlusValue, radius),
  170. 'L'
  171. )
  172. if (innerRadius) {
  173. d = d.concat(
  174. scale(cumulativePlusValue, innerRadius),
  175. 'A', innerRadius, innerRadius, 0, portion > 0.5 ? 1 : 0, 0,
  176. scale(cumulative, innerRadius)
  177. )
  178. } else {
  179. d.push(cx, cy)
  180. }
  181. cumulative += value
  182. $node = svgElement('path', {
  183. d: d.join(" ")
  184. })
  185. }
  186. $node.attr('fill', fill.call(this, value, i, values))
  187. $svg.append($node)
  188. }
  189. }
  190. )
  191. peity.register(
  192. 'donut',
  193. $.extend(true, {}, peity.defaults.pie),
  194. function(opts) {
  195. peity.graphers.pie.call(this, opts)
  196. }
  197. )
  198. peity.register(
  199. "line",
  200. {
  201. delimiter: ",",
  202. fill: "#c6d9fd",
  203. height: 16,
  204. min: 0,
  205. stroke: "#4d89f9",
  206. strokeWidth: 1,
  207. width: 32
  208. },
  209. function(opts) {
  210. var values = this.values()
  211. if (values.length == 1) values.push(values[0])
  212. var max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max))
  213. , min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min))
  214. var $svg = this.prepare(opts.width, opts.height)
  215. , strokeWidth = opts.strokeWidth
  216. , width = $svg.width()
  217. , height = $svg.height() - strokeWidth
  218. , diff = max - min
  219. var xScale = this.x = function(input) {
  220. return input * (width / (values.length - 1))
  221. }
  222. var yScale = this.y = function(input) {
  223. var y = height
  224. if (diff) {
  225. y -= ((input - min) / diff) * height
  226. }
  227. return y + strokeWidth / 2
  228. }
  229. var zero = yScale(Math.max(min, 0))
  230. , coords = [0, zero]
  231. for (var i = 0; i < values.length; i++) {
  232. coords.push(
  233. xScale(i),
  234. yScale(values[i])
  235. )
  236. }
  237. coords.push(width, zero)
  238. if (opts.fill) {
  239. $svg.append(
  240. svgElement('polygon', {
  241. fill: opts.fill,
  242. points: coords.join(' ')
  243. })
  244. )
  245. }
  246. if (strokeWidth) {
  247. $svg.append(
  248. svgElement('polyline', {
  249. fill: 'none',
  250. points: coords.slice(2, coords.length - 2).join(' '),
  251. stroke: opts.stroke,
  252. 'stroke-width': strokeWidth,
  253. 'stroke-linecap': 'square'
  254. })
  255. )
  256. }
  257. }
  258. );
  259. peity.register(
  260. 'bar',
  261. {
  262. delimiter: ",",
  263. fill: ["#4D89F9"],
  264. height: 16,
  265. min: 0,
  266. padding: 0.1,
  267. width: 32
  268. },
  269. function(opts) {
  270. var values = this.values()
  271. , max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max))
  272. , min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min))
  273. var $svg = this.prepare(opts.width, opts.height)
  274. , width = $svg.width()
  275. , height = $svg.height()
  276. , diff = max - min
  277. , padding = opts.padding
  278. , fill = this.fill()
  279. var xScale = this.x = function(input) {
  280. return input * width / values.length
  281. }
  282. var yScale = this.y = function(input) {
  283. return height - (
  284. diff
  285. ? ((input - min) / diff) * height
  286. : 1
  287. )
  288. }
  289. for (var i = 0; i < values.length; i++) {
  290. var x = xScale(i + padding)
  291. , w = xScale(i + 1 - padding) - x
  292. , value = values[i]
  293. , valueY = yScale(value)
  294. , y1 = valueY
  295. , y2 = valueY
  296. , h
  297. if (!diff) {
  298. h = 1
  299. } else if (value < 0) {
  300. y1 = yScale(Math.min(max, 0))
  301. } else {
  302. y2 = yScale(Math.max(min, 0))
  303. }
  304. h = y2 - y1
  305. if (h == 0) {
  306. h = 1
  307. if (max > 0 && diff) y1--
  308. }
  309. $svg.append(
  310. svgElement('rect', {
  311. fill: fill.call(this, value, i, values),
  312. x: x,
  313. y: y1,
  314. width: w,
  315. height: h
  316. })
  317. )
  318. }
  319. }
  320. );
  321. })(jQuery, document, Math);