{% load i18n %}

<div id="graphs" class="tab-pane fade in active panel panel-default">
    <div class="panel-body">
        <div class="col-md-4">
            <h4>{% translate "FATs by Ship Type" %}</h4>

            <canvas style="width: 400px; max-width: 100%; height: 400px;" id="pie-ship"></canvas>

            <script type="application/javascript">
                Chart.defaults.global.defaultFontColor = 'rgb(200, 200, 200)';
                let shipPieChart = new Chart(document.getElementById("pie-ship"), {
                    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 class="col-md-8">
            <h4>{% translate "FATs by Time of Day" %}</h4>

            <canvas style="width: 100%; height: 400px;" id="line-time"></canvas>

            <script type="application/javascript">
                Chart.defaults.global.defaultFontColor = 'rgb(200, 200, 200)';
                let FATLineChart = new Chart(document.getElementById("line-time"), {
                    type: "line",
                    data: {
                        datasets: [{
                            label: '{% translate "# of FATs" %}',
                            data: {{ data_time.1|safe }},
                            backgroundColor: {{ data_time.2|safe }}
                        }],
                        labels: {{ data_time.0|safe }}
                    },
                    options: {
                        responsive: true,
                    }
                });
            </script>
        </div>
    </div>
</div>
