Added new widgets, and made them more flexible. Ready for 0.1.3!

38 files changed, 364 insertions, 84 deletions

diff --git a/templates/dashboard/%name%.erb.tt b/templates/dashboard/%name%.erb.tt
index d96e164..aa735d6 100644
--- a/templates/dashboard/%name%.erb.tt
+++ b/templates/dashboard/%name%.erb.tt
@@ -1,4 +1,3 @@
-<% content_for(:title) { "My super sweet dashboard" } %>
 <div class="gridster">
   <ul>
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
diff --git a/templates/project/Gemfile b/templates/project/Gemfile
index 7724b81..75cc574 100644
--- a/templates/project/Gemfile
+++ b/templates/project/Gemfile
@@ -1,3 +1,3 @@
 source :rubygems
 
-gem 'dashing', '0.1.0', :git => 'git@github.com:Shopify/dashing.git'
\ No newline at end of file
+gem 'dashing'
\ No newline at end of file
diff --git a/templates/project/README.md b/templates/project/README.md
index e69de29..260ac2a 100644
--- a/templates/project/README.md
+++ b/templates/project/README.md
@@ -0,0 +1 @@
+Check out http://shopify.github.com/dashing for more information.
\ No newline at end of file
diff --git a/templates/project/assets/images/logo.png b/templates/project/assets/images/logo.png
new file mode 100644
index 0000000..aabf199
--- /dev/null
+++ b/templates/project/assets/images/logo.png
diff --git a/templates/project/assets/javascripts/application.coffee b/templates/project/assets/javascripts/application.coffee
index c84aa05..be030e1 100644
--- a/templates/project/assets/javascripts/application.coffee
+++ b/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
diff --git a/templates/project/assets/stylesheets/application.scss b/templates/project/assets/stylesheets/application.scss
index 7c5f300..ea2cd86 100644
--- a/templates/project/assets/stylesheets/application.scss
+++ b/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; }
\ No newline at end of file
+.clearfix { zoom: 1; }
+
diff --git a/templates/project/dashboards/sample.erb b/templates/project/dashboards/sample.erb
index 453a969..ab5cb00 100644
--- a/templates/project/dashboards/sample.erb
+++ b/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>
diff --git a/templates/project/dashboards/sampletv.erb b/templates/project/dashboards/sampletv.erb
new file mode 100644
index 0000000..b52eed7
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/templates/project/jobs/buzzwords.rb b/templates/project/jobs/buzzwords.rb
index 109dc60..2668d5a 100644
--- a/templates/project/jobs/buzzwords.rb
+++ b/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
\ No newline at end of file
diff --git a/templates/project/jobs/convergence.rb b/templates/project/jobs/convergence.rb
index f66b6a5..1da2a5b 100644
--- a/templates/project/jobs/convergence.rb
+++ b/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) }
diff --git a/templates/project/jobs/sample.rb b/templates/project/jobs/sample.rb
index 2314dc2..1fe008d 100644
--- a/templates/project/jobs/sample.rb
+++ b/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
\ No newline at end of file
diff --git a/templates/project/jobs/twitter.rb b/templates/project/jobs/twitter.rb
new file mode 100644
index 0000000..9359a89
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/templates/project/public/.empty_directory b/templates/project/public/.empty_directory
deleted file mode 100644
index 3da7f49..0000000
--- a/templates/project/public/.empty_directory
+++ /dev/null
@@ -1 +0,0 @@
-.empty_directory
\ No newline at end of file
diff --git a/templates/project/widgets/clock/clock.coffee b/templates/project/widgets/clock/clock.coffee
new file mode 100644
index 0000000..cd6b116
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/templates/project/widgets/clock/clock.html b/templates/project/widgets/clock/clock.html
new file mode 100644
index 0000000..06759d4
--- /dev/null
+++ b/templates/project/widgets/clock/clock.html
@@ -0,0 +1,2 @@
+<h1 data-bind="date"></h1>
+<h2 data-bind="time"></h2>
\ No newline at end of file
diff --git a/templates/project/widgets/clock/clock.scss b/templates/project/widgets/clock/clock.scss
new file mode 100644
index 0000000..831ea94
--- /dev/null
+++ b/templates/project/widgets/clock/clock.scss
@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #dc5945;
+
+// ----------------------------------------------------------------------------
+// Widget-clock styles
+// ----------------------------------------------------------------------------
+.widget-clock { 
+
+  background-color: $background-color;
+  
+}
\ No newline at end of file
diff --git a/templates/project/widgets/comments/comments.coffee b/templates/project/widgets/comments/comments.coffee
new file mode 100644
index 0000000..1e81b56
--- /dev/null
+++ b/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()
\ No newline at end of file
diff --git a/templates/project/widgets/comments/comments.html b/templates/project/widgets/comments/comments.html
new file mode 100644
index 0000000..844800f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/templates/project/widgets/comments/comments.scss b/templates/project/widgets/comments/comments.scss
new file mode 100644
index 0000000..40e2a6b
--- /dev/null
+++ b/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;
+  }
+  
+}
\ No newline at end of file
diff --git a/templates/project/widgets/graph/graph.coffee b/templates/project/widgets/graph/graph.coffee
index 8b56a87..9b2eeec 100644
--- a/templates/project/widgets/graph/graph.coffee
+++ b/templates/project/widgets/graph/graph.coffee
@@ -1,22 +1,32 @@
 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) ->
diff --git a/templates/project/widgets/graph/graph.html b/templates/project/widgets/graph/graph.html
index 8680efb..d1794db 100644
--- a/templates/project/widgets/graph/graph.html
+++ b/templates/project/widgets/graph/graph.html
@@ -1,5 +1,5 @@
 <h1 class="title" data-bind="title"></h1>
 
-<h2 class="value" data-bind="current | prettyNumber"></h2>
+<h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2>
 
-<p class="text-moreinfo" data-bind="moreinfo"></p>
\ No newline at end of file
+<p class="more-info" data-bind="moreinfo"></p>
\ No newline at end of file
diff --git a/templates/project/widgets/graph/graph.scss b/templates/project/widgets/graph/graph.scss
index f2a1e21..71cd4d4 100644
--- a/templates/project/widgets/graph/graph.scss
+++ b/templates/project/widgets/graph/graph.scss
@@ -1,13 +1,12 @@
 // ----------------------------------------------------------------------------
 // Sass declarations
 // ----------------------------------------------------------------------------
-$background-color:  #2e864f;
-$value-color:       #fff;
+$background-color:  #dc5945;
 
-$title-color:       lighten($background-color, 75%);
-$moreinfo-color:    lighten($background-color, 45%);
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.3);
+$tick-color:        rgba(0, 0, 0, 0.4);
 
-$graph_color:       lighten($background-color, 75%);
 
 // ----------------------------------------------------------------------------
 // Widget-graph styles
@@ -17,14 +16,13 @@ $graph_color:       lighten($background-color, 75%);
   background-color: $background-color;
   position: relative;
 
+
   svg {
-    color: $graph_color;
+    position: absolute;
     opacity: 0.4;
     fill-opacity: 0.4;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    left: 0px;
+    top: 0px;
   }
 
   .title, .value {
@@ -36,7 +34,7 @@ $graph_color:       lighten($background-color, 75%);
     color: $title-color;
   }
 
-  .text-moreinfo {
+  .more-info {
     color: $moreinfo-color;
     font-weight: 600;
     font-size: 20px;
@@ -46,6 +44,22 @@ $graph_color:       lighten($background-color, 75%);
   .x_tick {
     position: absolute;
     bottom: 0;
+    .title {
+      font-size: 20px;
+      color: $tick-color;
+      opacity: 0.5;
+      padding-bottom: 3px;
+    }
+  }
+  
+  .y_ticks {
+    font-size: 20px;
+    fill: $tick-color;
+    fill-opacity: 1;
+  }
+
+  .domain {
+    display: none;
   }
 
 }
\ No newline at end of file
diff --git a/templates/project/widgets/iframe/iframe.coffee b/templates/project/widgets/iframe/iframe.coffee
new file mode 100644
index 0000000..4d4ca9a
--- /dev/null
+++ b/templates/project/widgets/iframe/iframe.coffee
@@ -0,0 +1,9 @@
+class Dashing.Iframe extends Dashing.Widget
+
+  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.
\ No newline at end of file
diff --git a/templates/project/widgets/iframe/iframe.html b/templates/project/widgets/iframe/iframe.html
new file mode 100644
index 0000000..bfccba4
--- /dev/null
+++ b/templates/project/widgets/iframe/iframe.html
@@ -0,0 +1 @@
+<iframe data-bind-src="url" frameborder=0></iframe>
\ No newline at end of file
diff --git a/templates/project/widgets/iframe/iframe.scss b/templates/project/widgets/iframe/iframe.scss
new file mode 100644
index 0000000..7c757bf
--- /dev/null
+++ b/templates/project/widgets/iframe/iframe.scss
@@ -0,0 +1,8 @@
+.widget-iframe { 
+  padding: 3px 0px 0px 0px !important;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
\ No newline at end of file
diff --git a/templates/project/widgets/image/image.coffee b/templates/project/widgets/image/image.coffee
new file mode 100644
index 0000000..418e385
--- /dev/null
+++ b/templates/project/widgets/image/image.coffee
@@ -0,0 +1,9 @@
+class Dashing.Image extends Dashing.Widget
+
+  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.
\ No newline at end of file
diff --git a/templates/project/widgets/image/image.html b/templates/project/widgets/image/image.html
new file mode 100644
index 0000000..cf2b228
--- /dev/null
+++ b/templates/project/widgets/image/image.html
@@ -0,0 +1 @@
+<img data-bind-src="image | prepend '/assets'" data-bind-width="width"/>
\ No newline at end of file
diff --git a/templates/project/widgets/image/image.scss b/templates/project/widgets/image/image.scss
new file mode 100644
index 0000000..10ca81d
--- /dev/null
+++ b/templates/project/widgets/image/image.scss
@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #4b4b4b;
+
+// ----------------------------------------------------------------------------
+// Widget-image styles
+// ----------------------------------------------------------------------------
+.widget-image { 
+
+  background-color: $background-color;
+
+}
\ No newline at end of file
diff --git a/templates/project/widgets/list/list.coffee b/templates/project/widgets/list/list.coffee
index 3ca892b..3cbf7a1 100644
--- a/templates/project/widgets/list/list.coffee
+++ b/templates/project/widgets/list/list.coffee
@@ -1,13 +1,6 @@
 class Dashing.List extends Dashing.Widget
-  @accessor 'current', Dashing.AnimatedValue
-
-  @accessor 'arrow', ->
-    if @get('last')
-      if parseInt(@get('current')) > parseInt(@get('last')) then 'arrow-up' else 'arrow-down'
-
   ready: ->
-    Batman.setImmediate =>
-      if @get('unordered')
-        $(@node).find('ol').remove()
-      else
-        $(@node).find('ul').remove()
\ No newline at end of file
+    if @get('unordered')
+      $(@node).find('ol').remove()
+    else
+      $(@node).find('ul').remove()
\ No newline at end of file
diff --git a/templates/project/widgets/list/list.html b/templates/project/widgets/list/list.html
index cc90d42..86752bf 100644
--- a/templates/project/widgets/list/list.html
+++ b/templates/project/widgets/list/list.html
@@ -12,4 +12,7 @@
     <span class="label" data-bind="item.label"></span>
     <span class="value" data-bind="item.value"></span>
   </li>
-</ul>
\ No newline at end of file
+</ul>
+
+<p class="more-info" data-bind="moreinfo"></p>
+<p class="updated-at" data-bind="updatedAtMessage"></p>
\ No newline at end of file
diff --git a/templates/project/widgets/list/list.scss b/templates/project/widgets/list/list.scss
index 098200d..90b6c84 100644
--- a/templates/project/widgets/list/list.scss
+++ b/templates/project/widgets/list/list.scss
@@ -1,12 +1,12 @@
 // ----------------------------------------------------------------------------
 // Sass declarations
 // ----------------------------------------------------------------------------
-
 $background-color:  #12b0c5;
 $value-color:       #fff;
 
-$title-color:       lighten($background-color, 45%);
-$label-color:       lighten($background-color, 45%);
+$title-color:       rgba(255, 255, 255, 0.7);
+$label-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
 
 // ----------------------------------------------------------------------------
 // Widget-list styles
@@ -49,4 +49,12 @@ $label-color:       lighten($background-color, 45%);
     color: $value-color;
   }
 
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
 }
\ No newline at end of file
diff --git a/templates/project/widgets/meter/meter.html b/templates/project/widgets/meter/meter.html
index 6051d2f..7d51b15 100644
--- a/templates/project/widgets/meter/meter.html
+++ b/templates/project/widgets/meter/meter.html
@@ -2,4 +2,6 @@
 
 <input class="meter" data-angleOffset=-125 data-angleArc=250 data-width=200 data-readOnly=true data-bind-value="value | shortenedNumber" data-bind-data-min="min" data-bind-data-max="max">
 
-<p class="text-moreinfo" data-bind="moreinfo"></p>
\ No newline at end of file
+<p class="more-info" data-bind="moreinfo"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>
\ No newline at end of file
diff --git a/templates/project/widgets/meter/meter.scss b/templates/project/widgets/meter/meter.scss
index dec0cc6..98cf638 100644
--- a/templates/project/widgets/meter/meter.scss
+++ b/templates/project/widgets/meter/meter.scss
@@ -1,15 +1,12 @@
 // ----------------------------------------------------------------------------
 // Sass declarations
 // ----------------------------------------------------------------------------
-
 $background-color:  #9c4274;
-$value-color:       #fff;
 
-$title-color:       lighten($background-color, 75%);
-$moreinfo-color:    lighten($background-color, 45%);
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.3);
 
-$meter-background:  darken($background-color, 10%);
-$meter-foreground:  lighten($background-color, 75%);
+$meter-background:  darken($background-color, 15%);
 
 // ----------------------------------------------------------------------------
 // Widget-meter styles
@@ -20,18 +17,19 @@ $meter-foreground:  lighten($background-color, 75%);
   
   input.meter { 
     background-color: $meter-background;
-    color: $meter-foreground;
+    color: #fff;
   }
 
   .title { 
     color: $title-color;
   }
 
-  .text-moreinfo {
+  .more-info {
     color: $moreinfo-color;
-    font-weight: 600;
-    font-size: 20px;
-    margin-top: 0;
+  }
+
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
   }
   
 }
\ No newline at end of file
diff --git a/templates/project/widgets/number/number.coffee b/templates/project/widgets/number/number.coffee
index 78e7523..46cd6c2 100644
--- a/templates/project/widgets/number/number.coffee
+++ b/templates/project/widgets/number/number.coffee
@@ -8,17 +8,13 @@ class Dashing.Number extends Dashing.Widget
       if last != 0
         diff = Math.abs(Math.round((current - last) / last * 100))
         "#{diff}%"
+    else
+      ""
 
   @accessor 'arrow', ->
     if @get('last')
       if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down'
 
-  @accessor 'statusStyle', ->
-    "status-#{@get('status')}"
-
-  @accessor 'needsAttention', ->
-    @get('status') == 'warning' || @get('status') == 'danger'
-
   onData: (data) ->
     if data.status
       $(@get('node')).addClass("status-#{data.status}")
\ No newline at end of file
diff --git a/templates/project/widgets/number/number.html b/templates/project/widgets/number/number.html
index 6e9a03e..d7eeab9 100644
--- a/templates/project/widgets/number/number.html
+++ b/templates/project/widgets/number/number.html
@@ -1,9 +1,11 @@
-<h1 class="title"><i data-showif="needsAttention" class="icon-warning-sign"></i><span data-bind="title"></span></h1>
+<h1 class="title" data-bind="title"></h1>
 
-<h2 class="value" data-bind="current | prettyNumber"></h2>
+<h2 class="value" data-bind="current | shortenedNumber | prepend prefix"></h2>
 
 <p class="change-rate"> 
-  <i data-bind-class="arrow"></i><span data-bind="difference">50%</span>
+  <i data-bind-class="arrow"></i><span data-bind="difference"></span>
 </p>
 
-<p class="text-moreinfo" data-bind="moreinfo">2012-07-26 10:59AM</p>
\ No newline at end of file
+<p class="more-info" data-bind="moreinfo | raw"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>
diff --git a/templates/project/widgets/number/number.scss b/templates/project/widgets/number/number.scss
index d134561..608624b 100644
--- a/templates/project/widgets/number/number.scss
+++ b/templates/project/widgets/number/number.scss
@@ -1,11 +1,11 @@
 // ----------------------------------------------------------------------------
 // Sass declarations
 // ----------------------------------------------------------------------------
-$background-color:  #00b1a4;
+$background-color:  #47bbb3;
 $value-color:       #fff;
 
-$title-color:       lighten($background-color, 75%);
-$moreinfo-color:    lighten($background-color, 45%);
+$title-color:       rgba(255, 255, 255, 0.7);;
+$moreinfo-color:    rgba(255, 255, 255, 0.7);;
 
 // ----------------------------------------------------------------------------
 // Widget-number styles
@@ -23,13 +23,17 @@ $moreinfo-color:    lighten($background-color, 45%);
   }
 
   .change-rate {
-    font-weight: 300;
+    font-weight: 500;
     font-size: 30px;
     color: $value-color;
   }
 
-  .text-moreinfo {
+  .more-info {
     color: $moreinfo-color;
   }
+
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
+  }
   
 }
\ No newline at end of file
diff --git a/templates/project/widgets/text/text.html b/templates/project/widgets/text/text.html
index 02bd0f7..45322ca 100644
--- a/templates/project/widgets/text/text.html
+++ b/templates/project/widgets/text/text.html
@@ -1,5 +1,7 @@
 <h1 class="title" data-bind="title"></h1>
 
-<h3 data-bind="text"></h3>
+<h3 data-bind="text | raw"></h3>
 
-<p class="text-moreinfo" data-bind="moreinfo">2012-07-26 10:59AM</p>
\ No newline at end of file
+<p class="more-info" data-bind="moreinfo | raw"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>
\ No newline at end of file
diff --git a/templates/project/widgets/text/text.scss b/templates/project/widgets/text/text.scss
index 4293602..4e6c6e3 100644
--- a/templates/project/widgets/text/text.scss
+++ b/templates/project/widgets/text/text.scss
@@ -1,11 +1,10 @@
 // ----------------------------------------------------------------------------
 // Sass declarations
 // ----------------------------------------------------------------------------
-$background-color:  #ec663c;;
-$value-color:       #fff;
+$background-color:  #ec663c;
 
-$title-color:       lighten($background-color, 40%);
-$moreinfo-color:    lighten($background-color, 30%);
+$title-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
 
 // ----------------------------------------------------------------------------
 // Widget-text styles
@@ -18,8 +17,16 @@ $moreinfo-color:    lighten($background-color, 30%);
     color: $title-color;
   }
 
-  .text-moreinfo {
+  .more-info {
     color: $moreinfo-color;
   }
+
+  .updated-at {
+    color: rgba(255, 255, 255, 0.7);
+  }
   
+
+  &.large h3 {
+    font-size: 65px;
+  }
 }
\ No newline at end of file