Incremental Dynamic Number

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.

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

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>

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

}