baseboard 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.
- checksums.yaml +15 -0
- data/README.md +4 -0
- data/bin/baseboard +9 -0
- data/javascripts/batman.jquery.js +163 -0
- data/javascripts/batman.js +13680 -0
- data/javascripts/dashing.coffee +125 -0
- data/javascripts/es5-shim.js +1021 -0
- data/javascripts/jquery.js +4 -0
- data/lib/baseboard/app.rb +178 -0
- data/lib/baseboard/cli.rb +109 -0
- data/lib/baseboard/downloader.rb +18 -0
- data/lib/baseboard.rb +6 -0
- data/templates/dashboard/%name%.erb.tt +7 -0
- data/templates/job/%name%.rb +4 -0
- data/templates/project/.gitignore +2 -0
- data/templates/project/Gemfile +6 -0
- data/templates/project/README.md +1 -0
- data/templates/project/assets/fonts/fontawesome-webfont.eot +0 -0
- data/templates/project/assets/fonts/fontawesome-webfont.svg +399 -0
- data/templates/project/assets/fonts/fontawesome-webfont.ttf +0 -0
- data/templates/project/assets/fonts/fontawesome-webfont.woff +0 -0
- data/templates/project/assets/images/logo.png +0 -0
- data/templates/project/assets/javascripts/application.coffee +25 -0
- data/templates/project/assets/javascripts/d3-3.2.8.js +5 -0
- data/templates/project/assets/javascripts/dashing.gridster.coffee +37 -0
- data/templates/project/assets/javascripts/gridster/jquery.gridster.js +3263 -0
- data/templates/project/assets/javascripts/gridster/jquery.leanModal.min.js +5 -0
- data/templates/project/assets/javascripts/jquery.knob.js +646 -0
- data/templates/project/assets/javascripts/rickshaw-1.4.3.min.js +2 -0
- data/templates/project/assets/stylesheets/application.scss +258 -0
- data/templates/project/assets/stylesheets/font-awesome.css +1479 -0
- data/templates/project/assets/stylesheets/jquery.gridster.css +57 -0
- data/templates/project/config.ru +18 -0
- data/templates/project/dashboards/layout.erb +32 -0
- data/templates/project/dashboards/sample.erb +25 -0
- data/templates/project/dashboards/sampletv.erb +56 -0
- data/templates/project/jobs/buzzwords.rb +9 -0
- data/templates/project/jobs/convergence.rb +14 -0
- data/templates/project/jobs/sample.rb +13 -0
- data/templates/project/jobs/twitter.rb +28 -0
- data/templates/project/lib/.empty_directory +1 -0
- data/templates/project/public/404.html +26 -0
- data/templates/project/public/favicon.ico +0 -0
- data/templates/project/widgets/clock/clock.coffee +18 -0
- data/templates/project/widgets/clock/clock.html +2 -0
- data/templates/project/widgets/clock/clock.scss +13 -0
- data/templates/project/widgets/comments/comments.coffee +24 -0
- data/templates/project/widgets/comments/comments.html +7 -0
- data/templates/project/widgets/comments/comments.scss +33 -0
- data/templates/project/widgets/graph/graph.coffee +37 -0
- data/templates/project/widgets/graph/graph.html +5 -0
- data/templates/project/widgets/graph/graph.scss +65 -0
- data/templates/project/widgets/iframe/iframe.coffee +9 -0
- data/templates/project/widgets/iframe/iframe.html +1 -0
- data/templates/project/widgets/iframe/iframe.scss +8 -0
- data/templates/project/widgets/image/image.coffee +9 -0
- data/templates/project/widgets/image/image.html +1 -0
- data/templates/project/widgets/image/image.scss +13 -0
- data/templates/project/widgets/list/list.coffee +6 -0
- data/templates/project/widgets/list/list.html +18 -0
- data/templates/project/widgets/list/list.scss +60 -0
- data/templates/project/widgets/meter/meter.coffee +14 -0
- data/templates/project/widgets/meter/meter.html +7 -0
- data/templates/project/widgets/meter/meter.scss +35 -0
- data/templates/project/widgets/number/number.coffee +24 -0
- data/templates/project/widgets/number/number.html +11 -0
- data/templates/project/widgets/number/number.scss +39 -0
- data/templates/project/widgets/text/text.coffee +1 -0
- data/templates/project/widgets/text/text.html +7 -0
- data/templates/project/widgets/text/text.scss +32 -0
- data/templates/widget/%name%/%name%.coffee.tt +9 -0
- data/templates/widget/%name%/%name%.html +1 -0
- data/templates/widget/%name%/%name%.scss.tt +3 -0
- metadata +339 -0
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/*! gridster.js - v0.1.0 - 2012-08-14
|
|
2
|
+
* http://gridster.net/
|
|
3
|
+
* Copyright (c) 2012 ducksboard; Licensed MIT */
|
|
4
|
+
|
|
5
|
+
.gridster {
|
|
6
|
+
position:relative;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.gridster > * {
|
|
10
|
+
margin: 0 auto;
|
|
11
|
+
-webkit-transition: height .4s;
|
|
12
|
+
-moz-transition: height .4s;
|
|
13
|
+
-o-transition: height .4s;
|
|
14
|
+
-ms-transition: height .4s;
|
|
15
|
+
transition: height .4s;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.gridster .gs_w{
|
|
19
|
+
z-index: 2;
|
|
20
|
+
position: absolute;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.ready .gs_w:not(.preview-holder) {
|
|
24
|
+
-webkit-transition: opacity .3s, left .3s, top .3s;
|
|
25
|
+
-moz-transition: opacity .3s, left .3s, top .3s;
|
|
26
|
+
-o-transition: opacity .3s, left .3s, top .3s;
|
|
27
|
+
transition: opacity .3s, left .3s, top .3s;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.gridster .preview-holder {
|
|
31
|
+
z-index: 1;
|
|
32
|
+
position: absolute;
|
|
33
|
+
background-color: #fff;
|
|
34
|
+
border-color: #fff;
|
|
35
|
+
opacity: 0.3;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.gridster .player-revert {
|
|
39
|
+
z-index: 10!important;
|
|
40
|
+
-webkit-transition: left .3s, top .3s!important;
|
|
41
|
+
-moz-transition: left .3s, top .3s!important;
|
|
42
|
+
-o-transition: left .3s, top .3s!important;
|
|
43
|
+
transition: left .3s, top .3s!important;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.gridster .dragging {
|
|
47
|
+
z-index: 10!important;
|
|
48
|
+
-webkit-transition: all 0s !important;
|
|
49
|
+
-moz-transition: all 0s !important;
|
|
50
|
+
-o-transition: all 0s !important;
|
|
51
|
+
transition: all 0s !important;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Uncomment this if you set helper : "clone" in draggable options */
|
|
55
|
+
/*.gridster .player {
|
|
56
|
+
opacity:0;
|
|
57
|
+
}*/
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
require 'dashing'
|
|
2
|
+
|
|
3
|
+
configure do
|
|
4
|
+
set :auth_token, 'YOUR_AUTH_TOKEN'
|
|
5
|
+
|
|
6
|
+
helpers do
|
|
7
|
+
def protected!
|
|
8
|
+
# Put any authentication code you want in here.
|
|
9
|
+
# This method is run before accessing any resource.
|
|
10
|
+
end
|
|
11
|
+
end
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
map Sinatra::Application.assets_prefix do
|
|
15
|
+
run Sinatra::Application.sprockets
|
|
16
|
+
end
|
|
17
|
+
|
|
18
|
+
run Sinatra::Application
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8"/>
|
|
5
|
+
<meta name="description" content="">
|
|
6
|
+
<meta name="viewport" content="width=device-width">
|
|
7
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
8
|
+
|
|
9
|
+
<title><%= yield_content(:title) %></title>
|
|
10
|
+
|
|
11
|
+
<!-- The javascript and css are managed by sprockets. The files can be found in the /assets folder-->
|
|
12
|
+
<script type="text/javascript" src="/assets/application.js"></script>
|
|
13
|
+
<link rel="stylesheet" href="/assets/application.css">
|
|
14
|
+
|
|
15
|
+
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
|
|
16
|
+
<link rel="icon" href="/assets/favicon.ico">
|
|
17
|
+
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
<div id="container">
|
|
21
|
+
<%= yield %>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<% if development? %>
|
|
25
|
+
<div id="saving-instructions">
|
|
26
|
+
<p>Paste the following at the top of <i><%= params[:dashboard] %>.erb</i></p>
|
|
27
|
+
<textarea id="gridster-code"></textarea>
|
|
28
|
+
</div>
|
|
29
|
+
<a href="#saving-instructions" id="save-gridster">Save this layout</a>
|
|
30
|
+
<% end %>
|
|
31
|
+
</body>
|
|
32
|
+
</html>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<% content_for :title do %>My super sweet dashboard<% end %>
|
|
2
|
+
<div class="gridster">
|
|
3
|
+
<ul>
|
|
4
|
+
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
|
|
5
|
+
<div data-id="welcome" data-view="Text" data-title="Hello" data-text="This is your shiny new dashboard." data-moreinfo="Protip: You can drag the widgets around!"></div>
|
|
6
|
+
</li>
|
|
7
|
+
|
|
8
|
+
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
|
|
9
|
+
<div data-id="synergy" data-view="Meter" data-title="Synergy" data-min="0" data-max="100"></div>
|
|
10
|
+
</li>
|
|
11
|
+
|
|
12
|
+
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
|
|
13
|
+
<div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office"></div>
|
|
14
|
+
</li>
|
|
15
|
+
|
|
16
|
+
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
|
|
17
|
+
<div data-id="valuation" data-view="Number" data-title="Current Valuation" data-moreinfo="In billions" data-prefix="$"></div>
|
|
18
|
+
</li>
|
|
19
|
+
|
|
20
|
+
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
|
|
21
|
+
<div data-id="convergence" data-view="Graph" data-title="Convergence" style="background-color:#ff9618"></div>
|
|
22
|
+
</li>
|
|
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://<%=request.host%>:<%=request.port%>/widgets/welcome</div></center>
|
|
25
|
+
</div>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<script type='text/javascript'>
|
|
2
|
+
$(function() {
|
|
3
|
+
// These settings override the defaults set in application.coffee. You can do this on a per dashboard basis.
|
|
4
|
+
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}]')
|
|
5
|
+
Dashing.widget_base_dimensions = [370, 340]
|
|
6
|
+
Dashing.numColumns = 5
|
|
7
|
+
});
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
<% content_for :title do %>1080p dashboard<% end %>
|
|
12
|
+
|
|
13
|
+
<div class="gridster">
|
|
14
|
+
<ul>
|
|
15
|
+
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
|
|
16
|
+
<div data-view="Clock"></div>
|
|
17
|
+
<i class="icon-time icon-background"></i>
|
|
18
|
+
</li>
|
|
19
|
+
|
|
20
|
+
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
|
|
21
|
+
<div data-view="Image" data-image="/logo.png"></div>
|
|
22
|
+
</li>
|
|
23
|
+
|
|
24
|
+
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
|
|
25
|
+
<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>
|
|
26
|
+
</li>
|
|
27
|
+
|
|
28
|
+
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
|
|
29
|
+
<div data-id="synergy" data-view="Meter" data-title="Synergy" data-min="0" data-max="100"></div>
|
|
30
|
+
</li>
|
|
31
|
+
|
|
32
|
+
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
|
|
33
|
+
<div data-id="synergy" data-view="Meter" data-moreinfo="In sync with my neighbour!" data-title="Synergy" data-min="0" data-max="100"></div>
|
|
34
|
+
</li>
|
|
35
|
+
|
|
36
|
+
<li data-row="1" data-col="1" data-sizex="1" data-sizey="2">
|
|
37
|
+
<div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office"></div>
|
|
38
|
+
</li>
|
|
39
|
+
|
|
40
|
+
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
|
|
41
|
+
<div data-id="karma" data-view="Number" data-title="Karma" style="background-color:#96bf48;"></div>
|
|
42
|
+
<i class="icon-heart icon-background"></i>
|
|
43
|
+
</li>
|
|
44
|
+
|
|
45
|
+
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
|
|
46
|
+
<div data-id="convergence" data-view="Graph" data-title="Convergence" style="background-color:#47bbb3;"></div>
|
|
47
|
+
</li>
|
|
48
|
+
|
|
49
|
+
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
|
|
50
|
+
<div data-id="twitter_mentions" data-view="Comments" style="background-color:#ff9618;" data-moreinfo="Tweets tagged with #todayilearned"></div>
|
|
51
|
+
<i class="icon-twitter icon-background"></i>
|
|
52
|
+
</li>
|
|
53
|
+
|
|
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://<%=request.host%>:<%=request.port%>/widgets/welcome</div></center>
|
|
56
|
+
</div>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
buzzwords = ['Paradigm shift', 'Leverage', 'Pivoting', 'Turn-key', 'Streamlininess', 'Exit strategy', 'Synergy', 'Enterprise', 'Web 2.0']
|
|
2
|
+
buzzword_counts = Hash.new({ value: 0 })
|
|
3
|
+
|
|
4
|
+
SCHEDULER.every '2s' do
|
|
5
|
+
random_buzzword = buzzwords.sample
|
|
6
|
+
buzzword_counts[random_buzzword] = { label: random_buzzword, value: (buzzword_counts[random_buzzword][:value] + 1) % 30 }
|
|
7
|
+
|
|
8
|
+
send_event('buzzwords', { items: buzzword_counts.values })
|
|
9
|
+
end
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
# Populate the graph with some random points
|
|
2
|
+
points = []
|
|
3
|
+
(1..10).each do |i|
|
|
4
|
+
points << { x: i, y: rand(50) }
|
|
5
|
+
end
|
|
6
|
+
last_x = points.last[:x]
|
|
7
|
+
|
|
8
|
+
SCHEDULER.every '2s' do
|
|
9
|
+
points.shift
|
|
10
|
+
last_x += 1
|
|
11
|
+
points << { x: last_x, y: rand(50) }
|
|
12
|
+
|
|
13
|
+
send_event('convergence', points: points)
|
|
14
|
+
end
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
current_valuation = 0
|
|
2
|
+
current_karma = 0
|
|
3
|
+
|
|
4
|
+
SCHEDULER.every '2s' do
|
|
5
|
+
last_valuation = current_valuation
|
|
6
|
+
last_karma = current_karma
|
|
7
|
+
current_valuation = rand(100)
|
|
8
|
+
current_karma = rand(200000)
|
|
9
|
+
|
|
10
|
+
send_event('valuation', { current: current_valuation, last: last_valuation })
|
|
11
|
+
send_event('karma', { current: current_karma, last: last_karma })
|
|
12
|
+
send_event('synergy', { value: rand(100) })
|
|
13
|
+
end
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
require 'twitter'
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
#### Get your twitter keys & secrets:
|
|
5
|
+
#### https://dev.twitter.com/docs/auth/tokens-devtwittercom
|
|
6
|
+
twitter = Twitter::REST::Client.new do |config|
|
|
7
|
+
config.consumer_key = 'YOUR_CONSUMER_KEY'
|
|
8
|
+
config.consumer_secret = 'YOUR_CONSUMER_SECRET'
|
|
9
|
+
config.access_token = 'YOUR_OAUTH_TOKEN'
|
|
10
|
+
config.access_token_secret = 'YOUR_OAUTH_SECRET'
|
|
11
|
+
end
|
|
12
|
+
|
|
13
|
+
search_term = URI::encode('#todayilearned')
|
|
14
|
+
|
|
15
|
+
SCHEDULER.every '10m', :first_in => 0 do |job|
|
|
16
|
+
begin
|
|
17
|
+
tweets = twitter.search("#{search_term}")
|
|
18
|
+
|
|
19
|
+
if tweets
|
|
20
|
+
tweets = tweets.map do |tweet|
|
|
21
|
+
{ name: tweet.user.name, body: tweet.text, avatar: tweet.user.profile_image_url_https }
|
|
22
|
+
end
|
|
23
|
+
send_event('twitter_mentions', comments: tweets)
|
|
24
|
+
end
|
|
25
|
+
rescue Twitter::Error
|
|
26
|
+
puts "\e[33mFor the twitter widget to work, you need to put in your twitter API keys in the jobs/twitter.rb file.\e[0m"
|
|
27
|
+
end
|
|
28
|
+
end
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.empty_directory
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>This Dashboard doesn't exist.</title>
|
|
5
|
+
<style>
|
|
6
|
+
body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
|
|
7
|
+
div.dialog {
|
|
8
|
+
width: 25em;
|
|
9
|
+
padding: 0 4em;
|
|
10
|
+
margin: 4em auto 0 auto;
|
|
11
|
+
border: 1px solid #ccc;
|
|
12
|
+
border-right-color: #999;
|
|
13
|
+
border-bottom-color: #999;
|
|
14
|
+
}
|
|
15
|
+
h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
|
|
16
|
+
</style>
|
|
17
|
+
</head>
|
|
18
|
+
|
|
19
|
+
<body>
|
|
20
|
+
<!-- This file lives in public/404.html -->
|
|
21
|
+
<div class="dialog">
|
|
22
|
+
<h1>Drats! That Dashboard doesn't exist.</h1>
|
|
23
|
+
<p>You may have mistyped the address or the page may have moved.</p>
|
|
24
|
+
</div>
|
|
25
|
+
</body>
|
|
26
|
+
</html>
|
|
Binary file
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
class Dashing.Clock extends Dashing.Widget
|
|
2
|
+
|
|
3
|
+
ready: ->
|
|
4
|
+
setInterval(@startTime, 500)
|
|
5
|
+
|
|
6
|
+
startTime: =>
|
|
7
|
+
today = new Date()
|
|
8
|
+
|
|
9
|
+
h = today.getHours()
|
|
10
|
+
m = today.getMinutes()
|
|
11
|
+
s = today.getSeconds()
|
|
12
|
+
m = @formatTime(m)
|
|
13
|
+
s = @formatTime(s)
|
|
14
|
+
@set('time', h + ":" + m + ":" + s)
|
|
15
|
+
@set('date', today.toDateString())
|
|
16
|
+
|
|
17
|
+
formatTime: (i) ->
|
|
18
|
+
if i < 10 then "0" + i else i
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------
|
|
2
|
+
// Sass declarations
|
|
3
|
+
// ----------------------------------------------------------------------------
|
|
4
|
+
$background-color: #dc5945;
|
|
5
|
+
|
|
6
|
+
// ----------------------------------------------------------------------------
|
|
7
|
+
// Widget-clock styles
|
|
8
|
+
// ----------------------------------------------------------------------------
|
|
9
|
+
.widget-clock {
|
|
10
|
+
|
|
11
|
+
background-color: $background-color;
|
|
12
|
+
|
|
13
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
class Dashing.Comments extends Dashing.Widget
|
|
2
|
+
|
|
3
|
+
@accessor 'quote', ->
|
|
4
|
+
"“#{@get('current_comment')?.body}”"
|
|
5
|
+
|
|
6
|
+
ready: ->
|
|
7
|
+
@currentIndex = 0
|
|
8
|
+
@commentElem = $(@node).find('.comment-container')
|
|
9
|
+
@nextComment()
|
|
10
|
+
@startCarousel()
|
|
11
|
+
|
|
12
|
+
onData: (data) ->
|
|
13
|
+
@currentIndex = 0
|
|
14
|
+
|
|
15
|
+
startCarousel: ->
|
|
16
|
+
setInterval(@nextComment, 8000)
|
|
17
|
+
|
|
18
|
+
nextComment: =>
|
|
19
|
+
comments = @get('comments')
|
|
20
|
+
if comments
|
|
21
|
+
@commentElem.fadeOut =>
|
|
22
|
+
@currentIndex = (@currentIndex + 1) % comments.length
|
|
23
|
+
@set 'current_comment', comments[@currentIndex]
|
|
24
|
+
@commentElem.fadeIn()
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<h1 class="title" data-bind="title"></h1>
|
|
2
|
+
<div class="comment-container">
|
|
3
|
+
<h3><img data-bind-src='current_comment.avatar'/><span data-bind='current_comment.name' class="name"></span></h3>
|
|
4
|
+
<p class="comment" data-bind='quote'></p>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<p class="more-info" data-bind="moreinfo"></p>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------
|
|
2
|
+
// Sass declarations
|
|
3
|
+
// ----------------------------------------------------------------------------
|
|
4
|
+
$background-color: #eb9c3c;
|
|
5
|
+
|
|
6
|
+
$title-color: rgba(255, 255, 255, 0.7);
|
|
7
|
+
$moreinfo-color: rgba(255, 255, 255, 0.7);
|
|
8
|
+
|
|
9
|
+
// ----------------------------------------------------------------------------
|
|
10
|
+
// Widget-comment styles
|
|
11
|
+
// ----------------------------------------------------------------------------
|
|
12
|
+
.widget-comments {
|
|
13
|
+
|
|
14
|
+
background-color: $background-color;
|
|
15
|
+
|
|
16
|
+
.title {
|
|
17
|
+
color: $title-color;
|
|
18
|
+
margin-bottom: 15px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.name {
|
|
22
|
+
padding-left: 5px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.comment-container {
|
|
26
|
+
display: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.more-info {
|
|
30
|
+
color: $moreinfo-color;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
class Dashing.Graph extends Dashing.Widget
|
|
2
|
+
|
|
3
|
+
@accessor 'current', ->
|
|
4
|
+
return @get('displayedValue') if @get('displayedValue')
|
|
5
|
+
points = @get('points')
|
|
6
|
+
if points
|
|
7
|
+
points[points.length - 1].y
|
|
8
|
+
|
|
9
|
+
ready: ->
|
|
10
|
+
container = $(@node).parent()
|
|
11
|
+
# Gross hacks. Let's fix this.
|
|
12
|
+
width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
|
|
13
|
+
height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
|
|
14
|
+
@graph = new Rickshaw.Graph(
|
|
15
|
+
element: @node
|
|
16
|
+
width: width
|
|
17
|
+
height: height
|
|
18
|
+
renderer: @get("graphtype")
|
|
19
|
+
series: [
|
|
20
|
+
{
|
|
21
|
+
color: "#fff",
|
|
22
|
+
data: [{x:0, y:0}]
|
|
23
|
+
}
|
|
24
|
+
]
|
|
25
|
+
padding: {top: 0.02, left: 0.02, right: 0.02, bottom: 0.02}
|
|
26
|
+
)
|
|
27
|
+
|
|
28
|
+
@graph.series[0].data = @get('points') if @get('points')
|
|
29
|
+
|
|
30
|
+
x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph)
|
|
31
|
+
y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
|
|
32
|
+
@graph.render()
|
|
33
|
+
|
|
34
|
+
onData: (data) ->
|
|
35
|
+
if @graph
|
|
36
|
+
@graph.series[0].data = data.points
|
|
37
|
+
@graph.render()
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------
|
|
2
|
+
// Sass declarations
|
|
3
|
+
// ----------------------------------------------------------------------------
|
|
4
|
+
$background-color: #dc5945;
|
|
5
|
+
|
|
6
|
+
$title-color: rgba(255, 255, 255, 0.7);
|
|
7
|
+
$moreinfo-color: rgba(255, 255, 255, 0.3);
|
|
8
|
+
$tick-color: rgba(0, 0, 0, 0.4);
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
// ----------------------------------------------------------------------------
|
|
12
|
+
// Widget-graph styles
|
|
13
|
+
// ----------------------------------------------------------------------------
|
|
14
|
+
.widget-graph {
|
|
15
|
+
|
|
16
|
+
background-color: $background-color;
|
|
17
|
+
position: relative;
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
svg {
|
|
21
|
+
position: absolute;
|
|
22
|
+
opacity: 0.4;
|
|
23
|
+
fill-opacity: 0.4;
|
|
24
|
+
left: 0px;
|
|
25
|
+
top: 0px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.title, .value {
|
|
29
|
+
position: relative;
|
|
30
|
+
z-index: 99;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.title {
|
|
34
|
+
color: $title-color;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.more-info {
|
|
38
|
+
color: $moreinfo-color;
|
|
39
|
+
font-weight: 600;
|
|
40
|
+
font-size: 20px;
|
|
41
|
+
margin-top: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.x_tick {
|
|
45
|
+
position: absolute;
|
|
46
|
+
bottom: 0;
|
|
47
|
+
.title {
|
|
48
|
+
font-size: 20px;
|
|
49
|
+
color: $tick-color;
|
|
50
|
+
opacity: 0.5;
|
|
51
|
+
padding-bottom: 3px;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.y_ticks {
|
|
56
|
+
font-size: 20px;
|
|
57
|
+
fill: $tick-color;
|
|
58
|
+
fill-opacity: 1;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.domain {
|
|
62
|
+
display: none;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
class Dashing.Iframe extends Dashing.Widget
|
|
2
|
+
|
|
3
|
+
ready: ->
|
|
4
|
+
# This is fired when the widget is done being rendered
|
|
5
|
+
|
|
6
|
+
onData: (data) ->
|
|
7
|
+
# Handle incoming data
|
|
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.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<iframe data-bind-src="url" frameborder=0></iframe>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
class Dashing.Image extends Dashing.Widget
|
|
2
|
+
|
|
3
|
+
ready: ->
|
|
4
|
+
# This is fired when the widget is done being rendered
|
|
5
|
+
|
|
6
|
+
onData: (data) ->
|
|
7
|
+
# Handle incoming data
|
|
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.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<img data-bind-src="image | prepend '/assets'" data-bind-width="width"/>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------
|
|
2
|
+
// Sass declarations
|
|
3
|
+
// ----------------------------------------------------------------------------
|
|
4
|
+
$background-color: #4b4b4b;
|
|
5
|
+
|
|
6
|
+
// ----------------------------------------------------------------------------
|
|
7
|
+
// Widget-image styles
|
|
8
|
+
// ----------------------------------------------------------------------------
|
|
9
|
+
.widget-image {
|
|
10
|
+
|
|
11
|
+
background-color: $background-color;
|
|
12
|
+
|
|
13
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<h1 class="title" data-bind="title"></h1>
|
|
2
|
+
|
|
3
|
+
<ol>
|
|
4
|
+
<li data-foreach-item="items">
|
|
5
|
+
<span class="label" data-bind="item.label"></span>
|
|
6
|
+
<span class="value" data-bind="item.value"></span>
|
|
7
|
+
</li>
|
|
8
|
+
</ol>
|
|
9
|
+
|
|
10
|
+
<ul class="list-nostyle">
|
|
11
|
+
<li data-foreach-item="items">
|
|
12
|
+
<span class="label" data-bind="item.label"></span>
|
|
13
|
+
<span class="value" data-bind="item.value"></span>
|
|
14
|
+
</li>
|
|
15
|
+
</ul>
|
|
16
|
+
|
|
17
|
+
<p class="more-info" data-bind="moreinfo"></p>
|
|
18
|
+
<p class="updated-at" data-bind="updatedAtMessage"></p>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------
|
|
2
|
+
// Sass declarations
|
|
3
|
+
// ----------------------------------------------------------------------------
|
|
4
|
+
$background-color: #12b0c5;
|
|
5
|
+
$value-color: #fff;
|
|
6
|
+
|
|
7
|
+
$title-color: rgba(255, 255, 255, 0.7);
|
|
8
|
+
$label-color: rgba(255, 255, 255, 0.7);
|
|
9
|
+
$moreinfo-color: rgba(255, 255, 255, 0.7);
|
|
10
|
+
|
|
11
|
+
// ----------------------------------------------------------------------------
|
|
12
|
+
// Widget-list styles
|
|
13
|
+
// ----------------------------------------------------------------------------
|
|
14
|
+
.widget-list {
|
|
15
|
+
|
|
16
|
+
background-color: $background-color;
|
|
17
|
+
vertical-align: top;
|
|
18
|
+
|
|
19
|
+
.title {
|
|
20
|
+
color: $title-color;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
ol, ul {
|
|
24
|
+
margin: 0 15px;
|
|
25
|
+
text-align: left;
|
|
26
|
+
color: $label-color;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
ol {
|
|
30
|
+
list-style-position: inside;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
li {
|
|
34
|
+
margin-bottom: 5px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.list-nostyle {
|
|
38
|
+
list-style: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.label {
|
|
42
|
+
color: $label-color;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.value {
|
|
46
|
+
float: right;
|
|
47
|
+
margin-left: 12px;
|
|
48
|
+
font-weight: 600;
|
|
49
|
+
color: $value-color;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.updated-at {
|
|
53
|
+
color: rgba(0, 0, 0, 0.3);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.more-info {
|
|
57
|
+
color: $moreinfo-color;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
class Dashing.Meter extends Dashing.Widget
|
|
2
|
+
|
|
3
|
+
@accessor 'value', Dashing.AnimatedValue
|
|
4
|
+
|
|
5
|
+
constructor: ->
|
|
6
|
+
super
|
|
7
|
+
@observe 'value', (value) ->
|
|
8
|
+
$(@node).find(".meter").val(value).trigger('change')
|
|
9
|
+
|
|
10
|
+
ready: ->
|
|
11
|
+
meter = $(@node).find(".meter")
|
|
12
|
+
meter.attr("data-bgcolor", meter.css("background-color"))
|
|
13
|
+
meter.attr("data-fgcolor", meter.css("color"))
|
|
14
|
+
meter.knob()
|