mirror of
https://github.com/ansible/awx.git
synced 2026-01-09 23:12:08 -03:30
fixed jslint messages from earlier commit
This commit is contained in:
Jared Tabor
parent
d4ef57bab6
commit
28bddeda31
@ -70,7 +70,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, NewDa
|
||||
if ($scope.removeDashboardReady) {
|
||||
$scope.removeDashboardReady();
|
||||
}
|
||||
$scope.removeDashboardReady = $scope.$on('dashboardReady', function (e, data) {
|
||||
$scope.removeDashboardReady = $scope.$on('dashboardReady', function (e, data) {
|
||||
JobStatus({
|
||||
scope: $scope,
|
||||
target: 'container1',
|
||||
@ -91,7 +91,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, NewDa
|
||||
target: 'container3',
|
||||
dashboard: data
|
||||
});
|
||||
NewDash({
|
||||
NewDash({
|
||||
scope: $scope,
|
||||
target: 'container5',
|
||||
dashboard: data
|
||||
@ -123,7 +123,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, NewDa
|
||||
}
|
||||
|
||||
Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', 'Wait', 'NewDash', 'ObjectCount', 'JobStatus', 'InventorySyncStatus',
|
||||
'SCMSyncStatus', 'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button'
|
||||
'SCMSyncStatus', 'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button'
|
||||
];
|
||||
|
||||
|
||||
|
||||
@ -1,17 +1,55 @@
|
||||
|
||||
|
||||
|
||||
[
|
||||
{
|
||||
"key" : "Quantity" ,
|
||||
"bar": true,
|
||||
[
|
||||
{
|
||||
"key" : "Failed" ,
|
||||
"color": "#ccf",
|
||||
"values" : [ [ 1136005200000 , 1271000.0] , [ 1138683600000 , 1271000.0] , [ 1141102800000 , 1271000.0] , [ 1143781200000 , 0] , [ 1146369600000 , 0] , [ 1149048000000 , 0] , [ 1151640000000 , 0] , [ 1154318400000 , 0] , [ 1156996800000 , 0] , [ 1159588800000 , 3899486.0] , [ 1162270800000 , 3899486.0] , [ 1164862800000 , 3899486.0] , [ 1167541200000 , 3564700.0] , [ 1170219600000 , 3564700.0] , [ 1172638800000 , 3564700.0] , [ 1175313600000 , 2648493.0] , [ 1177905600000 , 2648493.0] , [ 1180584000000 , 2648493.0] , [ 1183176000000 , 2522993.0] , [ 1185854400000 , 2522993.0] , [ 1188532800000 , 2522993.0] , [ 1191124800000 , 2906501.0] , [ 1193803200000 , 2906501.0] , [ 1196398800000 , 2906501.0] , [ 1199077200000 , 2206761.0] , [ 1201755600000 , 2206761.0] , [ 1204261200000 , 2206761.0] , [ 1206936000000 , 2287726.0] , [ 1209528000000 , 2287726.0] , [ 1212206400000 , 2287726.0] , [ 1214798400000 , 2732646.0] , [ 1217476800000 , 2732646.0] , [ 1220155200000 , 2732646.0] , [ 1222747200000 , 2599196.0] , [ 1225425600000 , 2599196.0] , [ 1228021200000 , 2599196.0] , [ 1230699600000 , 1924387.0] , [ 1233378000000 , 1924387.0] , [ 1235797200000 , 1924387.0] , [ 1238472000000 , 1756311.0] , [ 1241064000000 , 1756311.0] , [ 1243742400000 , 1756311.0] , [ 1246334400000 , 1743470.0] , [ 1249012800000 , 1743470.0] , [ 1251691200000 , 1743470.0] , [ 1254283200000 , 1519010.0] , [ 1256961600000 , 1519010.0] , [ 1259557200000 , 1519010.0] , [ 1262235600000 , 1591444.0] , [ 1264914000000 , 1591444.0] , [ 1267333200000 , 1591444.0] , [ 1270008000000 , 1543784.0] , [ 1272600000000 , 1543784.0] , [ 1275278400000 , 1543784.0] , [ 1277870400000 , 1309915.0] , [ 1280548800000 , 1309915.0] , [ 1283227200000 , 1309915.0] , [ 1285819200000 , 1331875.0] , [ 1288497600000 , 1331875.0] , [ 1291093200000 , 1331875.0] , [ 1293771600000 , 1331875.0] , [ 1296450000000 , 1154695.0] , [ 1298869200000 , 1154695.0] , [ 1301544000000 , 1194025.0] , [ 1304136000000 , 1194025.0] , [ 1306814400000 , 1194025.0] , [ 1309406400000 , 1194025.0] , [ 1312084800000 , 1194025.0] , [ 1314763200000 , 1244525.0] , [ 1317355200000 , 475000.0] , [ 1320033600000 , 475000.0] , [ 1322629200000 , 475000.0] , [ 1325307600000 , 690033.0] , [ 1327986000000 , 690033.0] , [ 1330491600000 , 690033.0] , [ 1333166400000 , 514733.0] , [ 1335758400000 , 514733.0]]
|
||||
} ,
|
||||
|
||||
{
|
||||
"key" : "Price" ,
|
||||
"values" : [
|
||||
[ 0 , 20.0] ,
|
||||
[ 1 , 22.0] ,
|
||||
[ 2 , 40] ,
|
||||
[ 3 , 50] ,
|
||||
[ 4 , 60] ,
|
||||
[ 5 , 70] ,
|
||||
[ 6 , 80] ,
|
||||
[ 7 , 90] ,
|
||||
[ 8 , 100] ,
|
||||
[ 9 , 110.0] ,
|
||||
[ 10 , 222.0]
|
||||
]
|
||||
},
|
||||
{
|
||||
"key" : "Changed" ,
|
||||
"color" : "#333",
|
||||
"values" : [ [ 1136005200000 , 71.89] , [ 1138683600000 , 75.51] , [ 1141102800000 , 68.49] , [ 1143781200000 , 62.72] , [ 1146369600000 , 70.39] , [ 1149048000000 , 59.77] , [ 1151640000000 , 57.27] , [ 1154318400000 , 67.96] , [ 1156996800000 , 67.85] , [ 1159588800000 , 76.98] , [ 1162270800000 , 81.08] , [ 1164862800000 , 91.66] , [ 1167541200000 , 84.84] , [ 1170219600000 , 85.73] , [ 1172638800000 , 84.61] , [ 1175313600000 , 92.91] , [ 1177905600000 , 99.8] , [ 1180584000000 , 121.191] , [ 1183176000000 , 122.04] , [ 1185854400000 , 131.76] , [ 1188532800000 , 138.48] , [ 1191124800000 , 153.47] , [ 1193803200000 , 189.95] , [ 1196398800000 , 182.22] , [ 1199077200000 , 198.08] , [ 1201755600000 , 135.36] , [ 1204261200000 , 125.02] , [ 1206936000000 , 143.5] , [ 1209528000000 , 173.95] , [ 1212206400000 , 188.75] , [ 1214798400000 , 167.44] , [ 1217476800000 , 158.95] , [ 1220155200000 , 169.53] , [ 1222747200000 , 113.66] , [ 1225425600000 , 107.59] , [ 1228021200000 , 92.67] , [ 1230699600000 , 85.35] , [ 1233378000000 , 90.13] , [ 1235797200000 , 89.31] , [ 1238472000000 , 105.12] , [ 1241064000000 , 125.83] , [ 1243742400000 , 135.81] , [ 1246334400000 , 142.43] , [ 1249012800000 , 163.39] , [ 1251691200000 , 168.21] , [ 1254283200000 , 185.35] , [ 1256961600000 , 188.5] , [ 1259557200000 , 199.91] , [ 1262235600000 , 210.732] , [ 1264914000000 , 192.063] , [ 1267333200000 , 204.62] , [ 1270008000000 , 235.0] , [ 1272600000000 , 261.09] , [ 1275278400000 , 256.88] , [ 1277870400000 , 251.53] , [ 1280548800000 , 257.25] , [ 1283227200000 , 243.1] , [ 1285819200000 , 283.75] , [ 1288497600000 , 300.98] , [ 1291093200000 , 311.15] , [ 1293771600000 , 322.56] , [ 1296450000000 , 339.32] , [ 1298869200000 , 353.21] , [ 1301544000000 , 348.5075] , [ 1304136000000 , 350.13] , [ 1306814400000 , 347.83] , [ 1309406400000 , 335.67] , [ 1312084800000 , 390.48] , [ 1314763200000 , 384.83] , [ 1317355200000 , 381.32] , [ 1320033600000 , 404.78] , [ 1322629200000 , 382.2] , [ 1325307600000 , 405.0] , [ 1327986000000 , 456.48] , [ 1330491600000 , 542.44] , [ 1333166400000 , 599.55] , [ 1335758400000 , 583.98]]
|
||||
"values" : [
|
||||
[ 0 , 20.0] ,
|
||||
[ 1 , 22.0] ,
|
||||
[ 2 , 40] ,
|
||||
[ 3 , 50] ,
|
||||
[ 4 , 60] ,
|
||||
[ 5 , 70] ,
|
||||
[ 6 , 80] ,
|
||||
[ 7 , 90] ,
|
||||
[ 8 , 100] ,
|
||||
[ 9 , 110.0] ,
|
||||
[ 10 , 222.0]
|
||||
]
|
||||
},
|
||||
{
|
||||
"key" : "OK" ,
|
||||
"color" : "#333",
|
||||
"values" : [
|
||||
[ 0 , 20.0] ,
|
||||
[ 1 , 22.0] ,
|
||||
[ 2 , 40] ,
|
||||
[ 3 , 50] ,
|
||||
[ 4 , 60] ,
|
||||
[ 5 , 70] ,
|
||||
[ 6 , 80] ,
|
||||
[ 7 , 90] ,
|
||||
[ 8 , 100] ,
|
||||
[ 9 , 110.0] ,
|
||||
[ 10 , 222.0]
|
||||
]
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
|
||||
@ -17,11 +17,8 @@ angular.module('NewDashWidget', ['RestServices', 'Utilities'])
|
||||
var scope = params.scope,
|
||||
target = params.target,
|
||||
dashboard = params.dashboard,
|
||||
keys = ['hosts', 'hosts.failed'
|
||||
// , 'teams', 'credentials', 'projects', 'inventories', 'groups', 'hosts',
|
||||
// 'job_templates', 'jobs'
|
||||
],
|
||||
i, html, element;
|
||||
|
||||
html, element;
|
||||
|
||||
html = "<div id=\"dashcontainer\" class=\"panel panel-default\">\n";
|
||||
html += "<div class=\"panel-heading\">New Dashboard</div>\n";
|
||||
@ -48,7 +45,7 @@ angular.module('NewDashWidget', ['RestServices', 'Utilities'])
|
||||
html += "<td class=\"h5 col-lg-1 text-center\">Users</td>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</table>\n";
|
||||
|
||||
|
||||
html += "<br>\n";
|
||||
html += "<hr>\n";
|
||||
html += "<table class=\"table\">\n";
|
||||
@ -57,16 +54,16 @@ angular.module('NewDashWidget', ['RestServices', 'Utilities'])
|
||||
html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Hosts</td>\n";
|
||||
html += "</tr>\n";
|
||||
html += "<tr>\n";
|
||||
//html += "<td id=\"job-status-graph-container\" style=\"border:none\">\n";
|
||||
html += "<td class=\"job-status-graph\" style=\"border:none\"><svg></svg></td>\n";
|
||||
//html += "<td id=\"job-status-graph-container\" style=\"border:none\">\n";
|
||||
html += "<td class=\"job-status-graph\" style=\"border:none\"><svg></svg></td>\n";
|
||||
// //class=\"job-status-graph col-lg-6\" style=\"border:none\">\n";
|
||||
// html += "<svg class=\"job-status-graph\" width=\"500\" height=\"200\" viewBox=\"0 0 500 200\" perserveAspectRatio=\"xMidYMid\"></td>\n";
|
||||
html += "<td class=\"host-count-graph\" style=\"border:none\"></td>\n";
|
||||
html += "<td class=\"host-count-graph\" style=\"border:none\"></td>\n";
|
||||
//<svg class=\"host-count-graph\" width=\"500\" height=\"200\" viewBox=\"0 0 500 200\" perserveAspectRatio=\"xMidYMid\"></td>\n";
|
||||
// html += "<td class=\"host-count-graph col-lg-6\" style=\"border:none\"></td>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</table>\n";
|
||||
|
||||
html += "</table>\n";
|
||||
|
||||
// html += "<br>\n";
|
||||
// html += "<hr>\n";
|
||||
html += "<table class=\"table table-bordered\">\n";
|
||||
@ -75,75 +72,104 @@ angular.module('NewDashWidget', ['RestServices', 'Utilities'])
|
||||
html += "<td class=\"h5 col-lg-6 text-center\">Remaining licenses</td>\n";
|
||||
html += "</tr>\n";
|
||||
html += "<tr>\n";
|
||||
html += "<td class=\"col-lg-8\">\n";
|
||||
html += "<td class=\"col-lg-8\">\n";
|
||||
|
||||
//---------------------------------------------------------------------------------------------------------
|
||||
|
||||
html += "<div class=\"col-md-6 right-side\">\n";
|
||||
html += "<div class=\"jobs-list-container\">\n";
|
||||
html += "<div class=\"col-md-6 right-side\">\n";
|
||||
html += "<div class=\"jobs-list-container\">\n";
|
||||
html += "<div class=\"row search-row\">\n";
|
||||
html += "<div class=\"col-md-6\"><div class=\"title\">Active</div></div>\n";
|
||||
html += "<div class=\"col-md-6\"><div class=\"title\">Active</div></div>\n";
|
||||
html += "<div class=\"col-md-6\" id=\"active-jobs-search-container\"></div>\n";
|
||||
html += "</div>\n";
|
||||
html += "<div class=\"job-list\" id=\"active-jobs-container\">\n";
|
||||
html += "</div>\n";
|
||||
html += "<div class=\"job-list\" id=\"active-jobs-container\">\n";
|
||||
html += "<div id=\"active-jobs\" class=\"job-list-target\"></div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
//---------------------------------------------------------------------------------------------------------
|
||||
|
||||
html += "</td>\n";
|
||||
html += "</td>\n";
|
||||
html += "<td class=\"col-lg-4 text-center\">Your license will out in <br><u> 365 </u> days</td>\n";
|
||||
html += "</tr>\n";
|
||||
html += "</table>\n";
|
||||
html += "</table>\n";
|
||||
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
html += "</div>\n";
|
||||
|
||||
var graphWidth = ($(window).width())/3;
|
||||
var graphHeight = ($(window).height())/3;
|
||||
|
||||
function makeGraph(){
|
||||
d3.json("static/js/jobstatusdata.json",function(error,data) {
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.linePlusBarChart()
|
||||
.margin({top: 30, right: 60, bottom: 50, left: 70})
|
||||
//We can set x data accessor to use index. Reason? So the bars all appear evenly spaced.
|
||||
.x(function(d,i) { return i })
|
||||
.y(function(d,i) {return d[1] })
|
||||
;
|
||||
// var graphWidth = ($(window).width())/3;
|
||||
// var graphHeight = ($(window).height())/3;
|
||||
|
||||
chart.xAxis.tickFormat(function(d) {
|
||||
var dx = data[0].values[d] && data[0].values[d][0] || 0;
|
||||
return d3.time.format('%x')(new Date(dx))
|
||||
});
|
||||
//function makeGraph(){
|
||||
// d3.json("static/js/jobstatusdata.json",function(error,data) {
|
||||
// nv.addGraph(function() {
|
||||
// var chart = nv.models.lineChart()
|
||||
// .margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
|
||||
// .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.y1Axis
|
||||
.tickFormat(d3.format(',f'));
|
||||
// chart.xAxis.tickFormat(function(d) {
|
||||
// var dx = data[0].values[d] && data[0].values[d][0] || 0;
|
||||
// return d3.time.format('%x')(new Date(dx))
|
||||
// });
|
||||
|
||||
chart.y2Axis
|
||||
.tickFormat(function(d) { return '$' + d3.format(',f')(d) });
|
||||
// chart.y1Axis
|
||||
// .tickFormat(d3.format(',f'));
|
||||
|
||||
chart.bars.forceY([0]);
|
||||
// chart.y2Axis
|
||||
// .tickFormat(function(d) { return '$' + d3.format(',f')(d) });
|
||||
|
||||
d3.select('.job-status-graph svg')
|
||||
.datum(data)
|
||||
.transition()
|
||||
.duration(0)
|
||||
.call(chart);
|
||||
// chart.bars.forceY([0]);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
// d3.select('.job-status-graph svg')
|
||||
// .datum(data)
|
||||
// .transition()
|
||||
// .duration(0)
|
||||
// .call(chart);
|
||||
|
||||
return chart;
|
||||
});
|
||||
// nv.utils.windowResize(chart.update);
|
||||
|
||||
});
|
||||
// return chart;
|
||||
// });
|
||||
// var chart = nv.models.lineChart()
|
||||
// .margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
|
||||
// .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 //Chart x-axis settings
|
||||
// .axisLabel('Time (ms)')
|
||||
// .tickFormat(d3.format(',r'));
|
||||
|
||||
// chart.yAxis //Chart y-axis settings
|
||||
// .axisLabel('Voltage (v)')
|
||||
// .tickFormat(d3.format('.02f'));
|
||||
|
||||
// /* Done setting the chart up? Time to render it!*/
|
||||
// //var myData = sinAndCos(); //You need data...
|
||||
|
||||
// d3.select('.job-status-graph svg') //Select the <svg> element you want to render the chart in.
|
||||
// .datum(data) //Populate the <svg> element with chart data...
|
||||
// .call(chart); //Finally, render the chart!
|
||||
|
||||
// //Update the chart when window resizes.
|
||||
// nv.utils.windowResize(function() { chart.update() });
|
||||
// return chart;
|
||||
// });
|
||||
|
||||
// });
|
||||
|
||||
// };
|
||||
|
||||
|
||||
function makeJobStatusGraph(){
|
||||
// function makeJobStatusGraph(){
|
||||
// Adjust the size
|
||||
// width = $('#job-summary-container .job_well').width();
|
||||
// height = $('#job-summary-container .job_well').height() - $('#summary-well-top-section').height() - $('#graph-section .header').outerHeight() - 15;
|
||||
@ -166,197 +192,197 @@ angular.module('NewDashWidget', ['RestServices', 'Utilities'])
|
||||
// }
|
||||
|
||||
|
||||
var margin = {top: 20, right: 80, bottom: 30, left: 50},
|
||||
width = graphWidth - margin.left - margin.right,
|
||||
height = graphHeight - margin.top - margin.bottom;
|
||||
// var margin = {top: 20, right: 80, bottom: 30, left: 50},
|
||||
// width = graphWidth - margin.left - margin.right,
|
||||
// height = graphHeight - margin.top - margin.bottom;
|
||||
|
||||
var parseDate = d3.time.format("%Y%m%d").parse;
|
||||
// var parseDate = d3.time.format("%Y%m%d").parse;
|
||||
|
||||
var x = d3.time.scale()
|
||||
.range([0, width]);
|
||||
// var x = d3.time.scale()
|
||||
// .range([0, width]);
|
||||
|
||||
var y = d3.scale.linear()
|
||||
.range([height, 0]);
|
||||
// var y = d3.scale.linear()
|
||||
// .range([height, 0]);
|
||||
|
||||
var color = d3.scale.category10();
|
||||
// var color = d3.scale.category10();
|
||||
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom");
|
||||
// var xAxis = d3.svg.axis()
|
||||
// .scale(x)
|
||||
// .orient("bottom");
|
||||
|
||||
var yAxis = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left");
|
||||
// var yAxis = d3.svg.axis()
|
||||
// .scale(y)
|
||||
// .orient("left");
|
||||
|
||||
var line = d3.svg.line()
|
||||
.interpolate("basis")
|
||||
.x(function(d) { return x(d.date); })
|
||||
.y(function(d) { return y(d.hostCount); });
|
||||
// var line = d3.svg.line()
|
||||
// .interpolate("basis")
|
||||
// .x(function(d) { return x(d.date); })
|
||||
// .y(function(d) { return y(d.hostCount); });
|
||||
|
||||
var svg = d3.select(".job-status-graph").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
// var svg = d3.select(".job-status-graph").append("svg")
|
||||
// .attr("width", width + margin.left + margin.right)
|
||||
// .attr("height", height + margin.top + margin.bottom)
|
||||
// .append("g")
|
||||
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
d3.json("static/js/jobstatusdata.json", function(error, data) {
|
||||
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
|
||||
// d3.json("static/js/jobstatusdata.json", function(error, data) {
|
||||
// color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
|
||||
|
||||
data.forEach(function(d) {
|
||||
d.date = parseDate(d.date);
|
||||
});
|
||||
// data.forEach(function(d) {
|
||||
// d.date = parseDate(d.date);
|
||||
// });
|
||||
|
||||
var status = color.domain().map(function(name) {
|
||||
return {
|
||||
name: name,
|
||||
values: data.map(function(d) {
|
||||
return {date: d.date, hostCount: +d[name]};
|
||||
})
|
||||
};
|
||||
});
|
||||
// var status = color.domain().map(function(name) {
|
||||
// return {
|
||||
// name: name,
|
||||
// values: data.map(function(d) {
|
||||
// return {date: d.date, hostCount: +d[name]};
|
||||
// })
|
||||
// };
|
||||
// });
|
||||
|
||||
x.domain(d3.extent(data, function(d) { return d.date; }));
|
||||
// x.domain(d3.extent(data, function(d) { return d.date; }));
|
||||
|
||||
y.domain([
|
||||
d3.min(status, function(c) { return d3.min(c.values, function(v) { return v.hostCount; }); }),
|
||||
d3.max(status, function(c) { return d3.max(c.values, function(v) { return v.hostCount; }); })
|
||||
]);
|
||||
// y.domain([
|
||||
// d3.min(status, function(c) { return d3.min(c.values, function(v) { return v.hostCount; }); }),
|
||||
// d3.max(status, function(c) { return d3.max(c.values, function(v) { return v.hostCount; }); })
|
||||
// ]);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis);
|
||||
// svg.append("g")
|
||||
// .attr("class", "x axis")
|
||||
// .attr("transform", "translate(0," + height + ")")
|
||||
// .call(xAxis);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(yAxis)
|
||||
.append("text")
|
||||
.attr("transform", "rotate(-90)")
|
||||
.attr("y", 6)
|
||||
.attr("dy", ".71em")
|
||||
.style("text-anchor", "end")
|
||||
.text("Number of hosts");
|
||||
// svg.append("g")
|
||||
// .attr("class", "y axis")
|
||||
// .call(yAxis)
|
||||
// .append("text")
|
||||
// .attr("transform", "rotate(-90)")
|
||||
// .attr("y", 6)
|
||||
// .attr("dy", ".71em")
|
||||
// .style("text-anchor", "end")
|
||||
// .text("Number of hosts");
|
||||
|
||||
var series = svg.selectAll(".series")
|
||||
.data(status)
|
||||
.enter().append("g")
|
||||
.attr("class", "series");
|
||||
// var series = svg.selectAll(".series")
|
||||
// .data(status)
|
||||
// .enter().append("g")
|
||||
// .attr("class", "series");
|
||||
|
||||
series.append("path")
|
||||
.attr("class", "line")
|
||||
.attr("d", function(d) { return line(d.values); })
|
||||
.style("stroke", function(d) { return color(d.name); });
|
||||
// series.append("path")
|
||||
// .attr("class", "line")
|
||||
// .attr("d", function(d) { return line(d.values); })
|
||||
// .style("stroke", function(d) { return color(d.name); });
|
||||
|
||||
series.append("text")
|
||||
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
|
||||
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.hostCount) + ")"; })
|
||||
.attr("x", 3)
|
||||
.attr("dy", ".35em")
|
||||
.text(function(d) { return d.name; });
|
||||
});
|
||||
// series.append("text")
|
||||
// .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
|
||||
// .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.hostCount) + ")"; })
|
||||
// .attr("x", 3)
|
||||
// .attr("dy", ".35em")
|
||||
// .text(function(d) { return d.name; });
|
||||
// });
|
||||
|
||||
};
|
||||
// };
|
||||
|
||||
function makeHostCountGraph(){
|
||||
var margin = {top: 20, right: 80, bottom: 30, left: 50},
|
||||
width = graphWidth - margin.left - margin.right,
|
||||
height = graphHeight - margin.top - margin.bottom;
|
||||
// function makeHostCountGraph(){
|
||||
// var margin = {top: 20, right: 80, bottom: 30, left: 50},
|
||||
// width = graphWidth - margin.left - margin.right,
|
||||
// height = graphHeight - margin.top - margin.bottom;
|
||||
|
||||
var parseDate = d3.time.format("%Y%m%d").parse;
|
||||
// var parseDate = d3.time.format("%Y%m%d").parse;
|
||||
|
||||
var x = d3.time.scale()
|
||||
.range([0, width]);
|
||||
// var x = d3.time.scale()
|
||||
// .range([0, width]);
|
||||
|
||||
var y = d3.scale.linear()
|
||||
.range([height, 0]);
|
||||
// var y = d3.scale.linear()
|
||||
// .range([height, 0]);
|
||||
|
||||
var color = d3.scale.category10();
|
||||
// var color = d3.scale.category10();
|
||||
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom");
|
||||
// var xAxis = d3.svg.axis()
|
||||
// .scale(x)
|
||||
// .orient("bottom");
|
||||
|
||||
var yAxis = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left");
|
||||
// var yAxis = d3.svg.axis()
|
||||
// .scale(y)
|
||||
// .orient("left");
|
||||
|
||||
var line = d3.svg.line()
|
||||
.interpolate("basis")
|
||||
.x(function(d) { return x(d.date); })
|
||||
.y(function(d) { return y(d.hostCount); });
|
||||
// var line = d3.svg.line()
|
||||
// .interpolate("basis")
|
||||
// .x(function(d) { return x(d.date); })
|
||||
// .y(function(d) { return y(d.hostCount); });
|
||||
|
||||
var svg = d3.select(".host-count-graph").append("svg")
|
||||
.attr("width", width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
// var svg = d3.select(".host-count-graph").append("svg")
|
||||
// .attr("width", width + margin.left + margin.right)
|
||||
// .attr("height", height + margin.top + margin.bottom)
|
||||
// .append("g")
|
||||
// .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
d3.json("static/js/hostcount.json", function(error, data) {
|
||||
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
|
||||
// d3.json("static/js/hostcount.json", function(error, data) {
|
||||
// color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
|
||||
|
||||
data.forEach(function(d) {
|
||||
d.date = parseDate(d.date);
|
||||
});
|
||||
// data.forEach(function(d) {
|
||||
// d.date = parseDate(d.date);
|
||||
// });
|
||||
|
||||
var status = color.domain().map(function(name) {
|
||||
return {
|
||||
name: name,
|
||||
values: data.map(function(d) {
|
||||
return {date: d.date, hostCount: +d[name]};
|
||||
})
|
||||
};
|
||||
});
|
||||
// var status = color.domain().map(function(name) {
|
||||
// return {
|
||||
// name: name,
|
||||
// values: data.map(function(d) {
|
||||
// return {date: d.date, hostCount: +d[name]};
|
||||
// })
|
||||
// };
|
||||
// });
|
||||
|
||||
x.domain(d3.extent(data, function(d) { return d.date; }));
|
||||
// x.domain(d3.extent(data, function(d) { return d.date; }));
|
||||
|
||||
y.domain([
|
||||
d3.min(status, function(c) { return d3.min(c.values, function(v) { return v.hostCount; }); }),
|
||||
d3.max(status, function(c) { return d3.max(c.values, function(v) { return v.hostCount; }); })
|
||||
]);
|
||||
// y.domain([
|
||||
// d3.min(status, function(c) { return d3.min(c.values, function(v) { return v.hostCount; }); }),
|
||||
// d3.max(status, function(c) { return d3.max(c.values, function(v) { return v.hostCount; }); })
|
||||
// ]);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "x axis")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis);
|
||||
// svg.append("g")
|
||||
// .attr("class", "x axis")
|
||||
// .attr("transform", "translate(0," + height + ")")
|
||||
// .call(xAxis);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "y axis")
|
||||
.call(yAxis)
|
||||
.append("text")
|
||||
.attr("transform", "rotate(-90)")
|
||||
.attr("y", 6)
|
||||
.attr("dy", ".71em")
|
||||
.style("text-anchor", "end")
|
||||
.text("Number of hosts");
|
||||
// svg.append("g")
|
||||
// .attr("class", "y axis")
|
||||
// .call(yAxis)
|
||||
// .append("text")
|
||||
// .attr("transform", "rotate(-90)")
|
||||
// .attr("y", 6)
|
||||
// .attr("dy", ".71em")
|
||||
// .style("text-anchor", "end")
|
||||
// .text("Number of hosts");
|
||||
|
||||
var series = svg.selectAll(".series")
|
||||
.data(status)
|
||||
.enter().append("g")
|
||||
.attr("class", "series");
|
||||
// var series = svg.selectAll(".series")
|
||||
// .data(status)
|
||||
// .enter().append("g")
|
||||
// .attr("class", "series");
|
||||
|
||||
series.append("path")
|
||||
.attr("class", "line")
|
||||
.attr("d", function(d) { return line(d.values); })
|
||||
.style("stroke", function(d) { return color(d.name); });
|
||||
// series.append("path")
|
||||
// .attr("class", "line")
|
||||
// .attr("d", function(d) { return line(d.values); })
|
||||
// .style("stroke", function(d) { return color(d.name); });
|
||||
|
||||
series.append("text")
|
||||
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
|
||||
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.hostCount) + ")"; })
|
||||
.attr("x", 3)
|
||||
.attr("dy", ".35em")
|
||||
.text(function(d) { return d.name; });
|
||||
});
|
||||
// series.append("text")
|
||||
// .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
|
||||
// .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.hostCount) + ")"; })
|
||||
// .attr("x", 3)
|
||||
// .attr("dy", ".35em")
|
||||
// .text(function(d) { return d.name; });
|
||||
// });
|
||||
|
||||
// };
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
element = angular.element(document.getElementById(target));
|
||||
element.html(html);
|
||||
$compile(element)(scope);
|
||||
makeGraph();
|
||||
// makeJobStatusGraph();
|
||||
makeHostCountGraph();
|
||||
// makeGraph();
|
||||
// makeJobStatusGraph();
|
||||
// makeHostCountGraph();
|
||||
scope.$emit('WidgetLoaded');
|
||||
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user