Docs / Build Workflow

Tipos de visualization

Un tipo para un propósito

Cada tipo de visualization responde una clase específica de pregunta. Elegir el tipo correcto no es sobre estética — es sobre hacer la respuesta legible a primera vista. Cada tipo tiene su propia página de referencia profunda abajo; cada página enumera exactamente qué campos mapping.* y chart.* lee el renderer, el comportamiento de cross-filter, ejemplos trabajados y notas de diseño.

Todas las visualizations comparten los mismos campos top-level (id, title, query, type, filters, format, published). La configuración por tipo vive en mapping más exactamente uno de: un bloque chart (para tipos basados en ECharts), un bloque type-específico (kpi, grid, matrix) para los tipos basados en DOM, o un body Markdown para la nota text. La nota text es además el único tipo donde query es opcional — una nota sin query es prosa pura.

Tipos soportados

Once tipos se aceptan en el campo type: — exactamente estos tokens, nada más. Nota que report_matrix se escribe con underscore, y no existe un tipo table ni number (una tabla de datos es grid; una cifra única es kpi).

typeBloque de configmapping requeridoClicks de cross-filter
kpikpi, comparisonvalueSolo consumidor — nunca emite
barchartx, series[]Emite la categoría clickeada
linechartx, yEmite el valor x clickeado
piechartx, yEmite la categoría del slice
scatterchartx, yEmite — requiere chart.cross_filter_emit (label/x/series)
heatmapchartx, y, valueEmite — requiere chart.cross_filter_emit (x/y)
funnelchartstage, valueEmite el stage clickeado
sankeychartsource, target, valueEmite — requiere chart.cross_filter_emit (source/target)
gridgrid, paginationninguno (columns opcional)Clicks en celdas — se desactiva con grid.cross_filter: false
report_matrixmatrix, paginationninguno (debe estar vacío)Clicks en celdas — se desactiva con matrix.cross_filter: false
textbodymapa de tokens (opcional)Solo consumidor — nunca emite
  • kpi — métrica única con delta y comparación opcionales.
  • bar — comparación categórica; soporta stacking, dual-axis, orientación horizontal.
  • line — series de tiempo; soporta dual axis y multi-series.
  • pie — composición part-of-whole; soporta variantes donut y rose.
  • scatter — correlación de dos measures; un punto por fila.
  • heatmap — grid de intensidad bidimensional con scale de color explícita.
  • funnel — stages de conversión o pipeline con drop-off.
  • sankey — diagrama de flujo / atribución; una fila = un link (source → target).
  • grid — tabla de datos row-level; soporta paginación, columnas congeladas, celdas compuestas.
  • report_matrix — reporte jerárquico con filas agrupadas, totales y PDF export.
  • text — una nota Markdown: encabezados, prosa e instrucciones colocadas entre los charts. Opcionalmente entreteje un valor en vivo desde una query de una sola fila en una oración.

Cualquier otra cosa pasada como type: no está soportada y se rechaza en tiempo de validación.

El bloque chart es tipado y cerrado

Para tipos basados en ECharts (bar, line, pie, scatter, heatmap, funnel, sankey) el bloque chart es una superficie chica y tipada. Tres categorías de propiedades viven adentro:

  • Shortcuts de Looky — keys únicas que colapsan múltiples decisiones coordinadas en una sola decisión (ej. chart.stack: percent, chart.variant: donut, chart.show_value_labels).
  • Campos pass-through — escalares o arrays espejados a una opción subyacente específica (ej. chart.center, chart.symbol_size, chart.gap).
  • Bloques pass-through — objetos anidados con un set curado snake_case de propiedades (ej. chart.legend, chart.tooltip, chart.x_axis, chart.y_axis, chart.value_label, chart.label, chart.visual_map).

Cualquier propiedad no listada en la página de referencia por tipo se rechaza en tiempo de validación. No hay escape hatch para opciones raw de la chart library.

Los tipos basados en DOM usan su propio bloque

kpi, grid, report_matrix y text no están construidos sobre una chart library, así que no tienen un bloque chart en absoluto. kpi, grid y report_matrix usan un bloque top-level type-específico — kpi, grid, matrix — más bloques auxiliares (pagination para grid y report_matrix, comparison para kpi).

La nota text en cambio lleva un body Markdown. Una nota estática es prosa pura y no necesita query. Para entretejer un valor en vivo en una oración, agrega una query de una sola fila y un mapping de nombres de token a fields del resultado, y referencialos en el body como {{ token }} o {{ token | "$#,##0" }} — cada valor se escapa y opcionalmente se formatea como número. Los links en el body aceptan solo URLs http, https y relativas.

Dónde buscar cada tópico

Referencia de format strings (compartida por cada tipo)

El formato de número es field-keyed en todos los tipos de viz. Los patterns por field ganan sobre patterns de slot; los patterns de slot ganan sobre el pattern root.

Un pattern se lee de izquierda a derecha como: + opcional (mostrar siempre el signo) → currency opcional ($ o un código de 3 letras como EUR) → el núcleo de dígitos → % opcional → a (compacto) o b (bytes) opcional.

El núcleo de dígitos usa 0 para un dígito obligatorio y # para uno opcional. Los separadores son literales — la puntuación propia del pattern decide la puntuación del output: el último . o , seguido de uno o dos placeholders de dígito es el separador decimal; cualquier otro separador en la parte entera se vuelve el separador de miles. Eso significa que ambas convenciones funcionan, y significan cosas distintas:

Pattern1234567.891 se renderiza comoLectura
#,##01,234,568Agrupación US, sin decimales
#,##0.001,234,567.89Agrupación US, dos decimales
#.##0,001.234.567,89Agrupación europea, dos decimales
#0,001234567,89Sin agrupación, coma decimal — no "US con agrupación"
$#,##0a$1MCurrency compacta, unidades enteras
$#,##0.0a$1.2MCurrency compacta, un decimal
#,##0.00%para 0.1234: 12.34%El porcentaje multiplica por 100
+#,##0.0%para 0.1234: +12.3%Porcentaje con signo (deltas)
EUR#,##0EUR 1,234,568Prefix de código de currency
#0b1.2GBBytes con escalado de unidad

Cada ejemplo en estos docs usa la convención estilo US (#,##0.00); elige una convención por workspace y mantente consistente — mezclar #0,00 (coma decimal) en un workspace de patterns #,##0 produce números que se leen mal para la mitad de tu audiencia.

Si no hay format pattern seteado para un field, la plataforma cae a un format decimal default con dos dígitos de fracción.