Dashing number widget that changes color based on the direction of the arrow

readme.md

Dashing number widget that changes color based on the direction of the arrow

This is a modification of the original number.coffee script in dashing, replace the old one with this.

Set the colors in the dashboard html using data-coldown and data-colup

number.coffee

class Dashing.Number extends Dashing.Widget
  @accessor 'current', Dashing.AnimatedValue

  @accessor 'difference', ->
    if @get('last')
      last = parseFloat(@get('last'))
      current = parseFloat(@get('current'))
      if last != 0
        diff = Math.abs(Math.round((current - last) / last * 100))
        "#{diff}%"
    else
      ""

  @accessor 'arrow', ->
    if @get('last')
      if parseFloat(@get('current')) > parseFloat(@get('last'))
        if @get('colup') then $(@get('node')).css 'background-color', @get('colup')
        'icon-arrow-up'
      else
        if @get('coldown') then $(@get('node')).css 'background-color', @get('coldown')
        'icon-arrow-down'

  onData: (data) ->
    if data.status
      # clear existing "status-*" classes
      $(@get('node')).attr 'class', (i,c) ->
        c.replace /\bstatus-\S+/g, ''
      # add new class
      $(@get('node')).addClass "status-#{data.status}"