From 3ced24655ae65cea76bdd9472f3719756bfbc7ee Mon Sep 17 00:00:00 2001
From: Jared Tabor <jtabor@ansible.com>
Date: Mon, 14 Jul 2014 17:14:02 -0400
Subject: [PATCH] fixed pie chart formatting and added text for empty pie chart

---
 awx/ui/static/js/controllers/Home.js     | 12 ++++++------
 awx/ui/static/js/controllers/Jobs.js     |  3 ++-
 awx/ui/static/js/widgets/HostPieChart.js | 19 ++++++++++++++-----
 awx/ui/static/partials/home.html         | 10 +++++-----
 4 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/awx/ui/static/js/controllers/Home.js b/awx/ui/static/js/controllers/Home.js
index cf39c25814..761a3d3f3c 100644
--- a/awx/ui/static/js/controllers/Home.js
+++ b/awx/ui/static/js/controllers/Home.js
@@ -74,36 +74,36 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
     $scope.removeDashboardReady = $scope.$on('dashboardReady', function (e, data) {
         DashboardCounts({
             scope: $scope,
-            target: 'container1',
+            target: 'dash-counts',
             dashboard: data
         });
 
         JobStatusGraph({
             scope: $scope,
-            target: 'container2',
+            target: 'dash-job-status-graph',
             dashboard: data
         });
 
         if ($rootScope.user_is_superuser === true) {
             HostGraph({
                 scope: $scope,
-                target: 'container3',
+                target: 'dash-host-count-graph',
                 dashboard: data
             });
         }
         else{
-            $('#container4').replaceWith("<div id='container4' class='left-side col-sm-12 col-xs-12'></div>");
+            $('#dash-host-count-graph').replaceWith("<div id='dash-host-count-graph' class='left-side col-sm-12 col-xs-12'></div>");
         }
 
 
         DashboardJobs({
             scope: $scope,
-            target: 'container4',
+            target: 'dash-jobs-list',
             dashboard: data
         });
         HostPieChart({
             scope: $scope,
-            target: 'container5',
+            target: 'dash-host-status-graph',
             dashboard: data
         });
 
diff --git a/awx/ui/static/js/controllers/Jobs.js b/awx/ui/static/js/controllers/Jobs.js
index 80b2ee7286..1327412031 100644
--- a/awx/ui/static/js/controllers/Jobs.js
+++ b/awx/ui/static/js/controllers/Jobs.js
@@ -24,6 +24,7 @@ function JobsListController ($log, $scope, $compile, $routeParams, ClearScope, B
         expecting = 0,
         max_rows;
 
+
     event_socket =  Socket({
         scope: $scope,
         endpoint: "jobs"
@@ -274,7 +275,7 @@ function JobsListController ($log, $scope, $compile, $routeParams, ClearScope, B
 }
 
 JobsListController.$inject = [ '$log', '$scope', '$compile', '$routeParams', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'LoadSchedulesScope', 'LoadJobsScope', 'RunningJobsList', 'CompletedJobsList',
-    'QueuedJobsList', 'ScheduledJobsList', 'GetChoices', 'GetBasePath', 'Wait', 'Socket' ];
+    'QueuedJobsList', 'ScheduledJobsList', 'GetChoices', 'GetBasePath', 'Wait', 'Socket'];
 
 function JobsEdit($scope, $rootScope, $compile, $location, $log, $routeParams, JobForm, JobTemplateForm, GenerateForm, Rest,
     Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, RelatedPaginateInit, ReturnToCaller, ClearScope, InventoryList,
diff --git a/awx/ui/static/js/widgets/HostPieChart.js b/awx/ui/static/js/widgets/HostPieChart.js
index df94369d0f..016551f4db 100644
--- a/awx/ui/static/js/widgets/HostPieChart.js
+++ b/awx/ui/static/js/widgets/HostPieChart.js
@@ -62,6 +62,10 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
                           .x(function(d) { return d.label; })
                           .y(function(d) { return d.value; })
                           .showLabels(true)
+                          .labelThreshold(0.01)
+                          .tooltipContent(function(x, y) {
+                                return '<b>'+x+'</b>'+ '<p>' +  Math.floor(y) + ' hosts ' +  '</p>';
+                            })
                           .color(['#00aa00', '#aa0000']);
 
                         chart.pie.pieLabelsOutside(true).labelType("percent");
@@ -71,7 +75,13 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
                             .attr('width', width)
                             .attr('height', height)
                             .transition().duration(350)
-                            .call(chart);
+                            .call(chart)
+                             .style({
+                            "font-family": 'Open Sans',
+                            "font-style": "normal",
+                            "font-weight":400,
+                            "src": "url(/static/fonts/OpenSans-Regular.ttf)"
+                        });
                         nv.utils.windowResize(chart.update);
                         scope.$emit('WidgetLoaded');
                         return chart;
@@ -86,13 +96,12 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
                     canvas = document.getElementById("circlecanvas");
                     context = canvas.getContext("2d");
                     context.arc(50, 50, 50, 0, Math.PI * 2, false);
-                    //context.beginPath();
-                    context.globalAlpha = 0.4;
-                    context.fillStyle = '#A9A9A9';
-                    context.fill();
                     context.lineWidth = 1;
                     context.strokeStyle = '#1778c3';
                     context.stroke();
+                    context.font = "12px Open Sans";
+                    context.fillText("No Host data",10,50);
+
                     scope.$emit('WidgetLoaded');
                 }
             };
diff --git a/awx/ui/static/partials/home.html b/awx/ui/static/partials/home.html
index 29776d0a93..a45520c960 100644
--- a/awx/ui/static/partials/home.html
+++ b/awx/ui/static/partials/home.html
@@ -9,15 +9,15 @@
 -->
 
       <div class="row">
-         <div id="container1" class="col-sm-12 col-xs-12"></div>
+         <div id="dash-counts" class="col-sm-12 col-xs-12"></div>
       </div>
       <div class="row">
-         <div id="container2" class="left-side col-sm-6 col-xs-12"></div>
-         <div id="container5" class="right-side col-sm-6 col-xs-12"></div>
+         <div id="dash-job-status-graph" class="left-side col-sm-6 col-xs-12"></div>
+         <div id="dash-host-status-graph" class="right-side col-sm-6 col-xs-12"></div>
       </div>
       <div class="row">
-         <div id="container4" class="left-side col-sm-6 col-xs-12"></div>
-         <div id="container3" class="right-side col-sm-6 col-xs-12"></div>
+         <div id="dash-jobs-list" class="left-side col-sm-6 col-xs-12"></div>
+         <div id="dash-host-count-graph" class="right-side col-sm-6 col-xs-12"></div>
       </div>
    </div>
 </div>