Hotness Widget for the Dashing dashboard from Shopify

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

Thanks for the widget, I've made a small modification to the coffee script to allow it to be used in a list. It finds the highest value out of the list of items and sets the "Hotness" from that value. We use it to monitor across 25 replication queues and we want to see when even one is out of control.

class Dashing.Replication extends Dashing.Widget
  ready: ->
    if @get('unordered')
      $(@node).find('ol').remove()
    else
      $(@node).find('ul').remove()

    @accessor 'value', Dashing.AnimatedValue

  constructor: ->
    super

  onData: (data) ->
    maxVal = 0
    i = 0
    while i < data.items.length
      if parseInt(data.items[i].value) > maxVal
        maxVal = data.items[i].value
      i++
    node = $(@node)
    value = parseInt maxVal
    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

Hi,

Cool widget, i have modified the widget so that it integrates with the rickshaw graph, and shows a warm or cool value depending on the current value on the graph.
I have a ruby file in my jobs folder that gets these statistics by screen scraping a website and sending the relevant events to the dashboard.
I have multiple graphs in my dashboard, that display various statistics. In the erb file i display all of my graphs (about 17 widgets of graphs... yikes!!!). They all have a data-row and data-col value for initial placement, however the point of this dashboard is that different users and drag the graph widget they want and display it it whatever order that is applicable to them, however when i try to move these graph widgets around the dashboard to show pertinent graphs, the hotness loses its magic and does not show up with color anymore, on the next update. I think it is because it relies on the default row and col values.

Do you have any ideas on this?

i managed to fix it, it had nothing to do with the fact that i was dragging the widgets around. I was reading the data-cool and data-warm off a spreadsheet, which put the value into an array, and instead of just taking the first value off the array, i was sending the whole array to the widget which broke.

I must be missing a step as I can't get the graph to show up when adding the data view Hotness.
I ran

dashing install 6246149

Then I added the following to my erb: div data-id="synergy" data-view="Hotness" data-title="Synergy" data-cool="20" data-warm="90"
Are there some intermediary steps I'm missing?

I really like the color scheme and the widgets changing colors is very cool!
I found one issue. With about 20 widgets on a page, one or two stop updating their number - but the color changes appropriately. I ran a test script -- a loop sending random numbers to the dashboard so the commands are nearly the same each time to a different numbered widget. A refresh of the page temporarily fixes the issue but then a few minutes later another different couple of widgets stop updating their number again - yet the colors change properly. I have tried both Firefox and Chrome. Has anyone else run across this? Thanks.

@sansepic I was able to run the widget in Safari v 8, but I too had issues with Firefox and Chrome.

Does anyone know if it is possible to create a send event for the cool and warm levels?

@amckittrick yeah, it totally would be.

You can see the cool and warm values are being parsed from the node.data in the onData function (ie. each and every time data is received). You could just update that to also check that the data object itself doesn't contain values for those variables (named cool and warm respectively), otherwise fall back to the HTML attributes.

It would looks something like this, replacing the existing lines (NOTE: I didn't test this, just having a quick go at it):

    cool = parseInt data.cool or parseInt node.data "cool"
    warm = parseInt data.warm or parseInt node.data "warm"

Hmm I tried that and I can't seem to get it to work. I tried both of those but it doesn't seem like it's binding or using the values I send to calculate the warm and cool values.

For testing, I add this to the .html file so the widgets will display their warm and cool values

If I have a value of say 15 in my widget and initially set my cool to 10 and warm to 25, it displays green and also shows the warm and cool values on my widget.
In my job file, I then use the following
send_event('test', cool:0, warm:5)
This changes the values for warm and cool displayed on my widget to 0 and 5. However the widget goes black for a second but then simply returns to green but the warm and cool values stay the same.

I`ve got another problem.
After the initial load of the Hotness Widget (simple refreshing the browser), most of the the widgets have a black background...they show up the right data (a number), but the background is still black.

After send a curl update to this widgets, they get the right defined background (cool to warm).
Is there perhaps a caching problem ?
I use several Firefox-Versions on Windows / Mac and Chromium on rasp, they all have the same "display"-problem.

Anyone any idea ? Any workarounds ? Thanks !

By the way:
I want to use cyclist to cycle through different dashboards, but it is looking very ugly if the Hotness-Widgets are black...

I made a slight update to the widget here. I've added in the change-rate numbers and arrow from the regular Number widget.

Hey all,

I've been playing about with the CSS a bit, but i cant get it to play nice... so i'm looking for a little help!

What im after doing is making the prefix/suffix (as and when used) slightly smaller than the value on the Hotness Widget. I see that the value is wrapped in <H2>, so <H3> for the pre/suffix would be great!

Thanks.

PS: @rbirnie The link to your Hotness update is down. - Did you remove it?

@MartynKeigher did you manage to figure it out? I'm looking for the exact same thing!

@Elementarteilchen I've got a fix on my fork: https://gist.github.com/briangweber/025d24023709be9847b512c7c6ad7224

The blog seems to be down? - Could you update the link please?

I'm seeing the same issue as reported by @sansepic. I have multiple Hotness widgets, and after a short while, they stop rendering the updated values.
Does anyone have any idea on this?

Also seeing a blank widget, any tips?