issue Hexlet#180

config/settings.py

@@ -31,6 +31,7 @@
     '[::1]',
     '.herokuapp.com',
     '.hexlet.io',
+    '0.0.0.0',
 ]
 
 INSTALLED_APPS = [

contributors/views/contributor.py

@@ -37,4 +37,9 @@ def get_context_data(self, **kwargs):
         context['contributions_for_year'] = (
             self.object.contribution_set.for_year()
         )
+
+        context['current_contributor'] = self.object
+        if self.request.GET.get('compare') == 'yes':
+            context['my_contributions_for_year'] = self.request.user.contributor.contribution_set.for_year()
+
         return context

locale/ru/LC_MESSAGES/django.po

@@ -465,6 +465,10 @@ msgstr "Добавления и удаления"
 msgid "Past year activity"
 msgstr "Активность за год"
 
+#: templates/contributor_details.html templates/home.html
+msgid "Compare with yourself"
+msgstr "Сравнить с собой"
+
 #: templates/contributor_details.html
 msgid "All-time contributions"
 msgstr "Вклад за всё время"

static/js/activity_chart/my_chart.js

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

templates/components/activity_chart/chart.html

@@ -2,3 +2,8 @@
 
 <div class="chart-container mb-5"><canvas id="yearActivityChart"></canvas></div>
 <script src="{% static 'js/activity_chart/chart.js' %}"></script>
+
+{% if my_contributions_for_year %}
+  <div class="chart-container mb-5"><canvas id="my_yearActivityChart"></canvas></div>
+  <script src="{% static 'js/activity_chart/my_chart.js' %}"></script>
+{% endif %}

templates/components/activity_chart/scripts.html

@@ -1,3 +1,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
 {{ contributions_for_year|json_script:'contributions_for_year' }}
+{% if my_contributions_for_year %}
+  {{ my_contributions_for_year|json_script:'my_contributions_for_year' }}
+{% endif %}

templates/contributor_details.html

@@ -178,7 +178,14 @@ <h2 class="h5 card-subtitle font-weight-light mt-3">
       </div>
     </div>
     <div class="col">
-      <h2>{% trans "Past year activity" %}</h2>
+        <h2>{% translate "Past year activity" %}
+          {% if user.is_authenticated %}
+          <a class="btn btn-outline-primary"
+            href="{% url 'contributors:contributor_details' current_contributor %}?compare=yes">
+            {% translate "Compare with yourself" %}
+          </a>
+          {% endif %}
+        </h2>
       {% include 'components/activity_chart/chart.html' %}
       <h2 class="mr-5">{% trans "All-time contributions" %}</h2>
       <input type="text" name="name" id="repo-search-field" class="form-control col-3"