Check in all new plan manager directive and add a nice donut chart for the repository usage by the user/org

static/js/graphing.js

@@ -1130,4 +1130,130 @@ ImageFileChangeTree.prototype.toggle_ = function(d) {
     d.children = d._children;
     d._children = null;
   }
+};
+
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Based off of http://bl.ocks.org/mbostock/1346410
+ */
+function RepositoryUsageChart() {
+  this.total_ = null;
+  this.count_ = null;
+  this.drawn_ = false;
+}
+
+
+/**
+ * Updates the chart with the given count and total of number of repositories.
+ */
+RepositoryUsageChart.prototype.update = function(count, total) {
+  if (!this.g_) { return; }
+  this.total_ = total;
+  this.count_ = count;
+  this.drawInternal_();
+};
+
+
+/**
+ * Conducts the actual draw or update (if applicable).
+ */
+RepositoryUsageChart.prototype.drawInternal_ = function() {
+  // If the total is null, then we have not yet set the proper counts.
+  if (this.total_ === null) { return; }
+
+  var duration = 750;
+
+  var arc = this.arc_;
+  var pie = this.pie_;
+  var arcTween = this.arcTween_;
+
+  var color = d3.scale.category20();
+  var count = this.count_;
+  var total = this.total_;
+
+  var data = [count, Math.max(0, total - count)];
+
+  var getClass = function(i) {
+    if (total > 0 && (count / total) >= 0.7) {
+        return 'warning-' + i;
+    }
+
+    if (count >= total) {
+        return 'error-' + i;
+    }
+
+    return 'normal';
+  };
+
+  var arcTween = function(a) {
+    var i = d3.interpolate(this._current, a);
+    this._current = i(0);
+    return function(t) {
+      return arc(i(t));
+    };
+  };
+
+  if (!this.drawn_) {
+    var text = this.g_.append("svg:text")
+      .attr("dy", 10)
+      .attr("dx", 0)
+      .attr('dominant-baseline', 'auto')
+      .attr('text-anchor', 'middle')
+      .attr('class', 'count-text')
+      .text(this.count_ + ' / ' + this.total_);
+
+    var path = this.g_.datum(data).selectAll("path")
+       .data(pie)
+          .enter().append("path")
+            .attr("fill", function(d, i) { return color(i); })
+            .attr("class", function(d, i) { return getClass(i); })
+            .attr("d", arc)
+            .each(function(d) { this._current = d; }); // store the initial angles
+
+    this.path_ = path;
+    this.text_ = text;
+  } else {
+    pie.value(function(d, i) { return data[i]; }); // change the value function
+    this.path_ = this.path_.data(pie); // compute the new angles
+
+    this.path_.transition().duration(duration).attrTween("d", arcTween); // redraw the arcs
+    this.path_.attr("class", function(d, i) { return getClass(i); });
+
+    // Update the text.
+    this.text_.text(this.count_ + ' / ' + this.total_);
+  }
+    
+  this.drawn_ = true;
+};
+
+
+/**
+ * Draws the chart in the given container.
+ */
+RepositoryUsageChart.prototype.draw = function(container) {
+  var cw = document.getElementById(container).clientWidth;
+  var ch = document.getElementById(container).clientHeight;
+  var radius = Math.min(cw, ch) / 2;
+
+  var pie = d3.layout.pie().sort(null);
+
+  var arc = d3.svg.arc()
+    .innerRadius(radius - 50)
+    .outerRadius(radius - 25);
+
+  var svg = d3.select("#" + container).append("svg:svg")
+    .attr("width", cw)
+    .attr("height", ch);
+
+  var g = svg.append("g")
+    .attr("transform", "translate(" + cw / 2 + "," + ch / 2 + ")");
+
+  this.svg_ = svg;
+  this.g_ = g;
+  this.pie_ = pie;
+  this.arc_ = arc;
+  this.width_ = cw;
+  this.drawInternal_();
 };