nuxt-x-affiliate
Score Breakdown
Sub-scores with weighted average + total — color-coded progress bars.
Score Breakdown
The XAFScoreBreakdown component renders a list of sub-scores (e.g. "Build quality: 4.4/5", "Performance: 4.7/5") with progress bars colored by performance threshold (green ≥80%, amber ≥60%, orange ≥40%, red <40%), plus a total at the bottom.
Components
<XAFScoreBreakdown />
<XAFScoreBreakdown
title="How we scored the MX Keys S"
:total-score="4.6"
:total-max="5"
:show-weights="true"
:rows="[
{ label: 'Performance', score: 4.7, max: 5, weight: 0.30, description: 'Real-world latency under load.' },
{ label: 'Build', score: 4.5, max: 5, weight: 0.25 },
{ label: 'Battery life', score: 4.6, max: 5, weight: 0.20 },
{ label: 'Value', score: 4.4, max: 5, weight: 0.25 },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | ScoreRow[] | required | Each row: { label, score, max?, weight?, description? }. |
totalScore | number | computed | Override the computed total. |
totalMax | number | 5 | Maximum for the total. |
totalLabel | string | "Overall" | Total label. |
showWeights | boolean | false | Show weight badges next to each row label. |
title | string | "Score Breakdown" | Section heading. |
The computed total is the weighted average when all rows have a weight, otherwise the simple average of all scores.
AI Context
component: XAFScoreBreakdown
package: "@xenterprises/nuxt-x-affiliate"
use-when: Sub-scores with weighted average + total, color-coded progress bars for review scoring transparency.