PhiaUi.Components.NpsWidget (phia_ui v0.1.17)

Copy Markdown View Source

Net Promoter Score widget — SVG half-circle arc gauge + breakdown bars.

Shows an NPS score (0-100) as a semi-circular gauge, with the breakdown of promoters, passives, and detractors displayed below. Zero JavaScript — arc math is computed server-side using stroke-dasharray.

Examples

<.nps_widget
  score={62}
  promoters={450}
  passives={120}
  detractors={80}
  total_responses={650}
/>

Summary

Functions

nps_widget(assigns)

Functions

nps_widget(assigns)

Attributes

  • score (:integer) (required) - NPS score (0-100).
  • promoters (:integer) (required) - Number of promoters (score 9-10).
  • passives (:integer) (required) - Number of passives (score 7-8).
  • detractors (:integer) (required) - Number of detractors (score 0-6).
  • total_responses (:integer) (required) - Total survey responses (used for percentage bars).
  • class (:string) - Additional CSS classes for the root element. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root <div>.