Visualization — funnel

Cuándo usar funnel

Funnel es la elección correcta para flows de conversión, pipelines de fulfillment, o cualquier proceso donde importa el orden entre pasos y el drop-off — visitor del sitio → product view → cart → checkout → purchase, u orden creado → packed → shipped → delivered. Cada fila de la query es un stage.

Usá bar en su lugar cuando las categorías no están ordenadas o no te importa el drop-off cumulativo. Usá grid cuando la audiencia necesita los counts exactos de cada step y las tasas de conversión lado a lado.

Mapping

mapping.stage — requerido. Field string cuyos valores se vuelven los labels por stage.
mapping.value — requerido. Field numérico para el tamaño por stage.

mapping:
  stage: stage
  value: order_count

El orden de los stages en el chart sigue el orden de las filas en el resultado de la query. Ordená en la query Malloy subyacente para controlar la secuencia (típicamente por order_index o por valor descendente).

Shortcuts de chart

El bloque chart es tipado y cerrado.

chart.percent_mode — "first" (default), "total", o "none". Elige la base para el porcentaje mostrado al lado de cada valor de stage:
- first — relativo al primer stage (cascade de conversión: 100% → 80% → 60% …).
- total — relativo a la suma de todos los stages (share del funnel).
- none — sin porcentajes, solo valores raw.
chart.show_value_labels — boolean. Prende los labels de stage. Estilizalos con chart.label abajo.
chart.cross_filter — boolean, default true. Seteá a false para suprimir la emisión de click en esta viz (igual consume pills seteados en otro lado).
chart.height — altura en pixels del container de la viz.

Fields pass-through de layout:

chart.left / chart.top / chart.bottom — distancia desde el borde correspondiente del container del chart.
chart.width — ancho horizontal del funnel (string porcentaje o número de pixels).
chart.gap — pixels entre stages.
chart.min_size — ancho mínimo de stage (ej. "10%"). El stage más estrecho no se va a achicar más allá de esto incluso si su valor es chiquito.
chart.max_size — ancho máximo de stage.
chart.sort — orden de stage. El default deja ganar el orden de fila; seteá a un valor conocido si querés que el renderer reordene.

Labels de stage

chart.label estiliza el label de cada stage cuando chart.show_value_labels está prendido:

position — "inside" (label se sienta sobre el stage), "left", "right", "top", "bottom".
rotate, color, font_size, font_weight.
formatter — template string. Usá {b} para el nombre del stage, {c} para el valor, {d} para el porcentaje (cuando percent_mode es "first" o "total").
distance, align, vertical_align, clip.

Legend & tooltip

chart.legend y chart.tooltip comparten el mismo shape que en bar. Para una viz de funnel único la legend es usualmente redundante; seteá chart.legend.show: false.

format

format.y o format[<value_field_name>] — pattern para labels de valor de stage y valores de tooltip.
format en root — fallback.

Comportamiento de cross-filter

Funnel participa completamente en cross-filtering. Dentro de un dashboard:

Emite — clickear un stage agrega un pill { field: <el field del stage>, value: <nombre del stage clickeado> }, siempre que chart.cross_filter !== false Y el field esté declarado como parámetro en al menos un model del dashboard.
Consume — pills seteados en otros lados, y filtros a nivel dashboard, se vuelven parámetros en el próximo run; la query subyacente del funnel re-corre y los stages se recomputan en consecuencia.
Opt-out — seteá chart.cross_filter: false para suprimir emisión de click mientras igual consume pills.

Ejemplos trabajados

Funnel de conversión estándar con porcentaje de primer stage:

id: ec_fulfillment_funnel
title: Fulfillment Funnel
query: "models/ec_fulfillment.malloy::funnel"
type: funnel
mapping:
  stage: stage
  value: order_count
chart:
  height: 360
  width: "80%"
  show_value_labels: true
  label:
    position: inside
    formatter: "{b}: {c} ({d}%)"
  percent_mode: first
  legend:
    show: false
format:
  order_count: "#,##0"
published: true

Funnel total-share (cada stage mostrado como % de la suma):

chart:
  percent_mode: total
  show_value_labels: true

Funnel compacto embedded en una fila de dashboard al lado de KPIs:

chart:
  height: 240
  width: "100%"
  gap: 6
  min_size: "20%"
  max_size: "100%"
  show_value_labels: true
  label:
    position: right
    formatter: "{b}: {c}"
  percent_mode: none

Errores comunes

Los stages están en el orden equivocado. El funnel respeta el orden del resultado de query. Ordená en la query Malloy para controlar la secuencia.
Los últimos stages chiquitos desaparecen. Seteá chart.min_size para forzar un ancho visible mínimo.
El percent mode produce números inesperados. Elegí deliberadamente: "first" para cascades de conversión (cada stage ÷ primer stage), "total" para share del total (cada stage ÷ suma), "none" para counts raw.
Los labels de stage se solapan con las barras. Movelos afuera (chart.label.position: "right") o reducí font_size.
Clickear un stage no hace nada. Funnel emite pills de cross-filter solo dentro de un dashboard, y solo si (a) chart.cross_filter no es false, y (b) el field de stage está declarado como parámetro en al menos un model del dashboard. Agregá la declaración de parámetro en el model Malloy subyacente para habilitar el pill.
Comparación multi-funnel. No soportada en una viz; poné dos funnels lado a lado en un dashboard para comparación A/B.