Tom history graph

app/directives/distribution-graph/distribution-graph.directive.jade

@@ -1,4 +1,4 @@
-.graph-viewer
+.graph-viewer(ng-show="graphState.show == 'distribution'")
   .distribution-graph
 
   .info-port
@@ -8,3 +8,6 @@
     .rating(ng-if="!displayCoders")
       .num {{rating}}
       .label RATING
+
+    .compare
+      button(ng-click="graphState.show = 'history'") COMPARE

app/directives/distribution-graph/distribution-graph.directive.js

@@ -11,7 +11,8 @@
       },
       scope: {
         promise: '=',
-        rating: '='
+        rating: '=',
+        graphState: '='
       },
       controller: ['$scope', DistributionGraphController]
     };
@@ -55,9 +56,11 @@
         'end': Infinity
       }
     ];
-    var w       = 700,
+    var w       = 600,
         h       = 400,
-        padding = 100;
+        padding = { top: 20, left: 100, bottom: 100, right: 0 };
+    var totalW = w + padding.left + padding.right;
+    var totalH = h + padding.top + padding.bottom;
 
     activate();
 
@@ -71,45 +74,48 @@
         removeTrailingZeroes(ranges);
         var xScale = d3.scale.ordinal()
                        .domain(d3.range(ranges.length))
-                       .rangeRoundBands([padding, w], 0.05);
+                       .rangeRoundBands([padding.left, padding.left + w], 0.05);
         var yScale = d3.scale.linear()
                        .domain([0, d3.max(ranges, function(range) { return range.number }) + 1])
-                       .range([h - padding, 0]);
+                       .range([totalH - padding.bottom, padding.top]);
         var xScale2 = d3.scale.linear()
                         .domain([ranges[0].start,
                                 d3.max(ranges, function(range) { return range.end })])
-                        .range([padding, w]);
+                        .range([padding.left, totalW - padding.right]);
         var svg = d3.select('div.distribution-graph')
                     .append('svg')
-                    .attr('width', w)
-                    .attr('height', h);
+                    .attr('width', totalW)
+                    .attr('height', totalH);
 
         svg.append('rect')
-           .attr('x', padding)
-           .attr('y', 0)
+           .attr('x', padding.left)
+           .attr('y', padding.top)
            .attr('width', w)
-           .attr('height', h - padding)
-           .attr('fill', '#eeeeee')
+           .attr('height', h)
+           .attr('fill', '#f6f6f6')
 
         svg.append('g')
            .attr('class', 'grid')
-           .attr('transform', 'translate(' + padding + ',0)')
+           .attr('transform', 'translate(' + padding.left + ',0)')
            .call(
-             yAxis(5).tickSize(-w, 0, 0)
+             yAxis(5).tickSize(-totalW, 0, 0)
                     .tickFormat('')
            )
 
         svg.append('g')
            .attr('class', 'axis')
-           .attr('transform', 'translate(' + padding + ',0)')
+           .attr('transform', 'translate(' + padding.left + ', 0)')
            .call(yAxis(5))
 
 
+        function logr(x) {
+          console.log(x); return x;
+        }
         svg.append('line')
            .attr('x1', xScale2($scope.rating))
-           .attr('y1', h - padding)
+           .attr('y1', totalH - padding.bottom)
            .attr('x2', xScale2($scope.rating))
-           .attr('y2', 0)
+           .attr('y2', padding.top)
            .attr('class', 'my-rating')
            .attr('stroke-width', 2)
            .attr('stroke', ratingToColor($scope.colors, $scope.rating));
@@ -127,7 +133,7 @@
            })
            .attr('width', xScale.rangeBand())
            .attr('height', function(d) {
-             return h - padding - yScale(d.number);
+             return totalH - padding.bottom - yScale(d.number);
            })
            .attr('fill', function(d) {
              return ratingToColor($scope.colors, d.start);
@@ -153,20 +159,20 @@
            .attr('class', 'xaxis')
            .attr('x1', function(d, i) {
              if (i === 0) {
-               return padding;
+               return padding.left;
              } else {
                return xScale(i) - .5;
              }
            })
            .attr('x2', function(d, i) {
              if (i === ranges.length - 1) {
-               return w;
+               return totalW - padding.right;
              } else {
                return xScale(i) + xScale.rangeBand() + .5;
              }
            })
-           .attr('y1', h - padding + .5)
-           .attr('y2', h - padding + .5)
+           .attr('y1', h + padding.top + .5)
+           .attr('y2', h + padding.top + .5)
            .attr('stroke', function(d) {
              return ratingToColor($scope.colors, d.start);
            })
@@ -185,7 +191,7 @@
 
         svg.append('g')
            .attr('class', 'axis')
-           .attr('transform', 'translate(0,' + (h - padding) + ')')
+           .attr('transform', 'translate(0,' + (h + padding.top) + ')')
            .call(xAxis)
            .selectAll('text')
            .attr('x', 9)

app/directives/history-graph/history-graph.directive.jade

@@ -0,0 +1,11 @@
+.history-graph-container(ng-show="graphState.show == 'history'")
+  .history-graph
+
+  .info-port
+    .rating
+      .num {{historyRating || rating}}
+      .label RATING
+    .history-info(ng-if="historyRating")
+      | Attained on {{historyDate}} in challenge "{{historyChallenge}}"
+    .lower
+      button(ng-click="graphState.show = 'distribution'") COMPARE

app/directives/history-graph/history-graph.directive.js

@@ -0,0 +1,241 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('historyGraph', historyGraph);
+
+  function historyGraph() {
+    return {
+      restrict: 'E',
+      templateUrl: function(elem, attrs) {
+        return 'directives/history-graph/history-graph.directive.html';
+      },
+      scope: {
+        promise: '=',
+        rating: '=',
+        graphState: '='
+      },
+      controller: ['$scope', HistoryGraphController]
+    };
+  }
+
+  function HistoryGraphController($scope) {
+    $scope.colors = [
+      // grey
+      {
+        'color': '#7f7f7f',
+        'darkerColor': '#656565',
+        'start': 0,
+        'end': 899
+      },
+      // green
+      {
+        'color': '#99cc09',
+        'darkerColor': '#7aa307',
+        'start': 900,
+        'end': 1199
+      },
+      // blue
+      {
+        'color': '#09affe',
+        'darkerColor': '#078ccb',
+        'start': 1200,
+        'end': 1499
+      },
+      // yellow
+      {
+        'color': '#f39426',
+        'darkerColor': '#c2761e',
+        'start': 1500,
+        'end': 2199
+      },
+      // red
+      {
+        'color': '#fe0866',
+        'darkerColor': '#cb0651',
+        'start': 2200,
+        'end': Infinity
+      }
+    ];
+    var w       = 600,
+        h       = 400,
+        padding = { top: 20, right: 5, bottom: 30, left: 50 };
+
+    var totalH = h + padding.top + padding.bottom;
+    var totalW = w + padding.left + padding.right;
+
+    activate();
+
+    function activate() {
+      $scope.promise.then(function(history) {
+
+        var parseDate = d3.time.format.utc("%Y-%m-%dT%H:%M:%S.%LZ").parse;
+        history.forEach(function(d) {
+          d.ratingDate = parseDate(d.ratingDate);
+        });
+
+        var x = d3.time.scale()
+                  .range([padding.left + 5, w + padding.left - 5])
+                  .domain(d3.extent(history, function(d) { return d.ratingDate; }));
+
+        var y = d3.scale.linear()
+                  .range([h + padding.top - 5, padding.top + 5])
+                  .domain(d3.extent(history, function(d) { return d.newRating; }));
+
+
+        function yAxis(ticks) {
+          return d3.svg.axis()
+                   .scale(y)
+                   .ticks(ticks || 10)
+                   .orient("left");
+        }
+
+        function xAxis(ticks) {
+          return d3.svg.axis()
+                   .scale(x)
+                   .ticks(ticks || 10)
+                   .orient("bottom");
+        }
+
+        var line = d3.svg.line()
+                     .interpolate('cardinal')
+                     .x(function(d) { return x(d.ratingDate); })
+                     .y(function(d) { return y(d.newRating); })
+
+
+        var svg = d3.select('.history-graph').append('svg')
+            .attr('width', w + padding.left + padding.right)
+            .attr('height', h + padding.top + padding.bottom)
+
+
+        svg.append('rect')
+           .attr('x', padding.left)
+           .attr('y', padding.top)
+           .attr('width', w)
+           .attr('height', h)
+
+
+
+        svg.append('g')
+           .attr('class', 'x axis')
+           .attr('transform', 'translate(0,' + (h + padding.top) +')')
+           .call(xAxis());
+
+        svg.selectAll('g.x.axis .tick text')
+           .attr('font-size', function(d) {
+             return moment(d).format('MM') == '01' ? 12 : 10;
+           });
+
+
+        svg.append('g')
+            .attr('class', 'y axis')
+            .attr('transform', 'translate(' + padding.left + ')')
+            .call(yAxis().tickFormat(function(d) { return parseInt(d) })
+             )
+
+        svg.append('g')
+           .attr('class', 'grid')
+           .attr('transform', 'translate(0, ' + (h + padding.top) + ')')
+           .call(
+             xAxis(Math.round(w / 35)).tickSize(-h, 0, 0)
+                     .tickFormat('')
+           )
+
+        svg.append('g')
+           .attr('class', 'grid')
+           .attr('transform', 'translate(' + padding.left + ',0)')
+           .call(
+             yAxis(Math.round(h / 30)).tickSize(-w, 0, 0)
+                    .tickFormat('')
+           )
+
+
+        svg.append('path')
+           .datum(history)
+           .attr('class', 'line')
+           .attr('d', line)
+
+
+           // FIXME !!!
+//        svg.append('g')
+//           .selectAll('line')
+//           .data($scope.colors)
+//           .enter()
+//           .append('line')
+//           .attr('x1', totalW - 3)
+//           .attr('x2', totalW - 3)
+//           .attr('y1', function(d) {
+//             return processRatingStripePoint(y(d.start));
+//           })
+//           .attr('y2', function(d) {
+//             return processRatingStripePoint(y(d.end));
+//           })
+//           .attr('stroke', function(d) {
+//             return d.color;
+//           })
+//           .attr('stroke-width', 3)
+
+        function processRatingStripePoint(y) {
+          console.log('y:' + y)
+          if (y < padding.top) {
+            return padding.top;
+          } else if (y > totalH - padding.bottom) {
+            return padding.bottom;
+          } else {
+            return y;
+          }
+        }
+
+        svg.selectAll('circle')
+           .data(history)
+           .enter()
+           .append('circle')
+           .attr('cx', function(d) {
+             return x(d.ratingDate);
+           })
+           .attr('cy', function(d) {
+             return y(d.newRating);
+           })
+           .attr('fill', function(d) {
+             return ratingToColor($scope.colors, d.newRating);
+           })
+           .on('mouseover', function(d) {
+             $scope.historyRating = d.newRating;
+             $scope.historyDate = moment(d.ratingDate).format('YYYY-MM-DD');
+             $scope.historyChallenge = d.challengeName;
+             $scope.$digest();
+             d3.select(this)
+               .attr('r', 4.0)
+               .attr('stroke', 'black')
+               .attr('stroke-width', '.5px');
+           })
+           .on('mouseout', function(d) {
+             $scope.historyRating = undefined;
+             $scope.$digest();
+             d3.select(this)
+               .attr('r', 3.0)
+               .attr('stroke', 'none')
+               .attr('stroke-width', '0px');
+           })
+           .attr('r', 3.0)
+
+      });
+
+    }
+
+    function ratingToColor(colors, rating) {
+      colors = colors.filter(function(color) {
+        return rating >= color.start && rating <= color.end;
+      });
+      return colors[0] && colors[0].color || 'black';
+    }
+
+    function ratingToDarkerColor(colors, rating) {
+      colors = colors.filter(function(color) {
+        return rating >= color.start && rating <= color.end;
+      });
+      return colors[0] && colors[0].darkerColor || 'black';
+    }
+
+  }
+
+})();