Apreview.md

Gemfile

[...]
gem 'tracker_api'
[...]

pivotal.coffee

class Dashing.Pivotal extends Dashing.Widget

pivotal.html

<h1>
  <span class="title" data-bind="title"></span>
  <span data-bind="iteration_start"></span> - 
  <span data-bind="iteration_finish"></span>
</h1>

<div id="pivotal_stories">
  <div class="stats_row">
    <div class="finished_container container">
      <div class="section_title"><span data-bind="finished"></span> Finished</div>
      <span class="points" data-bind="finished_estimate"></span> pts
    </div>

    <div class="started_container container">
      <div class="section_title"><span data-bind="started"></span> Started</div>
      <span class="points" data-bind="started_estimate"></span> pts
    </div>

    <div class="unstarted_container container">
      <div class="section_title"> <span data-bind="unstarted"></span> Unstarted</div>
      <span class="points" data-bind="unstarted_estimate"></span> pts
    </div>

    <div class="total_container container">
      <div class="section_title"><span data-bind="total"></span> Total</div>
      <span class="points" data-bind="total_estimate"></span> pts
    </div>
  </div>
  <div style="clear:both;"></div>

  <div class="velocity_row">
    <div class="velocity_container">Velocity: <span data-bind="velocity"></span></div>
  </div>


</div>

pivotal.rb

require 'tracker_api'

client = TrackerApi::Client.new(token: ENV['PT_API_TOKEN'])
@project = client.project(1234567890, fields: ':default,current_velocity') rescue nil
date_format = '%b %d'

SCHEDULER.every '10m', first_in: 0, allow_overlapping: false do
  unless @project.nil?
    @iteration = @project.iterations(scope: :current).first

    # Velocity
    velocity = @project.current_velocity

    # Finished stories in the current iteration
    finished_stories = @iteration.stories.select{|s|s.current_state == "finished"}
    finished_count = finished_stories.length
    finished_estimate = finished_stories.reduce(0){|sum, s| sum + (s.estimate || 0)}

    # Started stories in the current iteration
    started_stories = @iteration.stories.select{|s|s.current_state == "started"}
    started_count = started_stories.length
    started_estimate = started_stories.reduce(0){|sum, s| sum + (s.estimate || 0)}

    # Unstarted
    unstarted_stories = @iteration.stories.select{|s|s.current_state == "unstarted"}
    unstarted_count = unstarted_stories.length
    unstarted_estimate = unstarted_stories.reduce(0){|sum, s| sum + (s.estimate || 0)}

    # All stories in the current iteration
    total_stories = finished_count + started_count + unstarted_count
    total_estimate = finished_estimate + started_estimate + unstarted_estimate

    send_event 'pivotal', {velocity: velocity,
                           iteration_start: @iteration.start.strftime(date_format),
                           iteration_finish: @iteration.finish.strftime(date_format),
                           unstarted: unstarted_count,
                           unstarted_estimate: unstarted_estimate,
                           started: started_count,
                           started_estimate: started_estimate,
                           finished: finished_count,
                           finished_estimate: finished_estimate,
                           total: total_stories,
                           total_estimate: total_estimate
    }
  else
    puts 'Not a Pivotal project'
  end
end

pivotal.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  rgb(135, 193, 230);

.widget-pivotal {

  background-color: $background-color;

  font-size: 30px;

  .section_title {
    font-size: 27px;
  }

  .points {
    font-size: 40px;
  }

  .velocity_row {
    padding-top: 15px;
  }

  .container {
    float: left;
    width: 25%;
    padding-bottom: 40px;
    padding-top: 40px;
  }

  .unstarted_container {
    background-color: red;
  }

  .started_container {
    background-color: #d8c600;
  }

  .finished_container {
    background-color: green;
  }

  .total_container {
    background-color: black;
  }
}

sample.erb

...

    <li data-row="2" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="pivotal" data-view="Pivotal" data-title="Pivotal Stories" data-moreinfo="" data-prefix=""></div>
    </li>

...