GaugeView for Batman using JustGage

gauge_view.js.coffee

class Albedo.GaugeView extends Batman.View
  @option 'title', 'max', 'min', 'value', 'better'

  @::on 'appear', ->
    @makeGauge()

  makeGauge: ->
    node = $(@get('node'))
    node.attr 'id', @get('title')

    # Add a new gauge using the prescribed options
    new JustGage(
      id: node.attr 'id'
      value: Math.round(@get('value') * 10) / 10
      min: @get('min') || 0
      max: @get('max') || 100
      title: @get('title').replace '_', ' '
      gaugeWidthScale: 0.1
      startAnimationType: 'bounce'
      startAnimationTime: 1500
      levelColors: @getColors()
    )

  getColors: ->
    colors = ["#D60000", "#F57A00", "#FADA28", "#52D138"]
    if @get('better') is 'min'
      colors = colors.reverse()
    return colors

gauges.html.haml

.row
  .span12
    .row.gauges
      .span4{"data-foreach-gauge" => "gauges"}
        %div{"data-view" => "GaugeView", "data-view-value" => "gauge.average", "data-view-title" => "gauge.title", "data-view-max" => "5", "data-view-min" => "1"}
        .center
          %a.btn.disabled
            %span{"data-bind" => "gauge.count"}
            responses