rowanu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Dashing Hotness Widget

Are you dashing? Are you hot? Then you need the Dashing Hotness Widget!
See the blog post for more details.
About

This widget is similar to the basic Number widget, except that the entire widget
changes colour based on the value displayed. It is designed to draw attention to
metrics which need attention.
Good for metrics which are monitored for their 'good' (cold) or 'bad' (hot)
status.
Not good for metrics which don't have a pre-determined range, or aren't that
important.
Installation

From your Dashing Dashboard's directory, use the command:
dashing install 6246149

Using the widget

Include a widget with a data-view of Hotness. The widget must include a
data-cool and data-warm value to work properly.
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="synergy" data-view="Hotness" data-title="Synergy Hotness" data-cool="20" data-warm="90"></div>
</li>

See below for a full list of fields this widget uses.
Fields

Required


data-id: Like all widgets, you must include an identifier so that your jobs
can update the value.
data-cool: Anything below this value will show the 'cold' colour. It should
be set high enough to include all the 'good' range of value for this metric.
data-warm: Anything above this value will show the 'hot' colour. It
should be set just below the 'bad' range of value for this metric - ie. those
that need attention!

Not Required


data-title: Optional title to show in the widget box (above the value).
data-prefix: Optional prefix to the value.
data-suffix: Optional suffix to the value.

Colours

The default colour scheme is
Sweet Lolly by
nekyo.
Colour Blindness (untested)

The file SCSS file has an alternative colour scheme which should
(I hope!) be colour-blindness friendly (going from blue to yellow) called 400
Lovers by
Tzadkiel.
To use this scheme, just uncomment the last 5 lines of the SCSS
file
License

The colour schemes and this widget are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 license.


## hotness.coffee
class Dashing.Hotness extends Dashing.Widget

  @accessor 'value', Dashing.AnimatedValue

  constructor: ->
    super

  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

## hotness.html
<h1 class="title" data-bind="title"></h1>

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

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

## hotness.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: #000000;
$value-color: #FFFFFF;
$title-color: rgba(255, 255, 255, 0.7);
$updated-at-color: rgba(0, 0, 0, 0.3);

// ----------------------------------------------------------------------------
// Widget-hotness styles
// ----------------------------------------------------------------------------
.widget-hotness {

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

  .title {
    color: $title-color;
  }

  .value {
    color: $value-color;
  }

  .updated-at {
    color: $updated-at-color;
  }

}

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

// // More colour-blind friendly palette
// .hotness0 { background-color: #046D8B; }
// .hotness1 { background-color: #309292; }
// .hotness2 { background-color: #2FB8AC; }
// .hotness3 { background-color: #93A42A; }
// .hotness4 { background-color: #ECBE13; }
	class Dashing.Hotness extends Dashing.Widget

	@accessor 'value', Dashing.AnimatedValue

	constructor: ->
	super

	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
	<h1 class="title" data-bind="title"></h1>

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

	<p class="updated-at" data-bind="updatedAtMessage"></p>
	// ----------------------------------------------------------------------------
	// 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: #000000;
	$value-color: #FFFFFF;
	$title-color: rgba(255, 255, 255, 0.7);
	$updated-at-color: rgba(0, 0, 0, 0.3);

	// ----------------------------------------------------------------------------
	// Widget-hotness styles
	// ----------------------------------------------------------------------------
	.widget-hotness {

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

	.title {
	color: $title-color;
	}

	.value {
	color: $value-color;
	}

	.updated-at {
	color: $updated-at-color;
	}

	}

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

	// // More colour-blind friendly palette
	// .hotness0 { background-color: #046D8B; }
	// .hotness1 { background-color: #309292; }
	// .hotness2 { background-color: #2FB8AC; }
	// .hotness3 { background-color: #93A42A; }
	// .hotness4 { background-color: #ECBE13; }