ViewX / HTML Dashboard

HTML Dashboard

Constructor de dashboards interactivos con Plotly. Sistema de grid CSS responsive, 6 temas profesionales integrados, y componentes como valueboxes, infoboxes, graficos y tablas.

Descripcion general

La clase HTML permite crear dashboards complejos de forma programatica. Caracteristicas principales:

  • Grid CSS de 12 columnas configurable
  • 6 temas profesionales + soporte para temas custom
  • Valueboxes con iconos SVG (Heroicons)
  • Infoboxes con estadisticas automaticas
  • Graficos Plotly interactivos con boton info
  • Boton flotante para preview de datos

Temas disponibles

ViewX incluye 6 temas profesionales listos para usar:

Corporate Blue
ID: 0
Dark Enterprise
ID: 1
Modern Green
ID: 2
Void Indigo
ID: 3
Glass Ocean
ID: 4
Cyberpunk Neon
ID: 5

Inicio rapido

Python 
from viewx import HTML
import plotly.express as px
import pandas as pd

df = pd.DataFrame({"mes": [1,2,3,4], "ventas": [100,150,130,180]})
fig = px.line(df, x="mes", y="ventas")

# Crear dashboard
dash = HTML(
    title="Dashboard Ventas",
    theme="dark_enterprise",  # o ID: 1
    cols=12,
    rows=8
)

# Agregar componentes
dash.add_valuebox("Total Ventas", "$560K", icon_key="dollar", row=1, col=1, height=2, width=3)
dash.add_valuebox("Clientes", "1,234", icon_key="users", row=1, col=4, height=2, width=3)
dash.add_chart(fig, title="Tendencia", row=3, col=1, height=5, width=12)

# Generar HTML
dash.generate("dashboard.html")

ThemeManager

ThemeManager(theme: int | str | dict)
Gestor de temas que soporta temas integrados por nombre o ID, y temas custom como diccionario.
theme int | str | dict - Nombre ("corporate_blue"), ID (0), o diccionario custom
Python 
# Tema custom
custom = {
    "bg_page": "#0D0D0D",
    "bg_card": "#1A1A2E",
    "accent": "#E94560",
    "text_primary": "#EAEAEA",
    "text_secondary": "#888888",
    "chart_colors": ["#E94560", "#00D4FF", "#FFD166"]
}
dash = HTML(title="Mi Dashboard", theme=custom)

Constructor HTML

HTML(title, theme, cols, rows, gap, padding, navbar, authors, data_button, df)
Inicializa el constructor de dashboards con la configuracion del grid y tema.
title str - Titulo del dashboard
theme int | str | dict - Tema a usar
cols int, default=12 - Columnas del grid
rows int, default=12 - Filas del grid
gap int, default=16 - Espacio entre celdas (px)
data_button bool, default=False - Mostrar boton flotante de datos
df pd.DataFrame, optional - DataFrame para preview

add_valuebox()

add_valuebox(title, value, icon_key, color, row, col, height, width)
Agrega una caja de valor destacado con icono SVG. Ideal para KPIs y metricas principales.
title str - Etiqueta del KPI
value any - Valor a mostrar
icon_key str - Clave del icono (chart-bar, trending-up, dollar, hash, target, zap, users, activity, percent, clock)
row, col int - Posicion en el grid
height, width int - Tamano en celdas del grid

add_infobox()

add_infobox(df, variable, info, title, color, row, col, height, width)
Caja con multiples estadisticas para una variable. Calcula automaticamente mean, median, std, min, max, q1, q3, etc.
df pd.DataFrame - DataFrame con los datos
variable str - Nombre de la columna
info list[str], optional - Estadisticas a mostrar (mean, median, std, min, max, sum, count, kurtosis, skewness, q1, q3, iqr, nulls, nunique)

add_chart()

add_chart(fig, title, row, col, height, width)
Inserta un grafico Plotly interactivo. Incluye automaticamente un boton de info que abre un modal con detalles.
fig plotly.graph_objects.Figure - Figura de Plotly
title str - Titulo del grafico

add_table()

add_table(df, title, row, col, height, width)
Renderiza un DataFrame como tabla HTML estilizada con scroll.

add_text()

add_text(content, title, row, col, height, width)
Agrega una tarjeta de texto con titulo opcional. Soporta HTML basico.

generate()

generate(filename="dashboard.html")
Exporta el dashboard como archivo HTML autocontenido.

auto_generate()

auto_generate(df, title, theme, filename) → str
Funcion standalone que genera automaticamente un dashboard completo a partir de un DataFrame. Detecta tipos de columnas, genera KPIs, graficos y tablas de forma inteligente.
df pd.DataFrame - DataFrame a visualizar
title str - Titulo del dashboard
theme int | str | dict - Tema a usar
filename str - Ruta del archivo de salida
Python 
from viewx import HTML
from viewx.datasets import load_dataset

df = load_dataset("iris")
HTML.auto_generate(
    df,
    title="Iris Dashboard",
    template="glass_ocean",
    filename="iris_dash.html",
    layout="chart_focus",
    show=False,
)