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

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


{% block page_content %}


{% 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 %}


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


{% if indicator %}

{% 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="barChart3"></canvas>
                    <!--canvas id="myChart" width="400" height="400"></canvas-->
                    <div id="bar-chart3" style="height: 100%;"></div>
                </div>
            </div>
        {% endblock %}
    {% endembed %}

{% endif %}
    
{% endblock %}



{% block javascripts %}
    <script>
        $(function () {
            var barChartData = {
                labels  : {% if data1 %}{{ data1['labels']|json_encode()|raw }}{% endif %},
                datasets: [
                    {
                        label               : 'Nombre d\'indicateurs renseigné par commune',
                        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>



    <script>
        $(function () {
            var barChartData = {
                labels  : {% if data3 %}{{ data3['labels']|json_encode()|raw }}{% endif %},
                datasets: [
                    {
                        label               : 'Situation de l\'indicateur dans le département',
                        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 data3 %}{{ data3['values']|json_encode()|raw }}{% endif %}
                    },
                ]
            }

            var barChartCanvas = document.getElementById('barChart3').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>



    <script>
        $(function () {
            var barChartData = {
                labels  : {% if data2 %}{{ data2['labels']|json_encode()|raw }}{% endif %},
                datasets: [
                    {
                        label               : 'Evolution de l\'indicateur pour la commune',
                        backgroundColor     : 'red',
                        borderColor         : 'red',
                        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 %}{{ data2['values']|json_encode()|raw }}{% endif %}
                    },
                ]
            }

            var barChartCanvas = document.getElementById('barChart2').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>

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