mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 08:21:15 +03:00
fixed dashboard graph resizing defect
This commit is contained in:
Jared Tabor
Luke Sneeringer
parent
90a0c6c8ed
commit
8d3c4c5e9a
@ -57,6 +57,8 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
|
||||
Wait('start');
|
||||
}
|
||||
|
||||
|
||||
|
||||
if ($scope.removeWidgetLoaded) {
|
||||
$scope.removeWidgetLoaded();
|
||||
}
|
||||
@ -64,6 +66,12 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
|
||||
// Once all the widgets report back 'loaded', turn off Wait widget
|
||||
loadedCount++;
|
||||
if (loadedCount === waitCount) {
|
||||
$(window).resize(_.debounce(function() {
|
||||
Wait('start');
|
||||
$scope.$emit('ResizeJobGraph');
|
||||
$scope.$emit('ResizeHostGraph');
|
||||
$scope.$emit('ResizeHostPieGraph');
|
||||
}, 500));
|
||||
$(window).resize();
|
||||
Wait('stop');
|
||||
}
|
||||
@ -100,6 +108,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
|
||||
});
|
||||
|
||||
if ($rootScope.user_is_superuser === true) {
|
||||
waitCount = 5;
|
||||
HostGraph({
|
||||
scope: $scope,
|
||||
target: 'dash-host-count-graph',
|
||||
|
||||
@ -16,7 +16,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
var scope = params.scope,
|
||||
target = params.target,
|
||||
html, element, url, license;
|
||||
html, element, url, license, license_graph;
|
||||
|
||||
|
||||
// html = "<div class=\"graph-container\">\n";
|
||||
@ -36,6 +36,21 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
url = GetBasePath('config');
|
||||
|
||||
if (scope.removeResizeHostGraph) {
|
||||
scope.removeResizeHostGraph();
|
||||
}
|
||||
scope.removeResizeHostGraph= scope.$on('ResizeHostGraph', function () {
|
||||
if($(window).width()<500){
|
||||
$('.graph-container').height(300);
|
||||
}
|
||||
else{
|
||||
var winHeight = $(window).height(),
|
||||
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
|
||||
$('.graph-container').height(available_height/2);
|
||||
license_graph.update();
|
||||
}
|
||||
});
|
||||
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success(function (data){
|
||||
@ -108,8 +123,8 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
|
||||
height = $('.graph-container').height()*0.6, //nv.utils.windowSize().height/5,
|
||||
chart = nv.models.lineChart()
|
||||
height = $('.graph-container').height()*0.6; //nv.utils.windowSize().height/5,
|
||||
license_graph = nv.models.lineChart()
|
||||
.margin({top: 15, right: 75, bottom: 40, left: 85})
|
||||
.x(function(d,i) { return i ;})
|
||||
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
|
||||
@ -119,14 +134,14 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
.showXAxis(true) //Show the x-axis
|
||||
;
|
||||
|
||||
chart.xAxis
|
||||
license_graph.xAxis
|
||||
.axisLabel("Time")
|
||||
.tickFormat(function(d) {
|
||||
var dx = graphData[0].values[d] && graphData[0].values[d].x || 0;
|
||||
return dx ? d3.time.format('%m/%d')(new Date(Number(dx+'000'))) : '';
|
||||
});
|
||||
|
||||
chart.yAxis //Chart y-axis settings
|
||||
license_graph.yAxis //Chart y-axis settings
|
||||
.axisLabel('Hosts')
|
||||
.tickFormat(d3.format('.f'));
|
||||
|
||||
@ -135,7 +150,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.duration(500)
|
||||
.call(chart)
|
||||
.call(license_graph)
|
||||
.style({
|
||||
// 'width': width,
|
||||
// 'height': height,
|
||||
@ -145,13 +160,10 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
|
||||
});
|
||||
|
||||
// d3.selectAll(".nv-line").on("click", function () {
|
||||
// alert("clicked");
|
||||
// });
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
// nv.utils.windowResize(license_graph.update);
|
||||
scope.$emit('WidgetLoaded');
|
||||
return license_graph;
|
||||
|
||||
},
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
|
||||
target = params.target,
|
||||
dashboard = params.dashboard,
|
||||
html, element, data,
|
||||
canvas, context, winHeight, available_height;
|
||||
canvas, context, winHeight, available_height, host_pie_chart;
|
||||
|
||||
// html = "<div class=\"graph-container\">\n";
|
||||
|
||||
@ -38,6 +38,21 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
|
||||
if (scope.removeResizeHostPieGraph) {
|
||||
scope.removeResizeHostPieGraph();
|
||||
}
|
||||
scope.removeResizeHostPieGraph= scope.$on('ResizeHostPieGraph', function () {
|
||||
if($(window).width()<500){
|
||||
$('.graph-container').height(300);
|
||||
}
|
||||
else{
|
||||
var winHeight = $(window).height(),
|
||||
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
|
||||
$('.graph-container').height(available_height/2);
|
||||
host_pie_chart.update();
|
||||
}
|
||||
});
|
||||
|
||||
if(dashboard.hosts.total+dashboard.hosts.failed>0){
|
||||
data = [
|
||||
{
|
||||
@ -54,8 +69,8 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
nv.addGraph(function() {
|
||||
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
|
||||
height = $('.graph-container').height()*0.7, //nv.utils.windowSize().height/5,
|
||||
chart = nv.models.pieChart()
|
||||
height = $('.graph-container').height()*0.7; //nv.utils.windowSize().height/5,
|
||||
host_pie_chart = nv.models.pieChart()
|
||||
.margin({top: 5, right: 75, bottom: 40, left: 85})
|
||||
.x(function(d) { return d.label; })
|
||||
.y(function(d) { return d.value; })
|
||||
@ -66,23 +81,23 @@ angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
|
||||
})
|
||||
.color(['#00aa00', '#aa0000']);
|
||||
|
||||
chart.pie.pieLabelsOutside(true).labelType("percent");
|
||||
host_pie_chart.pie.pieLabelsOutside(true).labelType("percent");
|
||||
|
||||
d3.select(".host-pie-chart svg")
|
||||
.datum(data)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.transition().duration(350)
|
||||
.call(chart)
|
||||
.call(host_pie_chart)
|
||||
.style({
|
||||
"font-family": 'Open Sans',
|
||||
"font-style": "normal",
|
||||
"font-weight":400,
|
||||
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
|
||||
});
|
||||
nv.utils.windowResize(chart.update);
|
||||
// nv.utils.windowResize(host_pie_chart.update);
|
||||
scope.$emit('WidgetLoaded');
|
||||
return chart;
|
||||
return host_pie_chart;
|
||||
});
|
||||
}
|
||||
else{
|
||||
|
||||
@ -17,7 +17,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
var scope = params.scope,
|
||||
target = params.target,
|
||||
// dashboard = params.dashboard,
|
||||
html, element, url,
|
||||
html, element, url, job_status_chart,
|
||||
period="month",
|
||||
job_type="all";
|
||||
|
||||
@ -86,6 +86,20 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
createGraph();
|
||||
|
||||
if (scope.removeResizeJobGraph) {
|
||||
scope.removeResizeJobGraph();
|
||||
}
|
||||
scope.removeResizeJobGraph= scope.$on('ResizeJobGraph', function () {
|
||||
if($(window).width()<500){
|
||||
$('.graph-container').height(300);
|
||||
}
|
||||
else{
|
||||
var winHeight = $(window).height(),
|
||||
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
|
||||
$('.graph-container').height(available_height/2);
|
||||
job_status_chart.update();
|
||||
}
|
||||
});
|
||||
|
||||
if (scope.removeGraphDataReady) {
|
||||
scope.removeGraphDataReady();
|
||||
@ -125,8 +139,8 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
|
||||
height = $('.graph-container').height()*0.7, //nv.utils.windowSize().height/5,
|
||||
chart = nv.models.lineChart()
|
||||
height = $('.graph-container').height()*0.7; //nv.utils.windowSize().height/5,
|
||||
job_status_chart = nv.models.lineChart()
|
||||
.margin({top: 5, right: 75, bottom: 80, left: 85}) //Adjust chart margins to give the x-axis some breathing room.
|
||||
.x(function(d,i) { return i; })
|
||||
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
|
||||
@ -138,29 +152,23 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
// .height(height)
|
||||
;
|
||||
|
||||
chart.xAxis
|
||||
job_status_chart.xAxis
|
||||
.axisLabel("Time")//.showMaxMin(true)
|
||||
.tickFormat(function(d) {
|
||||
var dx = graphData[0].values[d] && graphData[0].values[d].x || 0;
|
||||
return dx ? d3.time.format(timeFormat)(new Date(Number(dx+'000'))) : '';
|
||||
});
|
||||
|
||||
chart.yAxis //Chart y-axis settings
|
||||
job_status_chart.yAxis //Chart y-axis settings
|
||||
.axisLabel('Jobs')
|
||||
.tickFormat(d3.format('.f'));
|
||||
|
||||
// d3.select('.job-status-graph svg')
|
||||
// .attr('width', width)
|
||||
// .attr('height', height)
|
||||
// .datum(data)
|
||||
// .call(chart);
|
||||
|
||||
d3.select('.job-status-graph svg')
|
||||
.datum(graphData).transition()
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.duration(1000)
|
||||
.call(chart)
|
||||
.call(job_status_chart)
|
||||
.style({
|
||||
// 'width': width,
|
||||
// 'height': height,
|
||||
@ -170,29 +178,12 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
|
||||
});
|
||||
|
||||
nv.utils.windowResize(function(){
|
||||
if($(window).width()<500){
|
||||
$('.graph-container').height(300);
|
||||
}
|
||||
else{
|
||||
var winHeight = $(window).height(),
|
||||
available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
|
||||
$('.graph-container').height(available_height/2);
|
||||
chart.update();
|
||||
}
|
||||
});
|
||||
// nv.utils.windowResize(chart.update);
|
||||
|
||||
|
||||
//On click, update with new data
|
||||
d3.selectAll(".n")
|
||||
.on("click", function() {
|
||||
period = this.getAttribute("id");
|
||||
$('#period-dropdown').replaceWith("<a id=\"period-dropdown\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+"<span class=\"caret\"><span>\n");
|
||||
//$('#period-dropdown').text(this.text);
|
||||
// var title = $('#job-status-title').text(),
|
||||
// str = title.slice(0,title.search(","))+", "+this.innerHTML;
|
||||
// $('#job-status-title').html("<b>"+str+" </b>");
|
||||
|
||||
createGraph();
|
||||
});
|
||||
|
||||
@ -201,14 +192,12 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
.on("click", function() {
|
||||
job_type = this.getAttribute("id");
|
||||
$('#type-dropdown').replaceWith("<a id=\"type-dropdown\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">"+this.text+"<span class=\"caret\"><span>\n");
|
||||
// var title = $('#job-status-title').text(),
|
||||
// str = title.slice(title.search(","));
|
||||
// $('#job-status-title').html("<b>Job Status for "+this.innerHTML+" Jobs"+str+" </b>");
|
||||
|
||||
createGraph();
|
||||
});
|
||||
|
||||
scope.$emit('WidgetLoaded');
|
||||
return chart;
|
||||
return job_status_chart;
|
||||
|
||||
},
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user