Brickslab.Toolsv2.1.1

@brickslab./ui-webAnalytics

Start-to-complete funnel with bar and step modes, drop-off labels, and completion rates.

Bar mode

Survey started
1,200 / 1,200100%
↓ 100 dropped
Section 1
960 / 1,10087%
Section 2
780 / 96081%
Section 3
620 / 78079%
Submitted
580 / 62094%

Step mode

1,200100%
Survey started
96087%
Section 1
78081%
Section 2
62079%
Section 3
58094%
Submitted

Props

PropTypeDéfautRequisDescription
stepsFunnelStep[]—✓Array of { id, label, started, completed }.
mode"bar" | "step""bar"—Bar shows horizontal progress. Step shows vertical columns.
showRatesbooleantrue—Shows completion rate badges.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  steps={[]}
  mode="bar"
  showRates={true}
/>
stepsmodeshowRates

Usage

tsx
import { SurveyFunnel } from "@brickslab./ui-web";

<SurveyFunnel
  steps={[
    { id: "s1", label: "Started", started: 1200, completed: 1200 },
    { id: "s2", label: "Section 1", started: 1100, completed: 960 },
    { id: "s3", label: "Submitted", started: 960, completed: 780 },
  ]}
  mode="bar"
  showRates
/>