Change repo stats to use the RAC table and a nice UI

static/js/directives/ui/heatmap.js

@@ -0,0 +1,67 @@
+/**
+ * An element which displays a date+count heatmap.
+ */
+angular.module('quay').directive('heatmap', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/heatmap.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'data': '=data',
+      'startCount': '@startCount',
+      'startDomain': '@startDomain',
+
+      'itemName': '@itemName',
+      'domain': '@domain',
+      'range': '@range'
+    },
+    controller: function($scope, $element, $timeout) {
+      var cal = null;
+
+      var refresh = function() {
+        var data = $scope.data;
+        if (!data) { return; }
+
+        if (!cal) {
+          var start = moment().add($scope.startCount * 1, $scope.startDomain).toDate();
+
+          cal = new CalHeatMap();
+          cal.init({
+            itemName: $scope.itemName,
+            domain: $scope.domain,
+            range: $scope.range * 1,
+
+            start: start,
+            itemSelector: $element.find('.heatmap-element')[0],
+            cellSize: 15,
+            domainMargin: [10, 10, 10, 10],
+            displayLegend: false,
+            tooltip: true,
+            legendColors: {
+              empty: "#f4f4f4",
+              min: "#c9e9fb",
+              max: "steelblue",
+            }
+          });
+        }
+
+        cal.update(formatData(data));
+      };
+
+      var formatData = function(data) {
+        var timestamps = {};
+        data.forEach(function(entry) {
+          timestamps[moment(entry.date).unix()] = entry.count;
+        });
+        return timestamps;
+      };
+
+      $scope.$watch('data', function() {
+        $timeout(refresh, 500);
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});