Dashing / d3

Opsboard

Dashing

• HTML / CSS
• Ruby
• Coffeescript
• d3

dashingqueues

Sample

Technology Mix

Dashboard   ->

Widget ->

Jobs ->

HTML

Coffeescript/CSS

Ruby

Dashboard .erb

<% content_for :title do %>Lokku Dev Ops Board<% end %>

<div class="gridster">

  <ul>
   <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
      <div data-id="loadavg" data-view="Bubblechart"
           data-title="Bubble Chart"
           >
      </div>
    </li>

    
  </ul>
</div>

Job .rb

def get_bal()

  begin
    con = Mysql.new 'clover'
    rs = con.query 'SELECT revision FROM bal_status ORDER BY start_time DESC LIMIT 1'
  
    data = []
    rs.num_rows.times do
      row = rs.fetch_row
      status = row[1]
      type = row[0]
      data.push({ label: type, value: status })
    end
    send_event('bal', { items: data });
    
  rescue
    puts e.error
    
  ensure
    con.close
    
  end
end

SCHEDULER.every '60s' do
  get_bal()
end

Widget .coffee

class Dashing.Bubblechart extends Dashing.Widget

  ready: ->
    @svg = null

    if (!@nodes)
      @nodes = []

    @colors = d3.scale.linear()
      .domain([0, 0.5, 1])
      .range(["green", "yellow", "red"])

    @createBubble()
    @updateBubble()

  onData: (value) ->
    @create_nodes(value.data)
    @updateBubble()

[...]

Widget .scss

$background-color:  #bb47b3;
$title-color:       rgba(255, 255, 255, 0.7);
$text-font:          Helvetica-Neue, Helvetica, sans-serif;

.widget-bubblechart {
  background-color: $background-color;

  .title {
      color: $title-color;
      position: absolute;
      top: 10px;
      left: 60px;
      right: 60px;
  }

  g ellipse {
      stroke: black;
      stroke-width: 0.5;
        border: 5px solid black;
        border-style: inset;
  }
      
  g text {
      font-family: $text-font;
      font-size: 18px;
  }
}

D3

http://toki:8888/

Dashing Development

http://toki:3030/