Series y gráficas

Una serie es una lista de valores con tiempos. Para graficarla, el runtime te da una proyección: puntos { x, y } con el eje X ya resuelto.

const { gvar } = window.Undercromo;

El snapshot crudo

readSeries (asíncrono) y peekSeries (síncrono) devuelven la serie tal cual:

const serie = gvar.peekSeries("temperaturas");
// { key, values, timestamps, totalLength, originTimestamp, hasTimestamps }

Sirve para inspeccionar, pero para una gráfica es más cómodo proyectar.

projectSeries: puntos listos para graficar

projectSeries(clave, opciones) (asíncrono) y peekProjectedSeries (síncrono) devuelven un objeto con points, un arreglo de { x, y }:

const proj = await gvar.projectSeries("temperaturas", {
  maxPoints: 100,      // cuántos puntos recientes incluir (def. 100)
  timeMode: "clock",   // cómo construir el eje X
});

// proj.points = [{ x: "12:30:01", y: 23.5 }, { x: "12:30:02", y: 23.6 }, ...]

Modos de tiempo (timeMode)

Modo	Eje X
clock	Hora del reloj ("12:30:01").
relative-ms	Milisegundos desde el inicio de la serie.
relative-seconds	Segundos desde el inicio.
relative-minutes	Minutos desde el inicio.

Usa points, no el índice ni los tiempos crudos

Las series están recortadas a una ventana: el primer elemento del arreglo no es necesariamente el primer dato que existió. projectSeries ya resuelve esto y te da el eje X correcto en points. Grafica con points, no con la posición en el arreglo.

Una gráfica en vivo

Observa la serie para saber cuándo cambió y vuelve a proyectar (síncrono) para redibujar:

function dibujar(points) {
  // entrega points a tu librería de gráficas favorita
}

gvar.observeSeries("temperaturas", () => {
  const proj = gvar.peekProjectedSeries("temperaturas", {
    maxPoints: 100,
    timeMode: "clock",
  });
  dibujar(proj.points);
}, { immediate: true });

Con { immediate: true } dibujas de una vez con lo que ya hay, y luego en cada actualización. El runtime entrega los datos; tú solo decides cómo pintarlos.