# `PhiaUi.Components.NpsWidget`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/nps_widget.ex#L1)

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}
    />

# `nps_widget`

## 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>`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*