Dashing - "hotness number" widget

Readme.md

Dashing Hotness Number Widget

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

What it does

With this widget, you can display the standard number widget with a color that will respond on the evolution (the difference displayed between last and current value that is displayed on the standard number widget)

It can be useful to display colors based on the evolution of the number widget : if increasing is "bad" then it will display red. If you refer to the thumbnail, you'll see an example of application around a server pool.

How to add to Dashing

Copy

• hotnumber.coffee
• hotnumber.html
• hotnumber.scss

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

How to use it

Its use is very close to the standard Number widget : you simply have to add two attributes in your UI

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='valuation', data-view='Hotnumber', data-title='Operation costs', data-moreinfo='Daily evolution', data-suffix='€', data-cool="-50", data-warm="50")     

For regular Dashing

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="serverstatus" data-view="Hotnumber" data-title='Operation costs' data-moreinfo='Daily evolution' data-suffix='€' data-cool="-50" data-warm="50"></div>
</li>

In your job

Same data structure as the standard Number widget.

Licence

Licenced under the Creative Commons Attribution 4.0

hotnumber.coffee

class Dashing.Hotnumber extends Dashing.Widget
  @accessor 'current', 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', ->
    node = $(@node)
    value = parseInt(@get('current')) - parseInt(@get('last'))
    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    
    if @get('last')
      return 'fa fa-arrow-right' if parseInt(@get('current')) == parseInt(@get('last'))
      if parseInt(@get('current')) > parseInt(@get('last')) then 'fa fa-arrow-up' else 'fa fa-arrow-down'

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

hotnumber.html

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

<h2 class="value" data-bind="current | shortenedNumber | prepend prefix | append suffix"></h2>

<p class="change-rate">
  <i data-bind-class="arrow"></i><span data-bind="difference"></span>
</p>

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

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

hotnumber.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:  #47bbb3;
$value-color:       #fff;

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

// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-hotnumber {

  background-color: $background-color;
  @include transition(background-color, 0.5s, linear);

  .title {
    color: $title-color;
  }

  .value {
    color: $value-color;
  }

  .change-rate {
    font-weight: 500;
    font-size: 30px;
    color: $value-color;
  }

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

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

}

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

thumbnail.png