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>
<h4>Challenges Solved by {{ user.username }}</h4>
{% if solves%}
<table class="table table-dark">
<thead>
{% 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>
<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 %}

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 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):

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}
.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}

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}
.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}

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://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>