Eje temporal

Fechas de verdad, no texto

El sensor estuvo caído del 3 al 5 de febrero: esas filas no están en el array. A la izquierda, fechas Carbon de verdad — el eje temporal enseña el hueco y el trazo se PARTE. A la derecha, las mismas fechas pre-formateadas como texto: el gráfico las trata como categorías equiespaciadas y la caída desaparece. Los dos gráficos se ven perfectamente bien. Uno miente.

{{-- Basta con pasar objetos DateTime o Carbon: la escala se detecta sola. --}}
<x-kore::chart :data="$sensor" x="medido_en">
    <x-kore::chart.line y="temp" curve="monotone" dots max-gap="2d" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

{{-- Con la fecha ya formateada como texto, el gráfico solo puede colocar los puntos por
     orden. Y si le pides scale="time" con texto en vez de adivinar, lanza una excepción. --}}
<x-kore::chart :data="$sensorTexto" x="dia">
    <x-kore::chart.line y="temp" curve="monotone" dots />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

{{-- Basta con pasar objetos DateTime o Carbon: la escala se detecta sola. --}}
<x-kore::chart :data="$sensor" x="medido_en">
    <x-kore::chart.line y="temp" curve="monotone" dots max-gap="2d" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

{{-- Con la fecha ya formateada como texto, el gráfico solo puede colocar los puntos por
     orden. Y si le pides scale="time" con texto en vez de adivinar, lanza una excepción. --}}
<x-kore::chart :data="$sensorTexto" x="dia">
    <x-kore::chart.line y="temp" curve="monotone" dots />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

Los ticks caen en el calendario

Noventa días. Con el adelgazado por salto de una escala de bandas saldrían los días 1, 9, 17, 25... — el mismo «1.224» que el eje Y se enorgullece de no mostrar nunca. Aquí el eje elige semanas: todos los ticks son lunes, y la segunda línea de contexto dice el mes, porque un eje del 10 al 20 de enero no diría en ninguna parte de qué mes habla si nadie cae en un día 1.

<x-kore::chart :data="$trafico" x="dia" height="18rem">
    <x-kore::chart.area y="visitas" curve="monotone" />
    <x-kore::chart.axis-y :ticks="5" format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

<x-kore::chart :data="$trafico" x="dia" height="18rem">
    <x-kore::chart.area y="visitas" curve="monotone" />
    <x-kore::chart.axis-y :ticks="5" format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

La unidad y el paso se eligen juntos

Un día muestreado cada media hora. No existe «cada 4 horas» ni «cada 10 minutos»: no son divisores decentes de 24 ni de 60, y los ticks se descuadrarían al día siguiente. La pareja (unidad, paso) se elige junta — al contrario que Chart.js, que fija la unidad y deja el paso en 1: para un eje de un año eso son 365 ticks de un día, escondidos después con autoSkip.

<x-kore::chart :data="$peticiones" x="hora">
    <x-kore::chart.line y="rps" curve="monotone" />
    <x-kore::chart.axis-y :ticks="4" />
    <x-kore::chart.axis-x timezone="Europe/Madrid" />
    <x-kore::chart.tooltip />
</x-kore::chart>

<x-kore::chart :data="$peticiones" x="hora">
    <x-kore::chart.line y="rps" curve="monotone" />
    <x-kore::chart.axis-y :ticks="4" />
    <x-kore::chart.axis-x timezone="Europe/Madrid" />
    <x-kore::chart.tooltip />
</x-kore::chart>

La zona horaria no es cosmética

Un pedido de las 23:30 en Madrid es de las 22:30 en UTC — o sea, de OTRO DÍA. Un gráfico diario que lea las fechas en UTC pone ese pedido en la barra de ayer.

<x-kore::chart.axis-x timezone="Europe/Madrid" />

<x-kore::chart.axis-x timezone="Europe/Madrid" />

El mismo intervalo agrupa la consulta

Que las escalas vivan en el servidor tiene una consecuencia casi inevitable: el intervalo que decide los ticks es el mismo con el que hay que agrupar el query. Es el $__interval de Grafana, en Eloquent — y no lo tiene nadie más en el ecosistema Laravel.

$paso = TimeTicks::interval($desde, $hasta, count: 8);   // → "1 week"

Order::selectRaw('DATE_TRUNC(?, created_at) AS bucket, SUM(total)', [$paso->unit()])
     ->whereBetween('created_at', [$desde, $hasta])
     ->groupBy('bucket')
     ->get();

// $paso->unit()           → 'day' | 'week' | 'month' | ...  (lo que pide un DATE_TRUNC)
// $paso->toDateInterval() → un DateInterval de PHP, por si hay que iterar el rango a mano

$paso = TimeTicks::interval($desde, $hasta, count: 8);   // → "1 week"

Order::selectRaw('DATE_TRUNC(?, created_at) AS bucket, SUM(total)', [$paso->unit()])
     ->whereBetween('created_at', [$desde, $hasta])
     ->groupBy('bucket')
     ->get();

// $paso->unit()           → 'day' | 'week' | 'month' | ...  (lo que pide un DATE_TRUNC)
// $paso->toDateInterval() → un DateInterval de PHP, por si hay que iterar el rango a mano

Props de axis-x