stackalytics/dashboard/templates/kpi/base_kpi.html

{% extends "base.html" %}

{% block head %}
    <title>{% block title %}{% endblock %}</title>

    <meta name="keywords" content="openstack, contribution, statistics, community, review, commit, report, havana, grizzly, icehouse"/>

    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/style.css') }}">

    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css' />

    <link rel="icon" href="{{ url_for('static', filename='images/favicon.png') }}" type="image/png"/>

    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/jquery.jqplot.min.css') }}">
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/jquery.dataTables.css') }}">
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/select2.css') }}">
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/style.css') }}">

    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.9.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.jqplot.min.js') }}"></script>
    <!--[if lt IE 9]><script type="text/javascript" src="{{ url_for('static', filename='js/excanvas.min.js') }}"></script><![endif]-->
    <script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.json2.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.pieRenderer.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.barRenderer.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.bubbleRenderer.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.categoryAxisRenderer.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.dateAxisRenderer.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.canvasTextRenderer.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.canvasAxisLabelRenderer.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.canvasAxisTickRenderer.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.cursor.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jqplot.highlighter.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/select2.min.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">

        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 " + item.index:
                                            "Position " + item.index + " is worse than the goal position " + position,
                                value: item.index
                            }
                        });
            });
        }

        function goal_metric(container_id, query_options, item_type, item_id, metric, 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.metric > metric;
                            return {
                                mark: mark,
                                info: mark? "Achieved metric " + item.metric:
                                            "Position " + item.metric + " is worse than the goal in " + metric,
                                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 " + 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 ? "&#x2714;" : "&#x2716;")}</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 %}
{% endblock %}

{% block body %}

<div style="margin: 2em;">
<div id="analytics_header" style="padding-bottom: 1em; border-bottom: 1px solid darkgrey;">
    <span id="logo"><a href="/">Stackalytics</a></span>
    <span id="slogan">| community heartbeat</span>
</div>

{% block content %}
{% endblock %}

</div>
{% endblock %}