Composant · Données

FunnelChart

Stable

Entonnoir vertical ou horizontal représentant les étapes d'un processus de conversion. Chaque étape affiche sa valeur et optionnellement son pourcentage (par rapport à la première étape ou à l'étape précédente). Légende et tooltip de survol inclus.

Exemples

Entonnoir de conversion en 4 étapes : visiteurs, prospects, leads qualifiés et clients. Les pourcentages affichés sont relatifs à la première étape (percentMode="ofFirst").

Entonnoir de conversion

Visiteurs: 8400 (100%)
Prospects: 3200 (38.1%)
Leads qualifiés: 940 (11.2%)
Clients: 210 (2.5%)

Voir le code (Svelte)

<div class="chart-wrapper">
  <FunnelChart
    label="Entonnoir de conversion"
    data={[{"label":"Visiteurs","value":8400,"tone":"category1"},{"label":"Prospects","value":3200,"tone":"category2"},{"label":"Leads qualifiés","value":940,"tone":"category3"},{"label":"Clients","value":210,"tone":"category4"}]}
    showPercentages
    width={480}
    height={300}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`FunnelChartDatum[]`	requis	Tableau des étapes de l'entonnoir.
`label`	`string`	requis	Label aria-label du graphique (a11y).
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Orientation de l'entonnoir.
`showPercentages`	`boolean`	`true`	Affiche les pourcentages de conversion par étape.
`percentMode`	`"ofFirst" \| "ofPrevious"`	`"ofFirst"`	Référence pour le calcul des pourcentages.
`legend`	`boolean`	`false`	Affiche une légende sous le graphique.
`width`	`number`	`480`	Largeur du viewBox SVG.
`height`	`number`	`280`	Hauteur du viewBox SVG.

FunnelChartDatum = { label: string; value: number; tone?: FunnelChartTone } : tone ∈ category1…8

Tokens CSS

Variable CSS	Description
`--st-semantic-data-category1…8`	Palette catégorielle des segments d'entonnoir.
`--st-component-funnelChart-labelColor`	Couleur des étiquettes de valeur.
`--st-component-funnelChart-tooltipBackground`	Fond du tooltip de survol.
`--st-component-funnelChart-tooltipText`	Texte du tooltip.

Piloté par store

La version adaptateur (@sentropic/dataviz-svelte, -react, -vue, -angular) dérive les étapes d’un DashboardStore partagé : category et measure désignent les canaux, le reste du contrat est inchangé.

Entonnoir (store)

Voir le code (Svelte)

<div class="chart-wrapper">
  <FunnelChart
    store={store}
    viewId="store"
    category="stage"
    measure="count"
    label="Entonnoir (store)"
  />
</div>

Prop	Type	Par défaut
`store`	`DashboardStore`	requis
`viewId`	`string`	requis
`category`	`string`	requis
`measure`	`string`	requis
`sort`	`PartWholeSort`	non défini
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`
`showPercentages`	`boolean`	natif
`percentMode`	`"ofFirst" \| "ofPrevious"`	natif
`legend`	`boolean`	natif
`width` / `height`	`number`	natif
`label`	`string`	requis (a11y)

Props du natif non reprises par la version store : data (dérivé du store via category / measure).