Implement hotness for violations

dashboards/edx.erb

@@ -23,16 +23,21 @@ Dashing.numColumns = 12
     <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
       <div data-id="github_status" data-view="GithubStatus" data-title="GitHub Status"></div>
     </li>
-    <li data-row="1" data-col="9" data-sizex="4" data-sizey="5">
+    <li data-row="1" data-col="9" data-sizex="4" data-sizey="4">
       <div data-id="jenkins_deploy_status" data-view="Jenkins" data-title="Deploy Tests"></div>
     </li>
+    <!-- warm should be the threshold on the branch jobs and
+    cool should be 98 or 99% of it, depending on how aggressively
+    we want to lower the numbers. -->
     <li data-row="5" data-col="9" data-sizex="2" data-sizey="2">
-      <div data-id="pep8" data-view="Violations" data-title="PEP8 Violations"></div>
+      <div data-id="pep8" data-view="Hotness" data-title="PEP8 Violations" data-cool="881" data-warm="890">
+      </div>
     </li>
     <li data-row="5" data-col="11" data-sizex="2" data-sizey="2">
-      <div data-id="pylint" data-view="Violations" data-title="Pylint Violations"></div>
+      <div data-id="pylint" data-view="Hotness" data-title="Pylint Violations" data-cool="4752" data-warm="4800">
+      </div>
     </li>
-    <li data-row="6" data-col="5" data-sizex="4" data-sizey="3">
+    <li data-row="6" data-col="5" data-sizex="4" data-sizey="2">
       <div data-id="mitx_hash_prod" data-view="MitxVersion" style="background-color:#b52967"></div>
     </li>
     <li data-row="4" data-col="5" data-sizex="4" data-sizey="2">

jobs/edx-violations.rb

@@ -12,6 +12,6 @@
     current_pep8 = doc.at_css("table.pane > tbody > tr:nth-of-type(2) > td:nth-of-type(2)").text
     current_pylint = doc.at_css("table.pane > tbody > tr:nth-of-type(3) > td:nth-of-type(2)").text
 
-    send_event('pep8', { current: current_pep8 })
-    send_event('pylint', { current: current_pylint })
+    send_event('pep8', { value: current_pep8.split(" ")[0].to_i })
+    send_event('pylint', { value: current_pylint.split(" ")[0].to_i })
 end

widgets/hotness/README.md

@@ -0,0 +1 @@
+Adapted from https://gist.github.com/munkius/9209839

widgets/hotness/hotness.coffee

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

widgets/hotness/hotness.html

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

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; }