Skip to content

Instantly share code, notes, and snippets.

@rowanu
Last active July 30, 2021 02:48
  • Star 22 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save rowanu/6246149 to your computer and use it in GitHub Desktop.
Hotness Widget for the Dashing dashboard from Shopify

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.

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; }
@Elementarteilchen
Copy link

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.

ok_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.

ok_green

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

@rbirnie
Copy link

rbirnie commented Jan 1, 2016

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

@MartynKeigher
Copy link

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?

@pdolinaj
Copy link

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

@briangweber
Copy link

@tetherit
Copy link

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

@wabiloo
Copy link

wabiloo commented Sep 21, 2017

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?

@ScottBrenner
Copy link

Also seeing a blank widget, any tips?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment