diff --git a/awx/ui/static/js/widgets/HostGraph.js b/awx/ui/static/js/widgets/HostGraph.js index 37cd684578..bd7c4eb171 100644 --- a/awx/ui/static/js/widgets/HostGraph.js +++ b/awx/ui/static/js/widgets/HostGraph.js @@ -20,23 +20,13 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities']) html, element; - // html = "
\n"; - html = "
\n"; - html += "\n"; - html += " \n"; - // html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - // html += "\n"; - html += "\n"; - html += "\n"; - html += "
Job StatusHosts vs License Agreement
\n"; + html = "
\n"; + html +="
\n"; + html += "
Hosts vs License Agreement
\n"; + html += "
\n"; + html += "
\n"; html += "
\n"; - // html += "
\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? diff --git a/awx/ui/static/js/widgets/JobStatusGraph.js b/awx/ui/static/js/widgets/JobStatusGraph.js index 9090844665..0a742c631d 100644 --- a/awx/ui/static/js/widgets/JobStatusGraph.js +++ b/awx/ui/static/js/widgets/JobStatusGraph.js @@ -20,21 +20,13 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) html, element; - // html = "
\n"; - html = "
\n"; - - html += "\n"; - html += " \n"; - html += "\n"; - // html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - // html += "\n"; - html += "\n"; - html += "
Job StatusHosts vs License Agreement
\n"; + html = "
\n"; + html +="
\n"; + html += "
Job Status
\n"; + html += "
\n"; + html += "
\n"; html += "
\n"; - // html += "
\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'); }; } diff --git a/awx/ui/static/less/new-dashboard.less b/awx/ui/static/less/new-dashboard.less index fd87a7cfdb..fe2b9ac73b 100644 --- a/awx/ui/static/less/new-dashboard.less +++ b/awx/ui/static/less/new-dashboard.less @@ -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 } diff --git a/awx/ui/static/partials/home.html b/awx/ui/static/partials/home.html index 1c4ee7d900..347ee5f513 100644 --- a/awx/ui/static/partials/home.html +++ b/awx/ui/static/partials/home.html @@ -7,16 +7,18 @@
--> -
-
-
-
-
-
-
-
-
-
+ +
+
+
+
+
+
+
+
+
+
+