1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
/*
Used for animating and displaying capacity information using
D3js progress bars.
Usage:
In order to have capacity bars that work with this, you need to have a
DOM structure like this in your Django template:
<div id="your_capacity_bar_id" class="capacity_bar">
</div>
With this capacity bar, you then need to add some data- HTML attributes
to the div #your_capacity_bar_id. The available data- attributes are:
data-chart-type="capacity_bar_chart" REQUIRED
Must be "capacity_bar_chart".
data-capacity-used="integer" OPTIONAL
Integer representing the total number used by the user.
data-capacity-limit="integer" OPTIONAL
Integer representing the total quota limit the user has. Note this IS
NOT the amount remaining they can use, but the total original capacity.
data-average-capacity-used="integer" OPTIONAL
Integer representing the average usage of given capacity.
*/
horizon.Capacity = {
capacity_bars: [],
// Determines the capacity bars to be used for capacity display.
init: function() {
this.capacity_bars = $('div[data-chart-type="capacity_bar_chart"]');
// Draw the capacity bars
this._initialCreation(this.capacity_bars);
},
/*
Create a new d3 bar and populate it with the current amount used,
average used, and percentage label
*/
drawUsed: function(element, used_perc, used_px, average_perc) {
var w= "100%";
var h= 15;
var lvl_curve= 3;
var bkgrnd= "#F2F2F2";
var frgrnd= "grey";
var usage_color = d3.scale.linear()
.domain([0, 50, 75, 90, 100])
.range(["#669900", "#669900", "#FF9900", "#FF3300", "#CC0000"]);
// Horizontal Bars
var bar = d3.select("#"+element).append("svg:svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h)
.style("background-color", "white")
.append("g");
// background - unused resources
bar.append("rect")
.attr("y", 0)
.attr("width", w)
.attr("height", h)
.attr("rx", lvl_curve)
.attr("ry", lvl_curve)
.style("fill", bkgrnd)
.style("stroke", "#bebebe")
.style("stroke-width", 1);
// used resources
if (used_perc) {
bar.append("rect")
.attr("class", "usedbar")
.attr("y", 0)
.attr("id", "test")
.attr("width", 0)
.attr("height", h)
.attr("rx", lvl_curve)
.attr("ry", lvl_curve)
.style("fill", usage_color(used_perc))
.style("stroke", "#a0a0a0")
.style("stroke-width", 1)
.attr("d", used_perc)
.transition()
.duration(500)
.attr("width", used_perc + "%");
}
// average
if (average_perc) {
bar.append("rect")
.attr("y",1)
.attr("x", 0)
.attr("class", "average")
.attr("height", h-2)
.attr("width", 1)
.style("fill", "black")
.transition()
.duration(500)
.attr("x", average_perc + "%");
}
// used text
if (used_perc) {
bar.append("text")
.text(used_perc + "%")
.attr("y", 8)
.attr("x", 3)
.attr("dominant-baseline", "middle")
.attr("font-size", 10)
.transition()
.duration(500)
.attr("x", function() {
// position the percentage label
if (used_perc > 99 && used_px > 25){
return used_px - 30;
} else if (used_px > 25) {
return used_px - 25;
} else {
return used_px + 3;
}
});
}
},
// Draw the initial d3 bars
_initialCreation: function(bars) {
var scope = this;
$(bars).each(function(index, element) {
var progress_element = $(element);
var capacity_limit = parseInt(progress_element.attr('data-capacity-limit'), 10);
var capacity_used = parseInt(progress_element.attr('data-capacity-used'), 10);
var average_used = parseInt(progress_element.attr('data-average-capacity-used'), 10);
var percentage_used = 0;
var average_percentage = 0;
var _used_px = 0;
if (!isNaN(capacity_limit) && !isNaN(average_used)) {
average_percentage = ((average_used / capacity_limit) * 100);
}
if (!isNaN(capacity_limit) && !isNaN(capacity_used)) {
percentage_used = Math.round((capacity_used / capacity_limit) * 100);
_used_px = progress_element.width() / 100 * percentage_used;
}
scope.drawUsed($(element).attr('id'), percentage_used, _used_px, average_percentage);
});
}
};
horizon.addInitFunction(function () {
horizon.Capacity.init();
});
|
