Finished example of KPI report
* Common code is moved to base template * Styles are made more accurate Change-Id: I65e11143c3fbe9fc7d4e620a521f7e5b22763e46
This commit is contained in:
Ilya Shakhat
parent
946a68fc57
commit
7dcacd43fc
@ -341,16 +341,16 @@ a[href^="https://launchpad"]:after {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.kpi_title_block {
|
.kpi_title_block {
|
||||||
margin-left: 50px;
|
margin-left: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kpi_title {
|
.kpi_title {
|
||||||
font-size: 16pt;
|
font-size: 13pt;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kpi_marker {
|
.kpi_marker {
|
||||||
font-size: 19pt;
|
font-size: 16pt;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: center; vertical-align: middle;
|
text-align: center; vertical-align: middle;
|
||||||
color: lightgray;
|
color: lightgray;
|
||||||
|
|||||||
@ -37,6 +37,87 @@
|
|||||||
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.tmpl.js') }}"></script>
|
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.tmpl.js') }}"></script>
|
||||||
<script type="text/javascript" src="{{ url_for('static', filename='js/stackalytics-ui.js') }}"></script>
|
<script type="text/javascript" src="{{ url_for('static', filename='js/stackalytics-ui.js') }}"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
function process_stats(container_id, url, query_options, item_id, goal, comparator) {
|
||||||
|
$.ajax({
|
||||||
|
url: make_uri(url, query_options),
|
||||||
|
dataType: "jsonp",
|
||||||
|
success: function (data) {
|
||||||
|
data = data["stats"];
|
||||||
|
var index = -1;
|
||||||
|
var sum = 0;
|
||||||
|
|
||||||
|
for (var i = 0; i < data.length; i++) {
|
||||||
|
sum += data[i].metric;
|
||||||
|
if (data[i].id == item_id) {
|
||||||
|
index = i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var result = {
|
||||||
|
mark: false,
|
||||||
|
goal: goal
|
||||||
|
};
|
||||||
|
|
||||||
|
if (index < 0) {
|
||||||
|
result.info = "Item " + item_id + " is not found in the stats";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var comparison_result = comparator(data[index], sum);
|
||||||
|
result.mark = comparison_result.mark;
|
||||||
|
result.info = comparison_result.info;
|
||||||
|
}
|
||||||
|
$("#kpi_block_template").tmpl(result).appendTo("#" + container_id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function goal_position_in_top(container_id, query_options, item_type, item_id, position, goal) {
|
||||||
|
$(document).ready(function () {
|
||||||
|
process_stats(container_id, "/api/1.0/stats/" + item_type, query_options, item_id, goal,
|
||||||
|
function(item, sum) {
|
||||||
|
var mark = item.index <= position;
|
||||||
|
return {
|
||||||
|
mark: mark,
|
||||||
|
info: mark? "Achieved position is " + position:
|
||||||
|
"Position " + item.index + " is worse than target position " + position,
|
||||||
|
value: item.index
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function goal_percentage_in_top_less_than(container_id, query_options, item_type, item_id, goal_percentage, goal) {
|
||||||
|
$(document).ready(function () {
|
||||||
|
process_stats(container_id, "/api/1.0/stats/" + item_type, query_options, item_id, goal,
|
||||||
|
function(item, sum) {
|
||||||
|
var percentage = item.metric / sum;
|
||||||
|
var mark = percentage < goal_percentage;
|
||||||
|
var percentage_formatted = Math.round(percentage * 100) + "%";
|
||||||
|
var goal_percentage_formatted = Math.round(goal_percentage * 100) + "%";
|
||||||
|
return {
|
||||||
|
mark: mark,
|
||||||
|
info: mark? "Achieved percentage " + goal_percentage_formatted:
|
||||||
|
"Value " + percentage_formatted + " is more than the goal " + goal_percentage_formatted,
|
||||||
|
value: percentage_formatted
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="kpi_block_template" type="text/x-jquery-tmpl">
|
||||||
|
<div class="kpi_block">
|
||||||
|
<div class="kpi_marker ${(mark ? "kpi_good" : "kpi_bad")} ">${(mark ? "✔" : "✖")}</div>
|
||||||
|
<div class="kpi_title_block">
|
||||||
|
<div class="kpi_title">Goal: ${goal}</div>
|
||||||
|
<div class="kpi_info">Result: ${info}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
{% block scripts %}{% endblock %}
|
{% block scripts %}{% endblock %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|||||||
@ -1,111 +1,35 @@
|
|||||||
{% extends "kpi/base_kpi.html" %}
|
{% extends "kpi/base_kpi.html" %}
|
||||||
|
|
||||||
{% block title %}
|
{% block title %}
|
||||||
Group KPI
|
Example of KPI report
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block scripts %}
|
{% block scripts %}
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
function process_stats(url, query_options, item_id, goal, comparator) {
|
|
||||||
$.ajax({
|
|
||||||
url: make_uri(url, query_options),
|
|
||||||
dataType: "jsonp",
|
|
||||||
success: function (data) {
|
|
||||||
data = data["stats"];
|
|
||||||
var index = -1;
|
|
||||||
var sum = 0;
|
|
||||||
|
|
||||||
for (var i = 0; i < data.length; i++) {
|
|
||||||
sum += data[i].metric;
|
|
||||||
if (data[i].id == item_id) {
|
|
||||||
index = i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var result = {
|
|
||||||
mark: false,
|
|
||||||
goal: goal
|
|
||||||
};
|
|
||||||
|
|
||||||
if (index < 0) {
|
|
||||||
result.info = "Item " + item_id + " is not found in the stats";
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
var comparison_result = comparator(data[index], sum);
|
|
||||||
result.mark = comparison_result.mark;
|
|
||||||
result.info = comparison_result.info;
|
|
||||||
}
|
|
||||||
$("#kpi_block_template").tmpl(result).appendTo("#kpi_container");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function goal_position_in_top(query_options, item_type, item_id, position, goal) {
|
|
||||||
$(document).ready(function () {
|
|
||||||
process_stats("/api/1.0/stats/" + item_type, query_options, item_id, goal,
|
|
||||||
function(item, sum) {
|
|
||||||
var mark = item.index <= position;
|
|
||||||
return {
|
|
||||||
mark: mark,
|
|
||||||
info: mark? "Achieved position is " + position:
|
|
||||||
"Position " + item.index + " is worse than target position " + position,
|
|
||||||
value: item.index
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function goal_percentage_in_top_less_than(query_options, item_type, item_id, goal_percentage, goal) {
|
|
||||||
$(document).ready(function () {
|
|
||||||
process_stats("/api/1.0/stats/" + item_type, query_options, item_id, goal,
|
|
||||||
function(item, sum) {
|
|
||||||
var percentage = item.metric / sum;
|
|
||||||
var mark = percentage < goal_percentage;
|
|
||||||
var percentage_formatted = Math.round(percentage * 100) + "%";
|
|
||||||
var goal_percentage_formatted = Math.round(goal_percentage * 100) + "%";
|
|
||||||
return {
|
|
||||||
mark: mark,
|
|
||||||
info: mark? "Achieved percentage " + goal_percentage_formatted:
|
|
||||||
"Value " + percentage_formatted + " is more than the goal " + goal_percentage_formatted,
|
|
||||||
value: percentage_formatted
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script id="kpi_block_template" type="text/x-jquery-tmpl">
|
|
||||||
<div class="kpi_block">
|
|
||||||
<div class="kpi_marker ${(mark ? "kpi_good" : "kpi_bad")} ">${(mark ? "✔" : "✖")}</div>
|
|
||||||
<div class="kpi_title_block">
|
|
||||||
<div class="kpi_title">Goal: ${goal}</div>
|
|
||||||
<div class="kpi_info">Result: ${info}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<h1>Metrics</h1>
|
|
||||||
|
|
||||||
<div id="kpi_container"></div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
|
|
||||||
goal_position_in_top({release: "icehouse", metric: "commits", project_type: "openstack"}, "companies", "Mirantis", 5, "Be in top 5 by commits");
|
goal_position_in_top("kpi_container_position", {release: "icehouse", metric: "commits", project_type: "openstack"},
|
||||||
goal_position_in_top({release: "icehouse", metric: "marks", project_type: "openstack"}, "engineers", "boris-42", 5, "Be in top 5 by reviews");
|
"companies", "Mirantis", 5, "Be in top 5 by commits");
|
||||||
goal_position_in_top({release: "icehouse", metric: "marks", project_type: "openstack", module: "glance", exclude: "core"},
|
goal_position_in_top("kpi_container_position", {release: "icehouse", metric: "marks", project_type: "openstack"},
|
||||||
|
"engineers", "boris-42", 5, "Be in top 5 by reviews");
|
||||||
|
goal_position_in_top("kpi_container_position", {release: "icehouse", metric: "marks", project_type: "openstack", module: "glance", exclude: "core"},
|
||||||
"engineers", "boris-42", 3, "Be in top 3 among non-core reviewers");
|
"engineers", "boris-42", 3, "Be in top 3 among non-core reviewers");
|
||||||
|
|
||||||
goal_percentage_in_top_less_than({release: "all", metric: "commits", project_type: "stackforge", module: "stackalytics"},
|
goal_percentage_in_top_less_than("kpi_container_percentage",
|
||||||
|
{release: "all", metric: "commits", project_type: "stackforge", module: "stackalytics"},
|
||||||
"companies", "Mirantis", 0.8, "Mirantis contribution is less than 80%");
|
"companies", "Mirantis", 0.8, "Mirantis contribution is less than 80%");
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<h1>Example of KPI report</h1>
|
||||||
|
|
||||||
|
<h2>Position in top</h2>
|
||||||
|
<div id="kpi_container_position"></div>
|
||||||
|
|
||||||
|
<h2>Percentage in top</h2>
|
||||||
|
<div id="kpi_container_percentage"></div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user