dashing 0.1.0 → 0.1.2

data/javascripts/dashing.coffee

@@ -14,7 +14,7 @@ Batman.Filters.dashize = (str) ->
   return str.replace(dashes_rx1, '$1_$2').replace(dashes_rx2, '$1_$2').replace('_', '-').toLowerCase()
 
 Batman.Filters.shortenedNumber = (num) ->
-  return if isNaN(num)
+  return num if isNaN(num)
   if num >= 1000000000
     (num / 1000000000).toFixed(1) + 'B'
   else if num >= 1000000
@@ -25,7 +25,8 @@ Batman.Filters.shortenedNumber = (num) ->
     num
 
 class window.Dashing extends Batman.App
-  @root -> 
+  @root ->
+Dashing.params = Batman.URI.paramsFromQuery(window.location.search.slice(1));
 
 class Dashing.Widget extends Batman.View
   constructor:  ->
@@ -41,23 +42,32 @@ class Dashing.Widget extends Batman.View
     type = Batman.Filters.dashize(@view)
     $(@node).addClass("widget widget-#{type} #{@id}")
 
+  @accessor 'updatedAtMessage', ->
+    if updatedAt = @get('updatedAt')
+      timestamp = updatedAt.toString().match(/\d*:\d*/)[0]
+      "Last updated at #{timestamp}"
 
   @::on 'ready', ->
     Dashing.Widget.fire 'ready'
 
-  onData: (data) =>
+  receiveData: (data) =>
     @mixin(data)
+    @onData(data)
 
+  onData: (data) =>
+    # Widgets override this to handle incoming data
 
 Dashing.AnimatedValue =
   get: Batman.Property.defaultAccessor.get
   set: (k, to) ->
-    if isNaN(to)
+    if !to? || isNaN(to)
       @[k] = to
     else
       timer = "interval_#{k}"
-      num = if !isNaN(@[k]) then @[k] else 0
+      num = if (!isNaN(@[k]) && @[k]?) then @[k] else 0
       unless @[timer] || num == to
+        to = parseFloat(to)
+        num = parseFloat(num)
         up = to > num
         num_interval = Math.abs(num - to) / 90
         @[timer] = 
@@ -74,6 +84,7 @@ Dashing.AnimatedValue =
 
 Dashing.widgets = widgets = {}
 Dashing.lastEvents = lastEvents = {}
+Dashing.debugMode = false
 
 source = new EventSource('/events')
 source.addEventListener 'open', (e) ->
@@ -86,10 +97,12 @@ source.addEventListener 'error', (e)->
 
 source.addEventListener 'message', (e) =>
   data = JSON.parse(e.data)
+  if Dashing.debugMode
+    console.log("Received data for #{data.id}", data)
   lastEvents[data.id] = data
   if widgets[data.id]?.length > 0
     for widget in widgets[data.id]
-      widget.onData(data)
+      widget.receiveData(data)
 
 
 $(document).ready ->

data/lib/dashing.rb

@@ -81,7 +81,8 @@ end
 
 def send_event(id, body)
   body["id"] = id
-  event = format_event(JSON.unparse(body))
+  body["updatedAt"] = Time.now
+  event = format_event(body.to_json)
   settings.history[id] = event
   settings.connections.each { |out| out << event }
 end
@@ -103,6 +104,7 @@ def first_dashboard
 end
 
 Dir[File.join(settings.root, 'lib', '**', '*.rb')].each {|file| require file }
+{}.to_json # Forces your json codec to initialize (in the event that it is lazily loaded). Does this before job threads start.
 
 job_path = ENV["JOB_PATH"] || 'jobs'
 files = Dir[File.join(settings.root, job_path, '/*.rb')]

data/templates/project/Gemfile

@@ -1,3 +1,3 @@
 source :rubygems
 
-gem 'dashing', '0.1.0', :git => 'git@github.com:Shopify/dashing.git'
+gem 'dashing'

data/templates/project/assets/javascripts/application.coffee

@@ -8,17 +8,17 @@
 console.log("Yeah! The dashboard has started!")
 
 Dashing.on 'ready', ->
-  widget_margins = [5, 5]
-  widget_base_dimensions = [240, 330]
-  numColumns = 4
+  Dashing.widget_margins ||= [5, 5]
+  Dashing.widget_base_dimensions ||= [300, 360]
+  Dashing.numColumns ||= 4
 
-  contentWidth = (widget_base_dimensions[0] + widget_margins[0] * 2) * numColumns
+  contentWidth = (Dashing.widget_base_dimensions[0] + Dashing.widget_margins[0] * 2) * Dashing.numColumns
 
   Batman.setImmediate ->
     $('.gridster').width(contentWidth)
     $('.gridster ul:first').gridster
-      widget_margins: widget_margins
-      widget_base_dimensions: widget_base_dimensions
+      widget_margins: Dashing.widget_margins
+      widget_base_dimensions: Dashing.widget_base_dimensions
       avoid_overlapped_widgets: !Dashing.customGridsterLayout
       draggable:
         stop: Dashing.showGridsterInstructions

data/templates/project/assets/stylesheets/application.scss

@@ -95,11 +95,11 @@ h1 {
   margin-bottom: 12px;
   text-align: center;
   font-size: 30px;
-  font-weight: 300;
+  font-weight: 400;
 }
 h2 {
   text-transform: uppercase;
-  font-size: 80px;
+  font-size: 76px;
   font-weight: 700;
   color: $text-color;
 }
@@ -116,6 +116,16 @@ h3 {
   margin: 0px auto;
 }
 
+.icon-background {
+  width: 100%!important;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0.1;
+  font-size: 275px;
+}
+
 .list-nostyle {
   list-style: none;
 }
@@ -146,7 +156,7 @@ h3 {
     display: inline-block;
   }
 
-  .title, .text-moreinfo {
+  .title, .more-info {
     color: $text-warning-color;
   }
 }
@@ -160,14 +170,25 @@ h3 {
     display: inline-block;
   }
 
-  .title, .text-moreinfo {
+  .title, .more-info {
     color: $text-danger-color;
   }
 }
 
-.text-moreinfo {
-  margin-top: 12px;
+.more-info {
   font-size: 15px;
+  position: absolute;
+  bottom: 32px;
+  left: 0;
+  right: 0;
+}
+
+.updated-at {
+  font-size: 15px;
+  position: absolute;
+  bottom: 12px;
+  left: 0;
+  right: 0;
 }
 
 #save-gridster {
@@ -220,10 +241,15 @@ h3 {
     display: none;
 }
 
+#container {
+  padding-top: 5px;
+}
+
 
 // ----------------------------------------------------------------------------
 // Clearfix
 // ----------------------------------------------------------------------------
 .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
 .clearfix:after { clear: both; }
-.clearfix { zoom: 1; }
+.clearfix { zoom: 1; }
+

data/templates/project/dashboards/sample.erb

@@ -10,15 +10,15 @@
     </li>
 
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
-      <div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords"></div>
+      <div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office"></div>
     </li>
 
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
-      <div data-id="valuation" data-view="Number" data-title="Current Valuation" data-moreinfo="In billions"></div>
+      <div data-id="valuation" data-view="Number" data-title="Current Valuation" data-moreinfo="In billions" data-prefix="$"></div>
     </li>
 
     <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
-      <div data-id="convergence" data-view="Graph" data-title="Convergence" style="background-color:#ff9618;"></div>
+      <div data-id="convergence" data-view="Graph" data-title="Convergence" style="background-color:#ff9618"></div>
     </li>
   </ul>
   <center><div style="font-size: 12px">Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http://localhost:3000/widgets/welcome</div></center>

data/templates/project/dashboards/sampletv.erb

@@ -0,0 +1,56 @@
+<script type='text/javascript'>
+$(function() {
+  // These settings override the defaults set in application.coffee. You can do this on a per dashboard basis.
+  Dashing.gridsterLayout('[{"col":2,"row":1},{"col":1,"row":1},{"col":3,"row":1},{"col":2,"row":2},{"col":3,"row":2},{"col":1,"row":2},{"col":5,"row":1},{"col":4,"row":2},{"col":2,"row":3}]')
+  Dashing.widget_base_dimensions = [370, 340]
+  Dashing.numColumns = 5
+});
+</script>
+
+
+<% content_for(:title) { "1080p dashboard" } %>
+
+<div class="gridster">
+  <ul>
+    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
+      <div data-view="Clock"></div>
+      <i class="icon-time icon-background"></i>
+    </li>
+
+    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
+      <div data-view="Image" data-image="/logo.png"></div>
+    </li>
+
+    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
+      <div data-id="welcome" data-view="Text" data-title="Hello" data-text="This is your shiny new 1080p dashboard." data-moreinfo="Protip: You can drag the widgets around!"></div>
+    </li>
+
+    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
+      <div data-id="synergy" data-view="Meter" data-title="Synergy" data-min="0" data-max="100"></div>
+    </li>
+
+    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
+      <div data-id="synergy" data-view="Meter" data-moreinfo="In sync with my neighbour!" data-title="Synergy" data-min="0" data-max="100"></div>
+    </li>
+
+    <li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
+      <div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office"></div>
+    </li>
+
+    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
+      <div data-id="karma" data-view="Number" data-title="Karma" style="background-color:#96bf48;"></div>
+      <i class="icon-heart icon-background"></i>
+    </li>
+
+    <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
+      <div data-id="convergence" data-view="Graph" data-title="Convergence" style="background-color:#47bbb3;" data-moreinfo="poop" ></div>
+    </li>
+
+    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
+      <div data-id="twitter_mentions" data-view="Comments" style="background-color:#ff9618;" data-moreinfo="Tweets tagged with #todayilearned"></div>
+      <i class="icon-twitter icon-background"></i>
+    </li>
+
+  </ul>
+  <center><div style="font-size: 12px">Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http://localhost:3000/widgets/welcome</div></center>
+</div>

data/templates/project/jobs/buzzwords.rb

@@ -3,7 +3,7 @@ buzzword_counts = Hash.new({ value: 0 })
 
 SCHEDULER.every '2s' do
   random_buzzword = buzzwords.sample
-  buzzword_counts[random_buzzword] = { label: random_buzzword, value: buzzword_counts[random_buzzword][:value] + 1 }
+  buzzword_counts[random_buzzword] = { label: random_buzzword, value: (buzzword_counts[random_buzzword][:value] + 1) % 30 }
   
   send_event('buzzwords', { items: buzzword_counts.values })
 end

data/templates/project/jobs/convergence.rb

@@ -1,3 +1,4 @@
+# Populate the graph with some random points
 points = []
 (1..10).each do |i|
   points << { x: i, y: rand(50) }

data/templates/project/jobs/sample.rb

@@ -1,9 +1,13 @@
 current_valuation = 0
+current_karma = 0
 
 SCHEDULER.every '2s' do
   last_valuation = current_valuation
+  last_karma     = current_karma
   current_valuation = rand(100)
+  current_karma     = rand(200000)
 
   send_event('valuation', { current: current_valuation, last: last_valuation })
+  send_event('karma', { current: current_karma, last: last_karma })
   send_event('synergy',   { value: rand(100) })
 end

data/templates/project/jobs/twitter.rb

@@ -0,0 +1,17 @@
+require 'net/http'
+require 'json'
+
+search_term = URI::encode('#todayilearned')
+
+SCHEDULER.every '10m', :first_in => 0 do |job|
+  http = Net::HTTP.new('search.twitter.com')
+  response = http.request(Net::HTTP::Get.new("/search.json?q=#{search_term}"))
+  tweets = JSON.parse(response.body)["results"]
+  if tweets
+    tweets.map! do |tweet| 
+      { name: tweet['from_user'], body: tweet['text'], avatar: tweet['profile_image_url_https'] }
+    end
+  
+    send_event('twitter_mentions', comments: tweets)
+  end
+end

data/templates/project/widgets/clock/clock.coffee

@@ -0,0 +1,18 @@
+class Dashing.Clock extends Dashing.Widget
+
+  ready: ->
+    setInterval(@startTime, 500)
+
+  startTime: =>
+    today = new Date()
+
+    h = today.getHours()
+    m = today.getMinutes()
+    s = today.getSeconds()
+    m = @formatTime(m)
+    s = @formatTime(s)
+    @set('time', h + ":" + m + ":" + s)
+    @set('date', today.toDateString())
+
+  formatTime: (i) ->
+    if i < 10 then "0" + i else i

data/templates/project/widgets/clock/clock.html

@@ -0,0 +1,2 @@
+<h1 data-bind="date"></h1>
+<h2 data-bind="time"></h2>

data/templates/project/widgets/clock/clock.scss

@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #dc5945;
+
+// ----------------------------------------------------------------------------
+// Widget-clock styles
+// ----------------------------------------------------------------------------
+.widget-clock { 
+
+  background-color: $background-color;
+  
+}

data/templates/project/widgets/comments/comments.coffee

@@ -0,0 +1,24 @@
+class Dashing.Comments extends Dashing.Widget
+
+  @accessor 'quote', ->
+    "“#{@get('current_comment')?.body}”"
+
+  ready: ->
+    @currentIndex = 0
+    @commentElem = $(@node).find('.comment-container')
+    @nextComment()
+    @startCarousel()
+
+  onData: (data) ->
+    @currentIndex = 0
+
+  startCarousel: ->
+    setInterval(@nextComment, 8000)
+
+  nextComment: =>
+    comments = @get('comments')
+    if comments
+      @commentElem.fadeOut =>
+        @currentIndex = (@currentIndex + 1) % comments.length
+        @set 'current_comment', comments[@currentIndex]
+        @commentElem.fadeIn()

data/templates/project/widgets/comments/comments.html

@@ -0,0 +1,7 @@
+<h1 class="title" data-bind="title"></h1>
+<div class="comment-container">
+  <h3><img data-bind-src='current_comment.avatar'/><span data-bind='current_comment.name' class="name"></span></h3> 
+  <p class="comment" data-bind='quote'></p>
+</div>
+
+<p class="more-info" data-bind="moreinfo | raw"></p>

data/templates/project/widgets/comments/comments.scss

@@ -0,0 +1,33 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #eb9c3c;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-comment styles
+// ----------------------------------------------------------------------------
+.widget-comments { 
+
+  background-color: $background-color;
+  
+  .title { 
+    color: $title-color;
+    margin-bottom: 15px;
+  }
+
+  .name {
+    padding-left: 5px;
+  }
+
+  .comment-container {
+    display: none;
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+  
+}

data/templates/project/widgets/graph/graph.coffee

@@ -1,26 +1,35 @@
 class Dashing.Graph extends Dashing.Widget
 
   @accessor 'current', ->
+    return @get('displayedValue') if @get('displayedValue')
     points = @get('points')
     if points
       points[points.length - 1].y
 
   ready: ->
+    container = $(@node).parent()
+    # Gross hacks. Let's fix this.
+    width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
+    height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
     @graph = new Rickshaw.Graph(
       element: @node
-      width: $(@node).parent().width()
+      width: width
+      height: height
       series: [
         {
         color: "#fff",
-        data: [{ x: 0, y: 0}]
+        data: [{x:0, y:0}]
         }
       ]
     )
+
+    @graph.series[0].data = @get('points') if @get('points')
+
     x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph)
+    y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
     @graph.render()
 
   onData: (data) ->
-    super
     if @graph
       @graph.series[0].data = data.points
       @graph.render()