From 867afce8dae571f0db39e44dd0338faa7bc34461 Mon Sep 17 00:00:00 2001
From: bfederle <bfederle@gmail.com>
Date: Wed, 4 Jan 2012 14:25:12 -0800
Subject: [PATCH] Add percent labels to dashboard charts

---
 ui/css/cloudstack3.css            | 20 ++++++++++++++++++++
 ui/index-test.html                |  6 ++++--
 ui/index.jsp                      |  7 +++++--
 ui/scripts/dashboard.js           |  2 +-
 ui/scripts/ui-custom/dashboard.js | 28 ++++++++++++++++------------
 5 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index fa604bd70f5..9b20b3268ad 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -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;
diff --git a/ui/index-test.html b/ui/index-test.html
index b83a161de8e..0c72fa148e3 100644
--- a/ui/index-test.html
+++ b/ui/index-test.html
@@ -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">
diff --git a/ui/index.jsp b/ui/index.jsp
index 4c8e199a28d..ee01286a5a9 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -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">
diff --git a/ui/scripts/dashboard.js b/ui/scripts/dashboard.js
index bd628dbaf9f..a41966a6148 100644
--- a/ui/scripts/dashboard.js
+++ b/ui/scripts/dashboard.js
@@ -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)
                     };
diff --git a/ui/scripts/ui-custom/dashboard.js b/ui/scripts/ui-custom/dashboard.js
index 908a1d8676e..10f792c20ce 100644
--- a/ui/scripts/ui-custom/dashboard.js
+++ b/ui/scripts/ui-custom/dashboard.js
@@ -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 });