dashing 0.1.0 → 0.1.2

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

data/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;
   }
 
 }

data/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.

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

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

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

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

data/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.

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

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

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

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

data/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()
+    if @get('unordered')
+      $(@node).find('ol').remove()
+    else
+      $(@node).find('ul').remove()

data/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>
+</ul>
+
+<p class="more-info" data-bind="moreinfo"></p>
+<p class="updated-at" data-bind="updatedAtMessage"></p>

data/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;
+  }
+
 }

data/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>
+<p class="more-info" data-bind="moreinfo"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>

data/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);
   }
   
 }

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

@@ -8,18 +8,16 @@ 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) ->
-    super
     if data.status
       $(@get('node')).addClass("status-#{data.status}")

data/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>
 
-<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>
+<p class="more-info" data-bind="moreinfo | raw"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>

data/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);
+  }
   
 }

data/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>
+<p class="more-info" data-bind="moreinfo | raw"></p>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>

data/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;
+  }
 }

data/templates/widget/%name%/%name%.coffee.tt

@@ -6,5 +6,4 @@ class Dashing.<%= Thor::Util.camel_case(name) %> 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.
-    super
+    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dashing
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-07-24 00:00:00.000000000 Z
+date: 2012-10-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
-  requirement: &70362542014960 !ruby/object:Gem::Requirement
+  requirement: &70210076653740 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,10 +21,10 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70362542014960
+  version_requirements: *70210076653740
 - !ruby/object:Gem::Dependency
   name: coffee-script
-  requirement: &70362542014520 !ruby/object:Gem::Requirement
+  requirement: &70210076653300 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -32,10 +32,10 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70362542014520
+  version_requirements: *70210076653300
 - !ruby/object:Gem::Dependency
   name: sinatra
-  requirement: &70362541997720 !ruby/object:Gem::Requirement
+  requirement: &70210076652860 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -43,10 +43,10 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70362541997720
+  version_requirements: *70210076652860
 - !ruby/object:Gem::Dependency
   name: sinatra-contrib
-  requirement: &70362541997120 !ruby/object:Gem::Requirement
+  requirement: &70210076652420 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -54,10 +54,10 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70362541997120
+  version_requirements: *70210076652420
 - !ruby/object:Gem::Dependency
   name: thin
-  requirement: &70362541996320 !ruby/object:Gem::Requirement
+  requirement: &70210076652000 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -65,10 +65,10 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70362541996320
+  version_requirements: *70210076652000
 - !ruby/object:Gem::Dependency
   name: rufus-scheduler
-  requirement: &70362541995640 !ruby/object:Gem::Requirement
+  requirement: &70210076651580 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -76,10 +76,10 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70362541995640
+  version_requirements: *70210076651580
 - !ruby/object:Gem::Dependency
   name: thor
-  requirement: &70362541995120 !ruby/object:Gem::Requirement
+  requirement: &70210076651160 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -87,10 +87,10 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70362541995120
+  version_requirements: *70210076651160
 - !ruby/object:Gem::Dependency
   name: sprockets
-  requirement: &70362541994400 !ruby/object:Gem::Requirement
+  requirement: &70210076650740 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -98,8 +98,13 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70362541994400
-description: An elegant, simple, beautiful, & flexible framework for creating dashboards.
+  version_requirements: *70210076650740
+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.
+  Included with the framework are ready-made widgets for you to use or customize.
+  All of this code was extracted out of a project at Shopify that displays dashboards
+  on TVs around the office.
 email: daniel.beauchamp@shopify.com
 executables:
 - dashing
@@ -119,6 +124,7 @@ files:
 - templates/project/assets/fonts/fontawesome-webfont.ttf
 - templates/project/assets/fonts/fontawesome-webfont.woff
 - templates/project/assets/images/favicon.ico
+- templates/project/assets/images/logo.png
 - templates/project/assets/javascripts/application.coffee
 - templates/project/assets/javascripts/d3.v2.min.js
 - templates/project/assets/javascripts/dashing.gridster.coffee
@@ -132,14 +138,28 @@ files:
 - templates/project/config.ru
 - templates/project/dashboards/layout.erb
 - templates/project/dashboards/sample.erb
+- templates/project/dashboards/sampletv.erb
 - templates/project/Gemfile
 - templates/project/jobs/buzzwords.rb
 - templates/project/jobs/convergence.rb
 - templates/project/jobs/sample.rb
+- templates/project/jobs/twitter.rb
 - templates/project/README.md
+- templates/project/widgets/clock/clock.coffee
+- templates/project/widgets/clock/clock.html
+- templates/project/widgets/clock/clock.scss
+- templates/project/widgets/comments/comments.coffee
+- templates/project/widgets/comments/comments.html
+- templates/project/widgets/comments/comments.scss
 - templates/project/widgets/graph/graph.coffee
 - templates/project/widgets/graph/graph.html
 - templates/project/widgets/graph/graph.scss
+- templates/project/widgets/iframe/iframe.coffee
+- templates/project/widgets/iframe/iframe.html
+- templates/project/widgets/iframe/iframe.scss
+- templates/project/widgets/image/image.coffee
+- templates/project/widgets/image/image.html
+- templates/project/widgets/image/image.scss
 - templates/project/widgets/list/list.coffee
 - templates/project/widgets/list/list.html
 - templates/project/widgets/list/list.scss
@@ -155,12 +175,10 @@ files:
 - templates/widget/%name%/%name%.coffee.tt
 - templates/widget/%name%/%name%.html
 - templates/widget/%name%/%name%.scss.tt
-- templates/project/lib/.empty_directory
-- templates/project/public/.empty_directory
 - lib/dashing.rb
 - !binary |-
   YmluL2Rhc2hpbmc=
-homepage: http://Dashing.shopify.com
+homepage: http://dashing.shopify.com
 licenses: []
 post_install_message: 
 rdoc_options: []
@@ -183,5 +201,5 @@ rubyforge_project:
 rubygems_version: 1.8.11
 signing_key: 
 specification_version: 3
-summary: A simple & flexible framework for creating dashboards.
+summary: A DIY framework for creating dashboards.
 test_files: []