viewx 0.2.1__tar.gz → 0.2.3__tar.gz

{viewx-0.2.1 → viewx-0.2.3}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: viewx
-Version: 0.2.1
+Version: 0.2.3
 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
@@ -52,7 +52,7 @@ Dynamic: requires-dist
 Dynamic: requires-python
 Dynamic: summary
 
-# 📦 ViewX — v2.1
+# ViewX — v2.3
 
 **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.
 
@@ -60,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.
 
 ---
 
@@ -77,132 +76,59 @@ 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
+### Crear un DashBoard HTML
 ```python
-import pandas as pd
-from viewx.HTML import HTML
-
-# 1. Crear datos de ejemplo
-df_ventas = pd.DataFrame({
-    '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]
-})
-
-# 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']
+df = pd.DataFrame({
+    "date": dates, "region": regions, "product": products,
+    "revenue": revenue_str, "costs": costs.round(2),
+    "units": units, "rating": rating, "returned": returned,
 })
-
-# 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": "📈 ViewX PRO",
-        "items": [
-            {"label": "Inicio", "link": "#"},
-            {"label": "Ventas", "link": "#"},
-            {"label": "Clientes", "link": "#"},
-            {"label": "Reportes", "link": "#"}
-        ]
-    }
+df["revenue"] = pd.to_numeric(
+    df["revenue"].str.replace(r"[$,]", "", regex=True), errors="coerce"
 )
 
-# 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
+fig_bar = px.bar(
+    df.groupby("region")["revenue"].sum().reset_index().sort_values("revenue"),
+    x="revenue", y="region", orientation="h", color="region",
+    color_discrete_sequence=["#059669", "#10B981", "#34D399", "#6EE7B7"],
 )
+fig_bar.update_layout(showlegend=False)
 
-# 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
+fig_line = px.line(
+    df.groupby("date")["revenue"].sum().reset_index(),
+    x="date", y="revenue", color_discrete_sequence=["#059669"],
 )
 
-# 4. Generar el archivo
-dashboard.generate("mi_dashboard.html")
-
-```
-
-![DashBoardIris](https://raw.githubusercontent.com/GhostAnalyst30/ViewX/main/images_for_git/DashBoard_Example.png
+dash = HTML(
+    title="Manual Dashboard", theme="modern_green",
+    cols=12, rows=9, gap=14, padding=20,
+    navbar={"title": "Manual Dashboard",
+            "items": [{"label": "Home", "link": "#"}, {"label": "Analytics", "link": "#"}]},
+    authors=[{"name": "Data Team", "email": "data@acme.com"}],
+    data_button=True, df=df,
 )
 
-### 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%")
-    ]
-)
-
-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")
-    ]
-})
-
-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)   
+dash.add_valuebox("Total Revenue", "$2.4M",  icon_key="dollar",  row=1, col=1,  height=2, width=3)
+dash.add_valuebox("Total Units",   "18.4K",  icon_key="box",     row=1, col=4,  height=2, width=3)
+dash.add_valuebox("Avg Rating",    "4.12",   icon_key="award",   row=1, col=7,  height=2, width=3)
+dash.add_valuebox("Return Rate",   "12%",    icon_key="percent", row=1, col=10, height=2, width=3)
+
+dash.add_infobox(df=df, variable="revenue",
+    info=["mean", "median", "std", "min", "max", "kurtosis", "skewness", "nulls"],
+    title="Revenue Stats", row=3, col=1, height=4, width=3)
+dash.add_chart(fig=fig_bar, title="Revenue by Region",
+    row=3, col=4, height=4, width=9, show_info_btn=True,
+    _info_stats={"Regions": "4", "Total": "$2.4M"})
+dash.add_chart(fig=fig_line, title="Daily Revenue Trend",
+    row=7, col=1, height=3, width=12, show_info_btn=True)
+
+dash.generate("demo6_manual.html")
 ```
 
-![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
 
@@ -447,10 +373,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.1 → viewx-0.2.3}/README.md

@@ -1,4 +1,4 @@
-# 📦 ViewX — v2.1
+# ViewX — v2.3
 
 **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,132 +22,59 @@ 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
+### Crear un DashBoard HTML
 ```python
-import pandas as pd
-from viewx.HTML import HTML
-
-# 1. Crear datos de ejemplo
-df_ventas = pd.DataFrame({
-    '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]
-})
-
-# 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']
+df = pd.DataFrame({
+    "date": dates, "region": regions, "product": products,
+    "revenue": revenue_str, "costs": costs.round(2),
+    "units": units, "rating": rating, "returned": returned,
 })
-
-# 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": "📈 ViewX PRO",
-        "items": [
-            {"label": "Inicio", "link": "#"},
-            {"label": "Ventas", "link": "#"},
-            {"label": "Clientes", "link": "#"},
-            {"label": "Reportes", "link": "#"}
-        ]
-    }
+df["revenue"] = pd.to_numeric(
+    df["revenue"].str.replace(r"[$,]", "", regex=True), errors="coerce"
 )
 
-# 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
+fig_bar = px.bar(
+    df.groupby("region")["revenue"].sum().reset_index().sort_values("revenue"),
+    x="revenue", y="region", orientation="h", color="region",
+    color_discrete_sequence=["#059669", "#10B981", "#34D399", "#6EE7B7"],
 )
+fig_bar.update_layout(showlegend=False)
 
-# 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
+fig_line = px.line(
+    df.groupby("date")["revenue"].sum().reset_index(),
+    x="date", y="revenue", color_discrete_sequence=["#059669"],
 )
 
-# 4. Generar el archivo
-dashboard.generate("mi_dashboard.html")
-
-```
-
-![DashBoardIris](https://raw.githubusercontent.com/GhostAnalyst30/ViewX/main/images_for_git/DashBoard_Example.png
+dash = HTML(
+    title="Manual Dashboard", theme="modern_green",
+    cols=12, rows=9, gap=14, padding=20,
+    navbar={"title": "Manual Dashboard",
+            "items": [{"label": "Home", "link": "#"}, {"label": "Analytics", "link": "#"}]},
+    authors=[{"name": "Data Team", "email": "data@acme.com"}],
+    data_button=True, df=df,
 )
 
-### 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%")
-    ]
-)
-
-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")
-    ]
-})
-
-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)   
+dash.add_valuebox("Total Revenue", "$2.4M",  icon_key="dollar",  row=1, col=1,  height=2, width=3)
+dash.add_valuebox("Total Units",   "18.4K",  icon_key="box",     row=1, col=4,  height=2, width=3)
+dash.add_valuebox("Avg Rating",    "4.12",   icon_key="award",   row=1, col=7,  height=2, width=3)
+dash.add_valuebox("Return Rate",   "12%",    icon_key="percent", row=1, col=10, height=2, width=3)
+
+dash.add_infobox(df=df, variable="revenue",
+    info=["mean", "median", "std", "min", "max", "kurtosis", "skewness", "nulls"],
+    title="Revenue Stats", row=3, col=1, height=4, width=3)
+dash.add_chart(fig=fig_bar, title="Revenue by Region",
+    row=3, col=4, height=4, width=9, show_info_btn=True,
+    _info_stats={"Regions": "4", "Total": "$2.4M"})
+dash.add_chart(fig=fig_line, title="Daily Revenue Trend",
+    row=7, col=1, height=3, width=12, show_info_btn=True)
+
+dash.generate("demo6_manual.html")
 ```
 
-![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
 
@@ -393,10 +319,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.1 → viewx-0.2.3}/setup.py

@@ -9,7 +9,7 @@ except FileNotFoundError:
 
 setup(
     name="viewx",
-    version="0.2.1",
+    version="0.2.3",
     author="Emmanuel Ascendra Perez",
     author_email="ascendraemmanuel@gmail.com",
     description="Librería de visualización adaptable para HTML, Dashboards y PDFs en Python",

viewx-0.2.3/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}")

{viewx-0.2.1 → viewx-0.2.3}/tests/test4.py

@@ -38,7 +38,9 @@ dashboard = HTML(
             {"label": "Clientes", "link": "#"},
             {"label": "Reportes", "link": "#"}
         ]
-    }
+    },
+    authors=[{"name": "Emmanuel Ascendra", "email": "ascendraemmanuel@gmail.com"},
+             {"name": "Juan Perez", "email": "juanperez@gmail.com"}]
 )
 
 # 3. Añadir componentes (row, col, height, width)