initial import for Open Source 🎉

static/js/directives/ui/heatmap.js

@@ -0,0 +1,90 @@
+/**
+ * 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();
+          var highlight = [];
+          for (i = 0; i < 31; ++i) {
+            var d = moment().add('day', i).toDate();
+            highlight.push(d);
+          }
+
+          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,
+            weekStartOnMonday: false,
+            highlight: highlight,
+            legendColors: {
+              empty: "#f4f4f4",
+              min: "#c9e9fb",
+              max: "steelblue",
+              base: 'white'
+            }
+          });
+        }
+
+        var formatted = formatData(data);
+        cal.update(formatted.data);
+        cal.setLegend(formatted.legendDomain);
+      };
+
+      var formatData = function(data) {
+        var timestamps = {};
+        var max = 1;
+        data.forEach(function(entry) {
+          timestamps[moment(entry.date).unix()] = entry.count;
+          max = Math.max(max, entry.count);
+        });
+
+        var domain = [];
+        var current = 1;
+        for (var i = 0; i < 4; ++i) {
+          domain.push(current);
+          current += max / 5;
+        }
+
+        return {
+          data: timestamps,
+          legendDomain: domain
+        };
+      };
+
+      $scope.$watch('data', function() {
+        $timeout(refresh, 750);
+      });
+    }
+  };
+  return directiveDefinitionObject;
+});