Dashing Widget: Red Green Meter

README.md

Dashing Widget: Red Green Meter

A modified Meter widget that sets the background colour to either red or green depending on a threshold.

To use it, use something like this on your dashboard:

    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
      <div data-id="example_data" data-view="MeterRg" data-title="Example Widget" data-min="0" data-max="500" data-threshold="300"></div>
    </li>

Where data-threshold is the threshold.

Installation

dashing install e81a30b2ededb434062c

meter_rg.coffee

class Dashing.MeterRg 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(this)

  onData: (data) ->
    if not data.value?
      $(@node).removeClass('good')
      $(@node).removeClass('bad')
    else if data.value > @get('threshold')
      $(@node).addClass('bad')
      $(@node).removeClass('good')
    else
      $(@node).addClass('good')
      $(@node).removeClass('bad')

meter_rg.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" 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>

meter_rg.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color-default:  #7F8C8D;
$background-color-good:  #1D8147;
$background-color-bad:  #C0392B;

$title-color:       rgba(255, 255, 255, 1);
$moreinfo-color:    rgba(255, 255, 255, 0.3);

$meter-background:  rgba(0, 0, 0, 0.3);

// ----------------------------------------------------------------------------
// Widget-meter2 styles
// ----------------------------------------------------------------------------
.widget-meter-rg {

  background-color: $background-color-default;

  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);
  }

}

.widget-meter-rg.bad {
  background-color: $background-color-bad;
}

.widget-meter-rg.good {
  background-color: $background-color-good;
}

screenshot_green.png

screenshot_red.png

Thanks very much for an excellent widget!

One small comment... when refreshing the dashboard the widget goes back to the background colour, even if the threshold is broken....

Weird, all I seem to get is a blank space or blank widget where the widget should be. Not sure of the cause. I tried a manual and auto install.