Mark Mark - 3 months ago 102
CoffeeScript Question

Dynamically change background colour of a Dashing widget

I've built a dashboard using the ruby based Dashing framework and all seems to be running well but I'd like to be able to change the background colour of one of my List widgets (mywidget) based on one of the values in the list.

My updatelist.rb job file currently looks like:

hashdata = Hash.new({ value: 0 })

SCHEDULER.every '10s' do

File.open('xxx.txt').each do |line|
field = line.split(;).first
value = line.split(;).last

if ['Status', 'Active', 'Duration].include? field
hashdata[field] = { label: field, value: value }
end
end
send_event('mywidget', { items: hashdata.values })
end


The file it is reading (xxx.txt) is formatted like:

Status; Good
Active; No
Duration; 1000


I'd like change the background colour of the list widget based on the value of Status i.e. Good=green, Average=yellow, Poor=red.

How can I do this? Adding something to the coffee script seems the obvious solution but I can't see how to achieve it

Answer

You are correct about needing code in the coffeescript. I suggest something like the following:

class Dashing.List extends Dashing.List

color: () -> 
  data = @get('items')
  status = # code to process color from your data (I'm not sure exactly your format)
  switch status
    when "Good" then "#33cc33" # green
    when "Average" then "#ffff00" # yellow
    when "Poor" then "#ff0000" # red
    else "#000000"

onData: (data) ->
  # change the background color every time that new data is sent
  $(@get('node')).css 'background-color', @color()