Hotness Widget for the Dashing dashboard from Shopify

README.md

Dashing Hotness Widget + change-rate

Are you dashing? Are you hot? Then you need the Dashing Hotness Widget! Forked from here: Source. See the original blog post for more details.

Important Unlike the original Hotness widget which used value, this widget uses current and last and can be a direct drop in replacement for the Number widget.

About

This widget is similar to standard Hotness widget but I've added the change-rate arrows from the basic Number widget. 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 597ad01d63f209140c97

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 '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', ->
    if @get('last')
      if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down'

  constructor: ->
    super

  onData: (data) ->
    node = $(@node)
    current = parseInt data.current
    cool = parseInt node.data "cool"
    warm = parseInt node.data "warm"
    level = switch
      when current <= cool then 0
      when current >= warm then 4
      else
        bucketSize = (warm - cool) / 3 # Total # of colours in middle
        Math.ceil (current - cool) / bucketSize

    backgroundClass = "hotness#{level}"
    lastClass = @get "lastClass"
    node.toggleClass "#{lastClass} #{backgroundClass}"
    @set "lastClass", backgroundClass

    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}"
      

hotness.html

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

<h2 class="current" 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>

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

  .change-rate {
    font-weight: 500;
    font-size: 30px;
    color: $value-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; }