AccrueAdmin.Components.FunnelChart (accrue_admin v1.4.0)

Copy Markdown View Source

3-stage dunning funnel: Entered → Recovered / Exhausted, with an "active" chip for in-flight campaigns.

Renders an inline-SVG horizontal proportional-bar funnel (no JS chart lib). Three stacked <rect> rows reuse the existing ax-kpi-delta-{slate,moss,amber} tone palette via .ax-funnel-row--{slate,moss,amber} modifier classes. An external <dl> legend mirrors the same counts/percentages so a screen reader or zoomed-out viewport still surfaces the data.

Accessibility

The SVG declares role="img" and links a <title> + <desc> pair via aria-labelledby="funnel-title funnel-desc". Each <rect> carries an inline <title> so hover/screen-reader tooltips explain the stage.

Example

<FunnelChart.funnel_chart
  entered={10}
  recovered={4}
  exhausted={3}
  active={3}
/>

Summary

Functions

funnel_chart(assigns)

(since 1.3.0)

Attributes

  • entered (:integer) (required)
  • recovered (:integer) (required)
  • exhausted (:integer) (required)
  • active (:integer) (required)
  • class (:string) - Defaults to nil.