etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add percent labels to dashboard charts

This commit is contained in:
bfederle 2012-01-04 14:25:12 -08:00
parent e682c9bae1
commit 867afce8da
5 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/css/cloudstack3.css
View File

@ -3218,6 +3218,26 @@ Dialogs*/
font-weight: bold;
}
.dashboard.admin .zone-stats ul li .pie-chart-container {
width: 95px;
height: 69px;
overflow: hidden;
float: left;
position: relative;
}
.dashboard.admin .zone-stats ul li .pie-chart-container .percent-label {
width: 52px;
color: #C98200;
/*+placement:shift 28px 31px;*/
position: relative;
left: 28px;
top: 31px;
position: absolute;
font-weight: bold;
text-align: center;
}
.dashboard.admin .zone-stats ul li .pie-chart {
width: 70px;
height: 66px;

6
ui/index-test.html
View File

@ -1130,7 +1130,6 @@
</div>
</div>
</div>
<!-- Zone stat charts -->
<div class="zone-stats">
<ul data-item="zoneCapacities">
@ -1138,7 +1137,10 @@
<div class="label">
Zone: <span data-list-item="zoneName"></span>
</div>
<div class="pie-chart" data-list-item="percent"></div>
<div class="pie-chart-container">
<div class="percent-label"><span data-list-item="percent"></span>%</div>
<div class="pie-chart" data-list-item="percent"></div>
</div>
<div class="info">
<div class="name" data-list-item="type"></div>
<div class="value">

7
ui/index.jsp
View File

@ -1130,7 +1130,7 @@
</div>
</div>
</div>
<!-- Zone stat charts -->
<div class="zone-stats">
<ul data-item="zoneCapacities">
@ -1138,7 +1138,10 @@
<div class="label">
Zone: <span data-list-item="zoneName"></span>
</div>
<div class="pie-chart" data-list-item="percent"></div>
<div class="pie-chart-container">
<div class="percent-label"><span data-list-item="percent"></span>%</div>
<div class="pie-chart" data-list-item="percent"></div>
</div>
<div class="info">
<div class="name" data-list-item="type"></div>
<div class="value">

2
ui/scripts/dashboard.js
View File

@ -234,7 +234,7 @@
return {
zoneName: capacity.zoneName,
type: cloudStack.converters.toAlertType(capacity.type),
percent: capacity.percentused,
percent: parseInt(capacity.percentused),
used: cloudStack.converters.convertByType(capacity.type, capacity.capacityused),
total: cloudStack.converters.convertByType(capacity.type, capacity.capacitytotal)
};

28
ui/scripts/ui-custom/dashboard.js
View File

@ -26,20 +26,24 @@
$.each(item, function(arrayKey, arrayValue) {
var $arrayElem = $li.find('[data-list-item=' + arrayKey + ']');
if ($arrayElem.hasClass('pie-chart')) {
// Generate pie chart
// -- values above 80 have a red color
pieChart($arrayElem, [
{ data: [[1, 100 - arrayValue]], color: '#54697e' },
{ data: [[1, arrayValue]], color: arrayValue < 80 ? 'orange' : 'red' }
]);
} else {
if ($li.attr('concat-value') == 'true') {
$arrayElem.html(arrayValue.substring(0, 50).concat('...'));
$arrayElem.each(function() {
var $arrayElem = $(this);
if ($arrayElem.hasClass('pie-chart')) {
// Generate pie chart
// -- values above 80 have a red color
pieChart($arrayElem, [
{ data: [[1, 100 - arrayValue]], color: '#54697e' },
{ data: [[1, arrayValue]], color: arrayValue < 80 ? 'orange' : 'red' }
]);
} else {
$arrayElem.html(arrayValue);
if ($li.attr('concat-value') == 'true') {
$arrayElem.html(arrayValue.substring(0, 50).concat('...'));
} else {
$arrayElem.html(arrayValue);
}
}
}
});
});
$li.attr({ title: item.description });