# Integración del Sistema de Gráficas en WordPress

El sistema de gráficas está **100% compatible** con WordPress y sigue el mismo patrón de ES6 modules que ya usas en el tema.

---

## 🎯 Opciones de Integración

### **Opción 1: En el Contenido del Post (Más simple)**

Pega este código directamente en el editor HTML del post:

```html
<!-- 1. Incluir CSS (solo una vez por post) -->
[chartsSystem]

<!-- 2. Contenedor para la gráfica -->
<div id="mi-grafica"></div>

<!-- 3. Cargar D3.js v7 -->
<script src="https://d3js.org/d3.v7.min.js"></script>

<!-- 4. Tu código de visualización -->
<script type="module">
  import { createLineChart } from '/wp-content/themes/serendipia/js/D3_helpers/charts/LineChart.js';
  
  const datos = [
    { fecha: new Date(2024, 0, 1), valor: 45 },
    { fecha: new Date(2024, 1, 1), valor: 52 },
    { fecha: new Date(2024, 2, 1), valor: 61 },
  ];

  createLineChart({
    container: '#mi-grafica',
    data: datos,
    x: d => d.fecha,
    y: d => d.valor,
    title: 'Ventas 2024',
  });
</script>
```

**Nota:** El shortcode `[chartsSystem]` carga automáticamente `charts-base.css`.

---

### **Opción 2: Crear un Archivo JS Separado (Como lo haces ahora)**

**Paso 1:** Crea `js/viz/mi_grafica/grafica.js`

```javascript
import { createLineChart } from '../../D3_helpers/charts/LineChart.js';

export async function init() {
  const response = await fetch('/wp-content/themes/serendipia/js/viz/mi_grafica/data/datos.csv');
  const csvText = await response.text();
  const datos = d3.csvParse(csvText, d => ({
    fecha: new Date(d.fecha),
    valor: +d.valor,
  }));

  createLineChart({
    container: '#mi-grafica',
    data: datos,
    x: d => d.fecha,
    y: d => d.valor,
    title: 'Mi Gráfica',
    xAxis: { label: 'Mes', format: '%b %Y' },
    yAxis: { label: 'Valor', format: ',.0f' },
  });
}

// Auto-init si el contenedor existe
if (document.querySelector('#mi-grafica')) {
  init();
}
```

**Paso 2:** En el post (HTML):

```html
[chartsSystem]

<div id="mi-grafica"></div>

<script src="https://d3js.org/d3.v7.min.js"></script>
<script type="module" src="/wp-content/themes/serendipia/js/viz/mi_grafica/grafica.js"></script>
```

---

### **Opción 3: Crear un Shortcode Personalizado**

Si usarás una gráfica frecuentemente, crea un shortcode en `inc/shortcodes-sp.php`:

```php
/**
 ** Shortcode: [ventasChart]
 **/
function shortcode_ventas_chart() {
    // HTML del contenedor
    $html = '<div id="ventas-chart"></div>';
    
    // Script inline
    $html .= '
    <script type="module">
      import { createBarChart } from "/wp-content/themes/serendipia/js/D3_helpers/charts/BarChart.js";
      
      const datos = [
        { mes: "Ene", valor: 45 },
        { mes: "Feb", valor: 52 },
        { mes: "Mar", valor: 61 },
      ];

      createBarChart({
        container: "#ventas-chart",
        data: datos,
        x: d => d.mes,
        y: d => d.valor,
        title: "Ventas Mensuales",
      });
    </script>';
    
    return $html;
}
add_shortcode('ventasChart', 'shortcode_ventas_chart');

// CSS
function shortcode_ventas_chart_css() {
    global $post;
    if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'ventasChart')) {
        wp_enqueue_style('charts-base-css', get_theme_file_uri('css/charts-base.css'));
    }
}
add_action('wp_enqueue_scripts', 'shortcode_ventas_chart_css');
```

**Uso en el post:**
```
[chartsSystem]
[ventasChart]
```

---

## 📝 Ejemplo Completo en un Post

### Post de WordPress (Editor HTML):

```html
[chartsSystem]

<h2>Evolución de Temperatura</h2>
<div id="temp-chart"></div>

<h2>Comparación de Ventas</h2>
<div id="sales-chart"></div>

<script src="https://d3js.org/d3.v7.min.js"></script>

<script type="module">
  import { createLineChart } from '/wp-content/themes/serendipia/js/D3_helpers/charts/LineChart.js';
  import { createBarChart } from '/wp-content/themes/serendipia/js/D3_helpers/charts/BarChart.js';

  // Gráfica 1: Líneas
  const tempData = [
    { fecha: new Date(2024, 0, 1), temp: 18 },
    { fecha: new Date(2024, 1, 1), temp: 20 },
    { fecha: new Date(2024, 2, 1), temp: 22 },
  ];

  createLineChart({
    container: '#temp-chart',
    data: tempData,
    x: d => d.fecha,
    y: d => d.temp,
    title: 'Temperatura 2024',
  });

  // Gráfica 2: Barras
  const salesData = [
    { mes: 'Enero', ventas: 45 },
    { mes: 'Febrero', ventas: 52 },
    { mes: 'Marzo', ventas: 61 },
  ];

  createBarChart({
    container: '#sales-chart',
    data: salesData,
    x: d => d.mes,
    y: d => d.ventas,
    title: 'Ventas Mensuales',
    showValues: true,
  });
</script>
```

---

## 🚀 Comparación con tu Patrón Actual

### **Antes (Patrón existente):**

```html
<div id="grafica"></div>

<script type="text/javascript" src="/wp-content/themes/serendipia/js/d3.min.js"></script>
<script type="module" src="/wp-content/themes/serendipia/js/D3_helpers/mainV7.js"></script>
<script type="module" src="/wp-content/themes/serendipia/js/viz/mi_viz/graphics.js"></script>
```

### **Ahora (Sistema nuevo):**

```html
[chartsSystem]

<div id="grafica"></div>

<script src="https://d3js.org/d3.v7.min.js"></script>
<script type="module">
  import { createLineChart } from '/wp-content/themes/serendipia/js/D3_helpers/charts/LineChart.js';
  
  createLineChart({
    container: '#grafica',
    data: misDatos,
    x: d => d.fecha,
    y: d => d.valor,
  });
</script>
```

**Ventaja:** ¡10 líneas en vez de 100+! 🎉

---

## 🔥 Tips para WordPress

### 1. **Cargar datos desde CSV** (como lo haces ahora):

```javascript
const datosPath = '/wp-content/themes/serendipia/js/viz/mi_grafica/data/';

const data = await d3.csv(datosPath + 'datos.csv', d => ({
  fecha: new Date(d.fecha),
  valor: +d.valor,
}));

createLineChart({
  container: '#grafica',
  data: data,
  x: d => d.fecha,
  y: d => d.valor,
});
```

### 2. **Combinar con GSAP ScrollTrigger:**

```javascript
import { createBarChart } from '/wp-content/themes/serendipia/js/D3_helpers/charts/BarChart.js';

const chart = createBarChart({ ... });

// Animar con ScrollTrigger
gsap.to('#mi-grafica', {
  scrollTrigger: {
    trigger: '#mi-grafica',
    start: 'top 80%',
    onEnter: () => {
      // La gráfica ya tiene animación incorporada
    }
  }
});
```

### 3. **Conectar con filtros HTML:**

```html
[chartsSystem]

<select id="year-filter">
  <option value="2023">2023</option>
  <option value="2024">2024</option>
</select>

<div id="grafica"></div>

<script type="module">
  import { createBarChart } from '/wp-content/themes/serendipia/js/D3_helpers/charts/BarChart.js';
  
  const allData = [...]; // Todos los datos
  
  const chart = createBarChart({
    container: '#grafica',
    data: allData.filter(d => d.year === '2023'),
    x: d => d.month,
    y: d => d.value,
  });

  // Actualizar al cambiar filtro
  document.getElementById('year-filter').addEventListener('change', (e) => {
    const filtered = allData.filter(d => d.year === e.target.value);
    chart.updateData(filtered);
  });
</script>
```

---

## ✅ Confirmación de Compatibilidad

- ✅ **ES6 Modules** - Igual que tus visualizaciones actuales
- ✅ **D3.js v7** - Compatible
- ✅ **WordPress** - Funciona en posts/páginas
- ✅ **Responsive** - Se adapta automáticamente
- ✅ **No rompe código existente** - Coexiste con `mainV7.js`
- ✅ **Shortcode incluido** - `[chartsSystem]` para CSS

---

## 🎓 Migración Gradual

**NO necesitas migrar tus gráficas antiguas.** El sistema nuevo es para:

1. **Nuevas visualizaciones** - Más rápidas de crear
2. **Gráficas simples** - Líneas, barras, áreas
3. **Prototipos rápidos** - Para probar ideas

Las gráficas complejas en `js/viz/` siguen funcionando perfectamente. Este sistema **complementa**, no reemplaza.

---

¿Quieres que te muestre un ejemplo real con uno de tus posts existentes? O ¿prefieres que creemos más shortcodes personalizados para tipos específicos de gráficas?