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

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

@@ -56,6 +56,7 @@
 
 .repo-panel-info-element .stat-col {
   border-right: 2px solid #eee;
+  padding-right: 26px;
 }
 
 .repo-panel-info-element .stat-title {
@@ -65,11 +66,21 @@
   margin-bottom: 10px;
 }
 
-.repo-panel-info-element .stat {
+.repo-panel-info-element .stat-row {
   text-align: center;
   margin-bottom: 20px;
 }
 
+.repo-panel-info-element .stat-row .heatmap {
+  margin-top: 20px;
+}
+
+.repo-panel-info-element .stat {
+  display: inline-block;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
 .repo-panel-info-element .stat .stat-value {
   font-size: 46px;
 }

static/css/directives/ui/heatmap.css

@@ -0,0 +1,17 @@
+.heatmap-element {
+    display: inline-block;
+}
+
+.heatmap-element svg {
+    overflow: visible;
+}
+
+.heatmap-element .cal-heatmap-container {
+    display: inline-block !important;
+}
+
+.heatmap-element .graph-label {
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 12px;
+    text-transform: uppercase;
+}

static/directives/heatmap.html

@@ -0,0 +1 @@
+<div class="heatmap-element"></div>

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

@@ -1,38 +1,29 @@
 <div class="repo-panel-info-element">
   <!-- Repository stats and builds summary -->
   <div class="repository-stats row">
-    <!-- Pull Stats -->
-    <div class="col-sm-3 stat-col">
-      <div class="stat-title">Repo Pulls</div>
+    <!-- Stats -->
+    <div class="col-sm-5 stat-col">
+      <div class="stat-title">Repository Activity</div>
 
-      <div class="stat">
-        <div class="stat-value">{{ repository.stats.pulls.today | abbreviated }}</div>
-        <div class="stat-subtitle">Last 24 hours</div>
-      </div>
+      <div class="stat-row">
+        <div class="heatmap hidden-xs hidden-sm" data="repository.stats"
+             item-name="action" domain="month" range="3"
+             start-count="-2" start-domain="months"></div>
 
-      <div class="stat">
-        <div class="stat-value">{{ repository.stats.pulls.thirty_day | abbreviated }}</div>
-        <div class="stat-subtitle">Last 30 days</div>
-      </div>
-    </div>
+        <div class="stat visible-xs visible-sm">
+          <div class="stat-value">{{ getAggregatedUsage(repository.stats, 1) | abbreviated }}</div>
+          <div class="stat-subtitle">Yesterday</div>
+        </div>
 
-    <!-- Push Stats -->
-    <div class="col-sm-3 stat-col">
-      <div class="stat-title">Repo Pushes</div>
-
-      <div class="stat">
-        <div class="stat-value">{{ repository.stats.pushes.today | abbreviated }}</div>
-        <div class="stat-subtitle">Last 24 hours</div>
-      </div>
-
-      <div class="stat">
-        <div class="stat-value">{{ repository.stats.pushes.thirty_day | abbreviated }}</div>
-        <div class="stat-subtitle">Last 30 days</div>
+        <div class="stat visible-xs visible-sm">
+          <div class="stat-value">{{ getAggregatedUsage(repository.stats, 30) | abbreviated }}</div>
+          <div class="stat-subtitle">Last 30 days</div>
+        </div>
       </div>
     </div>
 
     <!-- Builds -->
-    <div class="col-sm-6 builds-list">
+    <div class="col-sm-7 builds-list">
       <div class="stat-title">Recent Repo Builds</div>
 
       <!-- Loading -->

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