Dashing Widget for Jenkins Overall Job's status

jenkins_overall_jobs_stat.coffee

class Dashing.JenkinsOverallJobsStat extends Dashing.Widget
  @accessor 'all_jobs', Dashing.AnimatedValue
  @accessor 'failed_jobs', Dashing.AnimatedValue
  @accessor 'disabled_jobs', Dashing.AnimatedValue
  @accessor 'notbuilt_jobs', Dashing.AnimatedValue
  @accessor 'arrow', ->
    if (@get('failed_jobs') == 0 ) then 'value-up icon-caret-up' else 'icon-caret-down'
  ready: ->
    # This is fired when the widget is done being rendered

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
    #$(@node).fadeOut().fadeIn()

jenkins_overall_jobs_stat.html

<header>
  <h1 class="title" data-bind="title"></h1>
</header>
<section class="body">
  <div class="canvas">
    <p> Failed Jobs </p>
    <i data-bind-class="arrow"></i>
    <h2 class="value" data-bind-class="value" data-bind="failed_jobs"></h2>
    <div class="row more-info">
      <div class="left">
        <p>All Jobs<p>
        <p class="stats" data-bind="all_jobs"></p>
        <p>Not Built Jobs<p>
        <p class="stats" data-bind="notbuilt_jobs"></p>

      </div>
      <div class="right">
        <p>Failed Jobs<p>
        <p class="stats" data-bind="failed_jobs"></p>

        <p>Disabled Jobs<p>
        <p class="stats" data-bind="disabled_jobs"></p>
      </div>
    </div>
<p> </p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
  </div>
</section>

jenkins_overall_jobs_stat.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #66FFFF;
$value-color:       #73AA3A;

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

// ----------------------------------------------------------------------------
// Widget styles
// ----------------------------------------------------------------------------
.widget-jenkins-overall-jobs-stat {
  //refreshing default widget definition
  vertical-align: baseline !important;
  padding:0px !important;

  background-color: $background-color;

  header{
    background-color: green;
    text-transform: uppercase;
    padding: 5px 0px 5px 0px;
    font-weight: 700;
    font-size: 12px;
    text-shadow: 1px 1px #0e0e0e;
  }
  .title {
    color: $title-color;
    font-size: inherit;
  }

  .body{
    padding: 16px;
    background-color: $background-color;
    color: #d3d4d4;
    text-shadow: 1px 1px #0e0e0e;
    font-family: Helvetica, Arial, sans-serif;
    z-index: 1;

    .row{
      width:100%;
    }
    .left{
      float:left;
      width:50%;
    }
    .right{
      float:right;
      width:49%;
      border-left: 1px dotted #8b8b8b;
    }

    i{
      float:left;
      font-size: 90px;
    }
  }

  .value {
    font-size: 60px;
  }

  .value-up{
    color: #73aa3a;
  }

  .value-down{
    color: #c94c4c;
  }

  .more-info {
    color: $moreinfo-color;
    p{
      font-size:22px;
      color: #8b8b8b;
    }
    .stat{
      font-size:28px;
      color: #CECFCF;
    }
  }

}