forked from orson/bachemap
97 lines
3.6 KiB
HTML
97 lines
3.6 KiB
HTML
{% extends 'secondbase.html' %}
|
|
{% block content %}
|
|
<div class="container" style="background-color: rgba(189, 216, 3, 0.8); padding:2rem">
|
|
<!-- Header -->
|
|
<div class="header-cta">
|
|
<h2 style="text-align: center; color: #172f01; margin-bottom: 1rem;">¡Hazte mapista y pon tu granito de fotoevidencia!</h2>
|
|
<p style="text-align: center; margin-bottom: 2rem;">Cada contribución cuenta. Mira lo que estamos logrando y sé parte del cambio.<br></p>
|
|
</div>
|
|
|
|
<!-- Grid container for side-by-side layout -->
|
|
<div class="grid">
|
|
<!-- Table column -->
|
|
<div>
|
|
<div style="display: flex; align-items: center; height: 300px;">
|
|
<table style="color: rgb(87, 90, 91); width: 100%;">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Chart column -->
|
|
<div style="text-align: center;">
|
|
<h3>Porcentaje de usuarios activos</h3>
|
|
<div class="chart-container" style="display:block ruby; position: relative; height:300px; width:100%; margin: 0 auto;">
|
|
<canvas id="activeUsersChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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: {
|
|
// Append percentages directly to the legend labels
|
|
labels: [
|
|
'Usuarios Activos (' + activePercentage + '%)',
|
|
'Usuarios Inactivos (' + inactivePercentage + '%)'
|
|
],
|
|
datasets: [{
|
|
data: [activePercentage, inactivePercentage],
|
|
backgroundColor: [
|
|
'rgba(100, 180, 10, 1)',
|
|
'rgba(87, 90, 91, 0.8)'
|
|
],
|
|
borderColor: [
|
|
'rgba(100, 180, 10, 1)',
|
|
'rgb(87, 90, 91)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top'
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Distribución de Usuarios Activos'
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
var label = context.label || '';
|
|
var value = context.parsed;
|
|
return label + ': ' + value + '%';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |