{% extends "stats/base.html" %}
{% block media %}
    <style>
        .chart {
            margin: 10px 0;
        }
    </style>
{% endblock %}

{% block chart_body %}
    <h3>{{ _('Submission Statistics') }}</h3>
    <div id="status-counts" class="chart">
        <canvas width="400" height="300"></canvas>
    </div>

    <h3>{{ _('Submissions by Language') }}</h3>
    <div id="lang-all" class="chart">
        <canvas width="400" height="300"></canvas>
    </div>

    <h3>{{ _('AC Submissions by Language') }}</h3>
    <div id="lang-ac" class="chart">
        <canvas width="400" height="300"></canvas>
    </div>

    <h3>{{ _('Language AC Rate') }}</h3>
    <div id="ac-rate" class="chart">
        <canvas><canvas>
    </div>
{% endblock %}

{% block bodyend %}
    <script type="text/javascript">
        $(function () {
            Chart.defaults.global.scaleFontFamily =
                Chart.defaults.global.tooltipFontFamily =
                    Chart.defaults.global.tooltipTitleFontFamily =
                        $('body').css('font-family');

            function pie_chart(url, $chart) {
                $.getJSON(url, function (data) {
                    draw_pie_chart(data, $chart);
                });
            }

            pie_chart('{{ url('language_stats_data_all') }}', $('#lang-all'));
            pie_chart('{{ url('language_stats_data_ac') }}', $('#lang-ac'));
            pie_chart('{{ url('stats_data_status') }}', $('#status-counts'));

            $.getJSON('{{ url('language_stats_data_ac_rate') }}', function (data) {
                draw_bar_chart(data, $('#ac-rate'));
            });
        });
    </script>
{% endblock %}