Dashing - "hotness list" widget

Readme.md

Dashing Hotness List Widget

This widget is based on the standard Dashing List widget and the Hotness Widget created by Rowanu.

What it does

With this widget, you can display a list that will change color depending on its content. It can be useful to display a set of metrics and use the color to materialize the "global state". If you refer to the thumbnail, you'll see an example of application around a server pool.

How to add to Dashing

Copy

• hotlist.coffee
• hotlist.html
• hotlist.scss

in a "hotlist" folder in your dashing widget directory.

How to use it

Its use is close to the standard List widget.

In the dashboard UI

Add the following attributes in your dashboard elements declaration :

• data-cool : all values below this will display the "cool" colour. Use it to symbolize the "good" range of values. Remember that you can set a negative data-cool value (-1 will make the widget go green if all is ok)
• data-warm : all values greater than this will display the "hot" colour. Use it to symbolize the "bad" range of values.

Examples :

For Dashing-js

li(data-row='1', data-col='1', data-sizex='1', data-sizey='1')
  div(data-id='serverstatus', data-view='Hotlist', data-title='Server pool status', data-unordered="true", data-moreinfo="Production pool", data-cool="-1", data-warm="3")        

For regular Dashing

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="serverstatus" data-view="Hotlist" data-title="Server pool status" data-unordered="true" data-moreinfo="Production pool" data-cool="-1" data-warm="3"></div>
</li>

In your job

The standard list widget accept a JSON structure with items array to feed the list. Add to this a field named hotnessvalue to compute the "state of hotness" of your list.

See this example that

• evaluates the states of three imaginay servers
• count the number of them set to "down" value

Code :

var itemarray = [
  {label: 'Server #1', value: (isServer1Ok() ? 'up' : 'down')},
  {label: 'Server #2', value: (isServer2Ok() ? 'up' : 'down')},
  {label: 'Server #3', value: (isServer3Ok() ? 'up' : 'down')}
];
var numberOfSystemsDown = countNumberOfServerDown(itemarray);
var datastruct = {
  items: itemarray,
  hotnessvalue:numberOfSystemsDown // Here you set the value of "hotness"
};
send_event('etatsyspic', datastruct);

The important part is the hotness attribute.

Licence

Licenced under the Creative Commons Attribution 4.0

hotlist.coffee

class Dashing.Hotlist extends Dashing.Widget
  ready: ->
    if @get('unordered')
      $(@node).find('ol').remove()
    else
      $(@node).find('ul').remove()

  onData: (data) ->
    node = $(@node)
    value = parseInt data.hotnessvalue
    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    

hotlist.html

<h1 class="title" data-bind="title"></h1>

<ol>
  <li data-foreach-item="items">
    <span class="label" data-bind="item.label"></span>
    <span class="value" data-bind="item.value"></span>
  </li>
</ol>

<ul class="list-nostyle">
  <li data-foreach-item="items">
    <span class="label" data-bind="item.label"></span>
    <span class="value" data-bind="item.value"></span>
  </li>
</ul>

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

hotlist.scss

// ----------------------------------------------------------------------------
// Mixins
// ----------------------------------------------------------------------------
@mixin transition($transition-property, $transition-time, $method) {
  -webkit-transition: $transition-property $transition-time $method;
  -moz-transition: $transition-property $transition-time $method;
  -o-transition: $transition-property $transition-time $method;
  transition: $transition-property $transition-time $method;
}

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #12b0c5;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(2, 2, 2, 0.6);

// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-hotlist {

  background-color: $background-color;
  vertical-align: top !important;
  @include transition(background-color, 0.5s, linear);

  .title {
    color: $title-color;
  }

  ol, ul {
    margin: 0 15px;
    text-align: left;
    color: $label-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
  }

  .list-nostyle {
    list-style: none;
  }

  .label {
    color: $label-color;
  }

  .value {
    float: right;
    margin-left: 12px;
    font-weight: 600;
    color: $value-color;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

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

}

.hotness0 { background-color: #00C176; }
.hotness1 { background-color: #88C100; }
.hotness2 { background-color: #FABE28; }
.hotness3 { background-color: #FF8A00; }
.hotness4 { background-color: #FF003C; }

thumbnail.png