Charts added

src/accounts/templates/accounts/profile.html

@@ -5,9 +5,15 @@
   <div class="col-sm-12 col-md-9">
     <div>
 		<h4>Challenges Solved by {{ user.username }}</h4>
-			{% if solves%}
+		{% if solves%}
-			<table class="table table-dark">
+
-        <thead>
+	<div class="table table-dark">
+            <div class="card-body" style="padding-left:10px;">
+				<canvas id="time-chart" height="100"></canvas>
+            </div>
+  	</div>
+	<table class="table table-dark">
+  		<thead>
           <tr>
 			  <th scope="col">{% trans "Challenge Name" %}</th>
 			  <th scope="col">{% trans "Category" %}</th>
@@ -44,7 +50,79 @@
 		{% endif %}
 		<li class="list-group-item">{% trans "Member since" %} {{ user.date_joined|date:"Y-m-d" }}</li>
 	</ul>
+
+	<div class="right-sidebar">
+    	<ul class="list-group">
+			<li class="list-group-item">{% trans "Category Stats" %}</li>
+			<li class="list-group-item">
+				<canvas id="global-chart"></canvas>
+			</li>
+	</div>
   </div>
 </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
+  <script>
+
+    var pie_conf= {
+      type: 'pie',
+      data: {
+        datasets: [{
+          data: {{ globalDatas|safe }},
+          backgroundColor: [
+            '#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3'
+          ],
+          label: 'Solved by category'
+        }],
+        labels: {{ globalLabels|safe }}
+      },
+      options: {
+      	legend: {display: false},
+        responsive: true
+      }
+    };
+	var time_conf = {
+    	type: 'line',
+    	data: {
+        	datasets: [{
+          		data: {{ timeDatas|safe }},
+          		fill: false,
+    			borderColor: 'rgb(75, 192, 192)',
+				pointBackgroundColor: '#fff',
+				pointBorderColor: '#fff',
+    			tension: 0.1,
+          		label: 'Challenge solved'
+        	}, {
+        	}],
+        	labels: {{ timeLabels|safe }}
+    	},
+      	options: {
+      		legend: {
+      			display: false,
+      		},
+      		scales: {
+      			yAxes: [{
+					ticks: {
+                  	  fontColor: "#D9D9D9", // this here
+                	},
+				}], 
+      			xAxes: [{
+					ticks: {
+                  	  fontColor: "#D9D9D9", // this here
+                	},
+				}],
+			},
+        	responsive: true,
+  		  }
+	};
+
+    window.onload = function() {
+      var globalchart = document.getElementById('global-chart').getContext('2d');
+      var timechart = document.getElementById('time-chart').getContext('2d');
+      window.globalPie = new Chart(globalchart, pie_conf);
+      window.timePie = new Chart(timechart, time_conf);
+    };
+
+  </script>
 {% endblock %}
 

src/accounts/views/views.py

@@ -2,7 +2,7 @@ from django.shortcuts import render, redirect, get_object_or_404
 from django.utils.translation import gettext_lazy as _
 
 from django import forms
-from ctfs.models import CTF_flags
+from ctfs.models import Category, CTF_flags
 from ..forms import UserForm,UserProfileInfoForm, UserInfosUpdateForm, UserUpdateForm
 from django.contrib.auth import authenticate, login, logout
 from django.contrib.auth.models import User
@@ -113,9 +113,26 @@ def edit(request):
 
 @login_required
 def profile(request, user_name):
+    globalLabels= []
+    globalDatas = [] 
+    timeLabels = []
+    timeDatas= [] 
+
     user_obj = get_object_or_404(User, username=user_name)
+    cats = Category.objects.all()
+    for cat in cats:
+        globalLabels.append(cat.name)
+        solved_count = CTF_flags.objects.filter(user=user_obj, ctf__category__name=cat).order_by('-flag_date').count()
+        globalDatas.append(solved_count)
+
+    solves = CTF_flags.objects.filter(user=user_obj).order_by('flag_date')
+    somme = 0
+    for flag in solves:
+        timeLabels.append(flag.flag_date.strftime('%Y-%m-%d'))
+        somme += flag.ctf.points
+        timeDatas.append(somme)
     solves = CTF_flags.objects.filter(user=user_obj).order_by('-flag_date')
-    return render(request,'accounts/profile.html', {'user':user_obj, 'solves':solves})
+    return render(request,'accounts/profile.html', {'user':user_obj, 'solves':solves,'globalLabels': globalLabels, 'globalDatas': globalDatas, 'timeLabels': timeLabels, 'timeDatas': timeDatas})
 # Create your views here.
 
 def rank(request, token):

src/static/css/style.css

@@ -17,7 +17,7 @@ pre {background-color: #000; color: #cecece; padding-left: 15px; font-weight: bo
 .dropdown-item:hover {background-color: #1D1D1D; color: #FFFFFF}
 
 .flag_link {margin-right: 6px}
-.flag_img {margin-top: 10px;width: 28px;border-radius: 100%;}
+.flag_img {margin-top: 10px;width: 28px;}
 
 .table-dark {background-color: #1D1D1D}
 .table-dark td, .table-dark th, .table-dark thead th {border: none}

src/statics/css/style.css

@@ -17,7 +17,7 @@ pre {background-color: #000; color: #cecece; padding-left: 15px; font-weight: bo
 .dropdown-item:hover {background-color: #1D1D1D; color: #FFFFFF}
 
 .flag_link {margin-right: 6px}
-.flag_img {margin-top: 10px;width: 28px;border-radius: 100%;}
+.flag_img {margin-top: 10px;width: 28px;}
 
 .table-dark {background-color: #1D1D1D}
 .table-dark td, .table-dark th, .table-dark thead th {border: none}

src/templates/base.html

@@ -106,6 +106,7 @@
                 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
                 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
                 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
         </body>
 </html>