Skip to content

Instantly share code, notes, and snippets.

@rmrf-run
Forked from andre-morassut/Readme.md
Created February 10, 2016 15:44
Show Gist options
  • Save rmrf-run/4618d1dc49d3ae036991 to your computer and use it in GitHub Desktop.
Save rmrf-run/4618d1dc49d3ae036991 to your computer and use it in GitHub Desktop.
Dashing - "hotness meter" widget

Dashing Hotness Meter Widget

This widget is based on the standard Dashing Meter widget and the Hotness Widget created by Rowanu.

What it does

Use it as the standard Meter widget and add the following attributes in your dashboard elements declaration :

  • data-cool : all values below this will display the "cool" colour. Use it to symbolize the "good" range of values.
  • data-warm : all values greater than this will display the "hot" colour. Use it to symbolize the "bad" range of values.

And more, you can use

  • data-suffix
  • data-prefix

to postpend or prepend a string to your value. Useful for metrics with an unit.

How to use it

Copy

  • hotmeter.coffee
  • hotmeter.html
  • hotmeter.scss

in a "hotmeter" folder in your dashing widget directory.

To use it :

ruby dashing:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="synergy" data-view="Hotmeter" data-title='my title' data-min='0' data-max='100' data-moreinfo="more info" data-cool="20" data-warm="90" data-suffix="%"></div>
</li>

dashing-js:
li(data-row='1', data-col='5', data-sizex='1', data-sizey='1')
    div(data-id='synergy', data-view='Hotmeter', data-title='my title', data-min='0', data-max='100', data-moreinfo="more info", data-cool="20", data-warm="90", data-suffix="%")

Licence

Licenced under the Creative Commons Attribution 4.0

class Dashing.Hotmeter 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: (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>
<input class="meter" data-angleOffset=-125 data-angleArc=250 data-width=200 data-readOnly=true data-bind-value="value | shortenedNumber | prepend prefix | append suffix" 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>
// ----------------------------------------------------------------------------
// 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: #9c4274;
$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(2, 2, 2, 0.6);
$meter-background: darken($background-color, 15%);
// ----------------------------------------------------------------------------
// Widget-meter styles
// ----------------------------------------------------------------------------
.widget-hotmeter {
background-color: $background-color;
@include transition(background-color, 0.5s, linear);
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);
}
}
.hotness0 { background-color: #00C176; }
.hotness1 { background-color: #88C100; }
.hotness2 { background-color: #FABE28; }
.hotness3 { background-color: #FF8A00; }
.hotness4 { background-color: #FF003C; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment