Jump to content
Brandon

Color Transition

Recommended Posts

Has anyone setup their widgets to change color on certain conditions? One example would be offline servers. 0-20 would be Green, 20-50 would be yellow, 50-200 orange, 200+ red or similar.

 

If so I'd be interested in assistance for how to code that into the coffee script to set a variety of hard coded thresholds for number widgets.

 

Thanks,

Brandon

Share this post


Link to post
Share on other sites

I figured out a way to do what I was looking for. There's a widget that does something similar. https://gist.github.com/rowanu/6246149 I took the widget and added in the arrow and difference calculations along with the data-moreinfo section to essentially make it a number widget that changes color. Works perfect.

Share this post


Link to post
Share on other sites

If you still wanted to do this on the NUMBER widget.... then try something like this in your coffee file.

 

Here is a piece of my METER.coffee file...

 

constructor: ->
   super
   @observe 'value', (value) ->
     meter = $(@node).find(".meter")
     if value > 101
       color = "#00FF00"
     else if value > 80
       color = "#FFFF00"
     else if value > 60
       color = "#FF9900"
     else
       color = "#FF0000"
     meter.val(value).trigger('configure', fgColor: color)
     meter.val(value).trigger('change')

Share this post


Link to post
Share on other sites

This would also work too for hard coding. After I started working on it, I found I needed dynamic values that I could set on each item on the dashboard. So using the Hotness widget, I can set data-cool and data-warm variables to determine when to change color. In my ruby jobs I send value, current, and last so the coffee file can work with those three to also add the percent change too. I could just set the AnimatedValue to be 'current' if I wanted to clean up the code a bit too. From here, the scss file has the color values to transition into.

 

Here's the hotness.coffee file I'm using:

class Dashing.Hotness extends Dashing.Widget

 @accessor 'value', Dashing.AnimatedValue

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

 @accessor 'arrow', ->
   if @get('last')
    if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down'

 constructor: ->
   super

 onData: (data) ->
   node = $(@node)
   value = parseInt data.value
   cool = parseInt node.data "cool"
   warm = parseInt node.data "warm"
   level = switch
     when value <= cool then 0
     when value >= warm then 4
     else
       bucketSize = (warm - cool) / 3 # Total # of colours in middle
       Math.ceil (value - cool) / bucketSize

   backgroundClass = "hotness#{level}"
   lastClass = @get "lastClass"
   node.toggleClass "#{lastClass} #{backgroundClass}"
   @set "lastClass", backgroundClass

Share this post


Link to post
Share on other sites

Hey Guys,

 

Is this not what the "Alerting" is for? If so, does this work for anyone as I set alert values and get nothing in the dash.

 

Thanks

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×