Skip to content

Instantly share code, notes, and snippets.

@SaMnCo

SaMnCo/README.md

Created October 27, 2014 10:33
Show Gist options
  • Save SaMnCo/7eb32ef95e137f306c59 to your computer and use it in GitHub Desktop.
Save SaMnCo/7eb32ef95e137f306c59 to your computer and use it in GitHub Desktop.
Download ZIP
Incremental Dynamic Number
Raw
README.md

Description

Most Dashing widgets require a job to pull information from the outside world. When data is pushed to a widget (with Curl for example), the past is usually lost and the new data is plotted / displayed.

I needed a widget that could have some memory of the past, and add the new pushed information to the past, not only display it.

Usage

To use this widget, copy activenumber.html, activenumber.coffee, and activenumber.scss into the /widgets/activenumber directory.

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

 <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="increment" data-view="Activenumber" data-title="Some Incremental Value"></div>
</li>

On it is installed, you can push new values by doing

curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "current": "10" }' \http://DASHING_HOST:DASHING_PORT/widgets/increment

Then "current" will be added to the previous value. Do it again and the value will increase each time.

Note that this does NOT survive a F5 / refresh of the dashboard.

Raw
activenumber.coffee
class Dashing.Activenumber extends Dashing.Widget
items = [0]
@accessor 'current', Dashing.AnimatedValue
ready: ->
items = [0]
@set 'current', 1
@set 'result', 0
onData: (data) ->
last_sum = 0
current_sum = 0
if(!data)
data = items
@set 'current', @get('current')
new_item = @get('current')
items.push new_item
current_sum = items.reduce (t,s) -> t + s
@set 'result', current_sum
$(@node).fadeOut().fadeIn()
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}"
Raw
activenumber.html
<h1 class="title" data-bind="title"></h1>
<h2 class="value" data-bind="result | shortenedNumber | prepend prefix | append suffix"></h2>
<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
Raw
activenumber.scss
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #47bbb3;
$value-color: #fff;
$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-activenumber styles
// ----------------------------------------------------------------------------
.widget-activenumber {
background-color: $background-color;
.title {
color: $title-color;
}
.value {
color: $value-color;
}
.change-rate {
font-weight: 500;
font-size: 30px;
color: $value-color;
}
.more-info {
color: $moreinfo-color;
}
.updated-at {
color: rgba(0, 0, 0, 0.3);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment