Guest User

Untitled

a guest
Sep 21st, 2018
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.78 KB | None | 0 0
  1. class Chart
  2. @initAll: ->
  3. Bar.init()
  4. Spark.init()
  5.  
  6. @init: ->
  7. for element in $(@selector)
  8. do (element) =>
  9. setImmediate =>
  10. unless $(element).data('initialized')
  11. chart = new @(element)
  12. chart.render()
  13.  
  14. constructor: (element) ->
  15. @target = $(element)
  16. @values = @target.data 'values'
  17. @labels = @target.data 'labels'
  18. @width = @target.width()
  19. @height = @target.height()
  20. @ySpace = @height / 3
  21. @paper = Raphael element, @width, @height
  22. @target.data('initialized', true)
  23.  
  24. stepWidth: ->
  25. @width / @values.length
  26.  
  27. scaledY: ->
  28. @scale(-value for value in @values, @height - @ySpace)
  29.  
  30. scale: (values, limit) ->
  31. min = Math.min values...
  32. max = Math.max values...
  33.  
  34. for value in values
  35. if min == max
  36. limit / 2
  37. else
  38. limit * (value - min) / (max - min)
  39.  
  40.  
  41. class Bar extends Chart
  42. @selector: '.bar.chart'
  43.  
  44. render: ->
  45. @ySpace = @height / 20
  46. step = @stepWidth()
  47. bar_padding = step / 10
  48. bar_width = step - 2 * bar_padding
  49.  
  50. for y, index in @scaledY()
  51. do (y, index) =>
  52. setImmediate =>
  53. x = index * step + bar_padding
  54.  
  55. rect = @paper.rect x, y, bar_width, @height - y
  56. $(rect.node).data @labels[index]
  57. $(rect.node).attr class: 'bar'
  58.  
  59. label = @paper.rect x, 0, bar_width, y
  60. $(label.node).data @labels[index]
  61. $(label.node).attr class: 'space'
  62.  
  63. $(label.node).hover ->
  64. $(rect.node).attr class: 'active bar'
  65. , ->
  66. $(rect.node).attr class: 'bar'
  67.  
  68.  
  69. class Spark extends Chart
  70. @selector: '.spark.chart'
  71.  
  72. render: ->
  73. step = @stepWidth()
  74. circlePadding = step * 2 / 5
  75. circleRadius = step - 2 * circlePadding
  76.  
  77. for y, index in @scaledY()
  78. x = index * step + circlePadding
  79. y += 2*circleRadius
  80.  
  81. if index == 0
  82. firstY = y
  83. line = 'M'
  84. else
  85. line += 'L'
  86.  
  87. line += "#{x} #{y}"
  88.  
  89. circle = @paper.circle x, y, circleRadius
  90. $(circle.node).data @labels[index]
  91. do (circle) ->
  92. increaseRadius = -> circle.animate r: circleRadius*2, 100
  93. decreaseRadius = -> circle.animate r: circleRadius, 100
  94. circle.hover increaseRadius, decreaseRadius
  95.  
  96. setImmediate =>
  97. path = @paper.path line
  98. path.attr 'stroke-width': circleRadius / 3
  99. $(path.node).attr class: 'line'
  100. path.toBack()
  101.  
  102. lastY = y
  103. minY = @height
  104. minX = 0
  105. maxX = (@values.length - 1) * step + 2*circlePadding
  106.  
  107. closePath = "L#{maxX} #{lastY} L#{maxX} #{minY}
  108. L#{minX} #{minY} L#{minX} #{firstY}z"
  109. polygon = @paper.path line + closePath
  110. $(polygon.node).attr class: 'polygon'
  111. polygon.toBack()
  112.  
  113.  
  114. $(document).on('updated.charts, ready', Chart.initAll)
Add Comment
Please, Sign In to add comment