Data Visualization
Sistema visual para dashboards: scorecards, gráficos, tablas y filtros. Toda la data se expresa en azules; los pastel semánticos comunican estado.
Tarjetas de métrica clave
KPI cards para vistazo rápido. Estructura fija: ícono + label, valor dominante, delta vs período anterior y sparkline de tendencia.
Barra de filtros
Persistente sobre el contenido. Combina búsqueda libre, chips desplegables y acciones secundarias. Siempre visible el rango de fechas.
Gráficos del sistema
Cuatro tipos cubren el 90% de los casos: línea (tendencia), barra (comparación), área (volumen) y dona (proporción). Trazos finos, rejilla suave, etiquetas claras.
Tabla de datos
Filas con altura cómoda, columnas alineadas según tipo de dato (texto izquierda, números derecha). Estados con badges pastel. Encabezados ordenables.
| SKU | Producto | Categoría | Stock | Ventas | Var. % | Estado |
|---|---|---|---|---|---|---|
| FT-00421 | Acetaminofén 500mg x100 | OTC | 1,240 | 8,420 | 12.4% | Activo |
| FT-01188 | Ibuprofeno 400mg x20 | OTC | 320 | 6,210 | 8.1% | Activo |
| FT-02093 | Loratadina 10mg x10 | Rx | 28 | 4,120 | 3.2% | Bajo stock |
| FT-03311 | Vitamina C 1g x30 | Cuidado | 0 | 3,890 | 18.5% | Agotado |
| FT-04510 | Crema hidratante 200ml | Belleza | 612 | 2,980 | 22.7% | Activo |
| FT-05022 | Pañal etapa 3 x40 | Bebé | 845 | 2,640 | 4.3% | Activo |
Métricas comparativas inline
Mezcla cifras y barras proporcionales en la misma fila. Útil para comparar múltiples KPIs por categoría sin abrir un dashboard completo. Cada columna escala independientemente a su propio máximo.
| Categoría | Impresiones | Alcance | Likes | Guardados | Comentarios |
|---|---|---|---|---|---|
| OTC | 220,571 | 132,654 | 1,662 | 130 | 6 |
| Rx | 185,835 | 124,974 | 0 | 744 | 2,965 |
| Cuidado | 182,721 | 103,183 | 4,971 | 6,936 | 35 |
| Belleza | 175,646 | 90,620 | 4,293 | 1,678 | 193 |
| Bebé | 142,310 | 78,420 | 2,104 | 980 | 88 |
| Hogar | 96,420 | 54,210 | 820 | 412 | 22 |
Texto descriptivo con datos embebidos
Resúmenes en lenguaje natural que combinan prosa con cápsulas de datos, métricas y enlaces. Sirven como insight inicial sobre un dashboard o como cierre interpretativo bajo un gráfico.
En los últimos 30 días se registraron 32 movimientos (+45% vs. período anterior). Hay 4 pendientes — ir a aprobaciones . La aprobación tarda en promedio 70h desde su creación. Ruta más frecuente: VE-061 CO-104 (10 traslados).
Las ventas del mes en curso alcanzan $ 4.82M, un +12.4% sobre el mes anterior. La categoría líder es OTC con $ 1.6M. El 3.2% del catálogo está en stock crítico — revisar inventario .
InsightEl canal App creció +28% mientras que Tienda se mantuvo estable (+1.2%). Recomendamos reforzar pauta digital en Bogotá y Medellín.
- →Máximo 1 párrafo: si el insight necesita más, úsa una tabla o un gráfico.
- →Las cápsulas envuelven solo datos: cifras, períodos, dimensiones, códigos. Nunca verbos ni conectores.
- →Una variante por significado: no mezcles alert y danger en el mismo bloque sin razón.
- →Los enlaces son acción concreta (ir a, revisar, exportar), no decoración.
Principios de visualización
Cada visualización responde a una sola pregunta. Si necesitas dos respuestas, divide en dos gráficos.
La paleta azul ordena las series. Los pastel semánticos sólo aparecen para indicar éxito, atención, alerta o error.
Líneas de rejilla sólo horizontales y al 10% de opacidad. Sin bordes en ejes. Sin fondos opacos en tooltips.
11–12px en ejes, mono para números. Nunca rotar etiquetas más de 0°: si no caben, agrupa o reduce categorías.
Barras y tablas ordenadas por valor descendente por defecto, salvo cuando el orden temporal o alfabético sea esencial.
Distingue entre dato cero y dato faltante. Usa guion (—) para faltante y nunca un 0 que pueda inducir a error.