Genera dashboards web interactivos que consumen datos en tiempo real de múltiples APIs: ventas de tu tienda, métricas de Google Analytics, estado del servidor, KPIs de negocio. Chart.js con auto-refresh automático, sin recargar la página.
Crea un dashboard web HTML/CSS/JavaScript con Bootstrap 5.3 y Chart.js para el negocio:
KPIs en tiempo real (actualiza cada 60 segundos):
- Ventas del día (€ y número de pedidos)
- Visitantes activos en la web (Google Analytics API)
- Estado del servidor (ping a /health endpoint)
- Stock crítico (productos con stock < 5)
Gráficas:
- Ventas de los últimos 30 días (línea)
- Ventas por categoría esta semana (barras)
- Embudo de conversión (visitas → carrito → compra)
Alertas visuales:
- Rojo si ventas del día < 50% del objetivo
- Amarillo si servidor tarda > 1 segundo
- Rojo si algún producto en stock 0
Diseño: modo oscuro, colores corporativos azul/naranja, responsive para monitor y tablet
// Actualizar KPIs cada 60 segundos sin recargar la página
async function updateDashboard() {
try {
const [ventas, analytics, server, stock] = await Promise.all([
fetch('/api/ventas/hoy').then(r => r.json()),
fetch('/api/analytics/activos').then(r => r.json()),
fetch('/api/server/health').then(r => r.json()),
fetch('/api/stock/critico').then(r => r.json())
]);
renderKPIs({ ventas, analytics, server, stock });
renderCharts(ventas.historico);
checkAlerts({ ventas, server, stock });
} catch (err) {
console.error('Error actualizando dashboard:', err);
}
}
updateDashboard();
setInterval(updateDashboard, 60_000);