pannabel/SkyLearn-Test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Additional school demographics

Browse Source
This commit is contained in:
papi 2024-01-14 10:13:39 +03:00
parent 8a214a6c6e
commit 6d70e83cc6
1 changed files with 99 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
templates/core/dashboard.html
View File

@ -150,17 +150,16 @@
} }
</style> </style>
<div class="page-header"> <div class="page-header mb-4">
<h1 class="title-1 mb-5">Dashboard</h1> <h1 class="title-1">Dashboard</h1>
<div class="btn-group"> <div class="dropdown">
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown"
aria-expanded="false"> aria-expanded="false">
<i class="fas fa-cog"></i> <i class="fas fa-cog"></i>
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu">
<h6 class="dropdown-header">Dashboard settings</h6> <h6 class="dropdown-header">Dashboard settings</h6>
<button class="dropdown-item" type="button">Display row</button> <button class="dropdown-item active" type="button">Display grid</button>
<button class="dropdown-item" type="button">Display column</button>
<button class="dropdown-item" type="button">Display table</button> <button class="dropdown-item" type="button">Display table</button>
<hr> <hr>
<button class="dropdown-item" type="button">Manage dashboard</button> <button class="dropdown-item" type="button">Manage dashboard</button>
@ -189,19 +188,19 @@
</div> </div>
<div class="col-md-3 mb-3 px-2"> <div class="col-md-3 mb-3 px-2">
<div class="card-count p-3"> <div class="card-count p-3">
<h3><i class="fas fa-users bg-light-purple"></i></h3> <h3><i class="fas fa-users bg-light-red"></i></h3>
<div class="text-right"> <div class="text-right">
Lab Assistance Administrators
<h2>500</h2> <h2>{{ superuser_count }}</h2>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3 mb-3 px-2"> <div class="col-md-3 mb-3 px-2">
<div class="card-count p-3"> <div class="card-count p-3">
<h3><i class="fas fa-users bg-light-red"></i></h3> <h3><i class="fas fa-users bg-light-purple"></i></h3>
<div class="text-right"> <div class="text-right">
Administrators Lab Assistance
<h2>{{ superuser_count }}</h2> <h2>500</h2>
</div> </div>
</div> </div>
</div> </div>
@ -256,53 +255,28 @@
<canvas id="enrollement"></canvas> <canvas id="enrollement"></canvas>
</div> </div>
</div> </div>
<div class="col-md-6 p-2">
<div class="row">
<div class="col-md-6 p-2">
<div class="card p-3 activities">
<h5>Your recent activities</h5>
<ul class="small">
<li>Created a survey of something</li>
<li>Added new admin user</li>
<li><span class="text-danger">Deleted</span> 1 video from CSE course</li>
<li>New documentation <span class="text-success">attached</span> for Arch</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
<li>Veniam magnam reiciendis modi explicabo sed aliquid natus</li>
<li>molestias corrupti suscipit similique ex adipisci praesentium</li>
<li>sint dolore, quo quibusdam ea, neque cupiditate.</li>
</ul>
</div>
</div>
<div class="col-md-6 p-2">
<div class="card p-3 activities">
<h5>Latest activities</h5>
<ul class="small">
{% for log in logs %}
<li>{{ log.message }} <span class="text-muted">- {{ log.created_at }}</span></li>
{% empty %}
<span>No recent activity</span>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-2"> <div class="col-md-6 p-2">
<div class="chart-wrap"> <div class="chart-wrap">
<i class="fas fa-expand-alt"></i> <i class="fas fa-expand-alt"></i>
<canvas id="students_grade"></canvas> <canvas id="students_grade"></canvas>
</div> </div>
</div> </div>
<div class="col-md-4 p-2"> <div class="col-md-6 p-2">
<div class="chart-wrap"> <div class="card w-100 h-100 p-3">
<i class="fas fa-expand-alt"></i> <h5>Latest activities</h5>
<canvas id="attendance"></canvas> <ul class="ps-2 small">
{% for log in logs %}d-flex
<li>{{ log.message }} <span class="text-muted">- {{ log.created_at }}</span></li>
{% empty %}
<li>No recent activity</li>
{% endfor %}
</ul>
</div> </div>
</div> </div>
</div> </div>
<br> <br>
<div class="bg-white p-3"> <div class="bg-white p-3">
<h5>School Demographics</h5> <h5 class="border-bottom pb-2">School Demographics</h5>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<i class="fas fa-expand-alt"></i> <i class="fas fa-expand-alt"></i>
@ -417,7 +391,7 @@
hoverBorderWidth: 3, hoverBorderWidth: 3,
data: [45, 75, 70, 80, 20, 30, 90], data: [45, 75, 70, 80, 20, 30, 90],
}, { }, {
label: 'Business Man', label: 'Business M.',
backgroundColor: 'rgba(0, 0, 0, 0.5)', backgroundColor: 'rgba(0, 0, 0, 0.5)',
borderColor: 'rgb(0, 0, 0)', borderColor: 'rgb(0, 0, 0)',
hoverBorderWidth: 3, hoverBorderWidth: 3,
@ -440,21 +414,6 @@
} }
}); });
var attendance = document.getElementById('attendance');
var chart = new Chart(attendance, {
type: 'doughnut',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Overall Attendance',
padding: 20
}
}
}
});
// Average grade setup // Average grade setup
const labelsGrade = [ const labelsGrade = [
'2017', '2017',
@ -466,25 +425,25 @@
const dataGrade = { const dataGrade = {
labels: labelsGrade, labels: labelsGrade,
datasets: [{ datasets: [{
label: 1, label: "Comp sci.",
backgroundColor: 'rgba(86, 224, 224, 0.5)', backgroundColor: 'rgba(86, 224, 224, 0.5)',
borderColor: 'rgb(86, 224, 224)', borderColor: 'rgb(86, 224, 224)',
hoverBorderWidth: 3, hoverBorderWidth: 3,
data: [0, 10, 5, 2, 20, 30, 45] data: [0, 10, 5, 2, 20, 30, 45]
}, { }, {
label: 2, label: "Civil eng.",
backgroundColor: 'rgba(253, 174, 28, 0.5)', backgroundColor: 'rgba(253, 174, 28, 0.5)',
borderColor: 'rgb(253, 174, 28)', borderColor: 'rgb(253, 174, 28)',
hoverBorderWidth: 3, hoverBorderWidth: 3,
data: [20, 0, 15, 4, 6, 4, 60], data: [20, 0, 15, 4, 6, 4, 60],
}, { }, {
label: 3, label: "Architect.",
backgroundColor: 'rgba(203, 31, 255, 0.5)', backgroundColor: 'rgba(203, 31, 255, 0.5)',
borderColor: 'rgb(203, 31, 255)', borderColor: 'rgb(203, 31, 255)',
hoverBorderWidth: 3, hoverBorderWidth: 3,
data: [85, 30, 34, 20, 20, 55, 45], data: [85, 30, 34, 20, 20, 55, 45],
}, { }, {
label: 4, label: "Economics",
backgroundColor: 'rgba(255, 19, 157, 0.5)', backgroundColor: 'rgba(255, 19, 157, 0.5)',
borderColor: 'rgb(255, 19, 157)', borderColor: 'rgb(255, 19, 157)',
hoverBorderWidth: 3, hoverBorderWidth: 3,
@ -523,26 +482,42 @@
// } // }
// }); // });
// const dataGender = {
// labels: ['Man', 'Women'],
// datasets: [{
// label: 'Man',
// backgroundColor: 'rgba(86, 224, 224, 0.5)',
// borderColor: 'rgb(86, 224, 224)',
// hoverBorderWidth: 3,
// data: 56
// }, {
// label: 'Women',
// backgroundColor: 'rgba(253, 174, 28, 0.5)',
// borderColor: 'rgb(253, 174, 28)',
// hoverBorderWidth: 3,
// data: 44,
// }]
// };
const dataGender = { const dataGender = {
labels: ['Man', 'Women'], labels: [
'Man',
'Women'
],
datasets: [{ datasets: [{
label: 'Man', label: "Students Gender Dataset",
backgroundColor: 'rgba(86, 224, 224, 0.5)', data: [56, 44],
borderColor: 'rgb(86, 224, 224)', backgroundColor: [
hoverBorderWidth: 3, 'rgb(255, 99, 132)',
data: [56] 'rgb(54, 162, 235)'
}, { ],
label: 'Women', hoverOffset: 4
backgroundColor: 'rgba(253, 174, 28, 0.5)',
borderColor: 'rgb(253, 174, 28)',
hoverBorderWidth: 3,
data: [44],
}] }]
}; };
var gender = document.getElementById('gender'); var gender = document.getElementById('gender');
var chart = new Chart(gender, { var chart = new Chart(gender, {
type: 'polarArea', type: 'pie',
data: dataGender, data: dataGender,
options: { options: {
plugins: { plugins: {
@ -554,29 +529,65 @@
} }
} }
}); });
const dataQualification = {
labels: [
'PHD',
'Masters',
'BSc degree'
],
datasets: [{
label: "Lecturer Qualifications Dataset",
data: [24, 30, 26],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(255, 193, 7)',
'rgb(54, 162, 235)'
],
hoverOffset: 4
}]
};
var ethnicity = document.getElementById('ethnicity'); var ethnicity = document.getElementById('ethnicity');
var chart = new Chart(ethnicity, { var chart = new Chart(ethnicity, {
type: 'polarArea', type: 'pie',
data: dataGender, data: dataQualification,
options: { options: {
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: 'Race/Ethnicity', text: 'Lecturer qualifications',
padding: 20 padding: 20
} }
} }
} }
}); });
const dataLevels = {
labels: [
'PHD',
'Masters',
'BSc degree'
],
datasets: [{
label: "Students level",
data: [14, 30, 56],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(255, 193, 7)',
'rgb(54, 162, 235)'
],
hoverOffset: 4
}]
};
var language = document.getElementById('language'); var language = document.getElementById('language');
var chart = new Chart(language, { var chart = new Chart(language, {
type: 'polarArea', type: 'pie',
data: dataGender, data: dataLevels,
options: { options: {
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: 'Home Language', text: 'Student levels',
padding: 20 padding: 20
} }
} }