Nexus – Elemento: Funnel Chart

image_pdfimage_print

¿Qué es?

Funnel Chart es un componente de tipo Data. Muestra un embudo de conversión con distintas etapas, donde cada una se representa como una barra cuyo ancho es proporcional a su valor respecto a la primera etapa. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Sales Funnel”, con 5 etapas: Leads, Qualified, Proposals, Negotiation y Closed Won).

Propiedades

Al seleccionar Funnel Chart en el lienzo, el panel derecho muestra “Properties of FunnelChart”, organizado en tres pestañas: Content, Style y Behavior.

  • Component ID: identificador único del componente, autogenerado (ej. fnl_f31ab12c).
  • Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show.
  • Selector S / M / L: ajusta el tamaño de visualización del panel de propiedades.

Pestaña Content:

  • Title: título del embudo (ej. “Sales Funnel”).
  • Stages (JSON): campo de código donde se definen las etapas del embudo en formato JSON. Cada etapa se compone de:
    • label: nombre de la etapa (ej. “Leads”).value: valor numérico asociado (ej. 1000).
    Ejemplo de estructura:
  [
    {
      "label": "Leads",
      "value": 1000
    },
    {
      "label": "Qualified",
      "value": 620
    },
    {
      "label": "Proposals",
      "value": 340
    },
    {
      "label": "Negotiation",
      "value": 160
    },
    {
      "label": "Closed Won",
      "value": 72
    }
  ]

Cuenta con el editor de código expandido para más comodidad, con pestañas HTML/CSS/JS/JSON y botones Format y Copy. El editor valida el JSON en tiempo real (marca “✓ valid”).

  • Value Prefix: texto que se antepone al valor mostrado en cada etapa.
  • Value Suffix: texto que se agrega después del valor mostrado en cada etapa.

Pestaña Style:

  • Custom Class: clase CSS personalizada.
  • Custom Style: CSS personalizado aplicado directamente a este componente.

Pestaña Behavior:

  • Show Conversion %: casilla que muestra u oculta, junto a cada etapa (a excepción de la primera), el porcentaje de caída respecto a la etapa anterior (ej. “↓ 62%”).
  • Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .
  • Delete Component (ícono de papelera, arriba): elimina el componente del lienzo.

Ejemplo de uso

Para agregar una nueva etapa al embudo, hay que ubicarse dentro del array en Stages (JSON), agregar una coma después del último objeto de cierre }, y pegar el nuevo bloque a continuación:

[
 {
  "label": "Onboarding",
  "value": 50
 }
]

⚠️ Importante: la coma va pegada a la llave } de la etapa anterior, no al principio del bloque nuevo.

Con Show Conversion % se puede visualizar rápidamente en qué etapa del embudo se produce la mayor pérdida de conversión, útil para detectar cuellos de botella en un proceso de ventas u onboarding. Con Value Prefix y Value Suffix se puede dar formato a los valores (por ejemplo, agregando “$” como prefijo si el embudo representa montos en lugar de cantidades).