diff --git a/awx/ui/static/js/directives/job-status-graph.js b/awx/ui/static/js/directives/job-status-graph.js index fdf5fe9381..18fa71a07e 100644 --- a/awx/ui/static/js/directives/job-status-graph.js +++ b/awx/ui/static/js/directives/job-status-graph.js @@ -34,24 +34,49 @@ angular.module('GraphDirectives', []) }); } - cleanup = _.compose( - [ cleanup, - angular.element($window).bind('resize', 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(); - } - }) - ]); + var w = angular.element($window); + + function adjustGraphSize() { + var parentHeight = element.parent().height(); + var toolbarHeight = element.find('.toolbar').height(); + var container = element.find('svg').parent(); + var margins = job_status_chart.margin(); + + $(container).height(parentHeight - toolbarHeight - margins.bottom); + + var graph = d3.select(element.find('svg')[0]); + var width = parseInt(graph.style('width')) - margins.left - margins.right; + var height = parseInt(graph.style('height')) - margins.top - margins.bottom; + + + job_status_chart.xRange([0, width]); + job_status_chart.yRange([height, 0]); + + job_status_chart.xAxis.ticks(Math.max(width / 75, 2)); + job_status_chart.yAxis.ticks(Math.max(height / 50, 2)); + + if (height < 160) { + graph.select('.y.axis').select('.domain').style('display', 'none'); + graph.select('.y.axis').select('.domain').style('display', 'initial'); + } + + graph.select('.x.axis') + .attr('transform', 'translate(0, ' + height + ')') + .call(job_status_chart.xAxis); + + graph.selectAll('.line') + .attr('d', job_status_chart.lines) + + job_status_chart.update(); + } + + $window.addEventListener('resize', adjustGraphSize); if (scope.removeGraphDataReady) { scope.removeGraphDataReady(); } + + var job_status_chart; scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data) { var timeFormat, graphData = [ @@ -83,11 +108,10 @@ angular.module('GraphDirectives', []) return series; }); - var 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. + job_status_chart = nv.models.lineChart() + .margin({top: 5, right: 75, bottom: 50, 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! - .transitionDuration(350) //how fast do you want the lines to transition? .showLegend(true) //Show the legend, allowing users to turn on/off line series. .showYAxis(true) //Show the y-axis .showXAxis(true) //Show the x-axis @@ -111,10 +135,10 @@ angular.module('GraphDirectives', []) .tickFormat(d3.format('.f')); d3.select(element.find('svg')[0]) - .datum(graphData).transition() - .attr('width', width) - .attr('height', height) - .duration(1000) + .datum(graphData) + // .attr('width', width) + // .attr('height', height) + // .transition().duration(100) .call(job_status_chart) .style({ // 'width': width, @@ -143,6 +167,8 @@ angular.module('GraphDirectives', []) createGraph(period, job_type); }); + adjustGraphSize(); + return job_status_chart; }); diff --git a/awx/ui/static/less/new-dashboard.less b/awx/ui/static/less/new-dashboard.less index 2560cca8c1..4a6e2c58cc 100644 --- a/awx/ui/static/less/new-dashboard.less +++ b/awx/ui/static/less/new-dashboard.less @@ -8,6 +8,19 @@ */ +.graph-wrapper { + width: 100%; +} + +.graph { + background-color: white; + // @include transition(width 2s ease-in-out, height 2s ease-in-out); + position: relative; + text-align: center; + width: 100%; + height: 100%; + margin: 0 auto; +} .job-status-graph, .host-count-graph{ font: 10px sans-serif; @@ -99,4 +112,4 @@ due to the login screen showing on top of the dashboard, we're hiding the border .m, .n{ cursor:pointer; -} \ No newline at end of file +} diff --git a/awx/ui/static/partials/job_status_graph.html b/awx/ui/static/partials/job_status_graph.html index a463d63f13..ec70847709 100644 --- a/awx/ui/static/partials/job_status_graph.html +++ b/awx/ui/static/partials/job_status_graph.html @@ -1,39 +1,39 @@ -
-
Job Status
+
+
+
+ Job Status +
-
-
-Job Type: -All - +
+ Period: + Past Month + - -
- -
- -
-
-Period: -Past Month - - - -
-
- -
- -
-
+ +
+ +
+ Job Type: + All + + + +
+ +
+ + +
+ +