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

static/js/directives/repo-view/repo-panel-info.js

@@ -27,6 +27,21 @@ angular.module('quay').directive('repoPanelInfo', function () {
         $scope.repository.description = content;
         $scope.repository.put();
       };
+
+      $scope.getAggregatedUsage = function(stats, days) {
+        var count = 0;
+        var startDate = moment().subtract(days + 1, 'days');
+        for (var i = 0; i < stats.length; ++i) {
+          var stat = stats[i];
+          var statDate = moment(stat['date']);
+          if (statDate.isBefore(startDate)) {
+            continue;
+          }
+
+          count += stat['count'];
+        }
+        return count;
+      };
     }
   };
   return directiveDefinitionObject;

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