Dashing - "hotness meter" widget

Readme.md

Dashing Hotness Meter Widget

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

What it does

Use it as the standard Meter widget and 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.
• data-warm : all values greater than this will display the "hot" colour. Use it to symbolize the "bad" range of values.

And more, you can use

• data-suffix
• data-prefix

to postpend or prepend a string to your value. Useful for metrics with an unit.

How to use it

Copy

• hotmeter.coffee
• hotmeter.html
• hotmeter.scss

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

To use it :

ruby dashing:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="synergy" data-view="Hotmeter" data-title='my title' data-min='0' data-max='100' data-moreinfo="more info" data-cool="20" data-warm="90" data-suffix="%"></div>
</li>

dashing-js:
li(data-row='1', data-col='5', data-sizex='1', data-sizey='1')
    div(data-id='synergy', data-view='Hotmeter', data-title='my title', data-min='0', data-max='100', data-moreinfo="more info", data-cool="20", data-warm="90", data-suffix="%")

Licence

Licenced under the Creative Commons Attribution 4.0

hotmeter.coffee

class Dashing.Hotmeter extends Dashing.Widget

  @accessor 'value', Dashing.AnimatedValue

  constructor: ->
    super
    @observe 'value', (value) ->
      $(@node).find(".meter").val(value).trigger('change')

  ready: ->
    meter = $(@node).find(".meter")
    meter.attr("data-bgcolor", meter.css("background-color"))
    meter.attr("data-fgcolor", meter.css("color"))
    meter.knob()

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

hotmeter.html

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

<input class="meter" data-angleOffset=-125 data-angleArc=250 data-width=200 data-readOnly=true data-bind-value="value | shortenedNumber | prepend prefix | append suffix" data-bind-data-min="min" data-bind-data-max="max">

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

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

hotmeter.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:  #9c4274;

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

$meter-background:  darken($background-color, 15%);

// ----------------------------------------------------------------------------
// Widget-meter styles
// ----------------------------------------------------------------------------
.widget-hotmeter {

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

  input.meter {
    background-color: $meter-background;
    color: #fff;
  }

  .title {
    color: $title-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

Very nice!
Thanks

Great widget thank you.

One question, how would I position the meter further up the widget? I can move the value but the actual meter remains in the same spot.

thanks,