dashing 1.0 → 1.0.1

data/README.md

@@ -1 +1,8 @@
-Check out the [Homepage](http://shopify.github.com/dashing)
+# [Dashing](http://shopify.github.com/dashing)
+
+Dashing is a Sinatra based framework that lets you build beautiful dashboards. It looks especially great on TVs.
+
+[Check out the homepage](http://shopify.github.com/dashing).
+
+# License
+Distributed under the [MIT license](https://github.com/Shopify/dashing/blob/master/MIT-LICENSE)

data/javascripts/dashing.coffee

@@ -44,8 +44,10 @@ class Dashing.Widget extends Batman.View
 
   @accessor 'updatedAtMessage', ->
     if updatedAt = @get('updatedAt')
-      timestamp = updatedAt.toString().match(/\d*:\d*/)[0]
-      "Last updated at #{timestamp}"
+      timestamp = new Date(updatedAt * 1000)
+      hours = timestamp.getHours()
+      minutes = ("0" + timestamp.getMinutes()).slice(-2)
+      "Last updated at #{hours}:#{minutes}"
 
   @::on 'ready', ->
     Dashing.Widget.fire 'ready'
@@ -70,7 +72,7 @@ Dashing.AnimatedValue =
         num = parseFloat(num)
         up = to > num
         num_interval = Math.abs(num - to) / 90
-        @[timer] = 
+        @[timer] =
           setInterval =>
             num = if up then Math.ceil(num+num_interval) else Math.floor(num-num_interval)
             if (up && num > to) || (!up && num < to)
@@ -80,7 +82,8 @@ Dashing.AnimatedValue =
               delete @[timer]
             @[k] = num
             @set k, to
-      @[k] = num    
+          , 10
+      @[k] = num
 
 Dashing.widgets = widgets = {}
 Dashing.lastEvents = lastEvents = {}
@@ -97,12 +100,13 @@ 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.receiveData(data)
+  if lastEvents[data.id]?.updatedAt != data.updatedAt
+    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.receiveData(data)
 
 
 $(document).ready ->

data/lib/dashing.rb

@@ -81,7 +81,7 @@ end
 
 def send_event(id, body)
   body["id"] = id
-  body["updatedAt"] = Time.now
+  body["updatedAt"] = Time.now.to_i
   event = format_event(body.to_json)
   settings.history[id] = event
   settings.connections.each { |out| out << event }

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

@@ -22,3 +22,4 @@ Dashing.on 'ready', ->
       avoid_overlapped_widgets: !Dashing.customGridsterLayout
       draggable:
         stop: Dashing.showGridsterInstructions
+        start: -> Dashing.currentWidgetPositions = Dashing.getWidgetPositions()

data/templates/project/assets/javascripts/dashing.gridster.coffee

@@ -13,20 +13,25 @@ Dashing.gridsterLayout = (positions) ->
     $(widget).attr('data-row', positions[index].row)
     $(widget).attr('data-col', positions[index].col)
 
+Dashing.getWidgetPositions = ->
+  $(".gridster ul:first").gridster().data('gridster').serialize()
+
 Dashing.showGridsterInstructions = ->
-    data = $(".gridster ul:first").gridster().data('gridster').serialize()
+  newWidgetPositions = Dashing.getWidgetPositions()
+
+  unless JSON.stringify(newWidgetPositions) == JSON.stringify(Dashing.currentWidgetPositions)
+    Dashing.currentWidgetPositions = newWidgetPositions
     $('#save-gridster').slideDown()
     $('#gridster-code').text("
       <script type='text/javascript'>\n
       $(function() {\n
-      \ \ Dashing.gridsterLayout('#{JSON.stringify(data)}')\n
+      \ \ Dashing.gridsterLayout('#{JSON.stringify(Dashing.currentWidgetPositions)}')\n
       });\n
       </script>
     ")
 
-
 $ ->
   $('#save-gridster').leanModal()
 
   $('#save-gridster').click ->
-    $('#save-gridster').slideUp()
+    $('#save-gridster').slideUp()

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

@@ -6,8 +6,8 @@ $background-color:  #dc5945;
 // ----------------------------------------------------------------------------
 // Widget-clock styles
 // ----------------------------------------------------------------------------
-.widget-clock { 
+.widget-clock {
 
   background-color: $background-color;
-  
-}
+
+}

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

@@ -21,4 +21,4 @@ class Dashing.Comments extends Dashing.Widget
       @commentElem.fadeOut =>
         @currentIndex = (@currentIndex + 1) % comments.length
         @set 'current_comment', comments[@currentIndex]
-        @commentElem.fadeIn()
+        @commentElem.fadeIn()

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

@@ -1,7 +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> 
+  <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>
+<p class="more-info" data-bind="moreinfo | raw"></p>

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

@@ -9,11 +9,11 @@ $moreinfo-color:    rgba(255, 255, 255, 0.7);
 // ----------------------------------------------------------------------------
 // Widget-comment styles
 // ----------------------------------------------------------------------------
-.widget-comments { 
+.widget-comments {
 
   background-color: $background-color;
-  
-  .title { 
+
+  .title {
     color: $title-color;
     margin-bottom: 15px;
   }
@@ -29,5 +29,5 @@ $moreinfo-color:    rgba(255, 255, 255, 0.7);
   .more-info {
     color: $moreinfo-color;
   }
-  
-}
+
+}

data/templates/project/widgets/graph/graph.html

@@ -2,4 +2,4 @@
 
 <h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2>
 
-<p class="more-info" data-bind="moreinfo"></p>
+<p class="more-info" data-bind="moreinfo"></p>

data/templates/project/widgets/graph/graph.scss

@@ -11,7 +11,7 @@ $tick-color:        rgba(0, 0, 0, 0.4);
 // ----------------------------------------------------------------------------
 // Widget-graph styles
 // ----------------------------------------------------------------------------
-.widget-graph { 
+.widget-graph {
 
   background-color: $background-color;
   position: relative;
@@ -30,7 +30,7 @@ $tick-color:        rgba(0, 0, 0, 0.4);
     z-index: 99;
   }
 
-  .title { 
+  .title {
     color: $title-color;
   }
 
@@ -51,7 +51,7 @@ $tick-color:        rgba(0, 0, 0, 0.4);
       padding-bottom: 3px;
     }
   }
-  
+
   .y_ticks {
     font-size: 20px;
     fill: $tick-color;
@@ -62,4 +62,4 @@ $tick-color:        rgba(0, 0, 0, 0.4);
     display: none;
   }
 
-}
+}

data/templates/project/widgets/iframe/iframe.coffee

@@ -6,4 +6,4 @@ class Dashing.Iframe extends Dashing.Widget
   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.
+    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

data/templates/project/widgets/iframe/iframe.html

@@ -1 +1 @@
-<iframe data-bind-src="url" frameborder=0></iframe>
+<iframe data-bind-src="url" frameborder=0></iframe>

data/templates/project/widgets/iframe/iframe.scss

@@ -1,8 +1,8 @@
-.widget-iframe { 
+.widget-iframe {
   padding: 3px 0px 0px 0px !important;
 
   iframe {
     width: 100%;
     height: 100%;
   }
-}
+}

data/templates/project/widgets/image/image.coffee

@@ -6,4 +6,4 @@ class Dashing.Image extends Dashing.Widget
   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.
+    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

data/templates/project/widgets/image/image.html

@@ -1 +1 @@
-<img data-bind-src="image | prepend '/assets'" data-bind-width="width"/>
+<img data-bind-src="image | prepend '/assets'" data-bind-width="width"/>

data/templates/project/widgets/image/image.scss

@@ -6,8 +6,8 @@ $background-color:  #4b4b4b;
 // ----------------------------------------------------------------------------
 // Widget-image styles
 // ----------------------------------------------------------------------------
-.widget-image { 
+.widget-image {
 
   background-color: $background-color;
 
-}
+}

data/templates/project/widgets/list/list.coffee

@@ -3,4 +3,4 @@ class Dashing.List extends Dashing.Widget
     if @get('unordered')
       $(@node).find('ol').remove()
     else
-      $(@node).find('ul').remove()
+      $(@node).find('ul').remove()

data/templates/project/widgets/list/list.html

@@ -15,4 +15,4 @@
 </ul>
 
 <p class="more-info" data-bind="moreinfo"></p>
-<p class="updated-at" data-bind="updatedAtMessage"></p>
+<p class="updated-at" data-bind="updatedAtMessage"></p>

data/templates/project/widgets/list/list.scss

@@ -11,12 +11,12 @@ $moreinfo-color:    rgba(255, 255, 255, 0.7);
 // ----------------------------------------------------------------------------
 // Widget-list styles
 // ----------------------------------------------------------------------------
-.widget-list { 
+.widget-list {
 
   background-color: $background-color;
   vertical-align: top;
 
-  .title { 
+  .title {
     color: $title-color;
   }
 
@@ -39,7 +39,7 @@ $moreinfo-color:    rgba(255, 255, 255, 0.7);
   }
 
   .label {
-    color: $label-color;    
+    color: $label-color;
   }
 
   .value {
@@ -57,4 +57,4 @@ $moreinfo-color:    rgba(255, 255, 255, 0.7);
     color: $moreinfo-color;
   }
 
-}
+}

data/templates/project/widgets/meter/meter.coffee

@@ -11,4 +11,4 @@ class Dashing.Meter extends Dashing.Widget
     meter = $(@node).find(".meter")
     meter.attr("data-bgcolor", meter.css("background-color"))
     meter.attr("data-fgcolor", meter.css("color"))
-    meter.knob()
+    meter.knob()

data/templates/project/widgets/meter/meter.html

@@ -4,4 +4,4 @@
 
 <p class="more-info" data-bind="moreinfo"></p>
 
-<p class="updated-at" data-bind="updatedAtMessage"></p>
+<p class="updated-at" data-bind="updatedAtMessage"></p>

data/templates/project/widgets/meter/meter.scss

@@ -11,16 +11,16 @@ $meter-background:  darken($background-color, 15%);
 // ----------------------------------------------------------------------------
 // Widget-meter styles
 // ----------------------------------------------------------------------------
-.widget-meter { 
+.widget-meter {
 
   background-color: $background-color;
-  
-  input.meter { 
+
+  input.meter {
     background-color: $meter-background;
     color: #fff;
   }
 
-  .title { 
+  .title {
     color: $title-color;
   }
 
@@ -31,5 +31,5 @@ $meter-background:  darken($background-color, 15%);
   .updated-at {
     color: rgba(0, 0, 0, 0.3);
   }
-  
-}
+
+}

data/templates/project/widgets/number/number.coffee

@@ -17,4 +17,4 @@ class Dashing.Number extends Dashing.Widget
 
   onData: (data) ->
     if data.status
-      $(@get('node')).addClass("status-#{data.status}")
+      $(@get('node')).addClass("status-#{data.status}")

data/templates/project/widgets/number/number.html

@@ -2,7 +2,7 @@
 
 <h2 class="value" data-bind="current | shortenedNumber | prepend prefix"></h2>
 
-<p class="change-rate"> 
+<p class="change-rate">
   <i data-bind-class="arrow"></i><span data-bind="difference"></span>
 </p>
 

data/templates/project/widgets/number/number.scss

@@ -10,11 +10,11 @@ $moreinfo-color:    rgba(255, 255, 255, 0.7);;
 // ----------------------------------------------------------------------------
 // Widget-number styles
 // ----------------------------------------------------------------------------
-.widget-number { 
+.widget-number {
 
   background-color: $background-color;
-  
-  .title { 
+
+  .title {
     color: $title-color;
   }
 
@@ -35,5 +35,5 @@ $moreinfo-color:    rgba(255, 255, 255, 0.7);;
   .updated-at {
     color: rgba(0, 0, 0, 0.3);
   }
-  
-}
+
+}

data/templates/project/widgets/text/text.coffee

@@ -1 +1 @@
-class Dashing.Text extends Dashing.Widget
+class Dashing.Text extends Dashing.Widget

data/templates/project/widgets/text/text.html

@@ -4,4 +4,4 @@
 
 <p class="more-info" data-bind="moreinfo | raw"></p>
 
-<p class="updated-at" data-bind="updatedAtMessage"></p>
+<p class="updated-at" data-bind="updatedAtMessage"></p>

data/templates/project/widgets/text/text.scss

@@ -9,11 +9,11 @@ $moreinfo-color:    rgba(255, 255, 255, 0.7);
 // ----------------------------------------------------------------------------
 // Widget-text styles
 // ----------------------------------------------------------------------------
-.widget-text { 
+.widget-text {
 
   background-color: $background-color;
-  
-  .title { 
+
+  .title {
     color: $title-color;
   }
 
@@ -24,9 +24,9 @@ $moreinfo-color:    rgba(255, 255, 255, 0.7);
   .updated-at {
     color: rgba(255, 255, 255, 0.7);
   }
-  
+
 
   &.large h3 {
     font-size: 65px;
   }
-}
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dashing
 version: !ruby/object:Gem::Version
-  version: '1.0'
+  version: 1.0.1
   prerelease: 
 platform: ruby
 authors:
@@ -13,7 +13,7 @@ date: 2012-10-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &70129949213620 !ruby/object:Gem::Requirement
+  requirement: !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,10 +21,15 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70129949213620
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: coffee-script
-  requirement: &70129949213180 !ruby/object:Gem::Requirement
+  requirement: !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -32,10 +37,15 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70129949213180
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: sinatra
-  requirement: &70129949212760 !ruby/object:Gem::Requirement
+  requirement: !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -43,10 +53,15 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70129949212760
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: sinatra-contrib
-  requirement: &70129949261560 !ruby/object:Gem::Requirement
+  requirement: !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -54,10 +69,15 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70129949261560
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: thin
-  requirement: &70129949261140 !ruby/object:Gem::Requirement
+  requirement: !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -65,10 +85,15 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70129949261140
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: rufus-scheduler
-  requirement: &70129949260680 !ruby/object:Gem::Requirement
+  requirement: !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -76,10 +101,15 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70129949260680
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: thor
-  requirement: &70129949260240 !ruby/object:Gem::Requirement
+  requirement: !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -87,10 +117,15 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70129949260240
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: sprockets
-  requirement: &70129949259680 !ruby/object:Gem::Requirement
+  requirement: !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -98,7 +133,12 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70129949259680
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 description: This framework lets you build & easily layout dashboards with your own
   custom widgets. Use it to make a status boards for your ops team, or use it to track
   signups, conversion rates, or whatever else metrics you'd like to see in one spot.
@@ -177,8 +217,7 @@ files:
 - templates/widget/%name%/%name%.scss.tt
 - templates/project/lib/.empty_directory
 - lib/dashing.rb
-- !binary |-
-  YmluL2Rhc2hpbmc=
+- bin/dashing
 homepage: http://shopify.github.com/dashing
 licenses: []
 post_install_message: 
@@ -199,8 +238,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.11
+rubygems_version: 1.8.23
 signing_key: 
 specification_version: 3
 summary: The exceptionally handsome dashboard framework.
 test_files: []
+has_rdoc: