mirror of
https://github.com/ansible/awx.git
synced 2026-01-15 11:50:42 -03:30
Implement responsiveness in graph
This commit is contained in:
Joe Fiorini
parent
3db561141e
commit
42fbcf3454
@ -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;
|
||||
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,39 +1,39 @@
|
||||
<div class="row">
|
||||
<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="graph-wrapper job-status-graph">
|
||||
<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="dropdown">
|
||||
Job Type: <a id="type-dropdown" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
|
||||
All<span class="caret"></span>
|
||||
</a>
|
||||
<div class="h6 dropdown pull-right">
|
||||
Period: <a id="period-dropdown" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
|
||||
Past Month<span class="caret"></span>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="type-dropdown">
|
||||
<li><a class="m" id="all">All</a></li>
|
||||
<li><a class="m" id="inv_sync">Inventory Sync</a></li>
|
||||
<li><a class="m" id="scm_update">SCM Update</a></li>
|
||||
<li><a class="m" id="playbook_run">Playbook Run</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="h6 col-xs-5 col-sm-4 col-lg-4">
|
||||
<div class="dropdown">
|
||||
Period: <a id="period-dropdown" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
|
||||
Past Month<span class="caret"></span>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="period-dropdown">
|
||||
<li><a class="n" id="day" >Past 24 Hours </a></li>
|
||||
<li><a class="n" id="week">Past Week</a></li>
|
||||
<li><a class="n" id="month">Past Month</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="job-status-graph"><svg></svg></div>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="period-dropdown">
|
||||
<li><a class="n" id="day" >Past 24 Hours </a></li>
|
||||
<li><a class="n" id="week">Past Week</a></li>
|
||||
<li><a class="n" id="month">Past Month</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="h6 dropdown pull-right" style="padding-right: .5em;">
|
||||
Job Type: <a id="type-dropdown" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
|
||||
All<span class="caret"></span>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="type-dropdown">
|
||||
<li><a class="m" id="all">All</a></li>
|
||||
<li><a class="m" id="inv_sync">Inventory Sync</a></li>
|
||||
<li><a class="m" id="scm_update">SCM Update</a></li>
|
||||
<li><a class="m" id="playbook_run">Playbook Run</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="graph">
|
||||
<svg width="100%" height="100%"></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user