Implement responsiveness in graph

awx/ui/static/js/directives/job-status-graph.js

@@ -34,24 +34,49 @@ angular.module('GraphDirectives', [])
               });
             }
 
-            cleanup = _.compose(
+            var w = angular.element($window);
-              [ cleanup,
+
-                angular.element($window).bind('resize', function() {
+            function adjustGraphSize() {
-                  if($(window).width()<500){
+              var parentHeight = element.parent().height();
-                    $('.graph-container').height(300);
+              var toolbarHeight = element.find('.toolbar').height();
-                  }
+              var container = element.find('svg').parent();
-                  else{
+              var margins = job_status_chart.margin();
-                    var winHeight = $(window).height(),
+
-                    available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
+              $(container).height(parentHeight - toolbarHeight - margins.bottom);
-                    $('.graph-container').height(available_height/2);
+
-                    job_status_chart.update();
+              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()
+              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.
+              .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()
+              .datum(graphData)
-              .attr('width', width)
+              // .attr('width', width)
-              .attr('height', height)
+              // .attr('height', height)
-              .duration(1000)
+              // .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;
 
             });

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;
-}
+}

awx/ui/static/partials/job_status_graph.html

@@ -1,39 +1,39 @@
-<div class="row">
+<div class="graph-wrapper job-status-graph">
-<div id="job-status-title" class="h6 col-xs-2 col-sm-3 col-lg-4 text-center"><b>Job Status</b></div>
+  <div class="clearfix">
+    <div id="job-status-title" class="h6 pull-left">
+      <b>Job Status</b>
+    </div>
 
-<div class="h6 col-xs-5 col-sm-5 col-lg-4">
+      <div class="h6 dropdown pull-right">
-<div class="dropdown">
+        Period: <a id="period-dropdown" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
-Job Type: <a id="type-dropdown" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
+          Past Month<span class="caret"></span>
-All<span class="caret"></span>
+        </a>
-  </a>
 
-<ul class="dropdown-menu" role="menu" aria-labelledby="type-dropdown">
+        <ul class="dropdown-menu" role="menu" aria-labelledby="period-dropdown">
-<li><a class="m" id="all">All</a></li>
+          <li><a class="n" id="day" >Past 24 Hours </a></li>
-<li><a class="m" id="inv_sync">Inventory Sync</a></li>
+          <li><a class="n" id="week">Past Week</a></li>
-<li><a class="m" id="scm_update">SCM Update</a></li>
+          <li><a class="n" id="month">Past Month</a></li>
-<li><a class="m" id="playbook_run">Playbook Run</a></li>
+        </ul>
-</ul>
+      </div>
-</div>
+
-
+      <div class="h6 dropdown pull-right" style="padding-right: .5em;">
-</div>
+        Job Type: <a id="type-dropdown" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
-
+          All<span class="caret"></span>
-<div class="h6 col-xs-5 col-sm-4 col-lg-4">
+        </a>
-<div class="dropdown">
+
-Period: <a id="period-dropdown" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
+        <ul class="dropdown-menu" role="menu" aria-labelledby="type-dropdown">
-Past Month<span class="caret"></span>
+          <li><a class="m" id="all">All</a></li>
-  </a>
+          <li><a class="m" id="inv_sync">Inventory Sync</a></li>
-
+          <li><a class="m" id="scm_update">SCM Update</a></li>
-<ul class="dropdown-menu" role="menu" aria-labelledby="period-dropdown">
+          <li><a class="m" id="playbook_run">Playbook Run</a></li>
-<li><a class="n" id="day" >Past 24 Hours </a></li>
+        </ul>
-<li><a class="n" id="week">Past Week</a></li>
+      </div>
-<li><a class="n" id="month">Past Month</a></li>
+
-</ul>
+  </div>
-</div>
+
-</div>
+
-
+  <div class="graph">
-</div>
+    <svg width="100%" height="100%"></svg>
-
+  </div>
-<div class="row">
-<div class="job-status-graph"><svg></svg></div>
 </div>