dashing 1.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. data/README.md +8 -1
  2. data/javascripts/dashing.coffee +14 -10
  3. data/lib/dashing.rb +1 -1
  4. data/templates/project/assets/javascripts/application.coffee +1 -0
  5. data/templates/project/assets/javascripts/dashing.gridster.coffee +9 -4
  6. data/templates/project/widgets/clock/clock.scss +3 -3
  7. data/templates/project/widgets/comments/comments.coffee +1 -1
  8. data/templates/project/widgets/comments/comments.html +2 -2
  9. data/templates/project/widgets/comments/comments.scss +5 -5
  10. data/templates/project/widgets/graph/graph.html +1 -1
  11. data/templates/project/widgets/graph/graph.scss +4 -4
  12. data/templates/project/widgets/iframe/iframe.coffee +1 -1
  13. data/templates/project/widgets/iframe/iframe.html +1 -1
  14. data/templates/project/widgets/iframe/iframe.scss +2 -2
  15. data/templates/project/widgets/image/image.coffee +1 -1
  16. data/templates/project/widgets/image/image.html +1 -1
  17. data/templates/project/widgets/image/image.scss +2 -2
  18. data/templates/project/widgets/list/list.coffee +1 -1
  19. data/templates/project/widgets/list/list.html +1 -1
  20. data/templates/project/widgets/list/list.scss +4 -4
  21. data/templates/project/widgets/meter/meter.coffee +1 -1
  22. data/templates/project/widgets/meter/meter.html +1 -1
  23. data/templates/project/widgets/meter/meter.scss +6 -6
  24. data/templates/project/widgets/number/number.coffee +1 -1
  25. data/templates/project/widgets/number/number.html +1 -1
  26. data/templates/project/widgets/number/number.scss +5 -5
  27. data/templates/project/widgets/text/text.coffee +1 -1
  28. data/templates/project/widgets/text/text.html +1 -1
  29. data/templates/project/widgets/text/text.scss +5 -5
  30. metadata +60 -20
data/README.md CHANGED
@@ -1 +1,8 @@
1
- Check out the [Homepage](http://shopify.github.com/dashing)
1
+ # [Dashing](http://shopify.github.com/dashing)
2
+
3
+ Dashing is a Sinatra based framework that lets you build beautiful dashboards. It looks especially great on TVs.
4
+
5
+ [Check out the homepage](http://shopify.github.com/dashing).
6
+
7
+ # License
8
+ Distributed under the [MIT license](https://github.com/Shopify/dashing/blob/master/MIT-LICENSE)
@@ -44,8 +44,10 @@ class Dashing.Widget extends Batman.View
44
44
 
45
45
  @accessor 'updatedAtMessage', ->
46
46
  if updatedAt = @get('updatedAt')
47
- timestamp = updatedAt.toString().match(/\d*:\d*/)[0]
48
- "Last updated at #{timestamp}"
47
+ timestamp = new Date(updatedAt * 1000)
48
+ hours = timestamp.getHours()
49
+ minutes = ("0" + timestamp.getMinutes()).slice(-2)
50
+ "Last updated at #{hours}:#{minutes}"
49
51
 
50
52
  @::on 'ready', ->
51
53
  Dashing.Widget.fire 'ready'
@@ -70,7 +72,7 @@ Dashing.AnimatedValue =
70
72
  num = parseFloat(num)
71
73
  up = to > num
72
74
  num_interval = Math.abs(num - to) / 90
73
- @[timer] =
75
+ @[timer] =
74
76
  setInterval =>
75
77
  num = if up then Math.ceil(num+num_interval) else Math.floor(num-num_interval)
76
78
  if (up && num > to) || (!up && num < to)
@@ -80,7 +82,8 @@ Dashing.AnimatedValue =
80
82
  delete @[timer]
81
83
  @[k] = num
82
84
  @set k, to
83
- @[k] = num
85
+ , 10
86
+ @[k] = num
84
87
 
85
88
  Dashing.widgets = widgets = {}
86
89
  Dashing.lastEvents = lastEvents = {}
@@ -97,12 +100,13 @@ source.addEventListener 'error', (e)->
97
100
 
98
101
  source.addEventListener 'message', (e) =>
99
102
  data = JSON.parse(e.data)
100
- if Dashing.debugMode
101
- console.log("Received data for #{data.id}", data)
102
- lastEvents[data.id] = data
103
- if widgets[data.id]?.length > 0
104
- for widget in widgets[data.id]
105
- widget.receiveData(data)
103
+ if lastEvents[data.id]?.updatedAt != data.updatedAt
104
+ if Dashing.debugMode
105
+ console.log("Received data for #{data.id}", data)
106
+ lastEvents[data.id] = data
107
+ if widgets[data.id]?.length > 0
108
+ for widget in widgets[data.id]
109
+ widget.receiveData(data)
106
110
 
107
111
 
108
112
  $(document).ready ->
@@ -81,7 +81,7 @@ end
81
81
 
82
82
  def send_event(id, body)
83
83
  body["id"] = id
84
- body["updatedAt"] = Time.now
84
+ body["updatedAt"] = Time.now.to_i
85
85
  event = format_event(body.to_json)
86
86
  settings.history[id] = event
87
87
  settings.connections.each { |out| out << event }
@@ -22,3 +22,4 @@ Dashing.on 'ready', ->
22
22
  avoid_overlapped_widgets: !Dashing.customGridsterLayout
23
23
  draggable:
24
24
  stop: Dashing.showGridsterInstructions
25
+ start: -> Dashing.currentWidgetPositions = Dashing.getWidgetPositions()
@@ -13,20 +13,25 @@ Dashing.gridsterLayout = (positions) ->
13
13
  $(widget).attr('data-row', positions[index].row)
14
14
  $(widget).attr('data-col', positions[index].col)
15
15
 
16
+ Dashing.getWidgetPositions = ->
17
+ $(".gridster ul:first").gridster().data('gridster').serialize()
18
+
16
19
  Dashing.showGridsterInstructions = ->
17
- data = $(".gridster ul:first").gridster().data('gridster').serialize()
20
+ newWidgetPositions = Dashing.getWidgetPositions()
21
+
22
+ unless JSON.stringify(newWidgetPositions) == JSON.stringify(Dashing.currentWidgetPositions)
23
+ Dashing.currentWidgetPositions = newWidgetPositions
18
24
  $('#save-gridster').slideDown()
19
25
  $('#gridster-code').text("
20
26
  <script type='text/javascript'>\n
21
27
  $(function() {\n
22
- \ \ Dashing.gridsterLayout('#{JSON.stringify(data)}')\n
28
+ \ \ Dashing.gridsterLayout('#{JSON.stringify(Dashing.currentWidgetPositions)}')\n
23
29
  });\n
24
30
  </script>
25
31
  ")
26
32
 
27
-
28
33
  $ ->
29
34
  $('#save-gridster').leanModal()
30
35
 
31
36
  $('#save-gridster').click ->
32
- $('#save-gridster').slideUp()
37
+ $('#save-gridster').slideUp()
@@ -6,8 +6,8 @@ $background-color: #dc5945;
6
6
  // ----------------------------------------------------------------------------
7
7
  // Widget-clock styles
8
8
  // ----------------------------------------------------------------------------
9
- .widget-clock {
9
+ .widget-clock {
10
10
 
11
11
  background-color: $background-color;
12
-
13
- }
12
+
13
+ }
@@ -21,4 +21,4 @@ class Dashing.Comments extends Dashing.Widget
21
21
  @commentElem.fadeOut =>
22
22
  @currentIndex = (@currentIndex + 1) % comments.length
23
23
  @set 'current_comment', comments[@currentIndex]
24
- @commentElem.fadeIn()
24
+ @commentElem.fadeIn()
@@ -1,7 +1,7 @@
1
1
  <h1 class="title" data-bind="title"></h1>
2
2
  <div class="comment-container">
3
- <h3><img data-bind-src='current_comment.avatar'/><span data-bind='current_comment.name' class="name"></span></h3>
3
+ <h3><img data-bind-src='current_comment.avatar'/><span data-bind='current_comment.name' class="name"></span></h3>
4
4
  <p class="comment" data-bind='quote'></p>
5
5
  </div>
6
6
 
7
- <p class="more-info" data-bind="moreinfo | raw"></p>
7
+ <p class="more-info" data-bind="moreinfo | raw"></p>
@@ -9,11 +9,11 @@ $moreinfo-color: rgba(255, 255, 255, 0.7);
9
9
  // ----------------------------------------------------------------------------
10
10
  // Widget-comment styles
11
11
  // ----------------------------------------------------------------------------
12
- .widget-comments {
12
+ .widget-comments {
13
13
 
14
14
  background-color: $background-color;
15
-
16
- .title {
15
+
16
+ .title {
17
17
  color: $title-color;
18
18
  margin-bottom: 15px;
19
19
  }
@@ -29,5 +29,5 @@ $moreinfo-color: rgba(255, 255, 255, 0.7);
29
29
  .more-info {
30
30
  color: $moreinfo-color;
31
31
  }
32
-
33
- }
32
+
33
+ }
@@ -2,4 +2,4 @@
2
2
 
3
3
  <h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2>
4
4
 
5
- <p class="more-info" data-bind="moreinfo"></p>
5
+ <p class="more-info" data-bind="moreinfo"></p>
@@ -11,7 +11,7 @@ $tick-color: rgba(0, 0, 0, 0.4);
11
11
  // ----------------------------------------------------------------------------
12
12
  // Widget-graph styles
13
13
  // ----------------------------------------------------------------------------
14
- .widget-graph {
14
+ .widget-graph {
15
15
 
16
16
  background-color: $background-color;
17
17
  position: relative;
@@ -30,7 +30,7 @@ $tick-color: rgba(0, 0, 0, 0.4);
30
30
  z-index: 99;
31
31
  }
32
32
 
33
- .title {
33
+ .title {
34
34
  color: $title-color;
35
35
  }
36
36
 
@@ -51,7 +51,7 @@ $tick-color: rgba(0, 0, 0, 0.4);
51
51
  padding-bottom: 3px;
52
52
  }
53
53
  }
54
-
54
+
55
55
  .y_ticks {
56
56
  font-size: 20px;
57
57
  fill: $tick-color;
@@ -62,4 +62,4 @@ $tick-color: rgba(0, 0, 0, 0.4);
62
62
  display: none;
63
63
  }
64
64
 
65
- }
65
+ }
@@ -6,4 +6,4 @@ class Dashing.Iframe extends Dashing.Widget
6
6
  onData: (data) ->
7
7
  # Handle incoming data
8
8
  # You can access the html node of this widget with `@node`
9
- # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
9
+ # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
@@ -1 +1 @@
1
- <iframe data-bind-src="url" frameborder=0></iframe>
1
+ <iframe data-bind-src="url" frameborder=0></iframe>
@@ -1,8 +1,8 @@
1
- .widget-iframe {
1
+ .widget-iframe {
2
2
  padding: 3px 0px 0px 0px !important;
3
3
 
4
4
  iframe {
5
5
  width: 100%;
6
6
  height: 100%;
7
7
  }
8
- }
8
+ }
@@ -6,4 +6,4 @@ class Dashing.Image extends Dashing.Widget
6
6
  onData: (data) ->
7
7
  # Handle incoming data
8
8
  # You can access the html node of this widget with `@node`
9
- # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
9
+ # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
@@ -1 +1 @@
1
- <img data-bind-src="image | prepend '/assets'" data-bind-width="width"/>
1
+ <img data-bind-src="image | prepend '/assets'" data-bind-width="width"/>
@@ -6,8 +6,8 @@ $background-color: #4b4b4b;
6
6
  // ----------------------------------------------------------------------------
7
7
  // Widget-image styles
8
8
  // ----------------------------------------------------------------------------
9
- .widget-image {
9
+ .widget-image {
10
10
 
11
11
  background-color: $background-color;
12
12
 
13
- }
13
+ }
@@ -3,4 +3,4 @@ class Dashing.List extends Dashing.Widget
3
3
  if @get('unordered')
4
4
  $(@node).find('ol').remove()
5
5
  else
6
- $(@node).find('ul').remove()
6
+ $(@node).find('ul').remove()
@@ -15,4 +15,4 @@
15
15
  </ul>
16
16
 
17
17
  <p class="more-info" data-bind="moreinfo"></p>
18
- <p class="updated-at" data-bind="updatedAtMessage"></p>
18
+ <p class="updated-at" data-bind="updatedAtMessage"></p>
@@ -11,12 +11,12 @@ $moreinfo-color: rgba(255, 255, 255, 0.7);
11
11
  // ----------------------------------------------------------------------------
12
12
  // Widget-list styles
13
13
  // ----------------------------------------------------------------------------
14
- .widget-list {
14
+ .widget-list {
15
15
 
16
16
  background-color: $background-color;
17
17
  vertical-align: top;
18
18
 
19
- .title {
19
+ .title {
20
20
  color: $title-color;
21
21
  }
22
22
 
@@ -39,7 +39,7 @@ $moreinfo-color: rgba(255, 255, 255, 0.7);
39
39
  }
40
40
 
41
41
  .label {
42
- color: $label-color;
42
+ color: $label-color;
43
43
  }
44
44
 
45
45
  .value {
@@ -57,4 +57,4 @@ $moreinfo-color: rgba(255, 255, 255, 0.7);
57
57
  color: $moreinfo-color;
58
58
  }
59
59
 
60
- }
60
+ }
@@ -11,4 +11,4 @@ class Dashing.Meter extends Dashing.Widget
11
11
  meter = $(@node).find(".meter")
12
12
  meter.attr("data-bgcolor", meter.css("background-color"))
13
13
  meter.attr("data-fgcolor", meter.css("color"))
14
- meter.knob()
14
+ meter.knob()
@@ -4,4 +4,4 @@
4
4
 
5
5
  <p class="more-info" data-bind="moreinfo"></p>
6
6
 
7
- <p class="updated-at" data-bind="updatedAtMessage"></p>
7
+ <p class="updated-at" data-bind="updatedAtMessage"></p>
@@ -11,16 +11,16 @@ $meter-background: darken($background-color, 15%);
11
11
  // ----------------------------------------------------------------------------
12
12
  // Widget-meter styles
13
13
  // ----------------------------------------------------------------------------
14
- .widget-meter {
14
+ .widget-meter {
15
15
 
16
16
  background-color: $background-color;
17
-
18
- input.meter {
17
+
18
+ input.meter {
19
19
  background-color: $meter-background;
20
20
  color: #fff;
21
21
  }
22
22
 
23
- .title {
23
+ .title {
24
24
  color: $title-color;
25
25
  }
26
26
 
@@ -31,5 +31,5 @@ $meter-background: darken($background-color, 15%);
31
31
  .updated-at {
32
32
  color: rgba(0, 0, 0, 0.3);
33
33
  }
34
-
35
- }
34
+
35
+ }
@@ -17,4 +17,4 @@ class Dashing.Number extends Dashing.Widget
17
17
 
18
18
  onData: (data) ->
19
19
  if data.status
20
- $(@get('node')).addClass("status-#{data.status}")
20
+ $(@get('node')).addClass("status-#{data.status}")
@@ -2,7 +2,7 @@
2
2
 
3
3
  <h2 class="value" data-bind="current | shortenedNumber | prepend prefix"></h2>
4
4
 
5
- <p class="change-rate">
5
+ <p class="change-rate">
6
6
  <i data-bind-class="arrow"></i><span data-bind="difference"></span>
7
7
  </p>
8
8
 
@@ -10,11 +10,11 @@ $moreinfo-color: rgba(255, 255, 255, 0.7);;
10
10
  // ----------------------------------------------------------------------------
11
11
  // Widget-number styles
12
12
  // ----------------------------------------------------------------------------
13
- .widget-number {
13
+ .widget-number {
14
14
 
15
15
  background-color: $background-color;
16
-
17
- .title {
16
+
17
+ .title {
18
18
  color: $title-color;
19
19
  }
20
20
 
@@ -35,5 +35,5 @@ $moreinfo-color: rgba(255, 255, 255, 0.7);;
35
35
  .updated-at {
36
36
  color: rgba(0, 0, 0, 0.3);
37
37
  }
38
-
39
- }
38
+
39
+ }
@@ -1 +1 @@
1
- class Dashing.Text extends Dashing.Widget
1
+ class Dashing.Text extends Dashing.Widget
@@ -4,4 +4,4 @@
4
4
 
5
5
  <p class="more-info" data-bind="moreinfo | raw"></p>
6
6
 
7
- <p class="updated-at" data-bind="updatedAtMessage"></p>
7
+ <p class="updated-at" data-bind="updatedAtMessage"></p>
@@ -9,11 +9,11 @@ $moreinfo-color: rgba(255, 255, 255, 0.7);
9
9
  // ----------------------------------------------------------------------------
10
10
  // Widget-text styles
11
11
  // ----------------------------------------------------------------------------
12
- .widget-text {
12
+ .widget-text {
13
13
 
14
14
  background-color: $background-color;
15
-
16
- .title {
15
+
16
+ .title {
17
17
  color: $title-color;
18
18
  }
19
19
 
@@ -24,9 +24,9 @@ $moreinfo-color: rgba(255, 255, 255, 0.7);
24
24
  .updated-at {
25
25
  color: rgba(255, 255, 255, 0.7);
26
26
  }
27
-
27
+
28
28
 
29
29
  &.large h3 {
30
30
  font-size: 65px;
31
31
  }
32
- }
32
+ }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: dashing
3
3
  version: !ruby/object:Gem::Version
4
- version: '1.0'
4
+ version: 1.0.1
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -13,7 +13,7 @@ date: 2012-10-30 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: sass
16
- requirement: &70129949213620 !ruby/object:Gem::Requirement
16
+ requirement: !ruby/object:Gem::Requirement
17
17
  none: false
18
18
  requirements:
19
19
  - - ! '>='
@@ -21,10 +21,15 @@ dependencies:
21
21
  version: '0'
22
22
  type: :runtime
23
23
  prerelease: false
24
- version_requirements: *70129949213620
24
+ version_requirements: !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ! '>='
28
+ - !ruby/object:Gem::Version
29
+ version: '0'
25
30
  - !ruby/object:Gem::Dependency
26
31
  name: coffee-script
27
- requirement: &70129949213180 !ruby/object:Gem::Requirement
32
+ requirement: !ruby/object:Gem::Requirement
28
33
  none: false
29
34
  requirements:
30
35
  - - ! '>='
@@ -32,10 +37,15 @@ dependencies:
32
37
  version: '0'
33
38
  type: :runtime
34
39
  prerelease: false
35
- version_requirements: *70129949213180
40
+ version_requirements: !ruby/object:Gem::Requirement
41
+ none: false
42
+ requirements:
43
+ - - ! '>='
44
+ - !ruby/object:Gem::Version
45
+ version: '0'
36
46
  - !ruby/object:Gem::Dependency
37
47
  name: sinatra
38
- requirement: &70129949212760 !ruby/object:Gem::Requirement
48
+ requirement: !ruby/object:Gem::Requirement
39
49
  none: false
40
50
  requirements:
41
51
  - - ! '>='
@@ -43,10 +53,15 @@ dependencies:
43
53
  version: '0'
44
54
  type: :runtime
45
55
  prerelease: false
46
- version_requirements: *70129949212760
56
+ version_requirements: !ruby/object:Gem::Requirement
57
+ none: false
58
+ requirements:
59
+ - - ! '>='
60
+ - !ruby/object:Gem::Version
61
+ version: '0'
47
62
  - !ruby/object:Gem::Dependency
48
63
  name: sinatra-contrib
49
- requirement: &70129949261560 !ruby/object:Gem::Requirement
64
+ requirement: !ruby/object:Gem::Requirement
50
65
  none: false
51
66
  requirements:
52
67
  - - ! '>='
@@ -54,10 +69,15 @@ dependencies:
54
69
  version: '0'
55
70
  type: :runtime
56
71
  prerelease: false
57
- version_requirements: *70129949261560
72
+ version_requirements: !ruby/object:Gem::Requirement
73
+ none: false
74
+ requirements:
75
+ - - ! '>='
76
+ - !ruby/object:Gem::Version
77
+ version: '0'
58
78
  - !ruby/object:Gem::Dependency
59
79
  name: thin
60
- requirement: &70129949261140 !ruby/object:Gem::Requirement
80
+ requirement: !ruby/object:Gem::Requirement
61
81
  none: false
62
82
  requirements:
63
83
  - - ! '>='
@@ -65,10 +85,15 @@ dependencies:
65
85
  version: '0'
66
86
  type: :runtime
67
87
  prerelease: false
68
- version_requirements: *70129949261140
88
+ version_requirements: !ruby/object:Gem::Requirement
89
+ none: false
90
+ requirements:
91
+ - - ! '>='
92
+ - !ruby/object:Gem::Version
93
+ version: '0'
69
94
  - !ruby/object:Gem::Dependency
70
95
  name: rufus-scheduler
71
- requirement: &70129949260680 !ruby/object:Gem::Requirement
96
+ requirement: !ruby/object:Gem::Requirement
72
97
  none: false
73
98
  requirements:
74
99
  - - ! '>='
@@ -76,10 +101,15 @@ dependencies:
76
101
  version: '0'
77
102
  type: :runtime
78
103
  prerelease: false
79
- version_requirements: *70129949260680
104
+ version_requirements: !ruby/object:Gem::Requirement
105
+ none: false
106
+ requirements:
107
+ - - ! '>='
108
+ - !ruby/object:Gem::Version
109
+ version: '0'
80
110
  - !ruby/object:Gem::Dependency
81
111
  name: thor
82
- requirement: &70129949260240 !ruby/object:Gem::Requirement
112
+ requirement: !ruby/object:Gem::Requirement
83
113
  none: false
84
114
  requirements:
85
115
  - - ! '>='
@@ -87,10 +117,15 @@ dependencies:
87
117
  version: '0'
88
118
  type: :runtime
89
119
  prerelease: false
90
- version_requirements: *70129949260240
120
+ version_requirements: !ruby/object:Gem::Requirement
121
+ none: false
122
+ requirements:
123
+ - - ! '>='
124
+ - !ruby/object:Gem::Version
125
+ version: '0'
91
126
  - !ruby/object:Gem::Dependency
92
127
  name: sprockets
93
- requirement: &70129949259680 !ruby/object:Gem::Requirement
128
+ requirement: !ruby/object:Gem::Requirement
94
129
  none: false
95
130
  requirements:
96
131
  - - ! '>='
@@ -98,7 +133,12 @@ dependencies:
98
133
  version: '0'
99
134
  type: :runtime
100
135
  prerelease: false
101
- version_requirements: *70129949259680
136
+ version_requirements: !ruby/object:Gem::Requirement
137
+ none: false
138
+ requirements:
139
+ - - ! '>='
140
+ - !ruby/object:Gem::Version
141
+ version: '0'
102
142
  description: This framework lets you build & easily layout dashboards with your own
103
143
  custom widgets. Use it to make a status boards for your ops team, or use it to track
104
144
  signups, conversion rates, or whatever else metrics you'd like to see in one spot.
@@ -177,8 +217,7 @@ files:
177
217
  - templates/widget/%name%/%name%.scss.tt
178
218
  - templates/project/lib/.empty_directory
179
219
  - lib/dashing.rb
180
- - !binary |-
181
- YmluL2Rhc2hpbmc=
220
+ - bin/dashing
182
221
  homepage: http://shopify.github.com/dashing
183
222
  licenses: []
184
223
  post_install_message:
@@ -199,8 +238,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
199
238
  version: '0'
200
239
  requirements: []
201
240
  rubyforge_project:
202
- rubygems_version: 1.8.11
241
+ rubygems_version: 1.8.23
203
242
  signing_key:
204
243
  specification_version: 3
205
244
  summary: The exceptionally handsome dashboard framework.
206
245
  test_files: []
246
+ has_rdoc: