# 🔧 Troubleshooting Chart.js Streaming - Guía de Resolución

## 🚨 Problema Reportado

**Síntomas:**
- ✅ Status muestra "Active"
- ✅ Variables cambia de 0 a 1
- ❌ Data Points se mantiene en 0  
- ❌ No se ve ningún plot dentro de la grilla
- ❌ La línea de tiempo no se mueve
- ⚠️ La escala Y cambia pero es lo único que funciona

## 🔍 Diagnóstico Paso a Paso

### **Paso 1: Verificar que se cargó chartjs-plugin-streaming**

Abrir **Consola del Navegador** (F12) y ejecutar:

```javascript
verifyStreamingIntegration()
```

**Resultado esperado:**
```
🧪 Verificando integración de Chart.js Streaming...
✅ Chart.js cargado: true
✅ ChartStreaming cargado: true
✅ PlotManager cargado: true
✅ Sesiones de streaming activas: 1
```

**Si ChartStreaming cargado: false:**
1. Verificar que `chartjs-plugin-streaming.js` se carga correctamente
2. Revisar errores en la consola
3. Recargar la página

### **Paso 2: Habilitar Debug Detallado**

```javascript
enablePlotDebug()
```

### **Paso 3: Forzar Actualización de Datos**

```javascript
forceStreamingUpdate()
```

**Buscar en consola:**
```
📈 Plot plot_13: Fetching data from backend...
📈 Plot plot_13: Received data: {...}
📈 Plot plot_13: Processing X datasets for streaming
```

### **Paso 4: Verificar Datos del Backend**

Ejecutar en consola:

```javascript
fetch('/api/plots/plot_13/data')
  .then(r => r.json())
  .then(data => {
    console.log('📊 Backend data:', data);
    console.log('📊 Datasets:', data.datasets?.length || 0);
    console.log('📊 Data points per dataset:', 
      data.datasets?.map(d => d.data?.length || 0) || []);
  });
```

**Resultado esperado:**
```
📊 Backend data: {session_id: "plot_13", datasets: [...], data_points_count: X}
📊 Datasets: 1
📊 Data points per dataset: [5, 8, 12]
```

### **Paso 5: Verificar Configuración del Chart**

```javascript
// Para la sesión activa (ej: plot_13)
const sessionData = plotManager.sessions.get('plot_13');
console.log('📈 Chart config:', {
  hasChart: !!sessionData?.chart,
  scaleType: sessionData?.chart?.scales?.x?.type,
  hasRealTimeScale: sessionData?.chart?.scales?.x?.constructor?.name,
  streamingEnabled: !!sessionData?.chart?.$streaming?.enabled,
  datasets: sessionData?.chart?.data?.datasets?.length || 0
});
```

**Resultado esperado:**
```
📈 Chart config: {
  hasChart: true,
  scaleType: "realtime", 
  hasRealTimeScale: "RealTimeScale",
  streamingEnabled: true,
  datasets: 1
}
```

## 🛠️ Soluciones Comunes

### **Problema: ChartStreaming no está cargado**

**Causa:** El archivo `chartjs-plugin-streaming.js` no se carga correctamente.

**Solución:**
1. Verificar que el archivo existe en `static/js/chartjs-streaming/chartjs-plugin-streaming.js`
2. Revisar que el HTML incluye: `<script src="/static/js/chartjs-streaming/chartjs-plugin-streaming.js"></script>`
3. Verificar orden de carga (debe ser después de Chart.js y antes de plotting.js)

### **Problema: Backend devuelve datos pero no aparecen en el chart**

**Causa:** Error en el procesamiento de datos o timestamps incorrectos.

**Solución:**
```javascript
// Verificar timestamps de los datos
fetch('/api/plots/plot_13/data')
  .then(r => r.json())
  .then(data => {
    const firstDataset = data.datasets[0];
    const firstPoint = firstDataset.data[0];
    console.log('📊 First point timestamp:', firstPoint.x);
    console.log('📊 Current time:', Date.now());
    console.log('📊 Time difference (sec):', (Date.now() - firstPoint.x) / 1000);
  });
```

Si la diferencia de tiempo es muy grande (>60 segundos), el punto puede estar fuera de la ventana de tiempo.

### **Problema: Escala realtime no funciona**

**Causa:** La escala no se inicializó correctamente.

**Solución:**
```javascript
// Re-inicializar plot
const sessionId = 'plot_13'; // Cambiar por tu session ID
plotManager.controlPlot(sessionId, 'stop');
setTimeout(() => {
  plotManager.controlPlot(sessionId, 'start');
}, 1000);
```

### **Problema: Data Points siempre en 0**

**Causa:** Los datos no se están agregando al chart o se eliminan inmediatamente.

**Solución verificar:**
1. **TTL Configuration**: Los datos pueden estar expirando muy rápido
2. **Timestamp Format**: Los timestamps pueden estar en formato incorrecto
3. **Dataset Index**: Los datos se pueden estar agregando al dataset incorrecto

```javascript
// Agregar punto de prueba manualmente
const sessionData = plotManager.sessions.get('plot_13');
if (sessionData?.chart) {
  window.ChartStreaming.addStreamingData(sessionData.chart, 0, {
    x: Date.now(),
    y: Math.random() * 100
  });
  console.log('📈 Test point added');
}
```

## 🎯 Test de Resolución Rápida

**Ejecutar este script completo en consola:**

```javascript
// Test completo de diagnóstico
console.log('🔧 DIAGNÓSTICO COMPLETO');
console.log('='.repeat(50));

// 1. Verificar componentes básicos
console.log('1️⃣ COMPONENTES:');
console.log('Chart.js:', typeof Chart !== 'undefined' ? '✅' : '❌');
console.log('ChartStreaming:', typeof window.ChartStreaming !== 'undefined' ? '✅' : '❌');
console.log('PlotManager:', typeof plotManager !== 'undefined' ? '✅' : '❌');

// 2. Verificar sesiones activas
if (plotManager && plotManager.sessions.size > 0) {
  console.log('\n2️⃣ SESIONES ACTIVAS:');
  for (const [sessionId, sessionData] of plotManager.sessions) {
    console.log(`📈 ${sessionId}:`, {
      hasChart: !!sessionData.chart,
      scaleType: sessionData.chart?.scales?.x?.type,
      datasets: sessionData.chart?.data?.datasets?.length || 0,
      dataPoints: sessionData.chart?.data?.datasets?.reduce((total, d) => total + (d.data?.length || 0), 0) || 0
    });
  }
}

// 3. Test de backend data
console.log('\n3️⃣ BACKEND DATA TEST:');
if (plotManager && plotManager.sessions.size > 0) {
  const firstSessionId = Array.from(plotManager.sessions.keys())[0];
  fetch(`/api/plots/${firstSessionId}/data`)
    .then(r => r.json())
    .then(data => {
      console.log('📊 Backend response:', {
        success: !!data.datasets,
        datasets: data.datasets?.length || 0,
        totalPoints: data.data_points_count || 0,
        firstDatasetPoints: data.datasets?.[0]?.data?.length || 0
      });
    })
    .catch(err => console.log('❌ Backend error:', err.message));
}

console.log('\n4️⃣ NEXT STEPS:');
console.log('- enablePlotDebug() para logs detallados');
console.log('- forceStreamingUpdate() para forzar actualización');
console.log('- Si persiste el problema, revisar configuración del backend');
```

## 📞 Contacto de Soporte

Si después de estos pasos el problema persiste:

1. **Compartir resultado completo** del diagnóstico en consola
2. **Verificar logs del backend** en la terminal donde corre `python main.py`
3. **Revisar Network tab** en DevTools para errores de red

---

## 🎉 Resultado Esperado

Cuando funcione correctamente verás:

```
📈 Chart.js Streaming Plugin loaded successfully
📈 RealTimeScale initialized: {duration: 60000, refresh: 500, pause: false}
📈 Plot plot_13: Successfully initialized 1 streaming datasets
📈 Plot plot_13: Fetching data from backend...
📈 Plot plot_13: Adding 3 new points for UR29_Brix
📈 Added point to dataset 0 (UR29_Brix): x=1642598234567, y=54.258
```

Y el gráfico mostrará:
- ✅ Línea de tiempo deslizándose automáticamente
- ✅ Data Points incrementándose
- ✅ Líneas de variables dibujándose en tiempo real
- ✅ Escala Y ajustándose a los datos