External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-19 23:07:42 -02:30
Code Issues Packages Projects Releases Wiki Activity

Job detail donut chart tooltip fix

Browse Source 
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
This commit is contained in:
Jared Tabor
2015-06-09 13:05:53 -04:00
parent c6c80447a6
commit 3573a164e7
2 changed files with 30 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
awx/ui/static/js/helpers/JobDetail.js
View File

@@ -1215,18 +1215,16 @@ export default
.factory('DonutChart', [function() { .factory('DonutChart', [function() {
return function(params) { return function(params) {
var target = params.target, var target = params.target,
height = params.height, height = Math.max(params.height, 250),
width = params.width, width = Math.max(params.width, 250),
dataset = params.data, dataset = params.data,
outerRadius = Math.min(width, height) / 2, outerRadius = Math.min(width, height) / 2,
innerRadius = (outerRadius/3), innerRadius = (outerRadius/3),
svg, arc, pie, legend, color, svg, arc, pie, legend,
tooltip, path, tooltip, path,
legendRectSize = 18, legendRectSize = 18,
legendSpacing = 4; legendSpacing = 4;
color = d3.scale.ordinal()
.range(['#60D66F', '#FF9900', '#FF0000', '#ff5850']);
svg = d3.select(target) svg = d3.select(target)
.append('svg') .append('svg')
.data([dataset]) .data([dataset])
@@ -1244,24 +1242,18 @@ export default
.value(function(d) { return d.value; }) .value(function(d) { return d.value; })
.sort(function() {return null; }); .sort(function() {return null; });
// arcs = svg.selectAll("g.slice")
// .data(pie)
// .enter()
// .append("g")
// .attr("class", "slice");
tooltip = d3.select(target) tooltip = d3.select(target)
.append('div') .append('div')
.attr('class', 'tooltip'); .attr('class', 'donut-tooltip');
tooltip.append('div') tooltip.append('div')
.attr('class', 'label'); .attr('class', 'donut-label');
tooltip.append('div') tooltip.append('div')
.attr('class', 'count'); .attr('class', 'donut-count');
tooltip.append('div') tooltip.append('div')
.attr('class', 'percent'); .attr('class', 'donut-percent');
path = svg.selectAll('path') path = svg.selectAll('path')
.data(pie(dataset)) .data(pie(dataset))
@@ -1269,7 +1261,7 @@ export default
.append('path') .append('path')
.attr('d', arc) .attr('d', arc)
.attr('fill', function(d) { .attr('fill', function(d) {
return color(d.data.label); return d.data.color;
}); });
path.on('mouseenter', function(d) { path.on('mouseenter', function(d) {
@@ -1277,10 +1269,10 @@ export default
return d.value; return d.value;
})); }));
var percent = Math.round(1000 * d.data.value / total) / 10; var percent = Math.round(1000 * d.data.value / total) / 10;
tooltip.select('.label').html(d.data.label) tooltip.select('.donut-label').html(d.data.label);
.attr('style', 'color:black'); //.attr('style', 'color:white;font-family:');
tooltip.select('.count').html(d.data.value); tooltip.select('.donut-count').html(d.data.value);
tooltip.select('.percent').html(percent + '%'); tooltip.select('.donut-percent').html(percent + '%');
tooltip.style('display', 'block'); tooltip.style('display', 'block');
}); });
@@ -1288,19 +1280,19 @@ export default
tooltip.style('display', 'none'); tooltip.style('display', 'none');
}); });
// path.on('mousemove', function(d) { path.on('mousemove', function() {
// tooltip.style('top', (d3.event.pageY + 10) + 'px') tooltip.style('top', (d3.mouse(this)[0]+200) + 'px')
// .style('left', (d3.event.pageX + 10) + 'px'); .style('left', (d3.mouse(this)[0]+200) + 'px');
// }); });
legend = svg.selectAll('.legend') legend = svg.selectAll('.legend')
.data(color.domain()) .data(pie(dataset))
.enter() .enter()
.append('g') .append('g')
.attr('class', 'legend') .attr('class', 'legend')
.attr('transform', function(d, i) { .attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing; var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2; var offset = height * dataset.length / 2;
var horz = -2 * legendRectSize; var horz = -2 * legendRectSize;
var vert = i * height - offset; var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')'; return 'translate(' + horz + ',' + vert + ')';
@@ -1309,14 +1301,18 @@ export default
legend.append('rect') legend.append('rect')
.attr('width', legendRectSize) .attr('width', legendRectSize)
.attr('height', legendRectSize) .attr('height', legendRectSize)
.style('fill', color) .attr('fill', function(d) {
.style('stroke', color); return d.data.color;
})
.attr('stroke', function(d) {
return d.data.color;
});
legend.append('text') legend.append('text')
.attr('x', legendRectSize + legendSpacing) .attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing) .attr('y', legendRectSize - legendSpacing)
.text(function(d) { .text(function(d) {
return d; return d.data.label;
}); });
}; };
}]) }])

27
awx/ui/static/less/job-details.less
View File

@@ -501,10 +501,7 @@
rect { rect {
stroke-width: 2; stroke-width: 2;
} }
.tooltip { .donut-tooltip {
background: #eee;
box-shadow: 0 0 5px #999999;
color: 'black';
display: none; display: none;
font-size: 12px; font-size: 12px;
font-family: 'Open Sans'; font-family: 'Open Sans';
@@ -515,27 +512,13 @@
top: 85px; top: 85px;
width: 80px; width: 80px;
z-index: 10; 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{ #graph-section svg{
margin-top: 15px; margin-top: 15px;
} }