JavaScript

Tema 9 · Dashboards per a l'enginyeria

Introducció

Un dashboard (panell de control) és una interfície que agrupa indicadors clau (KPIs), gràfics i dades en temps real per facilitar la presa de decisions. En enginyeria, un dashboard pot mostrar l'estat de màquines, consums energètics, temperatures, alarmes i qualsevol dada rellevant d'un sistema monitoritzat.

Objectius

  • Integrar HTML, CSS, JavaScript, Chart.js i LocalStorage en una sola aplicació
  • Crear targetes d'indicadors amb actualització dinàmica
  • Connectar un dashboard a una API per obtenir dades en temps real
  • Aplicar bones pràctiques de disseny responsive i accessibilitat bàsica

Estructura d'un dashboard

Organització típica d'un panell de control amb HTML i CSS Grid:

<div class="dashboard">
  <!-- Targetes KPI -->
  <div class="kpi" id="kpi-temp">
    <i class="fas fa-thermometer-half"></i>
    <span class="valor">23.5</span>
    <span class="etiqueta">Temperatura (°C)</span>
  </div>
  <div class="kpi" id="kpi-pressio">...</div>
  <div class="kpi" id="kpi-potencia">...</div>
  <div class="kpi" id="kpi-consum">...</div>

  <!-- Gràfics -->
  <div class="graf"><canvas id="chart-temp"></canvas></div>
  <div class="graf"><canvas id="chart-consum"></canvas></div>

  <!-- Taula d'alarmes -->
  <div class="taula">...</div>
</div>

Actualització dinàmica amb setInterval

Simular dades de sensors que s'actualitzen cada 3 segons:

function actualitzarKPIs() {
  // Simular noves lectures
  const temp = (20 + Math.random() * 10).toFixed(1);
  const pressio = (1010 + Math.random() * 10).toFixed(0);
  const potencia = (1200 + Math.random() * 500).toFixed(0);
  
  document.getElementById('kpi-temp').querySelector('.valor').textContent = temp;
  document.getElementById('kpi-pressio').querySelector('.valor').textContent = pressio;
  document.getElementById('kpi-potencia').querySelector('.valor').textContent = potencia;
  
  // Canviar colors segons llindars
  const tempEl = document.getElementById('kpi-temp');
  if (parseFloat(temp) > 27) tempEl.style.borderLeftColor = 'red';
  else tempEl.style.borderLeftColor = 'green';
}

// Actualitzar cada 3 segons
setInterval(actualitzarKPIs, 3000);
actualitzarKPIs(); // primera crida

Exercicis

  1. Crea un dashboard amb 4 targetes KPI (temperatura, pressió, cabal, nivell) que s'actualitzin cada 2 segons amb valors aleatoris simulats.
  2. Afegeix un gràfic de línies que mostri l'evolució de la temperatura durant els últims 10 punts de dades.
  3. Implementa un sistema d'alarmes visuals: si un KPI supera un llindar, la targeta ha de parpellejar o canviar de color.

Mini Projecte – Dashboard de supervisió industrial

Construeix un panell de control complet per supervisar una planta de producció:

  • 4 targetes KPI amb indicadors clau (temperatura, pressió, velocitat de producció, consum elèctric).
  • Un gràfic de línies que mostri l'històric de temperatura (mínim 10 punts, actualitzant-se cada 2 segons).
  • Un gràfic de barres amb el consum diari simulat dels últims 7 dies.
  • Una taula d'alarmes que registri automàticament qualsevol valor fora de rang (timestamp + descripció).
  • Utilitza CSS Grid per a la disposició, Chart.js per als gràfics i LocalStorage per conservar les alarmes entre sessions.

Tot el codi ha d'estar en un únic fitxer HTML (sense dependències de servidor).

Tema 8 Índex Tema 10