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.
Meta vs. progreso
Variante de scorecard para objetivos cuantificables: valor actual, meta, % de cumplimiento, delta absoluto y barra de progreso con marcador de 100% y zona de sobre-cumplimiento hasta 120%. El color comunica si va por delante, cerca o por debajo de la meta.
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.
Espaciado y jerarquía de los data labels
Toda visualización del sistema lleva etiquetas sobre los puntos clave. El valor explícito reduce la carga del eje y acelera la lectura. Para mantener consistencia, usa siempre los mismos tokens de offset, tipografía y color definidos abajo.
- ·Etiqueta siempre la serie principal del chart.
- ·Mantén el offset igual entre charts del mismo dashboard.
- ·Formatea grandes números (1.2k, 3.4M) — más corto = menos colisión.
- ·Aumenta el margin del chart en proporción al offset.
- ·Etiquetas dentro de la barra cuando el contraste es bajo.
- ·Mostrar todas las series cuando hay 3+ líneas que se cruzan.
- ·Usar font-size ≠ 11px o tipografía display.
- ·Decimales innecesarios: “12.000” en vez de “12k”.
Cuando hay muchos puntos, no apilamos texto
En charts densos, mostrar todas las etiquetas las hace ilegibles. La regla del sistema: comparamos cajas de cada label, y cuando dos se solapan, el de mayor valor gana. El perdedor primero intenta encogerse (font −2, offset −4) y, si aún colisiona, se oculta. Tooltip + eje siguen disponibles para los puntos sin etiqueta.
- ·Prioridad: el label con mayor valor siempre gana.
- ·Encogimiento previo: font −2px, offset −4px antes de ocultar.
- ·Min-gap configurable (default 4px) entre cajas.
- ·Tooltip y dots se mantienen aunque el texto desaparezca.
Sólo principal + delta del comparativo
Cuando hay 2+ líneas, etiquetar todas duplica el ruido. Regla del sistema: se etiqueta sólo la serie principal y se acompaña con una pastilla pequeña que muestra la diferencia (Δ) frente al comparativo. La pastilla es verde si supera, roja si está por debajo, gris si igualan. El comparativo se mantiene como línea punteada sin texto.
- ·La principal lleva la jerarquía visual (peso 600, color deep).
- ·El comparativo nunca se etiqueta — sólo línea punteada con opacity reducida.
- ·La pastilla Δ se colorea por sentido: verde supera, rojo no llega, gris empate.
- ·Los modos comparten la regla de no-colisión heredada de SmartLabelList.
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 |
| 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 |
| Total | 1,003,503 | 584,061 | 13,850 | 10,880 | 3,309 |
Tabla de datos con búsqueda y filtros
Tabla interactiva con buscador libre, chips de filtro por categoría y estado, y chips activos removibles. Encabezados ordenables por click. Patrón base para cualquier listado operativo.
| SKU | 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 |
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.
Tabla pivote con delta vs. periodo anterior
Cruza dos dimensiones cualquiera contra una métrica agregada. Cada celda muestra el valor y, al lado, la variación porcentual respecto a la columna anterior — verde sube, rojo baja, gris plano. Totales por fila y columna cierran la lectura.
Categoría ↓ filas / → columnas | Trimestre Q1 | Trimestre Q2 | Trimestre Q3 | Trimestre Q4 | Total |
|---|---|---|---|---|---|
| Medicamentos | $248.1M— | $309.1M+24.6% | $310.2M0.0% | $277.5M-10.5% | $1144.9M |
| Vitaminas | $266.1M— | $279.4M+5.0% | $345.1M+23.5% | $278.3M-19.4% | $1168.9M |
| Belleza | $300.5M— | $341.4M+13.6% | $270.1M-20.9% | $241.4M-10.6% | $1153.4M |
| Cuidado | $368.7M— | $207.8M-43.6% | $364.9M+75.6% | $306.0M-16.1% | $1247.4M |
| Bebés | $295.3M— | $320.0M+8.4% | $352.8M+10.2% | $337.7M-4.3% | $1305.9M |
| Total | $1478.8M | $1457.7M | $1643.1M | $1440.9M | $6020.5M |
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.