dashing 0.1.2 → 1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +1 -197
- data/bin/dashing +3 -2
- data/templates/project/README.md +1 -0
- data/templates/project/dashboards/sample.erb +1 -1
- data/templates/project/dashboards/sampletv.erb +1 -1
- data/templates/project/lib/.empty_directory +1 -0
- data/templates/project/widgets/number/number.coffee +0 -3
- data/templates/project/widgets/number/number.html +1 -1
- metadata +21 -20
data/README.md
CHANGED
@@ -1,197 +1 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
- google analytics
|
4
|
-
- Look into a mechanism for re-loading the page when a deploy occurs
|
5
|
-
- talk about debug mode
|
6
|
-
|
7
|
-
# Dashing!
|
8
|
-
|
9
|
-
A handsome dashboard framework solution
|
10
|
-
|
11
|
-
## YET ANOTHER THING!?!??! Explain this part
|
12
|
-
## Introduction
|
13
|
-
|
14
|
-
Dashing is a framework for building web-based dashboards.
|
15
|
-
|
16
|
-
Features:
|
17
|
-
|
18
|
-
- Custom widgets! Built using whatever HTML/Coffeescript wizardry you posses
|
19
|
-
- Multiple dashboards! You can have many different views all hosted in the same location
|
20
|
-
- Shared widgets! It's easy to have have the same widget show up on different dashboards
|
21
|
-
- Push or pull data, you decide!
|
22
|
-
- Responsive grid layout! Your dashboard will look good on any sized screen
|
23
|
-
|
24
|
-
## Installation and Setup
|
25
|
-
|
26
|
-
1. Install the gem from the command line:
|
27
|
-
|
28
|
-
```gem install dashing```
|
29
|
-
|
30
|
-
2. Generate a new project:
|
31
|
-
|
32
|
-
```dashing new sweet_dashboard_project```
|
33
|
-
|
34
|
-
3. Change your directory to ```sweet_dashboard_project``` and start Dashing
|
35
|
-
|
36
|
-
```dashing start```
|
37
|
-
|
38
|
-
4. Point your browser at [localhost:3000](http://localhost:3000)
|
39
|
-
|
40
|
-
## Building a dashboard
|
41
|
-
|
42
|
-
```main.erb``` contains the layout for the default dashboard which is accessible at ```/```.
|
43
|
-
You can add additional dashboards with by running ```dashing COMMAND THINGY new_view``` which creates a ```new_view.erb``` file in ```dashboards/```.
|
44
|
-
That new view will be accessible at ```localhost:3000/new_view```
|
45
|
-
|
46
|
-
## Widgets
|
47
|
-
|
48
|
-
Widgets are represented by a ```div``` element with ```data-id``` and ```data-view``` attributes. eg:
|
49
|
-
|
50
|
-
```HTML
|
51
|
-
<div data-id="sample" data-view="SweetWidget"></div>
|
52
|
-
```
|
53
|
-
|
54
|
-
The ```data-id``` attribute is used to set the **widget ID** which will be used when to push data to the widget. Two widgets can have the same widget id, allowing you to have the same widget in multiple dashboards.
|
55
|
-
|
56
|
-
```data-view``` specifies the type of widget what will be used. This field is case sensitive and must match the coffeescript class of the widget. See making your own widget section for more details.
|
57
|
-
|
58
|
-
This ```<div>``` can also be used to configure your widgets. For example, the pre-bundled widgets let you set a title with ```data-title="Widget Title"```.
|
59
|
-
|
60
|
-
### Layout
|
61
|
-
|
62
|
-
Getting the style and layout right when you have multiple widgets is hard, that's why we've done it for you. By default Dashing uses [masonry](http://masonry.desandro.com/) to produce a grid layout. If it can, your dashboard will fill the screen with 5 columns. If there isn't enough room though, widgets will be reorganized to fit into fewer columns until you are left with a single column
|
63
|
-
|
64
|
-
Examples here?
|
65
|
-
|
66
|
-
Masonry requires that your widgets be contained within a ```<ul>``` element as follows:
|
67
|
-
|
68
|
-
```HTML
|
69
|
-
<ul class="list-nostyle clearfix">
|
70
|
-
<li class="widget-container">
|
71
|
-
<div data-id="widget_id1" data-view="MyWidget"></div>
|
72
|
-
</li>
|
73
|
-
<li class="widget-container">
|
74
|
-
<div data-id="widget_id2" data-view="MyWidget"></div>
|
75
|
-
</li>
|
76
|
-
<li class="widget-container">
|
77
|
-
<div data-id="widget_id3" data-view="MyWidget"></div>
|
78
|
-
</li>
|
79
|
-
</ul>
|
80
|
-
```
|
81
|
-
|
82
|
-
### Making you own widget
|
83
|
-
|
84
|
-
A widget consists of three parts:
|
85
|
-
|
86
|
-
- an html file used for layout and bindings
|
87
|
-
- a scss file for style
|
88
|
-
- a coffeescript file which allows you to operate on the data
|
89
|
-
|
90
|
-
To make your own run ```dashing generate sweet_widget``` which will create scaffolding files in the ```widget/``` folder or your project.
|
91
|
-
|
92
|
-
#### sweet_widget.html
|
93
|
-
|
94
|
-
Contains the HTML for you widget.
|
95
|
-
We use [batman bindings](http://batmanjs.org/docs/batman.html#batman-view-bindings-how-to-use-bindings) in order to update the content of a widget.
|
96
|
-
In the example below, updating the title attribute of the coffeescript object representing that widget will set the innerHTML of the ```<h1>``` element.
|
97
|
-
Dashing provides a simple way to update your widgets attributes through a push interface and a pull interface. See the Getting Data into Dashing section.
|
98
|
-
|
99
|
-
##### Example
|
100
|
-
```html
|
101
|
-
<h1 data-bind="title"></h1>
|
102
|
-
|
103
|
-
<h3 data-bind="text"></h3>
|
104
|
-
````
|
105
|
-
|
106
|
-
#### sweet_widget.coffee
|
107
|
-
|
108
|
-
This coffee script file allows you to perform any operations you wish on your widget. In the example below we can initialize things with the constructor method.
|
109
|
-
We can also manipulate the data we recieve from data updates. Data will be the JSON object you pass in.
|
110
|
-
|
111
|
-
##### Example
|
112
|
-
```coffeescript
|
113
|
-
class Dashing.SweetWidget extends Dashing.Widget
|
114
|
-
|
115
|
-
constructor: ->
|
116
|
-
super
|
117
|
-
@set('attr', 'wooo')
|
118
|
-
|
119
|
-
onData: (data) ->
|
120
|
-
super
|
121
|
-
@set('cool_thing', data.massage.split(',')[2]
|
122
|
-
```
|
123
|
-
|
124
|
-
#### sweet_widget.scss
|
125
|
-
|
126
|
-
##### Example
|
127
|
-
````scss
|
128
|
-
$text_value-color: #fff;
|
129
|
-
$text_title-color: lighten($widget-text-color, 30%);
|
130
|
-
|
131
|
-
.widget-text {
|
132
|
-
.title {
|
133
|
-
color: $text_title-color;
|
134
|
-
}
|
135
|
-
.p {
|
136
|
-
color: $text_value-color:
|
137
|
-
}
|
138
|
-
}
|
139
|
-
```
|
140
|
-
|
141
|
-
## Getting data into Dashing
|
142
|
-
|
143
|
-
Providing data to widgets is easy. You specify which widget you want using a widget id. Dashing expects the data you send to be in JSON format.
|
144
|
-
Upon getting data, dashing mixes the json into the widget object. So it's easy to update multiple attributes within the same object.
|
145
|
-
|
146
|
-
### Jobs (poll)
|
147
|
-
|
148
|
-
Dashing uses [rufus-scheduler](http://rufus.rubyforge.org/rufus-scheduler/) to schedule jobs.
|
149
|
-
You can make a new job with ```dashing job super_job``` which will create a file in the jobs folder called ```super_job.rb```.
|
150
|
-
Data is sent to a widget using the ```send_event(widget_id, json_formatted_data)``` method.
|
151
|
-
|
152
|
-
#### Example
|
153
|
-
|
154
|
-
```ruby
|
155
|
-
# :first_in sets how long it takes before the job is first run. In this case, it is run immediately
|
156
|
-
SCHEDULER.every '1m', :first_in => 0 do |job|
|
157
|
-
send_event('widget_id', {text: "I am #{%w(happy sad hungry).sample}"})
|
158
|
-
end
|
159
|
-
```
|
160
|
-
|
161
|
-
### Push
|
162
|
-
|
163
|
-
You can also push data directly to your dashboard! Post the data you want in json to ```/widgets/widget_id```.
|
164
|
-
For security, you will also have to include your auth_token (which can be found in ```config.ru```) as part of the json object.
|
165
|
-
|
166
|
-
#### Example
|
167
|
-
```bash
|
168
|
-
curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "value": 100 }' http://localhost:3000/widgets/synergy
|
169
|
-
```
|
170
|
-
|
171
|
-
or
|
172
|
-
|
173
|
-
```ruby
|
174
|
-
HTTParty.post('http://ADDRESS/widgets/widget_id',
|
175
|
-
:body => { auth_token: "YOUR_AUTH_TOKEN", text: "Weeeeee"}.to_json)
|
176
|
-
```
|
177
|
-
|
178
|
-
## Misc
|
179
|
-
|
180
|
-
### Deploying to heroku
|
181
|
-
|
182
|
-
### Using omni-auth
|
183
|
-
|
184
|
-
## Dependencies
|
185
|
-
|
186
|
-
- [Sinatra](http://www.sinatrarb.com/)
|
187
|
-
- [batman.js](http://batmanjs.org/)
|
188
|
-
- [rufus-scheduler](http://rufus.rubyforge.org/rufus-scheduler/)
|
189
|
-
- [Thor](https://github.com/wycats/thor/)
|
190
|
-
- [jQuery-knob](http://anthonyterrien.com/knob/)
|
191
|
-
- [masonry](http://masonry.desandro.com/)
|
192
|
-
- [thin](http://code.macournoyer.com/thin/)
|
193
|
-
- [Sass](http://sass-lang.com/)
|
194
|
-
|
195
|
-
## Licensing
|
196
|
-
|
197
|
-
This code is released under the MIT license. See ```MIT-LICENSE``` file for more details
|
1
|
+
Check out the [Homepage](http://shopify.github.com/dashing)
|
data/bin/dashing
CHANGED
@@ -14,7 +14,7 @@ def send_event(id, data)
|
|
14
14
|
req = Net::HTTP::Post.new("/widgets/#{id}")
|
15
15
|
req["content-type"] = "application/json"
|
16
16
|
req.body = JSON.unparse(data.merge(:auth_token => Dashing::CLI.auth_token))
|
17
|
-
res = Net::HTTP.new('localhost',
|
17
|
+
res = Net::HTTP.new('localhost', 3030).start { |http| http.request(req) }
|
18
18
|
puts "Data Sent to #{id}: #{data}"
|
19
19
|
end
|
20
20
|
|
@@ -61,8 +61,9 @@ module Dashing
|
|
61
61
|
desc "start", "Starts the server in style!"
|
62
62
|
method_option :job_path, :desc => "Specify the directory where jobs are stored"
|
63
63
|
def start(*args)
|
64
|
+
port_option = args.include?('-p')? '' : ' -p 3030'
|
64
65
|
args = args.join(" ")
|
65
|
-
command = "bundle exec thin -R config.ru start #{args}"
|
66
|
+
command = "bundle exec thin -R config.ru start #{port_option} #{args}"
|
66
67
|
command.prepend "export JOB_PATH=#{options[:job_path]}; " if options[:job_path]
|
67
68
|
system(command)
|
68
69
|
end
|
data/templates/project/README.md
CHANGED
@@ -0,0 +1 @@
|
|
1
|
+
Check out http://shopify.github.com/dashing for more information.
|
@@ -21,5 +21,5 @@
|
|
21
21
|
<div data-id="convergence" data-view="Graph" data-title="Convergence" style="background-color:#ff9618"></div>
|
22
22
|
</li>
|
23
23
|
</ul>
|
24
|
-
<center><div style="font-size: 12px">Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http
|
24
|
+
<center><div style="font-size: 12px">Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http://<%=request.host%>:<%=request.port%>/widgets/welcome</div></center>
|
25
25
|
</div>
|
@@ -52,5 +52,5 @@ $(function() {
|
|
52
52
|
</li>
|
53
53
|
|
54
54
|
</ul>
|
55
|
-
<center><div style="font-size: 12px">Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http
|
55
|
+
<center><div style="font-size: 12px">Try this: curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http://<%=request.host%>:<%=request.port%>/widgets/welcome</div></center>
|
56
56
|
</div>
|
@@ -0,0 +1 @@
|
|
1
|
+
.empty_directory
|
@@ -15,9 +15,6 @@ class Dashing.Number extends Dashing.Widget
|
|
15
15
|
if @get('last')
|
16
16
|
if parseInt(@get('current')) > parseInt(@get('last')) then 'icon-arrow-up' else 'icon-arrow-down'
|
17
17
|
|
18
|
-
@accessor 'needsAttention', ->
|
19
|
-
@get('status') == 'warning' || @get('status') == 'danger'
|
20
|
-
|
21
18
|
onData: (data) ->
|
22
19
|
if data.status
|
23
20
|
$(@get('node')).addClass("status-#{data.status}")
|
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:
|
4
|
+
version: '1.0'
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,11 +9,11 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-10-
|
12
|
+
date: 2012-10-30 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sass
|
16
|
-
requirement: &
|
16
|
+
requirement: &70129949213620 !ruby/object:Gem::Requirement
|
17
17
|
none: false
|
18
18
|
requirements:
|
19
19
|
- - ! '>='
|
@@ -21,10 +21,10 @@ dependencies:
|
|
21
21
|
version: '0'
|
22
22
|
type: :runtime
|
23
23
|
prerelease: false
|
24
|
-
version_requirements: *
|
24
|
+
version_requirements: *70129949213620
|
25
25
|
- !ruby/object:Gem::Dependency
|
26
26
|
name: coffee-script
|
27
|
-
requirement: &
|
27
|
+
requirement: &70129949213180 !ruby/object:Gem::Requirement
|
28
28
|
none: false
|
29
29
|
requirements:
|
30
30
|
- - ! '>='
|
@@ -32,10 +32,10 @@ dependencies:
|
|
32
32
|
version: '0'
|
33
33
|
type: :runtime
|
34
34
|
prerelease: false
|
35
|
-
version_requirements: *
|
35
|
+
version_requirements: *70129949213180
|
36
36
|
- !ruby/object:Gem::Dependency
|
37
37
|
name: sinatra
|
38
|
-
requirement: &
|
38
|
+
requirement: &70129949212760 !ruby/object:Gem::Requirement
|
39
39
|
none: false
|
40
40
|
requirements:
|
41
41
|
- - ! '>='
|
@@ -43,10 +43,10 @@ dependencies:
|
|
43
43
|
version: '0'
|
44
44
|
type: :runtime
|
45
45
|
prerelease: false
|
46
|
-
version_requirements: *
|
46
|
+
version_requirements: *70129949212760
|
47
47
|
- !ruby/object:Gem::Dependency
|
48
48
|
name: sinatra-contrib
|
49
|
-
requirement: &
|
49
|
+
requirement: &70129949261560 !ruby/object:Gem::Requirement
|
50
50
|
none: false
|
51
51
|
requirements:
|
52
52
|
- - ! '>='
|
@@ -54,10 +54,10 @@ dependencies:
|
|
54
54
|
version: '0'
|
55
55
|
type: :runtime
|
56
56
|
prerelease: false
|
57
|
-
version_requirements: *
|
57
|
+
version_requirements: *70129949261560
|
58
58
|
- !ruby/object:Gem::Dependency
|
59
59
|
name: thin
|
60
|
-
requirement: &
|
60
|
+
requirement: &70129949261140 !ruby/object:Gem::Requirement
|
61
61
|
none: false
|
62
62
|
requirements:
|
63
63
|
- - ! '>='
|
@@ -65,10 +65,10 @@ dependencies:
|
|
65
65
|
version: '0'
|
66
66
|
type: :runtime
|
67
67
|
prerelease: false
|
68
|
-
version_requirements: *
|
68
|
+
version_requirements: *70129949261140
|
69
69
|
- !ruby/object:Gem::Dependency
|
70
70
|
name: rufus-scheduler
|
71
|
-
requirement: &
|
71
|
+
requirement: &70129949260680 !ruby/object:Gem::Requirement
|
72
72
|
none: false
|
73
73
|
requirements:
|
74
74
|
- - ! '>='
|
@@ -76,10 +76,10 @@ dependencies:
|
|
76
76
|
version: '0'
|
77
77
|
type: :runtime
|
78
78
|
prerelease: false
|
79
|
-
version_requirements: *
|
79
|
+
version_requirements: *70129949260680
|
80
80
|
- !ruby/object:Gem::Dependency
|
81
81
|
name: thor
|
82
|
-
requirement: &
|
82
|
+
requirement: &70129949260240 !ruby/object:Gem::Requirement
|
83
83
|
none: false
|
84
84
|
requirements:
|
85
85
|
- - ! '>='
|
@@ -87,10 +87,10 @@ dependencies:
|
|
87
87
|
version: '0'
|
88
88
|
type: :runtime
|
89
89
|
prerelease: false
|
90
|
-
version_requirements: *
|
90
|
+
version_requirements: *70129949260240
|
91
91
|
- !ruby/object:Gem::Dependency
|
92
92
|
name: sprockets
|
93
|
-
requirement: &
|
93
|
+
requirement: &70129949259680 !ruby/object:Gem::Requirement
|
94
94
|
none: false
|
95
95
|
requirements:
|
96
96
|
- - ! '>='
|
@@ -98,7 +98,7 @@ dependencies:
|
|
98
98
|
version: '0'
|
99
99
|
type: :runtime
|
100
100
|
prerelease: false
|
101
|
-
version_requirements: *
|
101
|
+
version_requirements: *70129949259680
|
102
102
|
description: This framework lets you build & easily layout dashboards with your own
|
103
103
|
custom widgets. Use it to make a status boards for your ops team, or use it to track
|
104
104
|
signups, conversion rates, or whatever else metrics you'd like to see in one spot.
|
@@ -175,10 +175,11 @@ files:
|
|
175
175
|
- templates/widget/%name%/%name%.coffee.tt
|
176
176
|
- templates/widget/%name%/%name%.html
|
177
177
|
- templates/widget/%name%/%name%.scss.tt
|
178
|
+
- templates/project/lib/.empty_directory
|
178
179
|
- lib/dashing.rb
|
179
180
|
- !binary |-
|
180
181
|
YmluL2Rhc2hpbmc=
|
181
|
-
homepage: http://
|
182
|
+
homepage: http://shopify.github.com/dashing
|
182
183
|
licenses: []
|
183
184
|
post_install_message:
|
184
185
|
rdoc_options: []
|
@@ -201,5 +202,5 @@ rubyforge_project:
|
|
201
202
|
rubygems_version: 1.8.11
|
202
203
|
signing_key:
|
203
204
|
specification_version: 3
|
204
|
-
summary:
|
205
|
+
summary: The exceptionally handsome dashboard framework.
|
205
206
|
test_files: []
|