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

{% block body %}
<h1 class="page-header">
STATISTIQUES
</h1>

<div class="row">
    <div class="col-md-12">
        <div class="card homecard" style="width: 100%; height: 600px;">
            <div class="card-header">
                CADOLES
            </div>            
            <div class="card-body">
                <div id="chart-c" style="height: 250px;"></div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card homecard" style="width: 100%; height: 600px;">
            <div class="card-header">
                DEV
            </div>            
            <div class="card-body">
                <div id="chart-1" style="height: 250px;"></div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card homecard" style="width: 100%; height: 600px;">
            <div class="card-header">
                CSS
            </div>            
            <div class="card-body">
                <div id="chart-3" style="height: 250px;"></div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {

    graphCadoles();
    graphDEV();
    graphCSS();
    });

    function graphCadoles() {

        new Morris.Line({
            element: 'chart-c',
            xkey: 'month',
            ymax: 350,
            ykeys: [
                'Total',
                {% for nature in tbnatures %}
                    '{{ nature.name }}',
                {% endfor %}
            ],
            data: [
                {% for month in tbmonths %}
                    { month: '{{ month.name }}',
                        {% for nature in month.natures %}
                            {% if loop.first %}
                                'Total': {{  nature.totalmonth }},
                            {% endif %}

                            '{{ nature.name }}': {{ nature.totalnature }},
                        {% endfor %}
                    },
                {% endfor %}                 
            ],
            labels: [
                'Total',
                {% for nature in tbnatures %}
                    '{{ nature.name }}',
                {% endfor %}
            ]
        });        
    }


    function graphDEV() {

        new Morris.Line({
            element: 'chart-1',
            xkey: 'month',
            ymax: 160,
            ykeys: [
                'Total',
                {% for nature in tbnatures %}
                    '{{ nature.name }}',
                {% endfor %}
            ],
            data: [
                {% for month in tbmonths %}
                    { month: '{{ month.name }}',
                        {% for nature in month.services[1].natures %}
                            {% if loop.first %}
                                'Total': {{  nature.totalservice }},
                            {% endif %}

                            '{{ nature.name }}': {{ nature.totalnature }},
                        {% endfor %}
                    },
                {% endfor %}                 
            ],
            labels: [
                'Total',
                {% for nature in tbnatures %}
                    '{{ nature.name }}',
                {% endfor %}
            ]
        });        
    }

    function graphCSS() {
        new Morris.Line({
            element: 'chart-3',
            xkey: 'month',
            ymax: 160,
            ykeys: [
                'Total',
                {% for nature in tbnatures %}
                    '{{ nature.name }}',
                {% endfor %}
            ],
            data: [
                {% for month in tbmonths %}
                    { month: '{{ month.name }}',
                        {% for nature in month.services[3].natures %}
                            {% if loop.first %}
                                'Total': {{  nature.totalservice }},
                            {% endif %}                        
                            '{{ nature.name }}': {{ nature.totalnature }},
                        {% endfor %}
                    },
                {% endfor %}                 
            ],
            labels: [
                'Total',
                {% for nature in tbnatures %}
                    '{{ nature.name }}',
                {% endfor %}
            ]
        });        
    }

{% endblock %}

{% block localexternalscript %}
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
{% endblock %}