{% extends '@AdminLTE/layout/ddd-layout.html.twig' %}

{% block page_title %}{% trans %}Graphiques par commune{% endtrans %}{% endblock %}


{% block page_content %}

{% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            {{ form_start(form) }}
                {{ form_widget(form) }}
            {{ form_end(form) }}    
        {% endblock %}
{% endembed %}

{% if commune %}
{% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            <div class="row">
                <div class="chart" style="position: relative; height:60vh; width:100%">
                    <canvas id="barChart"></canvas>
                    <!--canvas id="myChart" width="400" height="400"></canvas-->
                    <div id="bar-chart" style="height: 100%;"></div>
                </div>
            </div>
        {% endblock %}
    {% endembed %}

{% for indicator in indicators %}
{% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
        {% block box_body %}
            <div class="row">
                <div class="chart" style="position: relative; height:60vh; width:100%">
                    <canvas id="barChart{{indicator.i_id}}"></canvas>
                    <!--canvas id="myChart" width="400" height="400"></canvas-->
                    <div id="bar-chart{{indicator.i_id}}" style="height: 100%;"></div>
                </div>
            </div>
        {% endblock %}
    {% endembed %}
{% endfor %}

{% endif %}
    
{% endblock %}



{% block javascripts %}
    {% if commune %}
    <script>
        $(function () {
            var barChartData = {
                labels  : {% if data1 %}{{ data1['labels']|json_encode()|raw }}{% endif %},
                datasets: [
                    {
                        label               : 'Valeur des indicateurs renseignables',
                        backgroundColor     : 'blue',
                        borderColor         : 'blue',
                        borderWidth         : 1,
                        maxBarThickness     : 75,
                        pointRadius         : false,
                        pointColor          : '#3b8bba',
                        pointStrokeColor    : 'rgba(60,141,188,1)',
                        pointHighlightFill  : '#fff',
                        pointHighlightStroke: 'rgba(60,141,188,1)',
                        data                : {% if data1 %}{{ data1['values']|json_encode()|raw }}{% endif %}
                    },
                ]
            }

            var barChartCanvas = document.getElementById('barChart').getContext('2d');
      
            var barChartOptions = {
                responsive              : true,
                maintainAspectRatio     : false,
                datasetFill             : false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                plugins: {
                    // Change options for ALL labels of THIS CHART
                    datalabels: {
                        color: 'white',
                        font: {
                            weight: 'bold',
                            size: 12,
                        },
                        align: 'start',
						anchor: 'end'
                    }
                }
            }
        
            var barChart = new Chart(barChartCanvas, {
                type: 'bar', 
                data: barChartData,
                options: barChartOptions
            })
      
        })
    </script>

{% for indicator in indicators %}

    <script>
        $(function () {
            var barChartData{{indicator.i_id}} = {
                labels  : {% if data2[indicator.i_id] %}{{ data2[indicator.i_id]['labels']|json_encode()|raw }}{% endif %},
                datasets: [
                    {
                        label               : '{{indicator.i_name}}',
                        backgroundColor     : 'green',
                        borderColor         : 'green',
                        borderWidth         : 1,
                        maxBarThickness     : 75,
                        pointRadius         : false,
                        pointColor          : '#3b8bba',
                        pointStrokeColor    : 'rgba(60,141,188,1)',
                        pointHighlightFill  : '#fff',
                        pointHighlightStroke: 'rgba(60,141,188,1)',
                        data                : {% if data2[indicator.i_id] %}{{ data2[indicator.i_id]['values']|json_encode()|raw }}{% endif %}
                    },
                ]
            }

            var barChartCanvas{{indicator.i_id}} = document.getElementById('barChart{{indicator.i_id}}').getContext('2d');
      
            var barChartOptions{{indicator.i_id}} = {
                responsive              : true,
                maintainAspectRatio     : false,
                datasetFill             : false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                plugins: {
                    // Change options for ALL labels of THIS CHART
                    datalabels: {
                        color: 'white',
                        font: {
                            weight: 'bold',
                            size: 12,
                        },
                        align: 'start',
						anchor: 'end'
                    }
                }
            }
        
            var barChart{{indicator.i_id}} = new Chart(barChartCanvas{{indicator.i_id}}, {
                type: 'bar', 
                data: barChartData{{indicator.i_id}},
                options: barChartOptions{{indicator.i_id}}
            })
      
        })
    </script>
{% endfor %}
{% endif %}

    <script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script>
    <script src="{{ asset('plugins/chartjs-plugin-datalabels/chartjs-plugin-datalabels.min.js') }}"></script>    
{% endblock %}