# 📈 Sistema de Plotting en Tiempo Real

## Descripción General

El sistema de plotting implementado permite crear gráficos interactivos en tiempo real usando los datos del cache de recording del sistema. Esto significa que **no agrega carga adicional al PLC** ya que utiliza los mismos datos que se están grabando automáticamente en CSV.

## Características Principales

### 🎯 Sistema de Trigger
- **Variables Boolean**: Usa variables boolean como trigger para reiniciar automáticamente el trace
- **Configuración Flexible**: Puede trigger en True o False según la configuración
- **Reinicio Automático**: Cuando se activa el trigger, el gráfico se limpia y comienza un nuevo trace

### ⚡ Performance Optimizada
- **Cache del Recording**: Utiliza exclusivamente los datos del cache del sistema de recording
- **Sin Carga PLC**: No realiza lecturas adicionales al PLC
- **Actualización Eficiente**: Actualización automática cada 500ms para plots activos

### 📊 Múltiples Sesiones
- **Sesiones Independientes**: Puede crear múltiples plot sessions simultáneamente
- **Configuración Individual**: Cada sesión tiene su propia configuración de variables, tiempo y trigger
- **Control Granular**: Start/Stop/Pause/Clear individual para cada sesión

### 🎨 Interfaz Intuitiva
- **Chart.js**: Gráficos modernos y responsivos
- **Controles Visuales**: Botones claros para controlar cada sesión
- **Información en Tiempo Real**: Muestra estadísticas de cada sesión

## Arquitectura del Sistema

### Backend (Python)

#### `core/plot_manager.py`
- **PlotSession**: Clase que maneja una sesión individual de plotting
- **PlotManager**: Clase principal que gestiona todas las sesiones
- **Integración con DataStreamer**: Se actualiza automáticamente con los datos del cache

#### Características Técnicas:
- **Thread Safety**: Uso de locks para operaciones concurrentes
- **Memory Management**: Deques con tamaño limitado para evitar memory leaks
- **Error Handling**: Manejo robusto de errores y logging

### Frontend (JavaScript)

#### `static/js/plotting.js`
- **PlotManager Class**: Maneja la interfaz de usuario y comunicación con el backend
- **Chart.js Integration**: Configuración optimizada para datos en tiempo real
- **Modal System**: Interfaz para crear nuevas sesiones de plotting

#### Características Técnicas:
- **Auto-update**: Actualización automática cada 500ms
- **Responsive Design**: Adaptable a diferentes tamaños de pantalla
- **Error Recovery**: Manejo de errores de red y reconexión automática

## API Endpoints

### GET `/api/plots`
Obtiene el estado de todas las sesiones de plotting activas.

### POST `/api/plots`
Crea una nueva sesión de plotting.

**Parámetros:**
```json
{
    "name": "Temperature Monitoring",
    "variables": ["temp1", "temp2", "pressure"],
    "time_window": 60,
    "y_min": 0,
    "y_max": 100,
    "trigger_enabled": true,
    "trigger_variable": "start_cycle",
    "trigger_on_true": true
}
```

### DELETE `/api/plots/<session_id>`
Elimina una sesión de plotting específica.

### POST `/api/plots/<session_id>/control`
Controla una sesión de plotting.

**Parámetros:**
```json
{
    "action": "start|stop|pause|resume|clear"
}
```

### GET `/api/plots/<session_id>/data`
Obtiene los datos de una sesión específica para Chart.js.

### GET `/api/plots/variables`
Obtiene las variables disponibles para plotting (solo de datasets activos).

## Configuración de Sesiones

### Parámetros Básicos
- **name**: Nombre descriptivo de la sesión
- **variables**: Lista de variables a graficar (solo de datasets activos)
- **time_window**: Ventana de tiempo en segundos (10-3600)

### Configuración de Eje Y
- **y_min**: Valor mínimo del eje Y (opcional, automático si no se especifica)
- **y_max**: Valor máximo del eje Y (opcional, automático si no se especifica)

### Sistema de Trigger
- **trigger_enabled**: Habilita/deshabilita el sistema de trigger
- **trigger_variable**: Variable boolean a usar como trigger
- **trigger_on_true**: Si es true, trigger en True; si es false, trigger en False

## Flujo de Datos

1. **DataStreamer** lee variables del PLC y actualiza el cache
2. **PlotManager** detecta sesiones activas y actualiza sus datos
3. **Frontend** solicita datos cada 500ms y actualiza Chart.js
4. **Trigger System** verifica cambios en variables boolean y reinicia traces

## Variables Disponibles

### Para Plotting
- Solo variables de **datasets activos**
- Todos los tipos de datos soportados (REAL, INT, BOOL, etc.)

### Para Trigger
- Solo variables de tipo **BOOL**
- De datasets activos únicamente

## Control de Sesiones

### Estados de Sesión
- **Active**: Sesión activa y recibiendo datos
- **Paused**: Sesión pausada (no recibe nuevos datos)
- **Stopped**: Sesión detenida (no visible en interfaz)

### Acciones Disponibles
- **Start**: Inicia o reanuda la sesión
- **Pause**: Pausa la sesión (mantiene datos)
- **Clear**: Limpia todos los datos (reinicia trace)
- **Stop**: Detiene la sesión completamente
- **Remove**: Elimina la sesión

## Integración con el Sistema Existente

### Compatibilidad
- **Sin Cambios**: No requiere modificaciones al sistema de recording existente
- **Cache Sharing**: Utiliza el mismo cache que CSV recording y UDP streaming
- **Performance**: No afecta el rendimiento del sistema principal

### Dependencias
- **Chart.js**: Librería de gráficos (CDN)
- **Flask-SocketIO**: Para futuras mejoras con WebSockets
- **Date-fns**: Para manejo de fechas en Chart.js

## Limitaciones y Consideraciones

### Limitaciones Actuales
- **Variables Activas**: Solo variables de datasets activos
- **Tiempo Real**: Actualización cada 500ms (no instantánea)
- **Memoria**: Máximo 10 puntos por segundo por variable

### Consideraciones de Performance
- **Múltiples Sesiones**: Cada sesión consume memoria adicional
- **Variables Boolean**: Limitadas a variables de tipo BOOL
- **Cache Dependencia**: Requiere que el recording esté activo

## Futuras Mejoras

### WebSockets
- Actualización en tiempo real sin polling
- Mejor performance y menor latencia

### Configuración Avanzada
- Múltiples triggers por sesión
- Filtros de datos más sofisticados
- Exportación de datos de gráficos

### Interfaz Mejorada
- Zoom y pan en gráficos
- Múltiples escalas Y
- Templates de configuración

## Troubleshooting

### Problemas Comunes

#### No se ven datos en el gráfico
1. Verificar que el PLC esté conectado
2. Verificar que los datasets estén activos
3. Verificar que las variables existan en datasets activos

#### Error al crear sesión
1. Verificar que las variables seleccionadas existan
2. Verificar que el trigger variable sea de tipo BOOL
3. Verificar que el time window esté entre 10-3600 segundos

#### Gráfico no se actualiza
1. Verificar que la sesión esté activa (no pausada)
2. Verificar conexión de red
3. Verificar que el recording esté funcionando

### Logs y Debugging
- Los logs del sistema incluyen información de plotting
- Console del navegador muestra errores de JavaScript
- Network tab muestra requests a la API