CODEWITHSUNDEEP
ruby-on-railsdashing
ivan
ivan

Reputation: 6322

Dashing-rails: how to change a widget's background color to reflect boolean data-value?

I'm using dashing-rails and trying to change the background color of a widget to green/red depending on a boolean value I get back from an API. I have a job with:

Dashing.scheduler.every '1m', first_in: 8 do
  Dashing.send_event('all_good', status: MixpanelHelper.all_good?)
end

a widget whose coffeescript includes:

onData: (data) ->
  if data.status
    $(@node).css('background-color', '#42b2aa')
  else
    $(@node).css('background-color', '#e85c28')

and a dashboard whose erb includes:

    <div data-id="all_good" data-view="Mywidget" data-title="All good" data-goal="95%" data-suffix="%"></div>

But the color change isn't being triggered. Am I not passing my data correctly?

Upvotes: 1

Views: 4701

Answers (2)

rinkush sharda
rinkush sharda

Reputation: 371

Answer by sammydc is correct.. adding few more info based on my experience (I am using dashing for the first time today) while creating a new widget (name = xzryryrk):

Run this command to create a new widget:

dashing generate widget xzryryrk

Output:

widgets/xzryryrk/xzryryrk.html
widgets/xzryryrk/xzryryrk.scss
widgets/xzryryrk/xzryryrk.coffee

  1. Edit 'xzryryrk.coffee' to add code mentioned by sammydc in above post but keep in mind the space and tabs. Dashing is based on language which is space and tab sensitive.

  2. Edit 'xzryryrk.scss' : By default new widget does not have any css configuration, You need to add following css (Edit name as per your reqirement):

    $background-color:  #47bbb3;
$title-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------
.widget-xzryryrk {

  background-color: $background-color;

  .title {
    color: $title-color;
  }

  .more-info {
    color: $moreinfo-color;
  }

  .updated-at {
    color: rgba(255, 255, 255, 0.7);
  }


  &.large h3 {
    font-size: 65px;
  }
}

  3. Edit 'xzryryrk.html' : by default it is also blank. Add following:

    <h1 class="title" data-bind="title"></h1> <h3 data-bind="text"></h3> <p class="more-info" data-bind="moreinfo"></p> <p class="updated-at" data-bind="updatedAtMessage"></p>

And finally , Edit your erb file in (probably /dashing/dashboards/sample.erb) 

    `<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
    <div data-id="xzryryrk" data-view="Xzryryrk" data-title="Hello" data-text="This is your shiny new dashboard." data-moreinfo="Protip: You can drag the widgets around!"></div>
    </li>`

Now you can use CURL like this :

`curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "title":"XXX" ,"status": "FAIL" ,"text":"FAIL"}' http://X.X.X.X:8082/widgets/xzryryrk`

Upvotes: 0

sammydc
sammydc

Reputation: 514

I just started using Dashing, a few days ago and I had the same issue. The way I solved it is to put it in 2 places, both ready: and onData: events like this.

  ready: ->
    # This is fired when the widget is done being rendered
    @setColor(@get('status'))

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
    @setColor(@get('status'))
    $(@node).fadeOut().fadeIn()

  setColor: (status) ->
    if status
      switch status
          when 'RUN' then $(@node).css("background-color", "#29a334") #green
          when 'FAIL' then $(@node).css("background-color", "#b80028") #red
          when 'PEND' then $(@node).css("background-color", "#ec663c") #orange
          when 'HOLD' then $(@node).css("background-color", "#4096ee") #blue

I think it is not the best solution, there could be another event that can be used, one that I don't know yet, will update this answer if I find that, but in the meantime you might want to use this.

Upvotes: 1

Related Questions