nuxt-x-affiliate
Survey Results
Survey data with horizontal bars, sample-size line, and optional period.
Survey Results
The XAFSurveyResults component renders survey-question results as horizontal bars — useful for "What our readers told us" callouts in a methodology section or on the About page. Each row shows a label, percentage, and gradient bar.
Components
<XAFSurveyResults />
<XAFSurveyResults
title="What our readers told us in 2026"
:sample-size="1247"
period="Q1 2026"
:results="[
{ label: 'Trust our reviews over editorial-only sites', value: 78, count: 973 },
{ label: 'Prefer our detailed methodology disclosures', value: 64, count: 798 },
{ label: 'Want longer battery-life testing', value: 52, count: 648 },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
results | SurveyResult[] | required | Each result: { label, value, count? }. value is a percentage or count. |
title | string | "What our readers told us" | Section heading. |
sampleSize | number | — | Total responses for the "Based on X responses" line. |
period | string | — | Period label (e.g. "Q1 2026"). |
unit | string | "%" | Display unit suffix. |
max | number | 100 | Max value for the bar scale. |
The bar width is computed as (value / max) * 100 clamped to 100%. The count is shown as a small grey sub-label next to the percentage.
AI Context
component: XAFSurveyResults
package: "@xenterprises/nuxt-x-affiliate"
use-when: Survey data with horizontal bars, sample-size line, and optional period label.