Spaces:
Running
Running
File size: 3,149 Bytes
0368899 8a21ec9 0368899 8a21ec9 0368899 8a21ec9 0368899 8a21ec9 0368899 8a21ec9 5411536 8a21ec9 0368899 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
/**
* Info Component
* Displays information about data privacy and anonymization
*/
const InfoComponent = {
render() {
return `
<div class="nav">
<button class="nav-back" onclick="app.navigate('home')">←</button>
<h1>📊 Módulo de Datos</h1>
</div>
<div class="content">
<div class="card">
<h3>Capturas Recientes (kg)</h3>
<canvas id="capturesChart" style="width: 100%; height: 200px;"></canvas>
</div>
<div class="card">
<h3>🗺️ Mapa de Veda (CODEPESCA)</h3>
<div id="veda-map" style="background: #e0e0e0; height: 180px; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;">
<span style="color: #666;">Cargando mapa interactivo...</span>
<div style="position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.8); padding: 5px; border-radius: 4px; font-size: 10px;">
📍 Costa El Salvador
</div>
<!-- Simulación de zonas de veda -->
<div style="position: absolute; width: 40px; height: 40px; background: rgba(255,0,0,0.3); border: 2px solid red; border-radius: 50%; top: 40%; left: 30%;"></div>
<div style="position: absolute; width: 30px; height: 30px; background: rgba(255,0,0,0.3); border: 2px solid red; border-radius: 50%; top: 60%; left: 70%;"></div>
</div>
<p class="text-sm mt-1">🔴 Zonas rojas indican veda activa de Langosta.</p>
</div>
<div class="card">
<h3>📜 Normativa Vigente</h3>
<ul class="text-sm">
<li><strong>Ley de Pesca Art 12:</strong> Registro obligatorio de artes.</li>
<li><strong>Decreto 45:</strong> Prohibición de pesca con explosivos.</li>
</ul>
</div>
</div>
`;
},
async init() {
// Initialize Chart after a short delay to ensure DOM is ready
setTimeout(() => {
this.initChart();
}, 100);
},
initChart() {
const ctx = document.getElementById('capturesChart');
if (!ctx) return;
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'],
datasets: [{
label: 'Capturas (kg)',
data: [12, 19, 3, 5, 2, 15, 7],
backgroundColor: '#B5CC18',
borderColor: '#50B8B1',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
};
|