deblan/phpci
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Switching charts to use Chart.js instead of Google Charts

Browse source
This commit is contained in:
Dan Cryer 2015-10-15 12:34:58 +01:00
parent 66cf713ebc
commit dd1d3b3d6a
3 changed files with 122 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
PHPCI/View/layout.phtml
View file

@ -9,8 +9,6 @@
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="<?php print PHPCI_URL; ?>assets/plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<link href="<?php print PHPCI_URL; ?>assets/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
@ -37,7 +35,6 @@
<script src="<?php print PHPCI_URL; ?>assets/js/sprintf.js"></script>
<script src="<?php print PHPCI_URL; ?>assets/js/moment.min.js"></script>
<script src="<?php print PHPCI_URL; ?>assets/js/phpci.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@ -304,12 +301,8 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script src="<?php print PHPCI_URL; ?>assets/plugins/chartjs/Chart.min.js" type="text/javascript"></script>
<script src="<?php print PHPCI_URL; ?>assets/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<script src="<?php print PHPCI_URL; ?>assets/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<?php if (file_exists(PHPCI_DIR . 'assets/plugins/datepicker/locales/bootstrap-datepicker.' . Lang::getLanguage() . '.js')) :?>

94
public/assets/js/build-plugins/loc.js
View file

@ -5,6 +5,7 @@ var locPlugin = ActiveBuild.UiPlugin.extend({
lastData: null,
displayOnUpdate: false,
rendered: false,
chartData: null,
register: function() {
var self = this;
@ -19,12 +20,19 @@ var locPlugin = ActiveBuild.UiPlugin.extend({
query();
}
});
google.load("visualization", "1", {packages:["corechart"]});
},
render: function() {
return $('<div id="phploc-lines"></div>').text(Lang.get('chart_display'));
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;
},
onUpdate: function(e) {
@ -33,35 +41,65 @@ var locPlugin = ActiveBuild.UiPlugin.extend({
},
displayChart: function() {
var self = this;
var builds = this.lastData;
self.rendered = true;
if (!builds || !builds.length) {
$('#build-lines-chart').hide();
return;
}
this.rendered = true;
$('#phploc-lines').empty().animate({height: '275px'});
var titles = [Lang.get('build'), Lang.get('lines'), Lang.get('comment_lines'), Lang.get('noncomment_lines'), Lang.get('logical_lines')];
var data = [titles];
for (var i in builds) {
data.push(['#' + builds[i].build_id, parseInt(builds[i].meta_value.LOC), parseInt(builds[i].meta_value.CLOC), parseInt(builds[i].meta_value.NCLOC), parseInt(builds[i].meta_value.LLOC)]);
}
var data = google.visualization.arrayToDataTable(data);
var options = {
hAxis: {title: Lang.get('builds')},
vAxis: {title: Lang.get('lines')},
backgroundColor: { fill: 'transparent' },
height: 275,
legend: {position: 'bottom'}
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: []
}
]
};
$('#build-lines-chart').show();
var chart = new google.visualization.LineChart(document.getElementById('phploc-lines'));
chart.draw(data, options);
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);
}
self.drawChart();
},
drawChart: function () {
var self = this;
if ($('#information').hasClass('active') && self.chartData) {
$('#build-lines-chart').show();
var ctx = $("#phploc-lines-chart").get(0).getContext("2d");
var phpLocChart = new Chart(ctx);
phpLocChart.Line(self.chartData, {
datasetFill: false,
multiTooltipTemplate: "<%=datasetLabel%>: <%= value %>"
});
}
}
});

91
public/assets/js/build-plugins/warnings.js
View file

@ -4,18 +4,15 @@ var warningsPlugin = ActiveBuild.UiPlugin.extend({
title: Lang.get('quality_trend'),
keys: {
'codeception-errors': Lang.get('codeception_errors'),
'phpmd-warnings': Lang.get('phpmd_warnings'),
'phpcs-warnings': Lang.get('phpcs_warnings'),
'phpcs-errors': Lang.get('phpcs_errors'),
'phplint-errors': Lang.get('phplint_errors'),
'phpunit-errors': Lang.get('phpunit_errors'),
'phpdoccheck-warnings': Lang.get('phpdoccheck'),
'phptallint-errors': Lang.get('phptal_errors'),
'phptallint-warnings': Lang.get('phptal_warnings')
},
data: {},
displayOnUpdate: false,
rendered: false,
chartData: null,
register: function() {
var self = this;
@ -25,7 +22,7 @@ var warningsPlugin = ActiveBuild.UiPlugin.extend({
queries.push(ActiveBuild.registerQuery(key, -1, {num_builds: 10, key: key}));
}
$(window).on('codeception-errors phpmd-warnings phpcs-warnings phptallint-warnings phptallint-errors phpcs-errors phplint-errors phpunit-errors phpdoccheck-warnings', function(data) {
$(window).on('codeception-errors phptallint-warnings phptallint-errors phplint-errors phpunit-errors', function(data) {
self.onUpdate(data);
});
@ -37,12 +34,19 @@ var warningsPlugin = ActiveBuild.UiPlugin.extend({
}
}
});
google.load("visualization", "1", {packages:["corechart"]});
},
render: function() {
return $('<div id="build-warnings"></div>').text(Lang.get('chart_display'));
var self = this;
var container = $('<div id="build-warnings" style="width: 100%; height: 300px"></div>');
container.append('<canvas id="build-warnings-linechart" style="width: 100%; height: 300px"></canvas>');
$(document).on('shown.bs.tab', function () {
$('#build-warnings-chart').hide();
self.drawChart();
});
return container;
},
onUpdate: function(e) {
@ -74,38 +78,53 @@ var warningsPlugin = ActiveBuild.UiPlugin.extend({
var self = this;
self.rendered = true;
$('#build-warnings').empty().animate({height: '275px'});
var colors = ['#4D4D4D', '#5DA5DA', '#FAA43A', '#60BD68', '#F17CB0', '#B2912F', '#B276B2', '#DECF3F', '#F15854'];
var titles = ['Build'];
for (var key in self.keys) {
titles.push(self.keys[key]);
}
var data = [titles];
for (var build in self.data) {
var thisBuild = ['#' + build];
for (var key in self.keys) {
thisBuild.push(parseInt(self.data[build][key]));
}
data.push(thisBuild);
}
var data = google.visualization.arrayToDataTable(data);
var options = {
hAxis: {title: Lang.get('builds')},
vAxis: {title: Lang.get('issues'), logScale:true},
backgroundColor: { fill: 'transparent' },
height: 275,
pointSize: 3,
legend: {position: 'bottom'}
self.chartData = {
labels: [],
datasets: []
};
$('#build-warnings-chart').show();
for (var key in self.keys) {
var color = colors.shift();
var chart = new google.visualization.LineChart(document.getElementById('build-warnings'));
chart.draw(data, options);
self.chartData.datasets.push({
label: self.keys[key],
strokeColor: color,
pointColor: color,
data: []
});
}
for (var build in self.data) {
self.chartData.labels.push('Build ' + build);
var i = 0;
for (var key in self.keys) {
self.chartData[i].data.push(parseInt(self.data[build][key]));
i++;
}
}
console.log(self.chartData);
self.drawChart();
},
drawChart: function () {
var self = this;
if ($('#information').hasClass('active') && self.chartData) {
$('#build-warnings-chart').show();
var ctx = $("#build-warnings-linechart").get(0).getContext("2d");
var buildWarningsChart = new Chart(ctx);
buildWarningsChart.Line(self.chartData, {
datasetFill: false,
multiTooltipTemplate: "<%=datasetLabel%>: <%= value %>"
});
}
}
});