Dashboard wip

Dashboard/systemator/Makefile

@@ -0,0 +1,6 @@
+help:  ## Display this help
+	@awk 'BEGIN {FS = ":.*##"; printf "\nUsage:\n  make \033[36m<target>\033[0m\n\nTargets:\n"} /^[a-zA-Z_-]+:.*?##/ { printf "  \033[36m%-13s\033[0m %s\n", $$1, $$2 }' $(MAKEFILE_LIST)
+
+start:  ## Start dashboard
+	smashing start
+

Dashboard/systemator/dashboards/sample.erb

@@ -21,5 +21,4 @@
       <div data-id="convergence" data-view="Graph" data-title="Convergence" style="background-color:#ff9618"></div>
     </li>
   </ul>
-  <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>
 </div>

Dashboard/systemator/dashboards/sampletv.erb

@@ -52,5 +52,4 @@ $(function() {
     </li>
 
   </ul>
-  <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>
 </div>

Dashboard/systemator/jobs/buzzwords.rb

@@ -1,4 +1,4 @@
-buzzwords = ['Paradigm shift', 'Leverage', 'Pivoting', 'Turn-key', 'Streamlininess', 'Exit strategy', 'Synergy', 'Enterprise', 'Web 2.0'] 
+buzzwords = ['Enterprise', 'Web 2.0'] 
 buzzword_counts = Hash.new({ value: 0 })
 
 SCHEDULER.every '2s' do

Dashboard/systemator/widgets/hotness/hotness.coffee

@@ -0,0 +1,23 @@
+class Dashing.Hotness extends Dashing.Widget
+
+  @accessor 'value', Dashing.AnimatedValue
+
+  constructor: ->
+    super
+
+  onData: (data) ->
+    node = $(@node)
+    value = parseInt data.value
+    cool = parseInt node.data "cool"
+    warm = parseInt node.data "warm"
+    level = switch
+      when value <= cool then 0
+      when value >= warm then 4
+      else 
+        bucketSize = (warm - cool) / 3 # Total # of colours in middle
+        Math.ceil (value - cool) / bucketSize
+
+    backgroundClass = "hotness#{level}"
+    lastClass = @get "lastClass"
+    node.toggleClass "#{lastClass} #{backgroundClass}"
+    @set "lastClass", backgroundClass

Dashboard/systemator/widgets/hotness/hotness.html

@@ -0,0 +1,5 @@
+<h1 class="title" data-bind="title"></h1>
+
+<h2 class="value" data-bind="value | shortenedNumber | prepend prefix | append suffix"></h2>
+
+<p class="updated-at" data-bind="updatedAtMessage"></p>

Dashboard/systemator/widgets/hotness/hotness.scss

@@ -0,0 +1,52 @@
+// ----------------------------------------------------------------------------
+// Mixins
+// ----------------------------------------------------------------------------
+@mixin transition($transition-property, $transition-time, $method) {
+  -webkit-transition: $transition-property $transition-time $method;
+  -moz-transition: $transition-property $transition-time $method;
+  -o-transition: $transition-property $transition-time $method;
+  transition: $transition-property $transition-time $method;
+}
+
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color: #000000;
+$value-color: #FFFFFF;
+$title-color: rgba(255, 255, 255, 0.7);
+$updated-at-color: rgba(0, 0, 0, 0.3);
+
+// ----------------------------------------------------------------------------
+// Widget-hotness styles
+// ----------------------------------------------------------------------------
+.widget-hotness {
+
+  background-color: $background-color;
+  @include transition(background-color, 1s, linear);
+
+  .title {
+    color: $title-color;
+  }
+
+  .value {
+    color: $value-color;
+  }
+
+  .updated-at {
+    color: $updated-at-color;
+  }
+
+}
+
+.hotness0 { background-color: #00C176; }
+.hotness1 { background-color: #88C100; }
+.hotness2 { background-color: #FABE28; }
+.hotness3 { background-color: #FF8A00; }
+.hotness4 { background-color: #FF003C; }
+
+// // More colour-blind friendly palette
+// .hotness0 { background-color: #046D8B; }
+// .hotness1 { background-color: #309292; }
+// .hotness2 { background-color: #2FB8AC; }
+// .hotness3 { background-color: #93A42A; }
+// .hotness4 { background-color: #ECBE13; }