Skip to content

Commit

Permalink
Switching charts to use Chart.js instead of Google Charts
Browse files Browse the repository at this point in the history
  • Loading branch information
Dan Cryer committed Oct 15, 2015
1 parent 66cf713 commit dd1d3b3
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 60 deletions.
9 changes: 1 addition & 8 deletions PHPCI/View/layout.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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>
Expand Down Expand Up @@ -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')) :?>
Expand Down
86 changes: 62 additions & 24 deletions public/assets/js/build-plugins/loc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ var locPlugin = ActiveBuild.UiPlugin.extend({
lastData: null,
displayOnUpdate: false,
rendered: false,
chartData: null,

register: function() {
var self = this;
Expand All @@ -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) {
Expand All @@ -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;
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);
}

this.rendered = true;
self.drawChart();
},

$('#phploc-lines').empty().animate({height: '275px'});
drawChart: function () {
var self = this;

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)]);
}
if ($('#information').hasClass('active') && self.chartData) {
$('#build-lines-chart').show();

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'}
};
var ctx = $("#phploc-lines-chart").get(0).getContext("2d");
var phpLocChart = new Chart(ctx);

$('#build-lines-chart').show();
var chart = new google.visualization.LineChart(document.getElementById('phploc-lines'));
chart.draw(data, options);
phpLocChart.Line(self.chartData, {
datasetFill: false,
multiTooltipTemplate: "<%=datasetLabel%>: <%= value %>"
});
}
}
});

Expand Down
75 changes: 47 additions & 28 deletions public/assets/js/build-plugins/warnings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'),

This comment has been minimized.

Sign in to view

Copy link
@MitchProbst

MitchProbst May 4, 2016

@dancryer Why did phpcs and phpmd get removed from warnings.js? It didn't seem necessary to take them out especially because there are no graphs for PHPCS and PHPMD at the current time.

This comment has been minimized.

Sign in to view

Copy link
@REBELinBLUE

REBELinBLUE May 5, 2016

Contributor

Indeed!
'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;
Expand All @@ -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);
});

Expand All @@ -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) {
Expand Down Expand Up @@ -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'];

self.chartData = {
labels: [],
datasets: []
};

var titles = ['Build'];
for (var key in self.keys) {
titles.push(self.keys[key]);
var color = colors.shift();

self.chartData.datasets.push({
label: self.keys[key],
strokeColor: color,
pointColor: color,
data: []
});
}

var data = [titles];
for (var build in self.data) {
var thisBuild = ['#' + build];
self.chartData.labels.push('Build ' + build);

var i = 0;
for (var key in self.keys) {
thisBuild.push(parseInt(self.data[build][key]));
self.chartData[i].data.push(parseInt(self.data[build][key]));
i++;
}

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'}
};
console.log(self.chartData);

self.drawChart();
},

$('#build-warnings-chart').show();
drawChart: function () {
var self = this;

var chart = new google.visualization.LineChart(document.getElementById('build-warnings'));
chart.draw(data, options);
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 %>"
});
}
}
});

Expand Down

0 comments on commit dd1d3b3

Please sign in to comment.