2014-12-02 17:26:55 +01:00
|
|
|
var locPlugin = ActiveBuild.UiPlugin.extend({
|
2013-10-08 08:21:46 +02:00
|
|
|
id: 'build-lines-chart',
|
2016-02-19 23:28:39 +01:00
|
|
|
css: 'col-xs-6',
|
2014-12-04 14:08:48 +01:00
|
|
|
title: Lang.get('lines_of_code'),
|
2013-10-08 08:21:46 +02:00
|
|
|
lastData: null,
|
|
|
|
displayOnUpdate: false,
|
2014-05-09 16:34:14 +02:00
|
|
|
rendered: false,
|
2015-10-15 13:34:58 +02:00
|
|
|
chartData: null,
|
2013-10-08 08:21:46 +02:00
|
|
|
|
|
|
|
register: function() {
|
|
|
|
var self = this;
|
2014-12-02 17:26:55 +01:00
|
|
|
var query = ActiveBuild.registerQuery('phploc-lines', -1, {num_builds: 10, key: 'phploc'})
|
2013-10-08 08:21:46 +02:00
|
|
|
|
|
|
|
$(window).on('phploc-lines', function(data) {
|
|
|
|
self.onUpdate(data);
|
|
|
|
});
|
|
|
|
|
|
|
|
$(window).on('build-updated', function(data) {
|
2014-05-09 16:34:14 +02:00
|
|
|
if (data.queryData.status > 1 && !self.rendered) {
|
2013-10-08 08:21:46 +02:00
|
|
|
query();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2015-10-15 13:34:58 +02:00
|
|
|
var self = this;
|
|
|
|
var container = $('<div id="phploc-lines" style="width: 100%; height: 300px"></div>');
|
|
|
|
container.append('<canvas id="phploc-lines-chart" style="width: 100%; height: 300px"></canvas>');
|
|
|
|
|
|
|
|
$(document).on('shown.bs.tab', function () {
|
|
|
|
$('#build-lines-chart').hide();
|
|
|
|
self.drawChart();
|
|
|
|
});
|
|
|
|
|
|
|
|
return container;
|
2013-10-08 08:21:46 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
onUpdate: function(e) {
|
|
|
|
this.lastData = e.queryData;
|
2014-05-09 16:34:14 +02:00
|
|
|
this.displayChart();
|
2013-10-08 08:21:46 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
displayChart: function() {
|
2015-10-15 13:34:58 +02:00
|
|
|
var self = this;
|
2014-04-12 00:11:46 +02:00
|
|
|
var builds = this.lastData;
|
2015-10-15 13:34:58 +02:00
|
|
|
self.rendered = true;
|
2013-10-08 08:21:46 +02:00
|
|
|
|
2015-10-15 13:34:58 +02:00
|
|
|
self.chartData = {
|
|
|
|
labels: [],
|
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
label: Lang.get('lines'),
|
|
|
|
strokeColor: "rgba(60,141,188,1)",
|
|
|
|
pointColor: "rgba(60,141,188,1)",
|
|
|
|
data: []
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: Lang.get('logical_lines'),
|
|
|
|
strokeColor: "rgba(245,105,84,1)",
|
|
|
|
pointColor: "rgba(245,105,84,1)",
|
|
|
|
data: []
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: Lang.get('comment_lines'),
|
|
|
|
strokeColor: "rgba(0,166,90,1)",
|
|
|
|
pointColor: "rgba(0,166,90,1)",
|
|
|
|
data: []
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: Lang.get('noncomment_lines'),
|
|
|
|
strokeColor: "rgba(0,192,239,1)",
|
|
|
|
pointColor: "rgba(0,192,239,1)",
|
|
|
|
data: []
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
|
|
|
|
for (var i in builds) {
|
|
|
|
self.chartData.labels.push('Build ' + builds[i].build_id);
|
|
|
|
self.chartData.datasets[0].data.push(builds[i].meta_value.LOC);
|
|
|
|
self.chartData.datasets[1].data.push(builds[i].meta_value.LLOC);
|
|
|
|
self.chartData.datasets[2].data.push(builds[i].meta_value.CLOC);
|
|
|
|
self.chartData.datasets[3].data.push(builds[i].meta_value.NCLOC);
|
2013-10-08 08:21:46 +02:00
|
|
|
}
|
|
|
|
|
2015-10-15 13:34:58 +02:00
|
|
|
self.drawChart();
|
|
|
|
},
|
2014-05-09 16:34:14 +02:00
|
|
|
|
2015-10-15 13:34:58 +02:00
|
|
|
drawChart: function () {
|
|
|
|
var self = this;
|
2013-10-08 08:21:46 +02:00
|
|
|
|
2015-11-03 12:51:45 +01:00
|
|
|
if ($('#information').hasClass('active') && self.chartData && self.lastData) {
|
2015-10-15 13:34:58 +02:00
|
|
|
$('#build-lines-chart').show();
|
2013-10-08 08:21:46 +02:00
|
|
|
|
2015-10-15 13:34:58 +02:00
|
|
|
var ctx = $("#phploc-lines-chart").get(0).getContext("2d");
|
|
|
|
var phpLocChart = new Chart(ctx);
|
2013-10-08 08:21:46 +02:00
|
|
|
|
2015-10-15 13:34:58 +02:00
|
|
|
phpLocChart.Line(self.chartData, {
|
|
|
|
datasetFill: false,
|
|
|
|
multiTooltipTemplate: "<%=datasetLabel%>: <%= value %>"
|
|
|
|
});
|
|
|
|
}
|
2013-10-08 08:21:46 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-12-02 17:26:55 +01:00
|
|
|
ActiveBuild.registerPlugin(new locPlugin());
|