openstack/horizon
Code Issues Proposed changes

Quota summary graphs, added styling to indicate percentage full

Browse Source 
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
This commit is contained in:
Bradley Jones 2013-06-05 10:52:25 -07:00
parent d17fd51359
commit aae31bb915
2 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
horizon/static/horizon/js/horizon.d3piechart.js
View File

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

25
horizon/static/horizon/js/horizon.quota.js
View File

@ -178,7 +178,10 @@ horizon.Quota = {
var h = 20;
var lvl_curve = 4;
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" }
else {return "lightgreen" }
if (value > (100 - already_used)) { return full }
else {return addition }
});
},