From 3573a164e743e6006514425cfc2968d7e319d62f Mon Sep 17 00:00:00 2001
From: Jared Tabor <jtabor@ansible.com>
Date: Tue, 9 Jun 2015 13:05:53 -0400
Subject: [PATCH] Job detail donut chart tooltip fix

adding a mousemove event listener to have the tooltip move in respect to the user's mouse movement. also adjusted the colors to be more dynamic
---
 awx/ui/static/js/helpers/JobDetail.js | 54 +++++++++++++--------------
 awx/ui/static/less/job-details.less   | 27 +++-----------
 2 files changed, 30 insertions(+), 51 deletions(-)

diff --git a/awx/ui/static/js/helpers/JobDetail.js b/awx/ui/static/js/helpers/JobDetail.js
index 86f5c60028..97a09ae8f6 100644
--- a/awx/ui/static/js/helpers/JobDetail.js
+++ b/awx/ui/static/js/helpers/JobDetail.js
@@ -1215,18 +1215,16 @@ export default
     .factory('DonutChart', [function() {
         return function(params) {
             var target = params.target,
-                height = params.height,
-                width = params.width,
+                height = Math.max(params.height, 250),
+                width = Math.max(params.width, 250),
                 dataset = params.data,
                 outerRadius = Math.min(width, height) / 2,
                 innerRadius = (outerRadius/3),
-                svg, arc, pie, legend, color,
+                svg, arc, pie, legend,
                 tooltip, path,
                 legendRectSize = 18,
                 legendSpacing = 4;
 
-            color = d3.scale.ordinal()
-                .range(['#60D66F', '#FF9900', '#FF0000', '#ff5850']);
             svg = d3.select(target)
                 .append('svg')
                 .data([dataset])
@@ -1244,24 +1242,18 @@ export default
                 .value(function(d) { return d.value; })
                 .sort(function() {return null; });
 
-            // arcs = svg.selectAll("g.slice")
-            //     .data(pie)
-            //     .enter()
-            //     .append("g")
-            //     .attr("class", "slice");
-
             tooltip = d3.select(target)
                 .append('div')
-                .attr('class', 'tooltip');
+                .attr('class', 'donut-tooltip');
 
             tooltip.append('div')
-                .attr('class', 'label');
+                .attr('class', 'donut-label');
 
             tooltip.append('div')
-                .attr('class', 'count');
+                .attr('class', 'donut-count');
 
             tooltip.append('div')
-                .attr('class', 'percent');
+                .attr('class', 'donut-percent');
 
             path = svg.selectAll('path')
                 .data(pie(dataset))
@@ -1269,7 +1261,7 @@ export default
                 .append('path')
                 .attr('d', arc)
                 .attr('fill', function(d) {
-                  return color(d.data.label);
+                  return d.data.color;
                 });
 
             path.on('mouseenter', function(d) {
@@ -1277,10 +1269,10 @@ export default
                   return d.value;
                 }));
                 var percent = Math.round(1000 * d.data.value / total) / 10;
-                tooltip.select('.label').html(d.data.label)
-                .attr('style', 'color:black');
-                tooltip.select('.count').html(d.data.value);
-                tooltip.select('.percent').html(percent + '%');
+                tooltip.select('.donut-label').html(d.data.label);
+                //.attr('style', 'color:white;font-family:');
+                tooltip.select('.donut-count').html(d.data.value);
+                tooltip.select('.donut-percent').html(percent + '%');
                 tooltip.style('display', 'block');
               });
 
@@ -1288,19 +1280,19 @@ export default
                 tooltip.style('display', 'none');
               });
 
-            // path.on('mousemove', function(d) {
-            //     tooltip.style('top', (d3.event.pageY + 10) + 'px')
-            //     .style('left', (d3.event.pageX + 10) + 'px');
-            // });
+            path.on('mousemove', function() {
+                tooltip.style('top', (d3.mouse(this)[0]+200) + 'px')
+                .style('left', (d3.mouse(this)[0]+200) + 'px');
+            });
 
           legend = svg.selectAll('.legend')
-              .data(color.domain())
+              .data(pie(dataset))
               .enter()
               .append('g')
               .attr('class', 'legend')
               .attr('transform', function(d, i) {
                   var height = legendRectSize + legendSpacing;
-                  var offset =  height * color.domain().length / 2;
+                  var offset =  height * dataset.length / 2;
                   var horz = -2 * legendRectSize;
                   var vert = i * height - offset;
                   return 'translate(' + horz + ',' + vert + ')';
@@ -1309,14 +1301,18 @@ export default
             legend.append('rect')
               .attr('width', legendRectSize)
               .attr('height', legendRectSize)
-              .style('fill', color)
-              .style('stroke', color);
+              .attr('fill', function(d) {
+                return d.data.color;
+              })
+              .attr('stroke', function(d) {
+                return d.data.color;
+              });
 
             legend.append('text')
               .attr('x', legendRectSize + legendSpacing)
               .attr('y', legendRectSize - legendSpacing)
               .text(function(d) {
-                  return d;
+                  return d.data.label;
               });
         };
     }])
diff --git a/awx/ui/static/less/job-details.less b/awx/ui/static/less/job-details.less
index 0762bf8448..f95b6ec260 100644
--- a/awx/ui/static/less/job-details.less
+++ b/awx/ui/static/less/job-details.less
@@ -501,10 +501,7 @@
         rect {
             stroke-width: 2;
         }
-        .tooltip {
-            background: #eee;
-            box-shadow: 0 0 5px #999999;
-            color: 'black';
+        .donut-tooltip {
             display: none;
             font-size: 12px;
             font-family: 'Open Sans';
@@ -515,27 +512,13 @@
             top: 85px;
             width: 80px;
             z-index: 10;
+            color: white;
+            background-color: black !important;
+            border-radius:4px;
+            border: 1px solid black;
         }
-        // position: relative;
-        // width: 100%;
-        // .legend {
-        //     margin-top: 15px;
-        // }
-        // .header {
-        //     margin-top: 20px;
-        //     .legend {
-        //         i {
-        //             margin-left: 10px
-        //         }
-        //         i:first-child {
-        //             margin-left: 0;
-        //         }
-        //     }
-        // }
     }
 
-
-
     #graph-section svg{
         margin-top: 15px;
     }