External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-17 22:37:41 -02:30
Code Issues Packages Projects Releases Wiki Activity

Update size of host pie chart on window resize

Browse Source
This commit is contained in:
Joe Fiorini
2015-01-26 11:36:45 -05:00
parent 116e7b2118
commit f98e9ce0c7
2 changed files with 50 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
awx/ui/static/js/directives/host-status-graph.js
View File

@@ -17,17 +17,16 @@ angular.module('DashboardGraphs')
}); });
function adjustGraphSize() { function adjustGraphSize() {
if($($window).width()<500){ var parentHeight = element.parent().parent().height();
$('.graph-container').height(300); var toolbarHeight = element.find('.toolbar').height();
} var container = element.find('svg').parent();
else{ var margins = host_pie_chart.margin();
var winHeight = $($window).height(),
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120; var newHeight = parentHeight - toolbarHeight - margins.bottom;
$('.graph-container').height(available_height/2);
if(host_pie_chart){ $(container).height(newHeight);
host_pie_chart.update();
} host_pie_chart.update();
}
} }
$window.addEventListener('resize', adjustGraphSize); $window.addEventListener('resize', adjustGraphSize);
@@ -51,44 +50,42 @@ angular.module('DashboardGraphs')
} }
]; ];
nv.addGraph(function() { var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3, height = $('.graph-container').height()*0.7; //nv.utils.windowSize().height/5,
height = $('.graph-container').height()*0.7; //nv.utils.windowSize().height/5, host_pie_chart = nv.models.pieChart()
host_pie_chart = nv.models.pieChart() .margin({top: 5, right: 75, bottom: 25, left: 85})
.margin({top: 5, right: 75, bottom: 40, left: 85}) .x(function(d) { return d.label; })
.x(function(d) { return d.label; }) .y(function(d) { return d.value; })
.y(function(d) { return d.value; }) .showLabels(true)
.showLabels(true) .labelThreshold(0.01)
.labelThreshold(0.01) .tooltipContent(function(x, y) {
.tooltipContent(function(x, y) { return '<b>'+x+'</b>'+ '<p>' + Math.floor(y.replace(',','')) + ' Hosts ' + '</p>';
return '<b>'+x+'</b>'+ '<p>' + Math.floor(y.replace(',','')) + ' Hosts ' + '</p>'; })
}) .color(['#00aa00', '#aa0000']);
.color(['#00aa00', '#aa0000']);
host_pie_chart.pie.pieLabelsOutside(true).labelType("percent"); host_pie_chart.pie.pieLabelsOutside(true).labelType("percent");
d3.select(".host-pie-chart svg") d3.select(element.find('svg')[0])
.datum(data) .datum(data)
.attr('width', width) // .attr('width', width)
.attr('height', height) // .attr('height', height)
.transition().duration(350) .transition().duration(350)
.call(host_pie_chart) .call(host_pie_chart)
.style({ .style({
"font-family": 'Open Sans', "font-family": 'Open Sans',
"font-style": "normal", "font-style": "normal",
"font-weight":400, "font-weight":400,
"src": "url(/static/fonts/OpenSans-Regular.ttf)" "src": "url(/static/fonts/OpenSans-Regular.ttf)"
});
// nv.utils.windowResize(host_pie_chart.update);
scope.$emit('WidgetLoaded');
return host_pie_chart;
}); });
// nv.utils.windowResize(host_pie_chart.update);
adjustGraphSize();
return host_pie_chart;
} }
else{ else{
winHeight = $($window).height(); winHeight = $($window).height();
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120; available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
$('.graph-container:eq(1)').height(available_height/2); element.find('.graph-wrapper').height(available_height/2);
$('.host-pie-chart svg').replaceWith('<canvas id="circlecanvas" width="120" height="120"></canvas>'); element.find('svg').replaceWith('<canvas id="circlecanvas" width="120" height="120"></canvas>');
canvas = document.getElementById("circlecanvas"); canvas = document.getElementById("circlecanvas");
context = canvas.getContext("2d"); context = canvas.getContext("2d");
@@ -99,6 +96,7 @@ angular.module('DashboardGraphs')
context.font = "12px Open Sans"; context.font = "12px Open Sans";
context.fillText("No Host data",18,55); context.fillText("No Host data",18,55);
} }
} }
} }
}]); }]);

16
awx/ui/static/partials/host_status_graph.html
View File

@@ -1,8 +1,12 @@
<div class="row"> <div class="graph-wrapper">
<div id="job-status-title" class="h6 col-xs-8 text-center"><b>Host Status</b></div> <div class="clearfix toolbar">
</div> <div id="job-status-title" class="h6 pull-left">
<b>Host Status</b>
<div class="row"> </div>
<div class="host-pie-chart text-center"><svg></svg></div> </div>
<div class="graph">
<svg width="100%" height="100%" preserveAspectRatio="xMinYMin"></svg>
</div>
</div> </div>