{% extends 'base.html.twig' %}

{% block localstyle %}
    svg {
        width: 100% !important;
    }
{% endblock %}


{% block pagewrapper %}
    <h1 class="page-title">Statistiques</h1>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> Compteur de visites journalières
                </div>

                <div class="card-body">
                <div id="totcptvisite"></div>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> Compteur de visites journalières des groupes de travail
                </div>

                <div class="card-body">
                <div id="totcptvisitegroup"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> Évolution du nombre de message dans les chats
                </div>

                <div class="card-body">
                <div id="totcptmessage"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> Évolution du nombre d'articles de blog
                </div>

                <div class="card-body">
                <div id="totcptblogarticle"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> Evolution du nombre de tâches
                </div>

                <div class="card-body">
                <div id="totcptprojecttask"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> TOP 20 des groupes les plus visités
                </div>

                <div class="card-body">
                <div id="groupcptvisite"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> TOP 20 des groupes avec le plus de messages chat
                </div>

                <div class="card-body">
                <div id="groupcptmessage"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> TOP 20 des groupes avec le plus d'articles de blog
                </div>

                <div class="card-body">
                <div id="groupcptblogarticle"></div>
                </div>
            </div>
        </div>        

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> TOP 20 des groupes avec le plus de tâches
                </div>

                <div class="card-body">
                <div id="groupcptprojecttask"></div>
                </div>
            </div>
        </div>        
    </div>
{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        totcptvisite();
        totcptvisitegroup();
        totcptmessage();
        totcptblogarticle();
        totcptprojecttask();
        groupcptvisite();
        groupcptmessage();
        groupcptblogarticle();
        groupcptprojecttask();
    });

    $(window).resize(function() {
        window.totcptvisite.redraw();
        window.totcptvisitegroup.redraw();
        window.totcptmessage.redraw();
        window.totcptblogarticle.redraw();
        window.totcptprojecttask.redraw();
    });    

    function totcptvisite() {
        window.totcptvisite = Morris.Area({
            element: 'totcptvisite',
            data: [
                {% set before = 0 %}
                {% if totcptvisite %}
                    {% for date, cpt in totcptvisite.value %}
                        {% set now = cpt - before %}
                        {% set before = cpt %}
                        { x: '{{ date }}', a: {{ now }} }{% if not loop.last %},{%endif%}
                    {% endfor %}
                {% endif %}
            ],
            xkey: 'x',
            ykeys: ['a'],
            labels: ['Nombre de visites'],
            resize: true,
            redraw: true
        });       
        
    }


    function totcptvisitegroup() {
        window.totcptvisitegroup = Morris.Area({
            element: 'totcptvisitegroup',
            data: [
                {% set before = 0 %}
                {% if totcptvisitegroup %}
                    {% for date, cpt in totcptvisitegroup.value %}
                        {% set now = cpt - before %}
                        {% set before = cpt %}
                        { x: '{{ date }}', a: {{ now }} }{% if not loop.last %},{%endif%}
                    {% endfor %}
                {% endif %}
            ],
            xkey: 'x',
            ykeys: ['a'],
            labels: ['Nombre de visites des groupes'],
            resize: true,
            redraw: true
        });       
    }

    function totcptmessage() {
        window.totcptmessage = Morris.Area({
            element: 'totcptmessage',
            data: [
                {% if totcptmessage %}
                    {% for date, cpt in totcptmessage.value %}
                        { x: '{{ date }}', a: {{ cpt }} }{% if not loop.last %},{%endif%}
                    {% endfor %}
                {% endif %}
            ],
            xkey: 'x',
            ykeys: ['a'],
            labels: ['Nombre total de messages tchat'],
            resize: true,
            redraw: true

        });       
    }

    function totcptblogarticle() {
        window.totcptblogarticle = Morris.Area({
            element: 'totcptblogarticle',
            data: [
                {% if totcptblogarticle %}
                    {% for date, cpt in totcptblogarticle.value %}
                        { x: '{{ date }}', a: {{ cpt }} }{% if not loop.last %},{%endif%}
                    {% endfor %}
                {% endif %}
            ],
            xkey: 'x',
            ykeys: ['a'],
            labels: ["Nombre total d'articles de blog"],
            resize: true,
            redraw: true

        });       
    }

    function totcptprojecttask() {
        window.totcptprojecttask = Morris.Area({
            element: 'totcptprojecttask',
            data: [
                {% if totcptprojecttask %}
                    {% for date, cpt in totcptprojecttask.value %}
                        { x: '{{ date }}', a: {{ cpt }} }{% if not loop.last %},{%endif%}
                    {% endfor %}
                {% endif %}
            ],
            xkey: 'x',
            ykeys: ['a'],
            labels: ["Nombre total de tâches"],
            resize: true,
            redraw: true

        });       
    }

    function groupcptvisite() {
        window.groupcptvisite = Morris.Donut({
            element: 'groupcptvisite',
            data: [
                {% if groupcptvisite %}
                    {% for cpt in groupcptvisite %}
                        {label: "{{ cpt.name|raw }}", value: {{ cpt.value }}}{% if not loop.last %},{%endif%}
                    {% endfor %}
                {% endif %}
            ],
            resize: true,
            redraw: true
        });
    }

    function groupcptmessage() {
        window.groupcptmessage = Morris.Donut({
            element: 'groupcptmessage',
            data: [
                {% if groupcptmessage %}
                    {% for cpt in groupcptmessage %}
                        {label: "{{ cpt.name|raw }}", value: {{ cpt.value }}}{% if not loop.last %},{%endif%}
                    {% endfor %}
                {% endif %}
            ],
            resize: true,
            redraw: true
        });
    }

    function groupcptblogarticle() {
        window.groupcptblogarticle = Morris.Donut({
            element: 'groupcptblogarticle',
            data: [
                {% if groupcptblogarticle %}
                    {% for cpt in groupcptblogarticle %}
                        {label: "{{ cpt.name|raw }}", value: {{ cpt.value }}}{% if not loop.last %},{%endif%}
                    {% endfor %}
                {% endif %}
            ],
            resize: true,
            redraw: true
        });
    }

    function groupcptprojecttask() {
        window.groupcptprojecttask = Morris.Donut({
            element: 'groupcptprojecttask',
            data: [
                {% if groupcptprojecttask %}
                    {% for cpt in groupcptprojecttask %}
                        {label: "{{ cpt.name|raw }}", value: {{ cpt.value }}}{% if not loop.last %},{%endif%}
                    {% endfor %}
                {% endif %}
            ],
            resize: true,
            redraw: true
        });
    }
{% endblock %}
