Charts added

This commit is contained in:
ix 2021-09-08 00:32:44 +02:00
parent 9f431ac4fa
commit c5713d3887
5 changed files with 103 additions and 7 deletions

View File

@ -5,9 +5,15 @@
<div class="col-sm-12 col-md-9"> <div class="col-sm-12 col-md-9">
<div> <div>
<h4>Challenges Solved by {{ user.username }}</h4> <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> <tr>
<th scope="col">{% trans "Challenge Name" %}</th> <th scope="col">{% trans "Challenge Name" %}</th>
<th scope="col">{% trans "Category" %}</th> <th scope="col">{% trans "Category" %}</th>
@ -44,7 +50,79 @@
{% endif %} {% endif %}
<li class="list-group-item">{% trans "Member since" %} {{ user.date_joined|date:"Y-m-d" }}</li> <li class="list-group-item">{% trans "Member since" %} {{ user.date_joined|date:"Y-m-d" }}</li>
</ul> </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>
</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 %} {% endblock %}

View File

@ -2,7 +2,7 @@ from django.shortcuts import render, redirect, get_object_or_404
from django.utils.translation import gettext_lazy as _ from django.utils.translation import gettext_lazy as _
from django import forms 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 ..forms import UserForm,UserProfileInfoForm, UserInfosUpdateForm, UserUpdateForm
from django.contrib.auth import authenticate, login, logout from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.models import User from django.contrib.auth.models import User
@ -113,9 +113,26 @@ def edit(request):
@login_required @login_required
def profile(request, user_name): def profile(request, user_name):
globalLabels= []
globalDatas = []
timeLabels = []
timeDatas= []
user_obj = get_object_or_404(User, username=user_name) 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') 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. # Create your views here.
def rank(request, token): def rank(request, token):

View File

@ -17,7 +17,7 @@ pre {background-color: #000; color: #cecece; padding-left: 15px; font-weight: bo
.dropdown-item:hover {background-color: #1D1D1D; color: #FFFFFF} .dropdown-item:hover {background-color: #1D1D1D; color: #FFFFFF}
.flag_link {margin-right: 6px} .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 {background-color: #1D1D1D}
.table-dark td, .table-dark th, .table-dark thead th {border: none} .table-dark td, .table-dark th, .table-dark thead th {border: none}

View File

@ -17,7 +17,7 @@ pre {background-color: #000; color: #cecece; padding-left: 15px; font-weight: bo
.dropdown-item:hover {background-color: #1D1D1D; color: #FFFFFF} .dropdown-item:hover {background-color: #1D1D1D; color: #FFFFFF}
.flag_link {margin-right: 6px} .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 {background-color: #1D1D1D}
.table-dark td, .table-dark th, .table-dark thead th {border: none} .table-dark td, .table-dark th, .table-dark thead th {border: none}

View File

@ -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://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://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://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> </body>
</html> </html>