viewx 0.2.0__tar.gz → 0.2.2__tar.gz

{viewx-0.2.0 → viewx-0.2.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: viewx
-Version: 0.2.0
+Version: 0.2.2
 Summary: Librería de visualización adaptable para HTML, Dashboards y PDFs en Python
 Home-page: https://github.com/GhostAnalyst30/ViewX
 Author: Emmanuel Ascendra Perez
@@ -26,7 +26,6 @@ Requires-Dist: pylatex>=1.4.2
 Requires-Dist: seaborn>=0.12.2
 Requires-Dist: plotly>=6.0.0
 Requires-Dist: streamlit>=1.32.0
-Requires-Dist: statslibx>=0.2.2
 Provides-Extra: streamlit
 Requires-Dist: streamlit>=1.32.0; extra == "streamlit"
 Provides-Extra: dash
@@ -53,7 +52,7 @@ Dynamic: requires-dist
 Dynamic: requires-python
 Dynamic: summary
 
-# 📦 ViewX — v2.0
+# ViewX — v2.2
 
 **ViewX** es un paquete moderno de Python diseñado para generar **páginas HTML interactivas**, **dashboards dinámicos** y **visualizaciones inteligentes** que se adaptan automáticamente a los objetos agregados por el usuario.
 
@@ -61,15 +60,14 @@ Este proyecto ofrece una solución **ligera, intuitiva y escalable**, ideal para
 
 ---
 
-## ✨ Características principales
+## Características principales
 
-- ⚡ **Rápido y minimalista**: cero dependencias pesadas por defecto.  
-- 🧩 **API intuitiva**: crea páginas y dashboards en segundos.  
-- 📐 **Diseño adaptativo**: cada componente se acomoda automáticamente.  
-- 🌐 **Modo HTML**: genera páginas `.html` totalmente autónomas.  
-- 📊 **Modo Dashboard**: plantillas escalables con soporte opcional para Streamlit/Dash.  
-- 🛠️ **Extensible**: añade tus propias plantillas y módulos personalizados.  
-- 🔮 **Visión a futuro**: pensado para expandirse a interfaces inteligentes.
+- **Rápido y minimalista**: cero dependencias pesadas por defecto.  
+- **API intuitiva**: crea páginas y dashboards en segundos.  
+- **Diseño adaptativo**: cada componente se acomoda automáticamente.  
+- **Modo HTML**: genera páginas `.html` totalmente autónomas.  
+- **Extensible**: añade tus propias plantillas y módulos personalizados.  
+- **Visión a futuro**: pensado para expandirse a interfaces inteligentes.
 
 ---
 
@@ -78,125 +76,87 @@ Este proyecto ofrece una solución **ligera, intuitiva y escalable**, ideal para
 pip install viewx
 ```
 
-## 🚀 Ejemplo rápido
+## Ejemplo rápido
 
 ### Crear una página HTML
 ```python
 import pandas as pd
-import numpy as np
-import plotly.express as px
 from viewx.HTML import HTML
 
-# 1. Datos de ejemplo (Ventas por Categoría y Región)
+# 1. Crear datos de ejemplo
 df_ventas = pd.DataFrame({
-    'Categoría': ['Electrónica', 'Hogar', 'Moda', 'Deportes', 'Juguetes'],
-    'Ventas': [12500, 8400, 15200, 6700, 4300],
-    'Margen': [0.15, 0.22, 0.18, 0.12, 0.25]
+    'Mes': ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
+    'Ventas': [120, 135, 148, 170, 195, 210, 245, 268, 290, 310, 335, 400],
+    'Beneficio': [30, 35, 42, 51, 58, 63, 73, 80, 87, 93, 100, 120],
+    'Clientes': [45, 48, 52, 58, 65, 72, 80, 88, 95, 102, 110, 125]
+})
+
+# Datos para gráfico de barras
+df_productos = pd.DataFrame({
+    'Producto': ['Producto A', 'Producto B', 'Producto C', 'Producto D', 'Producto E'],
+    'Ventas': [450, 320, 280, 190, 150]
 })
 
-df_mensual = pd.DataFrame({
-    'Mes': ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun'],
-    'Ingresos': [45000, 48000, 52000, 49000, 55000, 61000]
+# Datos para scatter
+df_clientes = pd.DataFrame({
+    'Edad': [25, 32, 28, 45, 38, 29, 51, 42, 35, 30],
+    'Gasto': [120, 200, 150, 300, 250, 180, 400, 320, 220, 160],
+    'Segmento': ['Joven', 'Adulto', 'Joven', 'Senior', 'Adulto', 'Joven', 'Senior', 'Adulto', 'Adulto', 'Joven']
 })
 
-# 2. Gráficos estilo Power BI
-fig_bar = px.bar(df_ventas, x='Categoría', y='Ventas', color='Categoría', 
-                 title="Ventas por Categoría", template="plotly_white")
-fig_line = px.line(df_mensual, x='Mes', y='Ingresos', markers=True, 
-                  title="Evolución de Ingresos", template="plotly_white")
-fig_pie = px.pie(df_ventas, values='Ventas', names='Categoría', hole=0.4,
-                title="Distribución de Ventas")
-
-# 3. Inicializar Dashboard con Estética Power BI
-# Temas: corporate_blue, dark_enterprise, modern_green, void_indigo, glass_ocean, cyberpunk_neon
-dash = HTML(
-    title="Dashboard de Rendimiento Corporativo",
-    theme="corporate_blue", 
+# 2. Configurar el dashboard
+dashboard = HTML(
+    title="📊 Dashboard Ejecutivo - Demo",
+    theme="corporate_blue",  # Temas: corporate_blue, dark_enterprise, modern_green, void_indigo, glass_ocean, cyberpunk_neon
+    cols=12,  # Grid de 12 columnas
+    rows=12,  # 12 filas de altura
+    gap=16,
+    padding=20,
     navbar={
-        "title": "BI Analytics",
+        "title": "📈 ViewX PRO",
         "items": [
-            {"label": "Global", "link": "#"},
+            {"label": "Inicio", "link": "#"},
             {"label": "Ventas", "link": "#"},
+            {"label": "Clientes", "link": "#"},
             {"label": "Reportes", "link": "#"}
         ]
     }
 )
 
-# 4. Añadir Componentes usando el sistema de slot_grid original
-# slot_grid = (fila_inicio, columna_inicio, filas_que_ocupa, columnas_que_ocupa)
-
-# Fila superior: KPIs
-dash.add_valuebox("Ingresos Totales", "$310K", icon="💰", slot_grid=(1, 1, 2, 3))
-dash.add_valuebox("Crecimiento", "+12.5%", icon="📈", color="#107C10", slot_grid=(1, 4, 2, 3))
-dash.add_valuebox("Clientes Activos", "1,452", icon="👥", color="#0078D4", slot_grid=(1, 7, 2, 3))
-dash.add_valuebox("Tasa de Conversión", "4.2%", icon="🎯", color="#E63946", slot_grid=(1, 10, 2, 3))
-
-# Fila central: Gráficos principales
-dash.add_plot(fig_line, title="Tendencia Mensual", slot_grid=(3, 1, 5, 8))
-dash.add_plot(fig_pie, title="Mix de Productos", slot_grid=(3, 9, 5, 4))
-
-# Fila inferior: Tabla y Texto
-dash.add_table(df_ventas, title="Detalle de Categorías", slot_grid=(8, 1, 5, 7))
-dash.add_text("""
-    <h3>Resumen de Insights</h3>
-    <p>El segmento de <b>Moda</b> lidera las ventas con un margen saludable del 18%.</p>
-    <p>Se observa un crecimiento sostenido en los ingresos mensuales, alcanzando un pico en <b>Junio</b>.</p>
-    <p><i>Recomendación:</i> Aumentar stock en la categoría 'Hogar' debido al incremento de demanda previsto.</p>
-""", slot_grid=(8, 8, 5, 5))
-
-# 5. Generar Dashboard
-output = dash.generate("powerbi_dashboard_pro.html")
-print(f"Dashboard profesional generado: {output}")
-
-```
-
-![DashBoardIris](https://raw.githubusercontent.com/GhostAnalyst30/ViewX/main/images_for_git/DashBoard_Example.png
+# 3. Añadir componentes (row, col, height, width)
+# Fila 1: KPIs
+dashboard.add_valuebox("Ventas Totales", "$2.8M", "💰", row=1, col=1, height=2, width=3)
+dashboard.add_valuebox("Beneficio Neto", "$942K", "📈", "#00A86B", row=1, col=4, height=2, width=3)
+dashboard.add_valuebox("Clientes Activos", "1,247", "👥", "#FF6B35", row=1, col=7, height=2, width=3)
+dashboard.add_valuebox("Tasa Conversión", "24.5%", "🎯", "#9B59B6", row=1, col=10, height=2, width=3)
+
+# Fila 2-5: Gráfico de líneas (ventas mensuales) - Método sencillo con datos
+dashboard.add_chart(
+    data=df_ventas,
+    chart_type="line",
+    x="Mes",
+    y="Ventas",
+    title="📈 Evolución de Ventas 2024",
+    row=3, col=1, height=10, width=6
 )
 
-### Crear un DashBoard
-```python
-from viewx.DashBoard import DashBoard
-from viewx.datasets import load_dataset
-
-df = load_dataset("iris.csv")
-
-db = DashBoard(df, title="StreamOps: Mini Dashboard", title_align="center")
-db.set_theme(background="#071021", text="#E9F6F2", primary="#19D3A3", card="#0b1620")
-# Sidebar
-db.add_sidebar(db.comp_text("Parámetros del reporte"))
-db.add_sidebar(db.comp_metric("Longitud del dataset", df.shape[0]))
-db.add_sidebar(db.comp_metric("Cantidad de Flores", df["species"].unique().shape[0]))
-# Main layout
-db.add_blank()
-db.add_row(
-    col_widths=[1, 2, 1],
-    components=[
-        db.comp_blank(),
-        db.comp_plot(x="sepal_length", y="sepal_width", kind="scatter", color="#FFB86B"),
-        db.comp_metric("sepal_width", df["sepal_width"].sum(), delta="▲ 5%")
-    ]
+# Fila 2-5: Gráfico de barras (productos) - Otro ejemplo sencillo
+dashboard.add_chart(
+    data=df_productos,
+    chart_type="bar",
+    x="Producto",
+    y="Ventas",
+    title="🏷️ Ventas por Producto",
+    row=3, col=7, height=10, width=6
 )
 
-db.add_tabs({
-    "Overview": [
-        db.comp_title("Resumen por Región"),
-        db.comp_table()
-    ],
-    "Details": [
-        db.comp_title("Distribución de Flores"),
-        db.comp_plot(x="species", y=None, kind="hist", color="#7C4DFF")
-    ]
-})
+# 4. Generar el archivo
+dashboard.generate("mi_dashboard.html")
 
-db.add_expander("Detalles técnicos", [
-    db.comp_text("Este panel fue generado automáticamente."),
-    db.comp_text("Metadata: filas=" + str(len(df)), size="12px")
-], expanded=True)
-
-db.run(open_browser=True)   
 ```
 
-![DashBoard Streamlit](https://raw.githubusercontent.com/GhostAnalyst30/ViewX/main/images_for_git/DashBoard_Streamlit_1.png)
+![DashBoardViewX](https://raw.githubusercontent.com/GhostAnalyst30/ViewX/main/images_for_git/DashBoard_Example.png
+)
 
 ### Crear una Presentacion
 
@@ -441,10 +401,10 @@ report_path = dm.generate_report("demo_datamatrix_report.html", title="Análisis
 print(f"Reporte generado exitosamente en: {report_path}")
 ```
 
-## 🤝 Contribuciones
+## Contribuciones
 
 ¡Todas las ideas, mejoras y plantillas son bienvenidas!
 ViewX está diseñado para crecer y evolucionar con la comunidad.
 
-## 📬 Contacto:
+## Contacto:
 ascendraemmanuel@gmail.com

{viewx-0.2.0 → viewx-0.2.2}/README.md

@@ -1,4 +1,4 @@
-# 📦 ViewX — v2.0
+# ViewX — v2.2
 
 **ViewX** es un paquete moderno de Python diseñado para generar **páginas HTML interactivas**, **dashboards dinámicos** y **visualizaciones inteligentes** que se adaptan automáticamente a los objetos agregados por el usuario.
 
@@ -6,15 +6,14 @@ Este proyecto ofrece una solución **ligera, intuitiva y escalable**, ideal para
 
 ---
 
-## ✨ Características principales
+## Características principales
 
-- ⚡ **Rápido y minimalista**: cero dependencias pesadas por defecto.  
-- 🧩 **API intuitiva**: crea páginas y dashboards en segundos.  
-- 📐 **Diseño adaptativo**: cada componente se acomoda automáticamente.  
-- 🌐 **Modo HTML**: genera páginas `.html` totalmente autónomas.  
-- 📊 **Modo Dashboard**: plantillas escalables con soporte opcional para Streamlit/Dash.  
-- 🛠️ **Extensible**: añade tus propias plantillas y módulos personalizados.  
-- 🔮 **Visión a futuro**: pensado para expandirse a interfaces inteligentes.
+- **Rápido y minimalista**: cero dependencias pesadas por defecto.  
+- **API intuitiva**: crea páginas y dashboards en segundos.  
+- **Diseño adaptativo**: cada componente se acomoda automáticamente.  
+- **Modo HTML**: genera páginas `.html` totalmente autónomas.  
+- **Extensible**: añade tus propias plantillas y módulos personalizados.  
+- **Visión a futuro**: pensado para expandirse a interfaces inteligentes.
 
 ---
 
@@ -23,125 +22,87 @@ Este proyecto ofrece una solución **ligera, intuitiva y escalable**, ideal para
 pip install viewx
 ```
 
-## 🚀 Ejemplo rápido
+## Ejemplo rápido
 
 ### Crear una página HTML
 ```python
 import pandas as pd
-import numpy as np
-import plotly.express as px
 from viewx.HTML import HTML
 
-# 1. Datos de ejemplo (Ventas por Categoría y Región)
+# 1. Crear datos de ejemplo
 df_ventas = pd.DataFrame({
-    'Categoría': ['Electrónica', 'Hogar', 'Moda', 'Deportes', 'Juguetes'],
-    'Ventas': [12500, 8400, 15200, 6700, 4300],
-    'Margen': [0.15, 0.22, 0.18, 0.12, 0.25]
+    'Mes': ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
+    'Ventas': [120, 135, 148, 170, 195, 210, 245, 268, 290, 310, 335, 400],
+    'Beneficio': [30, 35, 42, 51, 58, 63, 73, 80, 87, 93, 100, 120],
+    'Clientes': [45, 48, 52, 58, 65, 72, 80, 88, 95, 102, 110, 125]
+})
+
+# Datos para gráfico de barras
+df_productos = pd.DataFrame({
+    'Producto': ['Producto A', 'Producto B', 'Producto C', 'Producto D', 'Producto E'],
+    'Ventas': [450, 320, 280, 190, 150]
 })
 
-df_mensual = pd.DataFrame({
-    'Mes': ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun'],
-    'Ingresos': [45000, 48000, 52000, 49000, 55000, 61000]
+# Datos para scatter
+df_clientes = pd.DataFrame({
+    'Edad': [25, 32, 28, 45, 38, 29, 51, 42, 35, 30],
+    'Gasto': [120, 200, 150, 300, 250, 180, 400, 320, 220, 160],
+    'Segmento': ['Joven', 'Adulto', 'Joven', 'Senior', 'Adulto', 'Joven', 'Senior', 'Adulto', 'Adulto', 'Joven']
 })
 
-# 2. Gráficos estilo Power BI
-fig_bar = px.bar(df_ventas, x='Categoría', y='Ventas', color='Categoría', 
-                 title="Ventas por Categoría", template="plotly_white")
-fig_line = px.line(df_mensual, x='Mes', y='Ingresos', markers=True, 
-                  title="Evolución de Ingresos", template="plotly_white")
-fig_pie = px.pie(df_ventas, values='Ventas', names='Categoría', hole=0.4,
-                title="Distribución de Ventas")
-
-# 3. Inicializar Dashboard con Estética Power BI
-# Temas: corporate_blue, dark_enterprise, modern_green, void_indigo, glass_ocean, cyberpunk_neon
-dash = HTML(
-    title="Dashboard de Rendimiento Corporativo",
-    theme="corporate_blue", 
+# 2. Configurar el dashboard
+dashboard = HTML(
+    title="📊 Dashboard Ejecutivo - Demo",
+    theme="corporate_blue",  # Temas: corporate_blue, dark_enterprise, modern_green, void_indigo, glass_ocean, cyberpunk_neon
+    cols=12,  # Grid de 12 columnas
+    rows=12,  # 12 filas de altura
+    gap=16,
+    padding=20,
     navbar={
-        "title": "BI Analytics",
+        "title": "📈 ViewX PRO",
         "items": [
-            {"label": "Global", "link": "#"},
+            {"label": "Inicio", "link": "#"},
             {"label": "Ventas", "link": "#"},
+            {"label": "Clientes", "link": "#"},
             {"label": "Reportes", "link": "#"}
         ]
     }
 )
 
-# 4. Añadir Componentes usando el sistema de slot_grid original
-# slot_grid = (fila_inicio, columna_inicio, filas_que_ocupa, columnas_que_ocupa)
-
-# Fila superior: KPIs
-dash.add_valuebox("Ingresos Totales", "$310K", icon="💰", slot_grid=(1, 1, 2, 3))
-dash.add_valuebox("Crecimiento", "+12.5%", icon="📈", color="#107C10", slot_grid=(1, 4, 2, 3))
-dash.add_valuebox("Clientes Activos", "1,452", icon="👥", color="#0078D4", slot_grid=(1, 7, 2, 3))
-dash.add_valuebox("Tasa de Conversión", "4.2%", icon="🎯", color="#E63946", slot_grid=(1, 10, 2, 3))
-
-# Fila central: Gráficos principales
-dash.add_plot(fig_line, title="Tendencia Mensual", slot_grid=(3, 1, 5, 8))
-dash.add_plot(fig_pie, title="Mix de Productos", slot_grid=(3, 9, 5, 4))
-
-# Fila inferior: Tabla y Texto
-dash.add_table(df_ventas, title="Detalle de Categorías", slot_grid=(8, 1, 5, 7))
-dash.add_text("""
-    <h3>Resumen de Insights</h3>
-    <p>El segmento de <b>Moda</b> lidera las ventas con un margen saludable del 18%.</p>
-    <p>Se observa un crecimiento sostenido en los ingresos mensuales, alcanzando un pico en <b>Junio</b>.</p>
-    <p><i>Recomendación:</i> Aumentar stock en la categoría 'Hogar' debido al incremento de demanda previsto.</p>
-""", slot_grid=(8, 8, 5, 5))
-
-# 5. Generar Dashboard
-output = dash.generate("powerbi_dashboard_pro.html")
-print(f"Dashboard profesional generado: {output}")
-
-```
-
-![DashBoardIris](https://raw.githubusercontent.com/GhostAnalyst30/ViewX/main/images_for_git/DashBoard_Example.png
+# 3. Añadir componentes (row, col, height, width)
+# Fila 1: KPIs
+dashboard.add_valuebox("Ventas Totales", "$2.8M", "💰", row=1, col=1, height=2, width=3)
+dashboard.add_valuebox("Beneficio Neto", "$942K", "📈", "#00A86B", row=1, col=4, height=2, width=3)
+dashboard.add_valuebox("Clientes Activos", "1,247", "👥", "#FF6B35", row=1, col=7, height=2, width=3)
+dashboard.add_valuebox("Tasa Conversión", "24.5%", "🎯", "#9B59B6", row=1, col=10, height=2, width=3)
+
+# Fila 2-5: Gráfico de líneas (ventas mensuales) - Método sencillo con datos
+dashboard.add_chart(
+    data=df_ventas,
+    chart_type="line",
+    x="Mes",
+    y="Ventas",
+    title="📈 Evolución de Ventas 2024",
+    row=3, col=1, height=10, width=6
 )
 
-### Crear un DashBoard
-```python
-from viewx.DashBoard import DashBoard
-from viewx.datasets import load_dataset
-
-df = load_dataset("iris.csv")
-
-db = DashBoard(df, title="StreamOps: Mini Dashboard", title_align="center")
-db.set_theme(background="#071021", text="#E9F6F2", primary="#19D3A3", card="#0b1620")
-# Sidebar
-db.add_sidebar(db.comp_text("Parámetros del reporte"))
-db.add_sidebar(db.comp_metric("Longitud del dataset", df.shape[0]))
-db.add_sidebar(db.comp_metric("Cantidad de Flores", df["species"].unique().shape[0]))
-# Main layout
-db.add_blank()
-db.add_row(
-    col_widths=[1, 2, 1],
-    components=[
-        db.comp_blank(),
-        db.comp_plot(x="sepal_length", y="sepal_width", kind="scatter", color="#FFB86B"),
-        db.comp_metric("sepal_width", df["sepal_width"].sum(), delta="▲ 5%")
-    ]
+# Fila 2-5: Gráfico de barras (productos) - Otro ejemplo sencillo
+dashboard.add_chart(
+    data=df_productos,
+    chart_type="bar",
+    x="Producto",
+    y="Ventas",
+    title="🏷️ Ventas por Producto",
+    row=3, col=7, height=10, width=6
 )
 
-db.add_tabs({
-    "Overview": [
-        db.comp_title("Resumen por Región"),
-        db.comp_table()
-    ],
-    "Details": [
-        db.comp_title("Distribución de Flores"),
-        db.comp_plot(x="species", y=None, kind="hist", color="#7C4DFF")
-    ]
-})
+# 4. Generar el archivo
+dashboard.generate("mi_dashboard.html")
 
-db.add_expander("Detalles técnicos", [
-    db.comp_text("Este panel fue generado automáticamente."),
-    db.comp_text("Metadata: filas=" + str(len(df)), size="12px")
-], expanded=True)
-
-db.run(open_browser=True)   
 ```
 
-![DashBoard Streamlit](https://raw.githubusercontent.com/GhostAnalyst30/ViewX/main/images_for_git/DashBoard_Streamlit_1.png)
+![DashBoardViewX](https://raw.githubusercontent.com/GhostAnalyst30/ViewX/main/images_for_git/DashBoard_Example.png
+)
 
 ### Crear una Presentacion
 
@@ -386,10 +347,10 @@ report_path = dm.generate_report("demo_datamatrix_report.html", title="Análisis
 print(f"Reporte generado exitosamente en: {report_path}")
 ```
 
-## 🤝 Contribuciones
+## Contribuciones
 
 ¡Todas las ideas, mejoras y plantillas son bienvenidas!
 ViewX está diseñado para crecer y evolucionar con la comunidad.
 
-## 📬 Contacto:
+## Contacto:
 ascendraemmanuel@gmail.com

{viewx-0.2.0 → viewx-0.2.2}/setup.py

@@ -9,7 +9,7 @@ except FileNotFoundError:
 
 setup(
     name="viewx",
-    version="0.2.0",
+    version="0.2.2",
     author="Emmanuel Ascendra Perez",
     author_email="ascendraemmanuel@gmail.com",
     description="Librería de visualización adaptable para HTML, Dashboards y PDFs en Python",
@@ -48,8 +48,7 @@ setup(
         "pylatex>=1.4.2",  # Para PDFs
         "seaborn>=0.12.2",
         "plotly>=6.0.0",
-        "streamlit>=1.32.0",
-        "statslibx >= 0.2.2"
+        "streamlit>=1.32.0"
     ],
 
     # Dependencias opcionales

viewx-0.2.2/tests/test1.py

@@ -0,0 +1,150 @@
+import pandas as pd
+import numpy as np
+from datetime import datetime, timedelta
+from viewx.HTML.html_engine import HTML
+
+# ── Generar datos de demo ────────────────────────────────────────────────────
+np.random.seed(42)
+n = 200
+
+fechas    = [datetime(2024, 1, 1) + timedelta(days=i) for i in range(n)]
+regiones  = np.random.choice(["Norte", "Sur", "Este", "Oeste", "Centro"], n)
+productos = np.random.choice(["Laptop", "Tablet", "Phone", "Monitor", "Teclado"], n)
+ventas    = np.random.randint(500, 10000, n)
+utilidad  = ventas * np.random.uniform(0.1, 0.4, n)
+unidades  = np.random.randint(1, 50, n)
+activo    = np.random.choice([True, False], n)
+
+df = pd.DataFrame({
+    "fecha"    : fechas,
+    "region"   : regiones,
+    "producto" : productos,
+    "ventas"   : ventas,
+    "utilidad" : utilidad.astype(int),
+    "unidades" : unidades,
+    "activo"   : activo,
+})
+
+print("Columnas disponibles:", df.columns.tolist())
+print(df.head(3))
+
+# ════════════════════════════════════════════════════════════════════════════
+# DEMO 1 — Layout automático, tema por defecto
+# ════════════════════════════════════════════════════════════════════════════
+HTML.auto_generate(
+    df,
+    title    = "Demo 1 · Auto Layout",
+    filename = "demo1_auto.html",
+)
+
+# ════════════════════════════════════════════════════════════════════════════
+# DEMO 2 — Solo algunas columnas + tema oscuro
+# ════════════════════════════════════════════════════════════════════════════
+HTML.auto_generate(
+    df,
+    columns  = ["fecha", "ventas", "utilidad", "region"],
+    template = "dark_enterprise",
+    title    = "Demo 2 · Columnas seleccionadas",
+    filename = "demo2_cols.html",
+    authors  = [
+        {"name": "Ana García",  "email": "ana@empresa.com"},
+        {"name": "Luis Torres", "email": "luis@empresa.com"},
+    ]
+)
+
+# ════════════════════════════════════════════════════════════════════════════
+# DEMO 3 — Preset kpi_focus + tema void_indigo
+# ════════════════════════════════════════════════════════════════════════════
+HTML.auto_generate(
+    df,
+    columns  = ["ventas", "utilidad", "unidades", "region", "producto"],
+    template = "void_indigo",
+    title    = "Demo 3 · KPI Focus",
+    filename = "demo3_kpi_focus.html",
+    layout   = "kpi_focus",
+    authors  = "Carlos Méndez",
+)
+
+# ════════════════════════════════════════════════════════════════════════════
+# DEMO 4 — Preset chart_focus + tema glass_ocean
+# ════════════════════════════════════════════════════════════════════════════
+HTML.auto_generate(
+    df,
+    columns  = ["fecha", "ventas", "utilidad", "region"],
+    template = "glass_ocean",
+    title    = "Demo 4 · Chart Focus",
+    filename = "demo4_chart_focus.html",
+    layout   = "chart_focus",
+)
+
+# ════════════════════════════════════════════════════════════════════════════
+# DEMO 5 — Preset table_first + tema cyberpunk_neon
+# ════════════════════════════════════════════════════════════════════════════
+HTML.auto_generate(
+    df,
+    columns  = ["fecha", "region", "producto", "ventas", "unidades"],
+    template = "cyberpunk_neon",
+    title    = "Demo 5 · Table First",
+    filename = "demo5_table_first.html",
+    layout   = "table_first",
+)
+
+# ════════════════════════════════════════════════════════════════════════════
+# DEMO 6 — Layout 100% personalizado
+#   Diseño:
+#   [KPI ventas] [KPI utilidad] [KPI unidades] | [Chart barras región]
+#   [Chart línea temporal (ventas)            ] | [Chart scatter        ]
+#   [Tabla completa                                                      ]
+# ════════════════════════════════════════════════════════════════════════════
+HTML.auto_generate(
+    df,
+    columns  = ["fecha", "region", "ventas", "utilidad", "unidades"],
+    template = "modern_green",
+    title    = "Demo 6 · Layout Personalizado",
+    filename = "demo6_custom.html",
+    authors  = [{"name": "Equipo BI", "email": "bi@empresa.com"}],
+    layout   = [
+        # Fila 1: 3 KPIs a la izquierda + 1 chart a la derecha
+        {"type": "kpi",   "index": 0, "row": 1, "col": 1,  "height": 2, "width": 3},
+        {"type": "kpi",   "index": 1, "row": 1, "col": 4,  "height": 2, "width": 3},
+        {"type": "kpi",   "index": 2, "row": 1, "col": 7,  "height": 2, "width": 3},
+        {"type": "chart", "index": 1, "row": 1, "col": 10, "height": 7, "width": 3},  # barras región
+
+        # Fila 2: línea temporal grande + scatter
+        {"type": "chart", "index": 0, "row": 3, "col": 1,  "height": 5, "width": 6},  # línea tiempo
+        {"type": "chart", "index": 2, "row": 3, "col": 7,  "height": 5, "width": 3},  # scatter
+
+        # Fila 3: tabla completa
+        {"type": "table",             "row": 8, "col": 1,  "height": 4, "width": 12},
+    ]
+)
+
+# ════════════════════════════════════════════════════════════════════════════
+# DEMO 7 — DataFrame con strings numéricos (prueba parseo automático)
+# ════════════════════════════════════════════════════════════════════════════
+df_strings = pd.DataFrame({
+    "mes"      : ["Ene", "Feb", "Mar", "Abr", "May", "Jun"],
+    "ingresos" : ["$12,500", "$9,800", "$15,200", "$11,000", "$18,400", "$14,700"],
+    "costos"   : ["8500",    "7200",   "9800",    "8100",    "12000",   "10500"],
+    "margen%"  : ["32%",     "27%",    "36%",     "26%",     "35%",     "29%"],
+    "ciudad"   : ["Bogotá",  "Medellín","Cali",   "Bogotá",  "Cali",    "Medellín"],
+})
+
+HTML.auto_generate(
+    df_strings,
+    template = "corporate_blue",
+    title    = "Demo 7 · Parseo Automático de Strings",
+    filename = "demo7_parseo.html",
+)
+
+print("\n✅ Todos los dashboards generados:")
+for i, name in enumerate([
+    "demo1_auto.html",
+    "demo2_cols.html",
+    "demo3_kpi_focus.html",
+    "demo4_chart_focus.html",
+    "demo5_table_first.html",
+    "demo6_custom.html",
+    "demo7_parseo.html",
+], 1):
+    print(f"   {i}. {name}")