...
Add Chart.js CDN URL to "JavaScript URLs":
We are going to improve the JavaScript:
- To fetch number of issues in To Do status
- To display a pie chart that shows number of issues in To Do, Completed and Other statuses
...
Add HTML to "HTML to append" editor:
| Code Block | ||
|---|---|---|
| ||
<div id="comp-issues-cont" style="padding:10px;">
<canvas style="max-width:400px; max-height:400px;" />
<span style="display: inline-block; vertical-align: top; padding-top: 40px; font-size: 26px;" />
</div>
<script>
|
We are going to improve the JavaScript:
- To fetch number of issues in To Do status
- To display a pie chart that shows number of issues in To Do, Completed and Other statuses
| Code Block | ||
|---|---|---|
| ||
define("_ujgCompletedIssues", [ "jquery" ], function($) {
var MyGadget = function(API) {
var $msgDiv = $("#comp-issues-cont"); // find attached DOM element
API.getGadgetContentEl().append($msgDiv);
// function to call from success ajax callbacks
var showInfo = function(todo, completed, total) {
if (todo !== undefined && completed !== undefined && total !== undefined) { // only if 3 vars are defined
var other = total - completed - todo;
// Chart.js magic
new Chart($msgDiv.find("canvas").get(0), {
type: 'pie',
data: {
labels: ["To Do", "Completed", "Other"],
datasets: [{
label: '# of Issues',
data: [todo, completed, other],
backgroundColor: [
'rgba(255, 0, 0, 0.7)',
'rgba(0, 255, 0, 0.7)',
'rgba(0, 0, 255, 0.7)'
]
}]
}
});
$msgDiv.find("span").append('To Do: ' + todo + '</br>' + 'Completed: ' + completed + '</br>' + 'Other: ' + other);
API.resize();
}
};
// function for error displaying
var showError = function(url) {
$msgDiv.empty();
AJS.messages['error']($msgDiv, {
title : 'Error!',
body : 'Failed to retrieve data for URL: ' + url
});
API.resize();
};
var url, todo, completed, total; // initially are undefined
url = 'https://vkrupach.atlassian.net/rest/agile/1.0/board/6/issue?jql=sprint%20in%20openSprints()%20and%20status%20in(%27To%20Do%27)&fields=id';
// make a call for number of completed issues
// $.ajax({ // for Server
AP.request({ // for Cloud
url : url,
success : function(data) {
// todo = data.total; // for Server
todo = $.parseJSON(data).total; // for Cloud
showInfo(todo, completed, total); // call it 3 times since ajax methods are asynchronous and we are not sure about thier completion order
},
error : function(data) {
showError(url);
}
});
url = 'https://vkrupach.atlassian.net/rest/agile/1.0/board/6/issue?jql=sprint%20in%20openSprints()%20and%20status%20in(Done)&fields=id';
// make a call for number of completed issues
// $.ajax({ // for Server
AP.request({ // for Cloud
url : url,
success : function(data) {
// completed = data.total; // for Server
completed = $.parseJSON(data).total; // for Cloud
showInfo(todo, completed, total); // call it 3 times since ajax methods are asynchronous and we are not sure about thier completion order
},
error : function(data) {
showError(url);
}
});
url = 'https://vkrupach.atlassian.net/rest/agile/1.0/board/6/issue?jql=sprint%20in%20openSprints()&fields=id';
// $.ajax({ // for Server
AP.request({ // for Cloud
url : url,
success : function(data) {
// total = data.total; // for Server
total = $.parseJSON(data).total; // for Cloud
showInfo(todo, completed, total); // call it 3 times since ajax methods are asynchronous and we are not sure about thier completion order
},
error : function(data) {
showError(url);
}
});
};
return MyGadget;
});
</script> |
Result is beautiful and colorful:
...