Este código utiliza
fetch para simular la obtención de datos de una API y Chart.js para renderizar un gráfico de líneas técnico.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miner Dash - Usuario 001</title>
<!-- Importar Chart.js de un CDN para facilidad -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: Arial, sans-serif; background-color: #121212; color: white; padding: 20px; }
.container { max-width: 1000px; margin: auto; }
.stats-panel { display: flex; gap: 20px; margin-bottom: 20px; }
.stat-card { background: #1e1e1e; padding: 20px; border-radius: 8px; flex: 1; text-align: center; }
.chart-container { background: #1e1e1e; padding: 20px; border-radius: 8px; }
canvas { width: 100% !important; height: 400px !important; }
</style>
</head>
<body>
<div class="container">
<h1>Dashboard Técnico de Minería</h1>
<div class="stats-panel">
<div class="stat-card">
<h3>Hashrate Actual</h3>
<p id="hashrate">-- H/s</p>
</div>
<div class="stat-card">
<h3>Acciones (Shares)</h3>
<p id="shares">--</p>
</div>
<div class="stat-card">
<h3>Balance Estimado</h3>
<p id="balance">-- BTC</p>
</div>
</div>
<div class="chart-container">
<canvas id="miningChart"></canvas>
</div>
</div>
<script>
// 1. Configuración del Gráfico (Chart.js)
const ctx = document.getElementById('miningChart').getContext('2d');
const miningChart = new Chart(ctx, {
type: 'line', // Gráfico técnico de líneas
data: {
labels: [], // Tiempo
datasets: [{
label: 'Hashrate (KH/s)',
data: [],
borderColor: '#00ff00',
backgroundColor: 'rgba(0, 255, 0, 0.1)',
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
scales: { y: { beginAtZero: true } }
}
});
// 2. Simulación de llamada API (Reemplazar por fetch real)
function fetchMiningData() {
// En producción: fetch('https://api.mi-pool.com')
console.log("Actualizando datos...");
// Datos simulados
const data = {
hashrate: Math.floor(Math.random() * 1000 + 5000),
shares: Math.floor(Math.random() * 100),
balance: (Math.random() * 0.001).toFixed(6),
time: new Date().toLocaleTimeString()
};
// Actualizar tarjetas estadísticas
document.getElementById('hashrate').innerText = data.hashrate + " H/s";
document.getElementById('shares').innerText = data.shares;
document.getElementById('balance').innerText = data.balance + " BTC";
// Actualizar gráfico
if (miningChart.data.labels.length > 20) {
miningChart.data.labels.shift();
miningChart.data.datasets[0].data.shift();
}
miningChart.data.labels.push(data.time);
miningChart.data.datasets[0].data.push(data.hashrate);
miningChart.update();
}
// Actualizar datos cada 5 segundos
setInterval(fetchMiningData, 5000);
fetchMiningData(); // Llamada inicial
</script>
</body>
</html>
- HTML5 Canvas (
<canvas id="miningChart">): Define el área de dibujo. - Chart.js (CDN): Biblioteca open-source para visualización de datos.
- JavaScript (
fetch y setInterval): Obtiene los datos de la API cada pocos segundos y actualiza el DOM sin recargar la página. - Estilos CSS: Tema oscuro (dark mode) diseñado para monitoreo de datos técnicos.
- API: Reemplaza la simulación en
fetchMiningData con una llamada a la API de tu pool de minería (ej. fetch('URL_DE_LA_API')). - Adaptación: Chart.js permite cambiar
type: 'line' a 'bar', 'pie', o gráficos avanzados para visualizar la estadística del usuario.
No hay comentarios:
Publicar un comentario