CODEWITHSUNDEEP
dashing
jdsto
jdsto

Reputation: 515

Dashing: Changing text color based on input to List widget

I am fairly new to HTML/CSS so this may be a newbie question.

I have a list widget that I am using to show the name of nodes (:label) from an API and the last time those nodes reported (:value). If the node has reported within the last hour I want the text color to be green, if it hasn't I want it to be red (pretty simple logic).

I have been trying to use :status-warning and :status-danger to do this, but these options do not change each value independently, rather it changes the whole widget's text color. This is my coffeescript code, which I got from https://github.com/Shopify/dashing/issues/24 :

ready: ->
    if @get('unordered')
        $(@node).find('ol').remove()
    else
        $(@node).find('ul').remove()

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

Do I need to create a custom widget for this, or is there a built in mechanism to change the text color of values?

Upvotes: 1

Views: 1930

Answers (1)

Shane Nayler
Shane Nayler

Reputation: 307

I wouldn't bother changing the coffeescript. It's not necessary.

Not sure if you are still looking for an answer for this, but I managed to work something out for this recently. If you set up your code in the .rb file that sends data to your list so that it does some checking for whether the value was updated or not, and then determines and adds a 'color' attribute to the set of data that is sent, you can then tell your list to use that 'color' value to specify which CSS class to look at. The CSS class can then be set up with whatever colors fits the 'color' attribute.

My dashboard (.erb) code for the list is the same, so that doesn't need to change.

In the job file:

myList.rb

# get your label and value for the list before here.
if myValue >= 75.00
    myColor = "green"
elsif myValue <= 74.99
    myColor = "red"
else
    myColor = "white"
end

results.push({:label => myLabel, :value => myValue, :color => myColor})

send_event("myList", items: results)

so from the above we can see that a color variable is sent with the label and value. Now we just need to make the list.html and the list.scss recognise it.

here's the changes in my list.html Only 4 lines should change to look like the 2 below (in the ordered list (<ol></ol>), and unordered list(<ul></ul>):

list.html

        <span class="label"><div data-bind-class="item.color" data-bind="item.label"></div></span>
        <span class="value"><div data-bind-class="item.color" data-bind="item.value"></div></span>

The data-bind-class is binding the class to whatever is in item.color (which i know in my example will be: red, green, or white)

Then we just need to tell the list.scss how to handle these classes by adding this to the bottom of the file:

list.scss

.white {
color: white;
}
.red {
color: #B31D2B;
}
.green {
color: green;
}

Note: CSS can handle plain English colors. You mentioned you were new to css so I guess it's worth clarifying. I've used a mixture of plain English colors: 'white', and 'green' and a hex code color: '#B31D2B'. This hex code is a darker red which I found was a bit easier on the eyes.

You could use this method to do anything with the text just thinking about it now. It doesn't need to be 'color' specifically. So you could change color to 'state' and have a 'good' state passed through as item.state and then have a 'good' class in your scss that changes the font style, font size, color, font weight. Whatever you'd like really :)

Upvotes: 3

Related Questions