TimeSeriesHistory

Gráfica de ciclo histórico con dataset completo. Zoom libre con scroll centrado en el cursor. Pan con drag para navegar por el ciclo. Soporta marcas de fase (intervals).

---

Demo — ciclo HIP completo con fases

scroll = zoom

TT601 ControlTT605 Load1TT606 Load2TT607 Load3SP TempPresiónSP Pres

---

Interacción

Acción	Efecto
Scroll ↑	Zoom in centrado en el cursor
Scroll ↓	Zoom out centrado en el cursor
Drag ←→	Pan — desplaza la ventana visible
Hover	Cursor badge con timestamp exacto
Click leyenda	Oculta / muestra la serie

El zoom está siempre centrado en el punto bajo el ratón. Para ir a la fase Vacuum: coloca el ratón sobre esa zona y haz scroll ↑.

El barra superior (scrubber) muestra la posición y tamaño de la ventana actual respecto al rango total del ciclo.

---

Instalación

pnpm add @bjaland/hiperbaric-chart

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

---

Uso básico

<template>
  <div style="height: 400px;">
    <TimeSeriesHistory
      :timestamps="timestamps"
      :series="series"
      :left-axis="leftAxis"
      :right-axis="rightAxis"
      :intervals="intervals"
    />
  </div>
</template>

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

// Dataset completo — se pasa de una vez, no en streaming
const timestamps: number[] = [/* Unix timestamps en segundos */]
const series: 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' }

// Fases del ciclo — opcional
const intervals: ChartInterval[] = [
  { label: 'Vacuum', start: 1700000000, end: 1700000600, color: '#8b5cf6' },
  { label: 'Ramp P&T', start: 1700000600, end: 1700002100, color: '#f59e0b' },
]
</script>

---

Props

Prop	Tipo	Default	Descripción
timestamps	number[]	—	Requerido. Unix timestamps en segundos, orden ascendente.
series	ChartSeries[]	—	Requerido. Array de series con el dataset completo en data.
leftAxis	AxisConfig	—	Requerido. Configuración eje Y izquierdo.
rightAxis	AxisConfig	—	Requerido. Configuración eje Y derecho.
intervals	ChartInterval[]	undefined	Marcas de fase opcionales (bandas verticales con label).

---

Types

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

interface AxisConfig {
  label: string
  unit: string
  color: string
}

interface ChartInterval {
  label: string // Texto dentro de la banda
  start: number // Unix timestamp inicio (segundos)
  end: number // Unix timestamp fin (segundos)
  color?: string // Color hex — default '#6366f1'
}

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 la indicada en bandPair

---

Migración desde TimeSeriesChart

TimeSeriesChart fue eliminado en v0.2.0. Usar TimeSeriesHistory si el caso de uso es visualizar un ciclo completo con zoom libre.

- import { TimeSeriesChart } from '@bjaland/hiperbaric-chart'
+ import { TimeSeriesHistory } from '@bjaland/hiperbaric-chart'

- <TimeSeriesChart :window-secs="7200" ... />
+ <TimeSeriesHistory ... />   <!-- sin windowSecs, muestra el rango completo -->