forked from orson/bachemap
69 lines
2.3 KiB
HTML
69 lines
2.3 KiB
HTML
{% extends 'secondbase.html' %}
|
|
{% block content %}
|
|
<div class="container grid" style="background-color: rgba(189, 216, 3, 0.8); padding:2rem">
|
|
<h2>Aquí puedes consultar quiénes están contribuyendo. Por cuestiones de privacidad, los nombres están modificados, pero si sabes, sabes</h2>
|
|
</div>
|
|
<div class="container grid" style="background-color: rgba(189, 216, 3, 0.8); padding:2rem">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Mapista</th>
|
|
<th scope="col">Marcador</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for leader in leaders %}
|
|
<tr>
|
|
<td scope="row">{{leader.username}}</td>
|
|
<td scope="row">{{leader.count}}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<div>
|
|
<h3>Porcentaje de usuarios activos</h3>
|
|
<div class="chart-container" style="position: relative; height:300px; width:300px; margin: 0 auto;">
|
|
<canvas id="activeUsersChart"></canvas>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const ctx = document.getElementById('activeUsersChart').getContext('2d');
|
|
const activePercentage = {{ percentage }};
|
|
const inactivePercentage = 100 - activePercentage;
|
|
|
|
new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['Usuarios Activos', 'Usuarios Inactivos'],
|
|
datasets: [{
|
|
data: [activePercentage, inactivePercentage],
|
|
backgroundColor: [
|
|
'green',
|
|
'blue'
|
|
],
|
|
borderColor: [
|
|
'rgba(75, 192, 192, 1)',
|
|
'rgba(201, 203, 207, 1)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Distribución de Usuarios Activos'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |