24816f7704
The widget shows summary on contribution for companies or modules. Options are limited to project type, release and metric. Stats is shown as chart. Widget is designed to be included into any web page, the data is loaded via jsonp. Also: * Options for project type, release and metrics are loaded in AJAX, not coded in template * Moved code that handles drop-down selectors into stackalytics-ui.js Change-Id: I3373ab1a627099f380070c0e3d90164ec0096039
508 lines
15 KiB
JavaScript
508 lines
15 KiB
JavaScript
/*
|
|
Copyright (c) 2013 Mirantis Inc.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
function createTimeline(data) {
|
|
var plot = $.jqplot('timeline', data, {
|
|
gridPadding: {
|
|
right: 35
|
|
},
|
|
cursor: {
|
|
show: false
|
|
},
|
|
highlighter: {
|
|
show: true,
|
|
sizeAdjust: 6
|
|
},
|
|
axes: {
|
|
xaxis: {
|
|
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
|
|
tickOptions: {
|
|
fontSize: '8pt',
|
|
angle: -90,
|
|
formatString: '%b \'%y'
|
|
},
|
|
renderer: $.jqplot.DateAxisRenderer,
|
|
tickInterval: '1 month'
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
label: ''
|
|
},
|
|
y2axis: {
|
|
min: 0,
|
|
label: ''
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
shadow: false,
|
|
fill: true,
|
|
fillColor: '#4bb2c5',
|
|
fillAlpha: 0.3
|
|
},
|
|
{
|
|
shadow: false,
|
|
fill: true,
|
|
color: '#4bb2c5',
|
|
fillColor: '#4bb2c5'
|
|
},
|
|
{
|
|
shadow: false,
|
|
lineWidth: 1.5,
|
|
showMarker: true,
|
|
markerOptions: { size: 5 },
|
|
yaxis: 'y2axis'
|
|
}
|
|
]
|
|
});
|
|
}
|
|
|
|
function renderTimeline(options) {
|
|
$(document).ready(function () {
|
|
$.ajax({
|
|
url: make_uri("/api/1.0/stats/timeline", options),
|
|
dataType: "json",
|
|
success: function (data) {
|
|
createTimeline(data["timeline"]);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderTableAndChart(url, container_id, table_id, chart_id, link_param, table_column_names) {
|
|
|
|
$(document).ready(function () {
|
|
|
|
$.ajax({
|
|
url: make_uri(url),
|
|
dataType: "jsonp",
|
|
success: function (data) {
|
|
|
|
var tableData = [];
|
|
var chartData = [];
|
|
|
|
var limit = 10;
|
|
var aggregate = 0;
|
|
var index = 1;
|
|
var i;
|
|
|
|
data = data["stats"];
|
|
|
|
if (data.length == 0) {
|
|
$("#" + container_id).hide();
|
|
return;
|
|
}
|
|
|
|
for (i = 0; i < data.length; i++) {
|
|
if (i < limit - 1) {
|
|
chartData.push([data[i].name, data[i].metric]);
|
|
} else {
|
|
aggregate += data[i].metric;
|
|
}
|
|
|
|
var index_label = index;
|
|
if (data[i].name == "*independent") {
|
|
index_label = "";
|
|
} else {
|
|
index++;
|
|
}
|
|
if (!data[i].link) {
|
|
if (data[i].id) {
|
|
data[i]["link"] = make_link(data[i].id, data[i].name, link_param);
|
|
} else {
|
|
data[i]["link"] = data[i].name
|
|
}
|
|
}
|
|
data[i]["index"] = index_label;
|
|
tableData.push(data[i]);
|
|
}
|
|
|
|
if (i == limit) {
|
|
chartData.push([data[i - 1].name, data[i - 1].metric]);
|
|
} else if (i > limit) {
|
|
chartData.push(["others", aggregate]);
|
|
}
|
|
|
|
if (!table_column_names) {
|
|
table_column_names = ["index", "link", "metric"];
|
|
}
|
|
var tableColumns = [];
|
|
var sort_by_column = 0;
|
|
for (i = 0; i < table_column_names.length; i++) {
|
|
tableColumns.push({"mData": table_column_names[i]});
|
|
if (table_column_names[i] == "metric") {
|
|
sort_by_column = i;
|
|
}
|
|
}
|
|
|
|
if (table_id) {
|
|
$("#" + table_id).dataTable({
|
|
"aLengthMenu": [
|
|
[10, 25, 50, -1],
|
|
[10, 25, 50, "All"]
|
|
],
|
|
"aaSorting": [
|
|
[ sort_by_column, "desc" ]
|
|
],
|
|
"sPaginationType": "full_numbers",
|
|
"iDisplayLength": 10,
|
|
"aaData": tableData,
|
|
"aoColumns": tableColumns
|
|
});
|
|
}
|
|
|
|
if (chart_id) {
|
|
var plot = $.jqplot(chart_id, [chartData], {
|
|
seriesDefaults: {
|
|
renderer: jQuery.jqplot.PieRenderer,
|
|
rendererOptions: {
|
|
showDataLabels: true
|
|
}
|
|
},
|
|
legend: { show: true, location: 'e' }
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function render_bar_chart(chart_id, chart_data) {
|
|
$.jqplot(chart_id, chart_data, {
|
|
seriesDefaults: {
|
|
renderer: $.jqplot.BarRenderer,
|
|
rendererOptions: {
|
|
barMargin: 1
|
|
},
|
|
pointLabels: {show: true}
|
|
},
|
|
axes: {
|
|
xaxis: {
|
|
renderer: $.jqplot.CategoryAxisRenderer,
|
|
label: "Age"
|
|
},
|
|
yaxis: {
|
|
label: "Count",
|
|
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function render_punch_card(chart_id, chart_data) {
|
|
$.jqplot(chart_id, chart_data, {
|
|
seriesDefaults:{
|
|
renderer: $.jqplot.BubbleRenderer,
|
|
rendererOptions: {
|
|
varyBubbleColors: false,
|
|
color: '#a09898',
|
|
autoscalePointsFactor: -0.25,
|
|
highlightAlpha: 0.7
|
|
},
|
|
shadow: true,
|
|
shadowAlpha: 0.05
|
|
},
|
|
axesDefaults: {
|
|
tickRenderer: $.jqplot.CanvasAxisTickRenderer
|
|
},
|
|
axes: {
|
|
xaxis: {
|
|
label: 'Hour',
|
|
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
|
|
tickOptions: {
|
|
formatter: function (format, val) {
|
|
if (val < 0 || val > 24) { return "" }
|
|
return val;
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
label: 'Day of week',
|
|
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
|
|
tickOptions: {
|
|
formatter: function (format, val) {
|
|
if (val < 0 || val > 6) { return "" }
|
|
var labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
|
return labels[val];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function getUrlVars() {
|
|
var vars = {};
|
|
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
|
|
vars[key] = value;
|
|
});
|
|
return vars;
|
|
}
|
|
|
|
function make_link(id, title, param_name) {
|
|
var options = {};
|
|
options[param_name] = encodeURIComponent(id).toLowerCase();
|
|
var link = make_uri("/", options);
|
|
return "<a href=\"" + link + "\">" + title + "</a>"
|
|
}
|
|
|
|
function make_uri(uri, options) {
|
|
var ops = {};
|
|
$.extend(ops, getUrlVars());
|
|
if (options != null) {
|
|
$.extend(ops, options);
|
|
}
|
|
var str = $.map(ops,function (val, index) {
|
|
return index + "=" + val;
|
|
}).join("&");
|
|
|
|
return (str == "") ? uri : uri + "?" + str;
|
|
}
|
|
|
|
function make_std_options() {
|
|
var options = {};
|
|
options['release'] = $('#release').val();
|
|
options['metric'] = $('#metric').val();
|
|
options['project_type'] = $('#project_type').val();
|
|
options['module'] = $('#module').val() || '';
|
|
options['company'] = $('#company').val() || '';
|
|
options['user_id'] = $('#user').val() || '';
|
|
|
|
return options;
|
|
}
|
|
|
|
function reload() {
|
|
window.location.search = $.map(make_std_options(),function (val, index) {
|
|
return index + "=" + val;
|
|
}).join("&")
|
|
}
|
|
|
|
function init_selectors(base_url) {
|
|
var release = getUrlVars()["release"];
|
|
if (!release) {
|
|
release = "_default";
|
|
}
|
|
$("#release").val(release).select2({
|
|
ajax: {
|
|
url: make_uri(base_url + "/api/1.0/releases"),
|
|
dataType: 'jsonp',
|
|
data: function (term, page) {
|
|
return {
|
|
query: term
|
|
};
|
|
},
|
|
results: function (data, page) {
|
|
return {results: data["releases"]};
|
|
}
|
|
},
|
|
initSelection: function (element, callback) {
|
|
var id = $(element).val();
|
|
$.ajax(make_uri(base_url + "/api/1.0/releases/" + id), {
|
|
dataType: "jsonp"
|
|
}).done(function (data) {
|
|
callback(data["release"]);
|
|
$("#release").val(data["release"].id)
|
|
});
|
|
}
|
|
});
|
|
$('#release')
|
|
.on("change", function (e) {
|
|
reload();
|
|
});
|
|
|
|
var metric = getUrlVars()["metric"];
|
|
if (!metric) {
|
|
metric = "_default";
|
|
}
|
|
$("#metric").val(metric).select2({
|
|
ajax: {
|
|
url: make_uri(base_url + "/api/1.0/metrics"),
|
|
dataType: 'jsonp',
|
|
data: function (term, page) {
|
|
return {
|
|
query: term
|
|
};
|
|
},
|
|
results: function (data, page) {
|
|
$("#metric").val(data["default"]);
|
|
return {results: data["metrics"]};
|
|
}
|
|
},
|
|
initSelection: function (element, callback) {
|
|
var id = $(element).val();
|
|
$.ajax(make_uri(base_url + "/api/1.0/metrics/" + id), {
|
|
dataType: "jsonp"
|
|
}).done(function (data) {
|
|
callback(data["metric"]);
|
|
$("#metric").val(data["metric"].id);
|
|
});
|
|
}
|
|
});
|
|
$('#metric')
|
|
.on("change", function (e) {
|
|
reload();
|
|
});
|
|
|
|
var project_type = getUrlVars()["project_type"];
|
|
if (!project_type) {
|
|
project_type = "_default";
|
|
}
|
|
$("#project_type").val(project_type).select2({
|
|
ajax: {
|
|
url: make_uri(base_url + "/api/1.0/project_types"),
|
|
dataType: 'jsonp',
|
|
data: function (term, page) {
|
|
return {
|
|
query: term
|
|
};
|
|
},
|
|
results: function (data, page) {
|
|
const project_types = data["project_types"];
|
|
var result = [];
|
|
result.push({id: "all", text: "all", group: true});
|
|
for (var key in project_types) {
|
|
result.push({id: project_types[key].id, text: project_types[key].text, group: true});
|
|
for (var i in project_types[key].items) {
|
|
result.push({id: project_types[key].items[i], text: project_types[key].items[i]});
|
|
}
|
|
}
|
|
return {results: result};
|
|
}
|
|
},
|
|
initSelection: function (element, callback) {
|
|
var id = $(element).val();
|
|
$.ajax(make_uri(base_url + "/api/1.0/project_types/" + id), {
|
|
dataType: "jsonp"
|
|
}).done(function (data) {
|
|
callback(data["project_type"]);
|
|
$("#project_type").val(data["project_type"].id);
|
|
});
|
|
},
|
|
formatResultCssClass: function (item) {
|
|
if (item.group) {
|
|
return "project_group"
|
|
} else {
|
|
return "project_group_item";
|
|
}
|
|
}
|
|
});
|
|
$('#project_type')
|
|
.on("change", function (e) {
|
|
$('#module').val('');
|
|
reload();
|
|
});
|
|
|
|
$("#company").select2({
|
|
allowClear: true,
|
|
ajax: {
|
|
url: make_uri(base_url + "/api/1.0/companies"),
|
|
dataType: 'jsonp',
|
|
data: function (term, page) {
|
|
return {
|
|
company_name: term
|
|
};
|
|
},
|
|
results: function (data, page) {
|
|
return {results: data["companies"]};
|
|
}
|
|
},
|
|
initSelection: function (element, callback) {
|
|
var id = $(element).val();
|
|
if (id !== "") {
|
|
$.ajax(make_uri(base_url + "/api/1.0/companies/" + id), {
|
|
dataType: "jsonp"
|
|
}).done(function (data) {
|
|
callback(data["company"]);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#company')
|
|
.on("change", function (e) {
|
|
reload();
|
|
});
|
|
|
|
$("#module").select2({
|
|
allowClear: true,
|
|
ajax: {
|
|
url: make_uri(base_url + "/api/1.0/modules"),
|
|
dataType: 'jsonp',
|
|
data: function (term, page) {
|
|
return {
|
|
module_name: term
|
|
};
|
|
},
|
|
results: function (data, page) {
|
|
return {results: data["modules"]};
|
|
}
|
|
},
|
|
initSelection: function (element, callback) {
|
|
var id = $(element).val();
|
|
if (id !== "") {
|
|
$.ajax(make_uri(base_url + "/api/1.0/modules/" + id), {
|
|
dataType: "jsonp"
|
|
}).done(function (data) {
|
|
callback(data["module"]);
|
|
});
|
|
}
|
|
},
|
|
formatResultCssClass: function (item) {
|
|
if (item.group) {
|
|
return "select_group"
|
|
}
|
|
return "";
|
|
}
|
|
});
|
|
|
|
$('#module')
|
|
.on("change", function (e) {
|
|
reload();
|
|
});
|
|
|
|
$("#user").select2({
|
|
allowClear: true,
|
|
ajax: {
|
|
url: make_uri(base_url + "/api/1.0/users"),
|
|
dataType: 'jsonp',
|
|
data: function (term, page) {
|
|
return {
|
|
user_name: term
|
|
};
|
|
},
|
|
results: function (data, page) {
|
|
return {results: data["users"]};
|
|
}
|
|
},
|
|
initSelection: function (element, callback) {
|
|
var id = $(element).val();
|
|
if (id !== "") {
|
|
$.ajax(make_uri(base_url + "/api/1.0/users/" + id), {
|
|
dataType: "json"
|
|
}).done(function (data) {
|
|
callback(data["user"]);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#user')
|
|
.on("change", function (e) {
|
|
reload();
|
|
});
|
|
}
|