Casa Sin Nube

Componente de series temporales (SVG)

Pieza 7 del backlog de diseño. Es el diagrama de datos que faltaba para guías de sensores ambientales, energía y audio.

Última revisión: 05/10/2026

Qué resuelve

Las curvas de temperatura, humedad, consumo eléctrico o latencia se explican mal con tablas y peor con capturas de un dashboard. Este componente da lo que necesitan los artículos del sitio: un gráfico de líneas con eje X de tiempo, eje Y con unidad, banda de umbral y rango realista.

Es SVG inline: pesa alrededor de 1,5 KB, no deja de verse en móvil y se puede copiar en una guía sin depender de ningún servicio externo.

El componente

Serie temporal de temperatura y humedad durante 24 horas Gráfico de línea con la temperatura en grados Celsius en el eje izquierdo, de 15 a 27, y la humedad relativa en el eje derecho, de 30 a 70 por ciento, con una banda de confort térmico entre 19 y 24 grados. Banda de confort 19–24 °C 27 °C 24 °C 21 °C 18 °C 15 °C 70 % 60 % 50 % 40 % 30 % 00:00 04:00 08:00 12:00 16:00 20:00 Temperatura (°C) Humedad (%RH)
Serie temporal de 24 h con doble eje: temperatura en naranja, humedad en verde. La banda sombreada marca el rango de confort entre 19 y 24 °C.

Cómo se usa

Cambia estos sitios y listo:

viewBox="0 0 800 430"
Define el lienzo. No lo cambies salvo que rediseñes el gráfico entero.
points del polyline
Cada pareja x,y es un punto. Las x salen de dividir el ancho del marco, de 70 a 740, entre los intervalos de tiempo; las y se calculan con la fórmula de abajo.
yTop, yBottom, mínimos y máximos
En el ejemplo el eje Y izquierdo va de 15 a 27 °C y el derecho de 30 a 70 % HR. Cambia esos cuatro números y las etiquetas, no la geometría.
Banda de umbral
El rectángulo x='70' y='118' width='670' height='129' es el rango de confort 19-24 °C. Desplázalo a la franja que te interese.

Fórmula para reescalar valores

y = yTop + (1 - (valor - minimo) / (maximo - minimo)) * (yBottom - yTop)

Con yTop=40, yBottom=350, minimo=15 y maximo=27, un valor de 24 °C da 117,5.

Esqueleto copiable

Este es el molde mínimo con ejes, banda y una serie. Añade las etiquetas y la rejilla que necesites; las tienes en el componente de arriba. Si pones más de un gráfico en la misma página, renombra id="s-titulo" e id="s-desc" para que no se repitan.

<figure class="serie-temporal" style="background:#0b0f14;border:1px solid #263140;border-radius:8px;padding:1rem;max-width:100%;box-sizing:border-box;">
  <svg viewBox="0 0 800 430" role="img" aria-labelledby="s-titulo s-desc" style="width:100%;height:auto;display:block;">
    <title id="s-titulo">Temperatura en 24 h</title>
    <desc id="s-desc">Línea de temperatura entre 15 y 27 grados.</desc>
    <rect x="70" y="40" width="670" height="310" fill="none" stroke="#263140"/>
    <rect x="70" y="118" width="670" height="129" fill="#ffb74d" opacity="0.15"/>
    <line x1="70" y1="40" x2="70" y2="350" stroke="#8b95a5" stroke-width="1.5"/>
    <line x1="70" y1="350" x2="740" y2="350" stroke="#8b95a5" stroke-width="1.5"/>
    <polyline fill="none" stroke="#ff9f0a" stroke-width="3" points="70,273 204,285 338,221 472,118 606,66 740,143"/>
  </svg>
  <figcaption>Serie temporal con banda de confort y eje de tiempo.</figcaption>
</figure>

Límites

No lo conviertas en PNG ni lo uses como miniatura de portada: es un diagrama de datos y vive dentro del artículo. La fotografía de portada sigue siendo un <img> real, con la ruta de /og/miniatura/.