Cloned DMOJ

templates/stats/base.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+
+{% block js_media %}
+    {% compress js %}
+        {% include "stats/media-js.html" %}
+    {% endcompress %}
+{% endblock %}
+
+{% block content_title %}{{ _('Statistics') }}{% endblock %}
+
+{% block body %}
+    <div class="tabs">
+        <li{% if tab == 'language' %} class="active"{% endif %}>
+            <a href="{{ url('language_stats') }}">{{ _('Language') }}</a>
+        </li>
+    </div>
+    {% block chart_body %}{% endblock %}
+{% endblock %}

templates/stats/language.html

@@ -0,0 +1,55 @@
+{% 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 %}

templates/stats/media-js.html

@@ -0,0 +1,68 @@
+<script type="text/javascript" src="{{ static('libs/chart.js/Chart.js') }}"></script>
+<script type="text/javascript">
+    function draw_pie_chart(data, $chart) {
+        var ctx = $chart.find('canvas')[0].getContext('2d');
+        var chart = new Chart(ctx, {
+            type: 'pie',
+            data: data,
+            options: {
+                maintainAspectRatio: false,
+                responsive: false,
+                animation: false,
+                legend: {
+                    position: 'right',
+                    labels: {
+                        fontColor: 'black',
+                        boxWidth: 20,
+                    },
+                },
+            },
+        });
+    }
+
+    function draw_bar_chart(data, $chart) {
+        var ctx = $chart.find('canvas')[0].getContext('2d');
+        ctx.canvas.height = 20 * data.labels.length + 100;
+        var chart = new Chart(ctx, {
+            type: 'horizontalBar',
+            data: data,
+            options: {
+                maintainAspectRatio: false,
+                legend: {
+                    display: false,
+                },
+                tooltips: {
+                    callbacks: {
+                        label: function(tooltipItem, data) {
+                            return (Math.round(tooltipItem.value * 100) / 100) + '%';
+                        },
+                    },
+                },
+            },
+        });
+    }
+
+    function draw_stacked_bar_chart(data, $chart) {
+        var ctx = $chart.find('canvas')[0].getContext('2d');
+        ctx.canvas.height = 20 * data.labels.length + 100;
+        var chart = new Chart(ctx, {
+            type: 'horizontalBar',
+            data: data,
+            options: {
+                maintainAspectRatio: false,
+                tooltips: {
+                    mode: 'index',
+                    intersect: false,
+                },
+                scales: {
+                    xAxes: [{
+                        stacked: true,
+                    }],
+                    yAxes: [{
+                        stacked: true,
+                    }],
+                },
+            },
+        });
+    }
+</script>