Skip to content

Instantly share code, notes, and snippets.

@krichardsson
Last active Aug 29, 2015
Embed
What would you like to do?
Dashing number widget that changes color based on the direction of the arrow

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

  • 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}"
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment