gistfile1.coffee

class Chart
  @initAll: ->
    Bar.init()
    Spark.init()

  @init: ->
    for element in $(@selector)
      do (element) =>
        setImmediate =>
          unless $(element).data('initialized')
            chart = new @(element)
            chart.render()

  constructor: (element) ->
    @target = $(element)
    @values = @target.data 'values'
    @labels = @target.data 'labels'
    @width  = @target.width()
    @height = @target.height()
    @ySpace = @height / 3
    @paper  = Raphael element, @width, @height
    @target.data('initialized', true)

  stepWidth: ->
    @width / @values.length

  scaledY: ->
    @scale(-value for value in @values, @height - @ySpace)

  scale: (values, limit) ->
    min = Math.min values...
    max = Math.max values...

    for value in values
      if min == max
        limit / 2
      else
        limit * (value - min) / (max - min)


class Bar extends Chart
  @selector: '.bar.chart'

  render: ->
    @ySpace = @height / 20
    step = @stepWidth()
    bar_padding = step / 10
    bar_width   = step - 2 * bar_padding

    for y, index in @scaledY()
      do (y, index) =>
        setImmediate =>
          x = index * step + bar_padding

          rect = @paper.rect x, y, bar_width, @height - y
          $(rect.node).data @labels[index]
          $(rect.node).attr class: 'bar'

          label = @paper.rect x, 0, bar_width, y
          $(label.node).data @labels[index]
          $(label.node).attr class: 'space'

          $(label.node).hover ->
            $(rect.node).attr class: 'active bar'
          , ->
            $(rect.node).attr class: 'bar'


class Spark extends Chart
  @selector: '.spark.chart'

  render: ->
    step = @stepWidth()
    circlePadding = step * 2 / 5
    circleRadius = step - 2 * circlePadding

    for y, index in @scaledY()
      x  = index * step + circlePadding
      y += 2*circleRadius

      if index == 0
        firstY = y
        line = 'M'
      else
        line += 'L'

      line += "#{x} #{y}"

      circle = @paper.circle x, y, circleRadius
      $(circle.node).data @labels[index]
      do (circle) ->
        increaseRadius = -> circle.animate r: circleRadius*2, 100
        decreaseRadius = -> circle.animate r: circleRadius, 100
        circle.hover increaseRadius, decreaseRadius

    setImmediate =>
      path = @paper.path line
      path.attr 'stroke-width': circleRadius / 3
      $(path.node).attr class: 'line'
      path.toBack()

      lastY = y
      minY  = @height
      minX  = 0
      maxX  = (@values.length - 1) * step + 2*circlePadding

      closePath = "L#{maxX} #{lastY} L#{maxX} #{minY}
                   L#{minX} #{minY} L#{minX} #{firstY}z"
      polygon = @paper.path line + closePath
      $(polygon.node).attr class: 'polygon'
      polygon.toBack()


$(document).on('updated.charts, ready', Chart.initAll)