Rearrange scripts

config/urls.py

@@ -1,10 +1,12 @@
 from django.urls import include, path
+from django.views.i18n import JavaScriptCatalog
 
 from contributors.admin.custom import site
 
 urlpatterns = [
     path('admin/', site.urls),
     path('i18n/', include('django.conf.urls.i18n')),
+    path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript_catalog'),
     path('auth/', include('django.contrib.auth.urls')),
     path('auth/', include('auth.urls')),
     path('', include('contributors.urls')),

contributors/migrations/0003_auto_20200317_0729.py

@@ -0,0 +1,19 @@
+# Generated by Django 2.2.11 on 2020-03-17 04:29
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('contributors', '0002_issueinfo'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='issueinfo',
+            name='issue',
+            field=models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, related_name='info', to='contributors.Contribution', verbose_name='issue'),
+        ),
+    ]

static/js/yearActivityChart.js

@@ -0,0 +1,56 @@
+function generateMonths() {
+const months = [];
+for (let i = 1; i <= 12; i += 1) {
+    months.push(moment().add(i,'months').format('MMM'));
+}
+return months;
+}
+
+const contributions = JSON.parse(document.getElementById('contributions').textContent);
+
+const ctx = document.getElementById('yearActivityChart').getContext('2d');
+const yearActivityChart = new Chart(ctx, {
+type: 'bar',
+data: {
+    labels: generateMonths(),
+    datasets: [
+    {
+        label: gettext('Commits'),
+        data: contributions.commits,
+        backgroundColor: 'rgba(87, 173, 219, 0.7)',
+    },
+    {
+        label: gettext('Pull requests'),
+        data: contributions.pull_requests,
+        backgroundColor: 'rgba(82, 206, 97, 0.7)',
+    },
+    {
+        label: gettext('Issues'),
+        data: contributions.issues,
+        backgroundColor: 'rgba(226, 113, 90, 0.7)',
+    },
+    {
+        label: gettext('Comments'),
+        data: contributions.comments,
+        backgroundColor: 'rgba(242, 232, 96, 0.7)',
+    },
+    ],
+},
+options: {
+    tooltips: {
+    mode: 'index',
+    intersect: false,
+    },
+    animation: {
+    duration: 0,
+    },
+    scales: {
+    xAxes: [{
+        stacked: true,
+    }],
+    yAxes: [{
+        stacked: true,
+    }],
+    },
+},
+});

templates/base.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css">
     <link rel="stylesheet" href="{% static 'css/base.css' %}">
     <link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
+    <script src="{% url 'javascript_catalog' %}"></script>
+    {% block head_scripts %}{% endblock %}
     {% if GTM_ID %}
     <!-- Google Tag Manager -->
     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -44,5 +46,6 @@ <h1>{% block header %}{% endblock %}</h1>
                       height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     {% endif %}
+    {% block body_end_scripts %}{% endblock %}
   </body>
 </html>

templates/components/year_activity_chart.html

@@ -1,63 +1,4 @@
-{% load i18n %}
-<div class="mb-5"><canvas id="yearActivityChart"></canvas></div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
-{{ contributions|json_script:'contributions' }}
-<script>
-  function generateMonths() {
-    const months = [];
-    for (let i = 1; i <= 12; i += 1) {
-      months.push(moment().add(i,'months').format('MMM'));
-    }
-    return months;
-  }
-
-  const contributions = JSON.parse(document.getElementById('contributions').textContent);
+{% load static %}
 
-  const ctx = document.getElementById('yearActivityChart').getContext('2d');
-  const yearActivityChart = new Chart(ctx, {
-    type: 'bar',
-    data: {
-      labels: generateMonths(),
-      datasets: [
-        {
-          label: '{% trans "Commits" %}',
-          data: contributions.commits,
-          backgroundColor: 'rgba(87, 173, 219, 0.7)',
-        },
-        {
-          label: '{% trans "Pull requests" %}',
-          data: contributions.pull_requests,
-          backgroundColor: 'rgba(82, 206, 97, 0.7)',
-        },
-        {
-          label: '{% trans "Issues" %}',
-          data: contributions.issues,
-          backgroundColor: 'rgba(226, 113, 90, 0.7)',
-        },
-        {
-          label: '{% trans "Comments" %}',
-          data: contributions.comments,
-          backgroundColor: 'rgba(242, 232, 96, 0.7)',
-        },
-      ],
-    },
-    options: {
-      tooltips: {
-        mode: 'index',
-        intersect: false,
-      },
-      animation: {
-        duration: 0,
-      },
-      scales: {
-        xAxes: [{
-          stacked: true,
-        }],
-        yAxes: [{
-          stacked: true,
-        }],
-      },
-    },
-  });
-</script>
+<div class="mb-5"><canvas id="yearActivityChart"></canvas></div>
+<script src="{% static 'js/yearActivityChart.js' %}"></script>

templates/home.html

@@ -1,6 +1,11 @@
 {% extends 'base.html' %}
 {% load i18n %}
 
+{% block head_scripts %}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
+  {{ contributions|json_script:'contributions' }}
+{% endblock head_scripts %}
 {% block header %}{% endblock %}
 {% block content %}
   <h2>{% trans "Past year activity" %}</h2>