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

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

    {%if access!="config" %}
    .page-header {
        padding: 0px 30px 100px 30px !important;
    }    
    {%endif%}
{% endblock %}


{% block pagewrapper %}
    <h1 class="page-title">Statistiques {{ group.label }}</h1>
    <a class="btn btn-secondary" href={{ path('app_core_'~access~'_group') }}>Fermer</a>
    <br><br>

    <div class="row">

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

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

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

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

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

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

        <div class="col 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="groupcptprojecttask"></div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        groupcptvisite();
        groupcptmessage();
        groupcptblogarticle();
        groupcptprojecttask();

        $(window).resize(function() {
            window.groupcptvisite.redraw();
            window.groupcptmessage.redraw();
            window.groupcptblogarticle.redraw();
            window.groupcptprojecttask.redraw();
        });        
    });

    function groupcptvisite() {
        window.groupcptvisite = Morris.Area({
            element: 'groupcptvisite',
            data: [
                {% set before = 0 %}
                {% if groupcptvisite %}
                    {% for date, cpt in groupcptvisite.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']
        });       
    }

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

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

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