External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-08 09:57:35 -02:30
Code Issues Packages Projects Releases Wiki Activity

adjusted borders for graphs to align with the jobs widget

Browse Source
This commit is contained in:
Jared Tabor
2014-07-02 10:32:19 -04:00
parent f39939b152
commit 72f3005f8b
4 changed files with 35 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
awx/ui/static/js/widgets/HostGraph.js
View File

@@ -20,23 +20,13 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
html, element; 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 = "<div class=\"graph-container\">\n";
html += "<tr> \n"; html +="<div class=\"row\">\n";
// html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Job Status</td>\n"; html += "<div class=\"h6 col-lg-12 text-center\">Hosts vs License Agreement</div>\n";
html += "<td class=\"h6 text-center\" style=\"border:none\">Hosts vs License Agreement</td>\n"; html += "<div class=\"host-count-graph\"><svg></svg></div>\n";
html += "</tr>\n"; html += "</div>\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>\n"; html += "</div>\n";
// html += "</div>\n";
function makeHostCountGraph(){ function makeHostCountGraph(){
d3.json("static/js/hostcount.json",function(error,data) { d3.json("static/js/hostcount.json",function(error,data) {
@@ -49,9 +39,9 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
nv.addGraph({ nv.addGraph({
generate: function() { generate: function() {
var width = nv.utils.windowSize().width/3, var width = nv.utils.windowSize().width/3,
height = nv.utils.windowSize().height/4, height = nv.utils.windowSize().height/5,
chart = nv.models.lineChart() 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 ;}) .x(function(d,i) { return i ;})
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition? .transitionDuration(350) //how fast do you want the lines to transition?

87
awx/ui/static/js/widgets/JobStatusGraph.js
View File

@@ -20,21 +20,13 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
html, element; html, element;
// html = "<div class=\"panel panel-default\" style=\"border:none\">\n"; html = "<div class=\"graph-container\">\n";
html = "<div id=\"graph-container\" class=\"panel-body \" style=\"border:none\">\n"; html +="<div class=\"row\">\n";
html += "<div class=\"h6 col-lg-12 text-center\">Job Status</div>\n";
html += "<table class=\"table table-bordered\" >\n"; html += "<div class=\"job-status-graph\"><svg></svg></div>\n";
html += "<tr> \n"; html += "</div>\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>\n"; html += "</div>\n";
// html += "</div>\n";
function makeJobStatusGraph(){ function makeJobStatusGraph(){
d3.json("static/js/jobstatusdata.json",function(error,data) { d3.json("static/js/jobstatusdata.json",function(error,data) {
@@ -47,9 +39,9 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
nv.addGraph({ nv.addGraph({
generate: function() { generate: function() {
var width = nv.utils.windowSize().width/3, var width = nv.utils.windowSize().width/3,
height = nv.utils.windowSize().height/4, height = nv.utils.windowSize().height/5,
chart = nv.models.lineChart() 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; }) .x(function(d,i) { return i; })
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition? .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 = angular.element(document.getElementById(target));
element.html(html); element.html(html);
$compile(element)(scope); $compile(element)(scope);
makeJobStatusGraph(); makeJobStatusGraph();
// makeHostCountGraph(); scope.$emit('WidgetLoaded');
scope.$emit('WidgetLoaded');
}; };
} }

7
awx/ui/static/less/new-dashboard.less
View File

@@ -34,6 +34,13 @@
padding: 5px; padding: 5px;
} }
.graph-container{
border: 1px solid @grey;
border-radius: 4px;
padding: 5px;
margin-bottom: 15px;
}
.carousel-control.left, .carousel-control.right { .carousel-control.left, .carousel-control.right {
background-image: none background-image: none
} }

22
awx/ui/static/partials/home.html
View File

@@ -7,16 +7,18 @@
</div> </div>
</div> </div>
--> -->
<div class="row">
<div id="container1" class="col-lg-12"></div> <div class="row">
</div> <div id="container1" class="col-lg-12"></div>
<div class="row"> </div>
<div id="container2" class="col-lg-6"></div> <div class="row">
<div id="container3" class="col-lg-6"></div> <div id="container2" class="col-lg-6 col-xs-12"></div>
</div> <div id="container3" class="col-lg-6 col-xs-12"></div>
<div class="row"> </div>
<div id="container4" class="col-lg-6 "></div> <div class="row">
</div> <div id="container4" class="col-lg-6 "></div>
</div>
</div> </div>
</div> </div>