Funnel

Stage-by-stage drop-off: each stage is a bar sized by its value, ordered top to bottom. For conversion and retention that narrows as it goes.

Loading…

<Funnel
  query={`SELECT 'All flowers' AS stage, 1 AS ord, count(*) AS n FROM db.iris
UNION ALL SELECT 'Petal > 1.5cm', 2, count(*) FROM db.iris WHERE petal_length > 1.5
UNION ALL SELECT 'Petal > 3cm', 3, count(*) FROM db.iris WHERE petal_length > 3
UNION ALL SELECT 'Petal > 5cm', 4, count(*) FROM db.iris WHERE petal_length > 5`}
  stage="stage"
  value="n"
  order="ord"
/>

Split variant and percentages

variant="split" draws each stage centered like a classic funnel rather than left-aligned bars. percentFormat controls the drop-off figure beside each stage, and order names the column that sequences the stages.

<Funnel
  data="db.funnel_steps"
  stage="stage"
  value="users"
  order="ord"
  variant="split"
  percentFormat=".0%"
/>

c.Funnel(
    data="db.funnel_steps",
    stage="stage",
    value="users",
    order="ord",
    variant="split",
    percentFormat=".0%",
)

Props

Prop	Type	Notes
`data` / `query`	relation \| SQL	Source rows; a relation, or full SQL. Mutually exclusive.
`stage`	column	The label for each step.
`value`	measure \| column	Bar size for the step.
`order`	column	Column that sequences the stages top to bottom.
`variant`	`"solid"` \| `"split"`	Left-aligned bars, or a centered funnel.
`valueFormat` / `percentFormat`	d3-format spec	How the value and the drop-off percent render.
`barMax` / `labelWidth`	`number` / `string`	Bar scale ceiling and the width reserved for stage labels.

Expressions in value, query, and filters values support {{binding}} interpolation against the surrounding BindingProvider.

Installation

Funnel ships in @n6k.io/ui/components. Nothing to install. Register the namespace once in src/app/mdx-components.tsx and the tag resolves in both .mdx and page.py pages:

import * as n6k from "@n6k.io/ui/components";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...n6k, // Funnel, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}