mirror of
https://github.com/ansible/awx.git
synced 2026-01-19 13:41:28 -03:30
adjusted borders for graphs to align with the jobs widget
This commit is contained in:
Jared Tabor
parent
f39939b152
commit
72f3005f8b
@ -20,23 +20,13 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
html, element;
|
||||
|
||||
// html = "<div class=\"panel panel-default\" style=\"border:none\">\n";
|
||||
html = "<div id=\"graph-container\" class=\"panel-body \" style=\"border:none\">\n";
|
||||
|
||||
html += "<table class=\"table\" >\n";
|
||||
html += "<tr> \n";
|
||||
// html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Job Status</td>\n";
|
||||
html += "<td class=\"h6 text-center\" style=\"border:none\">Hosts vs License Agreement</td>\n";
|
||||
html += "</tr>\n";
|
||||
html += "<tr>\n";
|
||||
// html += "<td class=\"job-status-graph\" style=\"border:none\"><svg></svg></td>\n";
|
||||
html += "<td class=\"host-count-graph\" style=\"border:none\"><svg></svg></td>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</table>\n";
|
||||
html = "<div class=\"graph-container\">\n";
|
||||
html +="<div class=\"row\">\n";
|
||||
html += "<div class=\"h6 col-lg-12 text-center\">Hosts vs License Agreement</div>\n";
|
||||
html += "<div class=\"host-count-graph\"><svg></svg></div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
// html += "</div>\n";
|
||||
|
||||
|
||||
|
||||
function makeHostCountGraph(){
|
||||
d3.json("static/js/hostcount.json",function(error,data) {
|
||||
@ -49,9 +39,9 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width/3,
|
||||
height = nv.utils.windowSize().height/4,
|
||||
height = nv.utils.windowSize().height/5,
|
||||
chart = nv.models.lineChart()
|
||||
.margin({top: 15, right: 75, bottom: 40, left: 80})
|
||||
.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!
|
||||
.transitionDuration(350) //how fast do you want the lines to transition?
|
||||
|
||||
@ -20,21 +20,13 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
|
||||
html, element;
|
||||
|
||||
// html = "<div class=\"panel panel-default\" style=\"border:none\">\n";
|
||||
html = "<div id=\"graph-container\" class=\"panel-body \" style=\"border:none\">\n";
|
||||
|
||||
html += "<table class=\"table table-bordered\" >\n";
|
||||
html += "<tr> \n";
|
||||
html += "<td class=\"h6 col-lg-6 text-center\" style=\"border:none\">Job Status</td>\n";
|
||||
// html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Hosts vs License Agreement</td>\n";
|
||||
html += "</tr>\n";
|
||||
html += "<tr>\n";
|
||||
html += "<td class=\"job-status-graph\" style=\"border:none\"><svg></svg></td>\n";
|
||||
// html += "<td class=\"host-count-graph\" style=\"border:none\"><svg></svg></td>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</table>\n";
|
||||
html = "<div class=\"graph-container\">\n";
|
||||
html +="<div class=\"row\">\n";
|
||||
html += "<div class=\"h6 col-lg-12 text-center\">Job Status</div>\n";
|
||||
html += "<div class=\"job-status-graph\"><svg></svg></div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
// html += "</div>\n";
|
||||
|
||||
|
||||
function makeJobStatusGraph(){
|
||||
d3.json("static/js/jobstatusdata.json",function(error,data) {
|
||||
@ -47,9 +39,9 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width/3,
|
||||
height = nv.utils.windowSize().height/4,
|
||||
height = nv.utils.windowSize().height/5,
|
||||
chart = nv.models.lineChart()
|
||||
.margin({top: 5, right: 75, bottom: 40, left: 80}) //Adjust chart margins to give the x-axis some breathing room.
|
||||
.margin({top: 5, right: 75, bottom: 40, 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?
|
||||
@ -101,73 +93,12 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
|
||||
});
|
||||
}
|
||||
|
||||
/*function makeHostCountGraph(){
|
||||
d3.json("static/js/hostcount.json",function(error,data) {
|
||||
|
||||
data.map(function(series) {
|
||||
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] }; });
|
||||
return series;
|
||||
});
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var width = nv.utils.windowSize().width/3,
|
||||
height = nv.utils.windowSize().height/4,
|
||||
chart = nv.models.lineChart()
|
||||
.margin({top: 15, right: 75, bottom: 40, left: 80})
|
||||
.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
|
||||
;
|
||||
|
||||
chart.xAxis
|
||||
.axisLabel("Time")
|
||||
.tickFormat(function(d) {
|
||||
var dx = data[0].values[d] && data[0].values[d].x || 0;
|
||||
return dx ? d3.time.format('%m/%d')(new Date(dx)) : '';
|
||||
});
|
||||
|
||||
chart.yAxis //Chart y-axis settings
|
||||
.axisLabel('Hosts')
|
||||
.tickFormat(d3.format('.f'));
|
||||
|
||||
d3.select('.host-count-graph svg')
|
||||
.datum(data).transition()
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.duration(500)
|
||||
.call(chart)
|
||||
.style({
|
||||
// 'width': width,
|
||||
// 'height': height,
|
||||
"font-family": 'Open Sans',
|
||||
"font-style": "normal",
|
||||
"font-weight":400,
|
||||
"src": "url(/static/fonts/OpenSans-Regular.ttf)"
|
||||
});
|
||||
|
||||
d3.selectAll(".nv-line").on("click", function () {
|
||||
alert("clicked");
|
||||
});
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
},
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
element = angular.element(document.getElementById(target));
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
makeJobStatusGraph();
|
||||
// makeHostCountGraph();
|
||||
scope.$emit('WidgetLoaded');
|
||||
scope.$emit('WidgetLoaded');
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
@ -34,6 +34,13 @@
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.graph-container{
|
||||
border: 1px solid @grey;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.carousel-control.left, .carousel-control.right {
|
||||
background-image: none
|
||||
}
|
||||
|
||||
@ -7,16 +7,18 @@
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="row">
|
||||
<div id="container1" class="col-lg-12"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="container2" class="col-lg-6"></div>
|
||||
<div id="container3" class="col-lg-6"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="container4" class="col-lg-6 "></div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div id="container1" class="col-lg-12"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="container2" class="col-lg-6 col-xs-12"></div>
|
||||
<div id="container3" class="col-lg-6 col-xs-12"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="container4" class="col-lg-6 "></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user