{% extends '@CadolesCore/base.html.twig' %}
{% block pagewrapper %}
    <div class="row" style="margin-top:20px">
        <div class="col-md-6" style="padding:20px;text-align:center;">
            <div class="col-md-12">
                <h1 style="margin-top:0px"><i class="fa fa-server fa-fw"></i>Serveurs = {{ totalserveurs }} </h1>
            </div>

        
            <div class="col-md-6" >
                <h1>Serveurs par Module</h1>
                <div id='bymodule-chart'></div>
                <div id="bymodule-legend"></div>
            </div>

            <div class="col-md-6" >
                <h1>Serveurs par Version</h1>
                <div id='byversion-chart'></div>
                <div id="byversion-legend"></div>
            </div>            
        </div>

        <div class="col-md-6" style="padding:20px;text-align:center;margin: 0px;">
            <div class="col-md-12">
                <h1 style="margin-top:0px; margin-bottom:25px""><i class="fa fa-cubes fa-fw"></i>Applications = {{ totalapplications }} </h1>
            </div>

            <h1>Applications Installées</h1>        

            <div class="col-md-8" >
                <div id='byapplication-chart'></div>
            </div>
            <div id="byapplication-legend" class="col-md-4"></div>
        </div>        
    </div>

{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        //== byModule
        var bymodule =  Morris.Donut({
            element: 'bymodule-chart',
            data: [ 
                {% for total in totalbymodules %}
                    {'label':'{{ total.label }}','value':{{ total.total }}},
                {% endfor %}
            ],
            resize: true
        });

        bymodule.options.data.forEach(function(label, i) {
            var legendItem = $('<span style="margin:auto; width: 50%;display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span>&nbsp;</span>');
            legendItem.find('span')
                .css('backgroundColor', bymodule.options.colors[i])
                .css('width', '20px')
                .css('display', 'inline-block')
                .css('margin', '5px');
                $('#bymodule-legend').append(legendItem)
        });

        //== byVersion
        var byversion =  Morris.Donut({
            element: 'byversion-chart',
            data: [ 
                {% for total in totalbyversions %}
                    {'label':'{{ total.label }}','value':{{ total.total }}},
                {% endfor %}
            ],
            resize: true
        });

        byversion.options.data.forEach(function(label, i) {
            var legendItem = $('<span style="margin:auto; width: 50%;display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span>&nbsp;</span>');
            legendItem.find('span')
                .css('backgroundColor', byversion.options.colors[i])
                .css('width', '20px')
                .css('display', 'inline-block')
                .css('margin', '5px');
            $('#byversion-legend').append(legendItem)        
        });
  
        //== byApplication
        var byapplication =  Morris.Donut({
            element: 'byapplication-chart',
            data: [ 
                {% for total in totalbyapplications %}
                    {
                        'label':'{{ total.label }}',
                        'value':{{ total.total }},
                    },
                {% endfor %}
            ],
            resize: true
        });

        byapplication.options.data.forEach(function(label, i) {
            var legendItem = $('<span style="display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span>&nbsp;</span>');
            legendItem.find('span')
                .css('backgroundColor', byapplication.options.colors[i])
                .css('width', '20px')
                .css('display', 'inline-block')
                .css('margin', '0px 5px 5px 0px');
            $('#byapplication-legend').append(legendItem)        
            
        });
    });
{% endblock %}