pyrot/webgui/stats/templates/stats/networks.html

{% extends "base.html" %}
{% load static %}
{% block head %}
    <meta name="nonfiction" content="true">
    <script type="text/javascript" src="{% static "javascript/loader.js" %}"></script>
{% endblock %}
{% block title %}Networks{% endblock %}
{% block description %}Configred networks{% endblock %}
{% block keywords %}irc networks{% endblock %}
{% block keywords-not %}{% endblock %}
{% block content %}
        <article class="ui container">
            <header class="ui four statistics">
                <div class="statistic">
                    <div class="value">
                        <i class="sitemap icon"></i> {{ networks|length }}
                    </div>
                    <div class="label">
                        Networks
                    </div>
                </div>
                <div class="statistic">
                    <div class="value">
                        <i class="hashtag icon"></i> {{ channels|length }}
                    </div>
                    <div class="label">
                        Channels
                    </div>
                </div>
                <div class="statistic">
                    <div class="value">
                        <i class="users icon"></i> {{ users|length }}
                    </div>
                    <div class="label">
                        Users
                    </div>
                </div>
                <div class="statistic">
                    <div class="value">
                        <i class="comments outline icon"></i> {{ totalmessages }}
                    </div>
                    <div class="label">
                        Messages
                    </div>
                </div>
            </header>
            <div class="ui basic segment container">
                <div class="ui basic segment">
                <section class="ui celled selection link list">
                    {% for network in networks %}
                        <a class="item" href="{% url 'stats:network' network.name %}">
                            <div class="right floated content">
                                {% if network.password %}<i class="privacy icon" alt="NickServ password saved"></i>{% endif %}
                                {% if network.use_ssl %}<i class="protect icon" title="Encrypted connection"></i>{% endif %}
                            </div>
                            <i class="middle aligned server icon"></i>
                            <div class="content">
                                <div class="header">
                                    <div class="content" href="{% url 'stats:network' network.name %}">{{ network.name }}</div>
                                </div>
                                <div class="description">
                                    {{ network.host }}:{{ network.port }}
                                </div>
                            </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
            </section>
        </article>
        <section class="ui padded center aligned equal width grid">
            <div class="ui column">
                <div class="header">
                    <i class="users icon"></i>
                    Messages per network
                </div>
                <script type="text/javascript">
                            google.charts.load("current", {packages:["corechart"]});
                            google.charts.setOnLoadCallback(drawChart1);
                            function drawChart1() {
                                var data = google.visualization.arrayToDataTable([
                                    ['Network', 'Users'],
                                    nl{{ networklist }}
                                    nli{{ networklist.items }}
                                        {% for network in networklist.items %}
                                        nw{{ network }}
                                        nwi{{ network.items }}
                                        nw0{{ network.0 }}
                                        nw1{{ network.1 }}
                                        nw1m{{ network.1.messages }}
                                            ['{{ network.0 }}',     {{ network.1.messages }}],
                                        {% endfor %}
                                    ]);
                                var options = {
                                    legend: 'none',
                                    pieSliceText: 'label',
                                };
                                var chart = new google.visualization.PieChart(document.getElementById('messageschart'));
                                chart.draw(data, options);
                            }
                            $(window).resize(function(){
        drawChart1();
        });
                </script>
                <div id="messageschart" style="width:100%; height: 400px;"></div>
            </div>
            <div class="ui column">
                <div class="header">
                    <i class="users icon"></i>
                    Users per network
                </div>
                <script type="text/javascript">
                                google.charts.load("current", {packages:["corechart"]});
                                google.charts.setOnLoadCallback(drawChart);
                                function drawChart() {
                                    var data = google.visualization.arrayToDataTable([
                                        ['Network', 'Users'],
                                            {% for network in networklist.items %}
                                                ['{{ network.0 }}',     {{ network.1.users }}],
                                            {% endfor %}
                                        ]);
                                    var options = {
                                        legend: 'none',
                                        pieSliceText: 'label',
                                    };
                                    var chart = new google.visualization.PieChart(document.getElementById('userschart'));
                                    chart.draw(data, options);
                                }
                                $(window).resize(function(){
        drawChart();
        });
                </script>
                <div id="userschart" style=height:400px;
        "> </div>
            </div>

        </section>

{% endblock content %}
{% block breadcrumbs %}
    <i class="sitemap icon"></i>
    <a class="active section">Networks</a>
{% endblock %}