{% load i18n %}

<div id="graphs" class="tab-pane fade in active panel panel-default">
    <div class="panel-body">
        <ul class="nav nav-pills">
            <li class="active"><a data-toggle="tab" href="#fatsbyship">{% translate "FATs By Ship Type" %}</a></li>
            <li><a data-toggle="tab" href="#avgfats">{% translate "Corporation Performance" %}</a></li>
            <li><a data-toggle="tab" href="#fatsbytime">{% translate "FATs By Time" %}</a></li>
            <li><a data-toggle="tab" href="#fatsbyweek">{% translate "FATs By Weekday" %}</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade in active panel-default" id="fatsbyship">
                <div class="panel-body">
                    <h3>
                        {% translate "FATs By Ship Type" %}
                    </h3>

                    <canvas id="ship-pie" width="800" height="500"></canvas>

                    <script>
                        Chart.defaults.global.defaultFontColor = 'rgb(200 200 200)';

                        const shipPieChart = new Chart(
                            document.getElementById("ship-pie"),
                            {
                                type: "pie",
                                data: {
                                    datasets: [{
                                        data: {{ data_ship_type.1| safe }},
                                        backgroundColor: {{ data_ship_type.2| safe }}
                                    }],
                                    labels: {{ data_ship_type.0 | safe }}
                                },
                                options: {
                                    responsive: true
                                }
                            }
                        );
                    </script>
                </div>
            </div>

            <div id="fatsbytime" class="tab-pane fade in panel-default">
                <div class="panel-body">
                    <h3>
                        {% translate "FATs By Time" %}
                    </h3>

                    <canvas id="time-line" width="800" height="500"></canvas>

                    <script>
                        Chart.defaults.global.defaultFontColor = 'rgb(200 200 200)';

                        const timeLineChart = new Chart(
                            document.getElementById("time-line"),
                            {
                                type: 'line',
                                data: {
                                    datasets: [{
                                        label: '# of FATs',
                                        backgroundColor: {{ data_time.2|safe }},
                                        data: {{ data_time.1 }}
                                    }],
                                    labels: {{ data_time.0|safe }}
                                },
                                options: {
                                    responsive: true
                                }
                            }
                        );
                    </script>
                </div>
            </div>

            <div class="tab-pane fade in panel-default" id="fatsbyweek">
                <div class="panel-body">
                    <h3>
                        {% translate "FATs By Weekday" %}
                    </h3>

                    <canvas id="weekday-line" width="800" height="500"></canvas>

                    <script>
                        Chart.defaults.global.defaultFontColor = 'rgb(200 200 200)';

                        const weekdayLineChart = new Chart(
                            document.getElementById('weekday-line'),
                            {
                                type: 'line',
                                data:{
                                    datasets: [{
                                        label: '# of FATs',
                                        backgroundColor: {{ data_weekday.2|safe }},
                                        data: {{ data_weekday.1 }}
                                    }],
                                    labels: {{ data_weekday.0|safe }}
                                },
                                options: {
                                    responsive: true
                                }
                            }
                        );
                    </script>
                </div>
            </div>

            <div class="tab-pane fade in panel-default" id="avgfats">
                <div class="panel-body">
                    <h3>
                        {% translate "Average FATs By Corporation" %}
                    </h3>

                    <canvas id="avgs" width="1000" height="700"></canvas>

                    <script>
                        Chart.defaults.global.defaultFontColor = 'rgb(200 200 200)';

                        const averagesHorizontalBarChart = new Chart(
                            document.getElementById('avgs'),
                            {
                                type: 'horizontalBar',
                                data: {
                                    datasets: [{
                                        label: 'Average # of FATs',
                                        backgroundColor: '{{ data_avgs.2|safe }}',
                                        data: {{ data_avgs.1 }}
                                    }],
                                    labels: {{ data_avgs.0|safe }}
                                },
                                options: {
                                    responsive: true,
                                    scales: {
                                        xAxes: [{
                                            ticks: {
                                                autoSkip: false
                                            }
                                        }],
                                        yAxes: [{
                                            ticks: {
                                                beginAtZero: true
                                            }
                                        }]
                                    }
                                }
                            }
                        );
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
