Charts added
This commit is contained in:
parent
9f431ac4fa
commit
c5713d3887
|
|
@ -6,6 +6,12 @@
|
|||
<div>
|
||||
<h4>Challenges Solved by {{ user.username }}</h4>
|
||||
{% if solves%}
|
||||
|
||||
<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>
|
||||
|
|
@ -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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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):
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue