stackalytics/stackalytics/dashboard/templates/reports/members.html

{% extends "base.html" %}

{% set active_tab = 'members' %}
{% set page_title = 'OpenStack Foundation members' %}

{% block head %}
    <script type="text/javascript">

    function get_start_date() {
        var days = {{ days }};
        return Math.round(new Date().getTime() / 1000) - days * 24 * 60 * 60;
    }

    function show_engineers_table(options) {
        var table_column_names = ["index", "link", "date", "company"];
        var table_id = "members_table";
        var company = $('#company_selector').val();

        $.ajax({
            url: makeURI("/api/1.0/members", options),
            dataType: "json",
            success: function (data) {
                var tableData = data["members"];

                var tableColumns = [];
                var sort_by_column = 2;
                for (var i = 0; i < table_column_names.length; i++) {
                    tableColumns.push({"mData": table_column_names[i]});
                }

                for (i = 0; i < tableData.length; i++) {
                    var user_link = tableData[i].member_uri;
                    tableData[i].link = "<a href=\"" + user_link + "\">" + tableData[i].author_name + "</a>";

                    tableData[i].date = tableData[i].date_str;
                    tableData[i].company = tableData[i].company_name;
                }

                if (table_id) {
                    $("#" + table_id).dataTable({
                        "aaSorting": [
                            [ sort_by_column, "desc" ]
                        ],
                        "bFilter": true,
                        "bInfo": true,
                        "bAutoWidth": false,
                        "aaData": tableData,
                        "aoColumns": tableColumns,
                        "bDestroy": true,
                        'bPaginate': true,
                        "sPaginationType": "full_numbers",
                        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        "iDisplayLength": 10
                    });
                }
            }
        });
    }

    function show_new_companies_table(options) {
        var table_column_names = ["index", "link", "date"];
        var table_id = "new_companies_table";

        $.ajax({
            url: makeURI("/api/1.0/new_companies", options),
            dataType: "json",
            success: function (data) {
                var tableData = data["stats"];

                var tableColumns = [];
                var sort_by_column = 2;
                for (var i = 0; i < table_column_names.length; i++) {
                    tableColumns.push({"mData": table_column_names[i]});
                }

                for (i = 0; i < tableData.length; i++) {
                    var company_link = makeURI('/report/members', {company:tableData[i].name});
                    tableData[i].link = "<a href=\"" + company_link + "\">" + tableData[i].name + "</a>";
                    tableData[i].date = tableData[i].date_str;
                }

                if (table_id) {
                    $("#" + table_id).dataTable({
                        "aaSorting": [
                            [ sort_by_column, "desc" ]
                        ],
                        "bFilter": true,
                        "bInfo": true,
                        "bAutoWidth": false,
                        "aaData": tableData,
                        "aoColumns": tableColumns,
                        "bDestroy": true,
                        'bPaginate': true,
                        "sPaginationType": "full_numbers",
                        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        "iDisplayLength": 10
                    });
                }
            }
        });
    }

    function show_companies_table(options) {
        var table_column_names = ["index", "link", "count"];
        var table_id = "companies_table";

        $.ajax({
            url: makeURI("/api/1.0/stats/companies", options),
            dataType: "json",
            success: function (data) {
                var tableData = data["stats"];

                var tableColumns = [];
                var sort_by_column = 2;
                for (var i = 0; i < table_column_names.length; i++) {
                    tableColumns.push({"mData": table_column_names[i]});
                }

                for (i = 0; i < tableData.length; i++) {
                    var company_link = makeURI('/report/members', {company:tableData[i].name});
                    tableData[i].link = "<a href=\"" + company_link + "\">" + tableData[i].name + "</a>";
                    tableData[i].count = tableData[i].metric;
                }

                if (table_id) {
                    $("#" + table_id).dataTable({
                        "aaSorting": [
                            [ sort_by_column, "desc" ]
                        ],
                        "bFilter": true,
                        "bInfo": true,
                        "bAutoWidth": false,
                        "aaData": tableData,
                        "aoColumns": tableColumns,
                        "bDestroy": true,
                        'bPaginate': true,
                        "sPaginationType": "full_numbers",
                        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        "iDisplayLength": 10
                    });
                }
            }
        });
    }

    function renderChart(url, chart_id, options) {

        $(document).ready(function () {

            $.ajax({
                url: makeURI(url, options),
                dataType: "jsonp",
                success: function (data) {

                    var chartData = [];

                    const limit = 10;
                    var aggregate = 0;
                    var i;

                    data = data["stats"];

                    for (i = 0; i < data.length; i++) {
                        if (i < limit - 1) {
                            chartData.push([data[i].name, data[i].metric]);
                        } else {
                            aggregate += data[i].metric;
                        }
                    }

                    if (i == limit) {
                        chartData.push([data[i - 1].name, data[i - 1].metric]);
                    } else if (i > limit) {
                        chartData.push(["others", aggregate]);
                    }

                    if (chart_id) {
                        var plot = $.jqplot(chart_id, [chartData], {
                            seriesDefaults: {
                                renderer: jQuery.jqplot.PieRenderer,
                                rendererOptions: {
                                    showDataLabels: true
                                }
                            },
                            legend: { show: true, location: 'e' }
                        });
                    }
                }
            });
        });
    }

    function make_options() {
        var options = {};
        options['release'] = 'all';
        options['metric'] = 'members';
        options['project_type'] = '{{ project_type }}';

        options['company'] = $('#company_selector').val();
        options['days'] = $('#days_selector').val();

        return options;
    }

    function reload() {
        window.location.search = $.map(make_options(),function (val, index) {
            return index + "=" + val;
        }).join("&")
    }

    function show_page() {

        var start_date = get_start_date();
        var base_options = { metric: 'members', project_type: '{{ project_type }}', release: 'all', start_date: start_date };
        renderTimeline(base_options);

        show_engineers_table(base_options);

        {% if not company %}
            show_companies_table(base_options);
            show_new_companies_table(base_options);
            renderChart("/api/1.0/stats/companies", "members_chart", base_options);
        {% else %}
            $('#companies_block').hide();
            $('#new_companies_table_header').hide();
            $('#new_companies_table').hide();
        {% endif %}
    }

    $(document).ready(function () {

        var start_date = get_start_date();
        var base_options = { metric: 'members', project_type: '{{ project_type }}', release: 'all', start_date: start_date };

        initSingleSelector("company", makeURI("/api/1.0/companies", base_options), {allowClear: true});

        $("#days_selector").val({{ days }}).select2().on('change', function (evt) {
            reload();
        });

        show_page();
    });

    </script>

    <style type="text/css">
        table.dataTable tr.even {
            background-color: #EEF1F4;
        }

        table.dataTable tr.even:hover, table.dataTable tr.odd:hover {
            background-color: #F8FFEC;
        }

        table.dataTable tr.even td.sorting_1 {
            background-color: #E0E8E8;
        }
    </style>

    <script type='text/javascript'>
        $(document).ready(function () {
            $('#days_selector').val({{ days }});
            $("#days_selector").select2();
            show_page();
        });

        $(document).on('change', '#days_selector', function (evt) {
            reload();
        });

        $(document).on('change', '#company_selector', function (evt) {
            reload();
        });
    </script>

{% endblock %}

{% block body %}

<div class="page">
<div class="aheader">
        <div style="float: right; margin-top: 10px; margin-right: 20px;">
            <a href="https://wiki.openstack.org/wiki/Stackalytics" target="_blank">About</a>
        </div>
        <div id="analytics_header">
            <div style="float: left;">
                <span id="logo"><a href="{{ url_for('overview') }}"><img src="{{ url_for('static', filename='images/stackalytics_logo.png') }}" alt="Stackalytics" style="width: 100%; max-width: 190px;"></a></span>
            </div>
            <div class="stackamenu" style="margin-left: 240px;">
                <ul id="menu-stackamenu">
                    <li class="menu-item"><a href="{{ url_for('overview') }}"><span class="icon-pie"></span>Code Contribution</a></li>
                    <li class="menu-item"><a href="/report/driverlog"><span class="icon-cogs"></span>Vendor Drivers <span style="vertical-align: top; font-size: 60%;">&beta;</span></a></li>
                    <li class="menu-item current-menu-item"><a href="/report/members"><span class="icon-users"></span>Member Directory</a></li>
                </ul>
            </div>
        </div>

    <div class="navigation">
        <div id="timeline"
             style="width: 100%; height: 120px; margin-top: 15px;"></div>
    </div>

    <div class="drops">
        <div class="drop" style="margin-top: 1em;">
            <label for="days_selector">Joined during period</label>
            <select id="days_selector" name="days_selector"
                    style="min-width: 140px;"
                    data-placeholder="Select period">
                <option value="7">week</option>
                <option value="14">two weeks</option>
                <option value="31">month</option>
                <option value="93">quarter</option>
                <option value="183">half year</option>
                <option value="365">year</option>
                <option value="{{ all_days }}">all</option>
            </select>
        </div>

        <div class="drop" style="margin-top: 1em;">
            <label for="company_selector">Company</label>
            <input id="company_selector" style="width: 140px"
                   data-placeholder="Any company"/>
        </div>
    </div>


    <table style="width: 100%" cellspacing="0" id="companies_block">
        <tr>
            <td style="width: 50%; vertical-align: top; padding-right: 3em;">
                <h2>OpenStack foundation member companies</h2>

                <div class="body" style="margin-right: 1em;">
                    <table id="companies_table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Company</th>
                            <th>Members Count</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </td>
            <td style="width: 50%; vertical-align: top; padding-left: 3em">
                <h2>Members by company</h2>
                <div class="body" style="margin-left: 1em;">
                    <div id="members_container">

                        <div id="members_chart"
                             style="width: 100%; height: 350px; margin-bottom: 1em;"></div>
                    </div>
                </div>
            </td>
        </tr>
    </table>

    <table style="width: 100%" cellspacing="0">
        <tr>
            <td style="width: 50%; vertical-align: top; padding-right: 3em;">
                <h2>Individual Members</h2>

                <div class="body" style="margin-right: 1em;">
                    <table id="members_table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Engineer</th>
                            <th>Date Joined</th>
                            <th>Company</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </td>
            <td style="width: 50%; vertical-align: top; padding-right: 3em;">
                <div id="new_companies_table_header">
                    <h2>New Companies</h2>
                </div>

                <div class="body" style="margin-right: 1em;">

                    <table id="new_companies_table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>Company</th>
                            <th>First Member Joined</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>

</div>
</div>

{% endblock %}