Datos en vivo

Demo en vivo

Un punto cada 2 segundos. Pon el ratón encima del primer gráfico y el dato se para —mientras lees un tooltip, el número no puede cambiar bajo el cursor—; cambia de pestaña y también se para; y si amplías con el zoom, también. El segundo gráfico (barras) sí anima: no tiene trazo del que despegarse.

Uso básico

Un método que añade un punto nuevo y recorta la ventana deslizante — eso es todo el «streaming».

class Monitor extends Component
{
    public array $muestras = [];

    /** Un punto nuevo, y el más viejo se cae. Eso es toda la ventana deslizante. */
    public function tick(): void
    {
        $this->muestras[] = $this->leer();
        $this->muestras = array_slice($this->muestras, -40);
    }
}

class Monitor extends Component
{
    public array $muestras = [];

    /** Un punto nuevo, y el más viejo se cae. Eso es toda la ventana deslizante. */
    public function tick(): void
    {
        $this->muestras[] = $this->leer();
        $this->muestras = array_slice($this->muestras, -40);
    }
}

<x-kore::chart :data="$this->serie" x="medido_en">
    <x-kore::chart.line y="cpu" curve="monotone" dots />

    <x-kore::chart.axis-y :min="0" :max="100" />
    <x-kore::chart.tooltip />

    <x-kore::chart.stream every="2s" call="tick" />
</x-kore::chart>

<x-kore::chart :data="$this->serie" x="medido_en">
    <x-kore::chart.line y="cpu" curve="monotone" dots />

    <x-kore::chart.axis-y :min="0" :max="100" />
    <x-kore::chart.tooltip />

    <x-kore::chart.stream every="2s" call="tick" />
</x-kore::chart>

Y ya está.

Lo que NO hay aquí

Ni wire:ignore, ni chart.update(), ni una instancia de JavaScript que proteger.

Los cuatro momentos en que refrescar es hostil

Un wire:poll a secas refresca siempre. Por eso el refresco lo conduce el gráfico.

1. Mientras lees un tooltip. El dato se movería bajo el cursor y el número que estabas mirando cambiaría mientras lo miras. Pon el ratón encima y el gráfico se para; sácalo y se reanuda.
2. Con la pestaña oculta. Diez pestañas abiertas serían diez renders cada dos segundos en tu servidor, para nadie.
3. Con el zoom puesto. Has ampliado para mirar algo concreto: que se te mueva el suelo debajo es exactamente lo que no quieres.
4. Mientras alguien lee OTRO gráfico del mismo componente Livewire. Es la pausa nº 1 vista desde el otro lado — y no se ve venir.

Un refresco actualiza el componente ENTERO

No un gráfico suelto. De ahí salen dos cosas que hay que saber.

El navegador NO es la fuente del dato

El refresco se para con la pestaña oculta — y debe pararse. Pero eso no pierde datos, porque el navegador no es quien los produce.

En un panel de verdad el dato lo escribe un colector (un cron, un agente, otro proceso) y el componente lo consulta:

Lectura::where('medido_en', '>', now()->subSeconds(80))->get();

Lectura::where('medido_en', '>', now()->subSeconds(80))->get();

Esa consulta no sabe nada de tu pestaña. Al volver, devuelve todo lo que pasó mientras no mirabas.

Huecos de verdad: max-gap

Un null explícito ya partía la línea. Lo que NO partía nada era una fila que sencillamente no está.

<x-kore::chart.line y="cpu" curve="monotone" max-gap="10s" />

<x-kore::chart.line y="cpu" curve="monotone" max-gap="10s" />

Sin eso, si el colector se muere media hora, la línea cruza el hueco dibujando una curva suave por encima de un rato en el que no hubo dato. Y con curve="monotone" se inventa, además, un swoop que parece dato.

Es la misma mentira que arregló el eje temporal, un piso más arriba: entonces el hueco desaparecía porque los puntos se colocaban por su ordinal; ahora el hueco se ve, pero el trazo lo tapa.

max-gap acepta «500ms», «30s», «5m», «2h», «7d», «1w» o un número (las unidades del eje). Sólo tiene sentido en un eje continuo: en uno de categorías no hay huecos que medir, y pedirlo ahí lanza.

Fija el eje Y

En un gráfico en vivo esto deja de ser un lujo.

<x-kore::chart.axis-y :min="0" :max="100" />

<x-kore::chart.axis-y :min="0" :max="100" />

Un eje que se reescala cada dos segundos porque el dato subió un punto es ilegible: la línea se queda quieta y lo que se mueve es el eje. Un porcentaje va de 0 a 100 y punto.

min y max son un contrato, no una sugerencia: no se redondea por debajo de lo que pides.

Con trazo, nada se anima

Y no es un olvido: es la única respuesta coherente.

La línea es un <path>, y animarla exigiría transition: d. Medido en los tres motores con Playwright:

Y hay una razón mejor para no hacerlo aunque funcionara: en una ventana deslizante, interpolar d lleva el punto i hasta el valor del punto i+1 — o sea, la onda tiembla en el sitio en vez de desplazarse. Es la animación equivocada. Un motor de canvas tiene el mismo problema y lo resuelve igual: redibujando.

Eso no es teórico: con los puntos animados, el peor caso medido se iba a 8,36% del área de la curva sobre la que se supone que está — unos 24px en un gráfico de 18rem. Se veía a la legua.

Y sólo se anima lo vertical

Las etiquetas del eje X no se animan: saltan a su sitio nuevo. Así que una barra que se desplazara despacio hacia la izquierda se quedaría atrás de su propio tick. Lo horizontal se mueve todo junto y de golpe. Lo vertical —que es donde está el dato— desliza.

Internamente, cada barra lleva un wire:key por categoría cuando hay stream: sin él, en una ventana deslizante el morph reutilizaría la barra i para el dato i+1, y la barra crecería en el sitio en vez de que la de al lado se desplace. Es exactamente el temblor que esta regla evita — no hace falta que lo declares tú, lo hace el componente.

Todo esto se apaga con :transition="false", y se respeta prefers-reduced-motion sin que hagas nada.

El techo, y no es negociable

Medido en la demo (40 puntos, 2 series, un componente Livewire con poco más que el gráfico).

Si necesitas más de 1 Hz

Lo que hay que cambiar no es el número: es el formato de cable.

La tentación es «pues que dibuje el JavaScript» — o sea, portar Ticks, Scales, Path y Format a JS, y mantener dos implementaciones de la geometría idénticas para siempre. Es exactamente la deuda que esta arquitectura se eligió para no contraer.

No está implementado. Está aquí porque es la salida correcta, no para fingir que ya existe.

Props