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.

Usa bar en su lugar cuando las categorías no están ordenadas o no te importa el drop-off cumulativo. Usa 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. Ordena en la query Malloy subyacente para controlar la secuencia — el shape estándar es un SELECT … UNION ALL por stage con una columna de ordenamiento explícita:

# models/ec_fulfillment_funnel.malloy — one row per stage, in order.
##! experimental.parameters

source: ec_fulfillment_funnel() is ecommerce.sql("""
  SELECT 'Created' AS stage, COUNT(*) AS order_count, 1 AS stage_order
  FROM `bigquery-public-data.thelook_ecommerce.orders`
  UNION ALL
  SELECT 'Shipped', COUNT(*), 2
  FROM `bigquery-public-data.thelook_ecommerce.orders`
  WHERE status IN ('Shipped', 'Complete')
  UNION ALL
  SELECT 'Complete', COUNT(*), 3
  FROM `bigquery-public-data.thelook_ecommerce.orders`
  WHERE status = 'Complete'
""") extend {
  view: fulfillment_funnel is {
    select: stage, order_count, stage_order
    order_by: stage_order asc
  }
}

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. Setea 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 sort de los stages: "ascending", "descending", o "none". Omite la key (o setea none) para dejar ganar el orden de filas de la query; los otros dos hacen que el renderer reordene por valor.

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. Usa {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; setea 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 una firma de source del archivo de model propio de esta viz.
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 — setea 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

Notas de diseño

El funnel renderiza los stages en el orden del resultado de la query — ordena en la query Malloy para controlar la secuencia.
chart.min_size mantiene visibles los stages finales chicos.
Elige el modo de porcentaje deliberadamente: "first" para cascadas de conversión (cada stage ÷ el primero), "total" para share del total, "none" para counts crudos.
En funnels apretados, mueve los labels de stage afuera (chart.label.position: "right") o reduce font_size.
Para comparación A/B, pon dos funnels lado a lado en un dashboard — un funnel muestra una secuencia.