smashing 1.0.0

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.

This version of smashing might be problematic. Click here for more details.

Files changed (76) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +10 -0
  3. data/bin/smashing +9 -0
  4. data/javascripts/batman.jquery.js +163 -0
  5. data/javascripts/batman.js +13680 -0
  6. data/javascripts/dashing.coffee +130 -0
  7. data/javascripts/es5-shim.js +1021 -0
  8. data/javascripts/jquery.js +4 -0
  9. data/lib/dashing.rb +6 -0
  10. data/lib/dashing/app.rb +181 -0
  11. data/lib/dashing/cli.rb +109 -0
  12. data/lib/dashing/downloader.rb +18 -0
  13. data/templates/dashboard/%name%.erb.tt +7 -0
  14. data/templates/job/%name%.rb +4 -0
  15. data/templates/project/.gitignore +2 -0
  16. data/templates/project/Gemfile +6 -0
  17. data/templates/project/README.md +1 -0
  18. data/templates/project/assets/fonts/FontAwesome.otf +0 -0
  19. data/templates/project/assets/fonts/fontawesome-webfont.eot +0 -0
  20. data/templates/project/assets/fonts/fontawesome-webfont.svg +655 -0
  21. data/templates/project/assets/fonts/fontawesome-webfont.ttf +0 -0
  22. data/templates/project/assets/fonts/fontawesome-webfont.woff +0 -0
  23. data/templates/project/assets/fonts/fontawesome-webfont.woff2 +0 -0
  24. data/templates/project/assets/images/logo.png +0 -0
  25. data/templates/project/assets/javascripts/application.coffee +25 -0
  26. data/templates/project/assets/javascripts/d3-3.2.8.js +5 -0
  27. data/templates/project/assets/javascripts/dashing.gridster.coffee +37 -0
  28. data/templates/project/assets/javascripts/gridster/jquery.gridster.min.js +2 -0
  29. data/templates/project/assets/javascripts/gridster/jquery.leanModal.min.js +5 -0
  30. data/templates/project/assets/javascripts/jquery.knob.js +646 -0
  31. data/templates/project/assets/javascripts/rickshaw-1.4.3.min.js +2 -0
  32. data/templates/project/assets/stylesheets/application.scss +258 -0
  33. data/templates/project/assets/stylesheets/font-awesome.css +2086 -0
  34. data/templates/project/assets/stylesheets/jquery.gridster.min.css +2 -0
  35. data/templates/project/config.ru +18 -0
  36. data/templates/project/dashboards/layout.erb +32 -0
  37. data/templates/project/dashboards/sample.erb +25 -0
  38. data/templates/project/dashboards/sampletv.erb +56 -0
  39. data/templates/project/jobs/buzzwords.rb +9 -0
  40. data/templates/project/jobs/convergence.rb +14 -0
  41. data/templates/project/jobs/sample.rb +13 -0
  42. data/templates/project/jobs/twitter.rb +28 -0
  43. data/templates/project/lib/.empty_directory +1 -0
  44. data/templates/project/public/404.html +26 -0
  45. data/templates/project/public/favicon.ico +0 -0
  46. data/templates/project/widgets/clock/clock.coffee +18 -0
  47. data/templates/project/widgets/clock/clock.html +2 -0
  48. data/templates/project/widgets/clock/clock.scss +13 -0
  49. data/templates/project/widgets/comments/comments.coffee +24 -0
  50. data/templates/project/widgets/comments/comments.html +7 -0
  51. data/templates/project/widgets/comments/comments.scss +33 -0
  52. data/templates/project/widgets/graph/graph.coffee +37 -0
  53. data/templates/project/widgets/graph/graph.html +5 -0
  54. data/templates/project/widgets/graph/graph.scss +65 -0
  55. data/templates/project/widgets/iframe/iframe.coffee +9 -0
  56. data/templates/project/widgets/iframe/iframe.html +1 -0
  57. data/templates/project/widgets/iframe/iframe.scss +8 -0
  58. data/templates/project/widgets/image/image.coffee +9 -0
  59. data/templates/project/widgets/image/image.html +1 -0
  60. data/templates/project/widgets/image/image.scss +13 -0
  61. data/templates/project/widgets/list/list.coffee +6 -0
  62. data/templates/project/widgets/list/list.html +18 -0
  63. data/templates/project/widgets/list/list.scss +60 -0
  64. data/templates/project/widgets/meter/meter.coffee +14 -0
  65. data/templates/project/widgets/meter/meter.html +7 -0
  66. data/templates/project/widgets/meter/meter.scss +35 -0
  67. data/templates/project/widgets/number/number.coffee +24 -0
  68. data/templates/project/widgets/number/number.html +11 -0
  69. data/templates/project/widgets/number/number.scss +39 -0
  70. data/templates/project/widgets/text/text.coffee +1 -0
  71. data/templates/project/widgets/text/text.html +7 -0
  72. data/templates/project/widgets/text/text.scss +32 -0
  73. data/templates/widget/%name%/%name%.coffee.tt +9 -0
  74. data/templates/widget/%name%/%name%.html +1 -0
  75. data/templates/widget/%name%/%name%.scss.tt +3 -0
  76. metadata +347 -0
data/templates/project/assets/stylesheets/jquery.gridster.min.css ADDED
@@ -0,0 +1,2 @@
1
+ /*! gridster.js - v0.5.1 - 2014-03-26 - * http://gridster.net/ - Copyright (c) 2014 ducksboard; Licensed MIT */
2
+ .gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s,width .4s;-moz-transition:height .4s,width .4s;-o-transition:height .4s,width .4s;-ms-transition:height .4s,width .4s;transition:height .4s,width .4s}.gridster .gs-w{z-index:2;position:absolute}.ready .gs-w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s;-moz-transition:opacity .3s,left .3s,top .3s;-o-transition:opacity .3s,left .3s,top .3s;transition:opacity .3s,left .3s,top .3s}.ready .gs-w:not(.preview-holder),.ready .resize-preview-holder{-webkit-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-moz-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-o-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;transition:opacity .3s,left .3s,top .3s,width .3s,height .3s}.gridster .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}.gridster .player-revert{z-index:10!important;-webkit-transition:left .3s,top .3s!important;-moz-transition:left .3s,top .3s!important;-o-transition:left .3s,top .3s!important;transition:left .3s,top .3s!important}.gridster .dragging,.gridster .resizing{z-index:10!important;-webkit-transition:all 0s!important;-moz-transition:all 0s!important;-o-transition:all 0s!important;transition:all 0s!important}.gs-resize-handle{position:absolute;z-index:1}.gs-resize-handle-both{width:20px;height:20px;bottom:-8px;right:-8px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=);background-position:top left;background-repeat:no-repeat;cursor:se-resize;z-index:20}.gs-resize-handle-x{top:0;bottom:13px;right:-5px;width:10px;cursor:e-resize}.gs-resize-handle-y{left:0;right:13px;bottom:-5px;height:10px;cursor:s-resize}.gs-w:hover .gs-resize-handle,.resizing .gs-resize-handle{opacity:1}.gs-resize-handle,.gs-w.dragging .gs-resize-handle{opacity:0}.gs-resize-disabled .gs-resize-handle{display:none!important}[data-max-sizex="1"] .gs-resize-handle-x,[data-max-sizey="1"] .gs-resize-handle-y,[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle{display:none!important}
data/templates/project/config.ru ADDED
@@ -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
data/templates/project/dashboards/layout.erb ADDED
@@ -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>
data/templates/project/dashboards/sample.erb ADDED
@@ -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-height="200" data-width="200" data-min="0" data-max="100" data-suffix="%"></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>
data/templates/project/dashboards/sampletv.erb ADDED
@@ -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="fa fa-clock-o 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="fa fa-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="fa fa-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>
data/templates/project/jobs/buzzwords.rb ADDED
@@ -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
data/templates/project/jobs/convergence.rb ADDED
@@ -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
data/templates/project/jobs/sample.rb ADDED
@@ -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
data/templates/project/jobs/twitter.rb ADDED
@@ -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
data/templates/project/lib/.empty_directory ADDED
@@ -0,0 +1 @@
1
+ .empty_directory
data/templates/project/public/404.html ADDED
@@ -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>
data/templates/project/widgets/clock/clock.coffee ADDED
@@ -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
data/templates/project/widgets/clock/clock.html ADDED
@@ -0,0 +1,2 @@
1
+ <h1 data-bind="date"></h1>
2
+ <h2 data-bind="time"></h2>
data/templates/project/widgets/clock/clock.scss ADDED
@@ -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
+ }
data/templates/project/widgets/comments/comments.coffee ADDED
@@ -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()
data/templates/project/widgets/comments/comments.html ADDED
@@ -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>
data/templates/project/widgets/comments/comments.scss ADDED
@@ -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
+ }
data/templates/project/widgets/graph/graph.coffee ADDED
@@ -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()
data/templates/project/widgets/graph/graph.html ADDED
@@ -0,0 +1,5 @@
1
+ <h1 class="title" data-bind="title"></h1>
2
+
3
+ <h2 class="value" data-bind="current | prettyNumber | prepend prefix | append suffix"></h2>
4
+
5
+ <p class="more-info" data-bind="moreinfo"></p>
data/templates/project/widgets/graph/graph.scss ADDED
@@ -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
+ }