Widget that shows green/red for sucess/failure with optional count metadata. Inspired by [ProjectMonitor](https://github.com/pivotal/projectmonitor) and heavily based on the default Dashing 'Number' widget.

green_number.coffee

Dashing.Widget
  @accessor 'current', Dashing.AnimatedValue

  ready: ->
    @setBackground(@get('green'))

  onData: (data) ->
    @setBackground(data.green)

    setTimeout((=>@renderHistory(data.history)), 0)

  renderHistory: (history) ->
    $history = $(@node).find('.history')
    $history.html('')

    for isGreen in history
      $box = $("<div></div>");
      if isGreen
        $box.addClass('green')
      $box.appendTo($history)


  setBackground: (green) ->
    if green
      $(@node).addClass('green')
    else
      $(@node).removeClass('green')

green_number.html

<h1 class="title" data-bind="title"></h1>

<h2 class="value" data-bind="count | shortenedNumber | prepend prefix | raw | append postfix | raw"></h2>

<p class="change-rate">
  <i data-bind-class="arrow"></i><span data-bind="difference"></span>
</p>

<p class="more-info" data-bind="moreinfo | raw | prepend moreprefix | append morepostfix"></p>

<p class="updated-at" data-bind="updatedAtMessage"></p>

<div class='history'></div>

green_number.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$green: green;
$red: red;
$value-color:       #fff;
$background-color: #222;

$title-color:       rgba(255, 255, 255, 0.7);;
$moreinfo-color:    rgba(255, 255, 255, 0.7);;

// ----------------------------------------------------------------------------
// Widget-number styles
// ----------------------------------------------------------------------------
.widget-green-number {
  background-color: $red;
  padding-top: 0;

  &.green {
    background-color: $green;
  }

  .title {
    color: $title-color;
  }

  .value {
    color: $value-color;
  }

  .change-rate {
    font-weight: 500;
    font-size: 30px;
    color: $value-color;
  }

  .more-info {
    color: $moreinfo-color;
    bottom: 75px;
  }

  .updated-at {
    bottom: 55px;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

  .small {
    font-size: 0.5em;
  }

  .history {
    bottom: 0;
    height: 50px;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: left;
    width: 300px;

    div {
      background-color: $red;
      display: inline-block;
      margin: 0;
      width: 50px;
      height: 50px;

      &.green {
        background-color: $green;
      }
    }
  }
}