TimeSeriesLive

Gráfica de stream en tiempo real. Gestiona un buffer interno acotado por maxPoints — el consumidor solo hace append, el componente descarta los puntos más antiguos automáticamente. Ventana deslizante siempre anclada al último dato recibido. Sin zoom ni pan (por diseño).

---

Demo en vivo

tiempo real

TT601 ControlTT605 Load1TT606 Load2TT607 Load3SP TempPresiónSP Pres

---

Interacción

Acción	Efecto
Hover	Cursor badge con timestamp exacto
Click leyenda	Oculta / muestra la serie
Scroll	Ignorado — sin zoom por diseño

La ventana se desplaza sola. El consumidor nunca necesita gestionar el tamaño del buffer.

---

Instalación

pnpm add @bjaland/hiperbaric-chart

import { TimeSeriesLive } from '@bjaland/hiperbaric-chart'
import '@bjaland/hiperbaric-chart/style.css'

---

Uso básico

<template>
  <div style="height: 400px;">
    <TimeSeriesLive
      :timestamps="timestamps"
      :series="series"
      :left-axis="leftAxis"
      :right-axis="rightAxis"
      :window-secs="120"
      :max-points="600"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TimeSeriesLive, type ChartSeries, type AxisConfig } from '@bjaland/hiperbaric-chart'

const timestamps = ref<number[]>([])
const series = ref<ChartSeries[]>([
  {
    key: 'TT601',
    label: 'TT601',
    unit: '°C',
    color: '#f43f5e',
    axis: 'left',
    data: [],
    bold: true,
  },
  { key: 'Pres', label: 'Pres', unit: 'bar', color: '#60a5fa', axis: 'right', data: [] },
])

const leftAxis: AxisConfig = { label: 'Temperatura', unit: '°C', color: '#f43f5e' }
const rightAxis: AxisConfig = { label: 'Presión', unit: 'bar', color: '#60a5fa' }

// Append en tiempo real — el componente gestiona el cap internamente
function onNewPoint(ts: number, values: Record<string, number>) {
  timestamps.value.push(ts)
  series.value.forEach((s) => s.data.push(values[s.key]))
}
</script>

---

Props

Prop	Tipo	Default	Descripción
timestamps	number[]	—	Requerido. Unix timestamps en segundos. Solo append.
series	ChartSeries[]	—	Requerido. Array de series. Se puede hacer push en data.
leftAxis	AxisConfig	—	Requerido. Configuración eje Y izquierdo.
rightAxis	AxisConfig	—	Requerido. Configuración eje Y derecho.
windowSecs	number	420	Segundos visibles en la ventana deslizante.
maxPoints	number	600	Cap interno del buffer. Puntos más antiguos se descartan automáticamente.

---

Types

interface ChartSeries {
  key: string // Identificador único de la serie
  label: string // Texto en la leyenda
  unit: string // Unidad (solo informativo)
  color: string // Color hex, ej. '#f43f5e'
  axis: 'left' | 'right' // Escala Y a la que se asocia
  data: number[] // Valores; mismo orden que timestamps
  bold?: boolean // Línea más gruesa y opaca
  visible?: boolean // false = oculta al init (usuario puede reactivar)
  type?: 'value' | 'setpoint' | 'band'
  bandPair?: string // key de la serie par al usar type: 'band'
}

interface AxisConfig {
  label: string // Nombre del eje
  unit: string // Unidad mostrada en el label
  color: string // Color del eje y su label
}

type de serie

Valor	Efecto visual
'value'	Línea continua (default)
'setpoint'	Línea discontinua [6,3], alfa 0.85
'band'	Área rellena entre esta serie y bandPair

---

Comportamiento del buffer

El componente mantiene internamente _ts[] y _data[][] con los últimos maxPoints puntos. El consumidor puede hacer push ilimitado — el componente nunca modifica los arrays de las props.

props.timestamps: [t0, t1, ..., tN]   ← crece sin límite en el padre
buffer interno:   [tN-599, ..., tN]   ← siempre ≤ maxPoints
uPlot recibe:     buffer interno