# Funnel

The stages of a process in order, each as wide as how many got that far, centred and to scale, with the drop-off written between each pair: the number lost and its share of the stage before. Every stage prints its count and its share of the first. The biggest drop is set in bold. A later stage larger than the one before is drawn to scale and said to be a gain, never hidden.

Kit part · With the Kit · https://tactileui.dev/parts/funnel

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Centred bars of the blue lamp on the display well, with the join between two bars drawn as the polygon that connects their widths and filled with a faint hatch. The text is laid out in the same pass, so a name is cut to the room that is left after the count.

## Variants

- Five stages
- Three stages
- A stage that grew · said as a gain
- The table shown · table

## States

- At rest
- A stage read
- Plot focused

## Props and options

| Name | Kind | Description |
| - | - | - |
| Home · End | keyboard | Go to the first and the last stage. |
| Escape | keyboard | Lets go of the stage: the readout goes back to its sentence about the whole chart. |
| funnelModel() · funnelDraw() · funnelPercent() · funnelHTML() | function | The figures to a model with each drop worked out, the drawing at a width, a share cut down to one place, and the static markup. |

## Usage notes

Move the pointer down the funnel: the readout gives the stage, its count, its share of the first stage and what was lost since the one before. Tab onto the chart and use Up and Down. The hatched joins are the people lost between two stages, and the biggest drop is in bold.

## Accessibility

- The plot is one tab stop. A real table repeats every figure.
- The drop-off is written, not only drawn: the number lost and its share sit between two bars in words, on a hatched join, so it reads in greyscale. The biggest drop is in bold in the picture and named in the table.
- Widths are to scale from the largest stage, so a stage with half the count has half the width, and nothing is stretched to make a funnel shape. Shares are cut down, never rounded up.
- Long stage names are cut with an ellipsis and stay whole in the readout and the table. Nothing animates.

## Related parts

- [Bars](https://tactileui.dev/parts/bars): Printed bars on the panel, one value each. The bars are ink laid flat on the plate, never a colour and never glass; the axis is engraved into it, a groove along the zero line with the light on its lower lip and a faint rule at each tick. Columns by default, rows when the labels are long, and on display glass the ink is the display’s light.
- [Pipeline](https://tactileui.dev/parts/pipeline): The stages of a build and a deploy as stations along a groove, like the program track of a machine. Each station is a socket with a lamp in it (green for a stage that passed, red for one that failed, amber and breathing for the one running, an empty socket for one that is waiting or was skipped) and under it the stage’s name, its state in words, how long it took and a Log key. Ink runs along the groove as far as the run has got. Wide, the stages stand in a row; narrow, they stand in a column with the groove down the side.
- [Stacked bars](https://tactileui.dev/parts/stacked-bars): Columns split by series on a display well. Stacked mode reads totals from zero, with each total printed above its column. The series are the lamps (blue, amber, green) and the display’s own light, and from the third on they have a pattern too, so no series is only a colour. Move the pointer across the columns, or use the arrow keys, and the readout says the series, its value, its share and the total. The legend keys turn a series off and on, and the scale follows.
- [Treemap](https://tactileui.dev/parts/treemap): Shares of a whole as nested rectangles, each sized by its value, one level at a time. A cell that holds more has a dog-ear in its corner; click it or press Enter to open it, and the crumb above, Escape or Backspace takes you back up. A label is printed only where the cell can hold it, so a small cell stays blank rather than being cut mid-word, and every cell is still read in the readout, by the keyboard and in the table, which lists the whole tree.