Quota summary graphs, added styling to indicate percentage full

At 80% the chart becomes orange indicating nearly full
At 100% the chart becomes red just as in the quota bar graphs
when creating new instances, volumes, etc.

Same color scheme across overview charts and progress bars when loading
instances, etc.

Fixes bug where reaching a limit when creating a new instance would
cause the progress bar to have square corners instead of rounded ones

Change-Id: I86e72df622be756959f2600bbe28aaa50a7f7c57
Fixes: bug #1102461

horizon/static/horizon/js/horizon.d3piechart.js

@@ -16,7 +16,10 @@ horizon.d3_pie_chart = {
   h: 100,
   r: 45,
   bkgrnd: "#F2F2F2",
-  frgrnd: "#4790B2",
+  frgrnd: "#006CCF",
+  full: "#D0342B",
+  nearlyfull: "orange",
+
   init: function() {
     var self = this;
 
@@ -56,7 +59,15 @@ horizon.d3_pie_chart = {
         .append("path")
           .attr("class","arc")
           .attr("d", arc)
-          .style("fill", self.frgrnd)
+          .style("fill", function(d){
+            if (self.data[0].percentage >= 100) {
+              return self.full;
+            } else if (self.data[0].percentage >= 80) {
+              return self.nearlyfull;
+            } else {
+              return self.frgrnd;
+            }
+          })
           .style("stroke", "#CCCCCC")
           .style("stroke-width", 1)
           .each(function(d) {return self.current = d;})

horizon/static/horizon/js/horizon.quota.js

@@ -174,11 +174,14 @@ horizon.Quota = {
 
   // Create a new d3 bar and populate it with the current amount used
   drawUsed: function(element, used) {
-    var w= "100%";
+    var w = "100%";
-    var h= 20;
+    var h = 20;
-    var lvl_curve= 4;
+    var lvl_curve = 4;
-    var bkgrnd= "#F2F2F2";
+    var bkgrnd = "#F2F2F2";
-    var frgrnd= "grey";
+    var frgrnd = "#006CCF";
+    var full = "#D0342B";
+    var addition = "#00D300";
+    var nearlyfull = "orange";
 
     // Horizontal Bars
     var bar = d3.select("#"+element).append("svg:svg")
@@ -207,7 +210,7 @@ horizon.Quota = {
       .attr("height", h)
       .attr("rx", lvl_curve)
       .attr("ry", lvl_curve)
-      .style("fill", "lightgreen")
+      .style("fill", function () { return addition; })
 
     // used resources
     var used_bar = bar.insert("rect")
@@ -218,23 +221,33 @@ horizon.Quota = {
       .attr("height", h)
       .attr("rx", lvl_curve)
       .attr("ry", lvl_curve)
-      .style("fill", frgrnd)
+      .style("fill", function () { return frgrnd })
       .attr("d", used)
       .transition()
         .duration(500)
         .attr("width", used + "%")
+        .style("fill", function () {
+          if (used >= 100) { return full; }
+          else if (used >= 80) { return nearlyfull; }
+          else { return frgrnd; }
+        })
   },
 
   // Update the progress Bar
   update: function(element, value) {
+    var full = "#D0342B";
+    var addition = "#00D300";
     var already_used = parseInt(d3.select("#"+element).select(".usedbar").attr("d"))
     d3.select("#"+element).select(".newbar")
       .transition()
         .duration(500)
-        .attr("width", (value + already_used) + "%")
+        .attr("width", function () {
+          if ((value + already_used) >= 100) { return "100%"; }
+          else { return (value + already_used)+ "%"; }
+        })
         .style("fill", function() {
-          if (value > (100 - already_used)) { return "red" }
+          if (value > (100 - already_used)) { return full }
-          else {return "lightgreen" }
+          else {return addition }
         });
 
   },