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

{% block page_title %}{% trans %}TEF Global{% endtrans %}{% endblock %}


{% block page_content %}

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

{% endblock %}


{% block javascripts %}
    <script>
        $(function () {
            var barChartData = {
                labels  : {% if barChart %}{{ barChart['labels']|json_encode()|raw }}{% endif %},
                datasets: [
                    {
                        label               : 'TEF PTA',
                        backgroundColor     : '#0099ee', 
                        borderColor         : '#0099ee', 
                        borderWidth         : 1,
                        pointRadius         : false,
                        maxBarThickness     : 75,
                        pointColor          : '#3b8bba',
                        pointStrokeColor    : 'rgba(60,141,188,1)',
                        pointHighlightFill  : '#fff',
                        pointHighlightStroke: 'rgba(60,141,188,1)',
                        data                : {% if barChart %}{{ barChart['dataset1']|json_encode()|raw }}{% endif %}, //[15, 78, 75, 51],
                    },
                    {
                        label               : 'TEF OSC',
                        backgroundColor     : '#ff407e', 
                        borderColor         : '#ff407e', 
                        borderWidth         : 1,
                        pointRadius         : false,
                        maxBarThickness     : 75,
                        pointColor          : '#3b8bba',
                        pointStrokeColor    : 'rgba(60,141,188,1)',
                        pointHighlightFill  : '#fff',
                        pointHighlightStroke: 'rgba(60,141,188,1)',
                        data                : {% if barChart %}{{ barChart['dataset2']|json_encode()|raw }}{% endif %},//[15, 78, 75, 51],
                    }
                 ]
            }

            var barChartCanvas = document.getElementById('barChart').getContext('2d');
      
            var barChartOptions = {
                responsive              : true,
                maintainAspectRatio     : false,
                datasetFill             : false,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        },
                        stacked: true,
                    }]
                },
                plugins: {
                    // Change options for ALL labels of THIS CHART
                    datalabels: {
                       // backgroundColor: 'red',
						//borderColor: 'white',
						//borderRadius: 25,
						//borderWidth: 2,
                        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 %}