Distribution bar
Parts of a whole with exact numeric shares and grouped breakdowns.
Import from @commenda/pathfinder/distribution-bar and load the shared stylesheet once.
API reference
| Prop | Type | Behavior |
|---|---|---|
labelRequired | string | Accessible figure caption |
segmentsRequired | readonly DistributionSegment[] | { id, label, value, color }; IDs must be unique |
total | number | Sum when omitted; explicit totals support remaining allocation |
size | "sm"|"md" | 6px / 8px; defaults to md |
legend | "inline"|"list"|"none" | Inline by default; none retains an accessible breakdown |
formatValue | (
value: number
) => string | Numeric formatting for values |
highlightConfig | ObjectView fields | Optional controlled highlighting for a linked table |
className | string | Root styling |
highlightConfigObject fields
| Field | Type | Requirement |
|---|---|---|
activeId | string | null | Required |
onActiveChange | (id: string | null) => void | Required |
color accepts 1 through 6, other, and semantic success / warning / error / info / neutral. Assign it by identity before sorting so the same holder keeps the same color. Categorical colors come from Figma's data palette; red belongs to status breakdowns.
List legend
The largest parts appear first. Above six items, the largest five remain individual and the rest form Other. Every source member remains in the accessible breakdown and Other tooltip. Hovering a segment or focusing a legend entry highlights its group. A linked table can supply a source member ID to highlight Other when that member is grouped. The generated Other ID starts at __other__, adding leading underscores if needed to avoid collisions.
Remaining allocation
The unused total remains as track. A visual 4px minimum helps tiny positive parts remain visible; numeric shares are authoritative. Zero-valued entries remain in the legend but have no painted segment.
Over-allocation
When the sum exceeds the total, the bar scales to the sum and a persistent Alert explains the original percentage. Negative, non-finite, duplicate-ID, and invalid-total inputs produce an error rather than misleading geometry. Empty/zero allocations show an empty track. This is a figure with a data breakdown, not an ARIA progressbar.
Read the record component rules.
Design rules
Figma guidance and reviewed implementation decisions for this component. Rule IDs remain stable for source comments and AI references.
Source rules
| Rule | Contract and provenance |
|---|---|
| DISTRIBUTION-001 | Figma 876:59943 / 883:100: 6/8px track, 2px gaps, identity-stable data colors. |
| DISTRIBUTION-002 | Six visible groups maximum, five plus Other when necessary; source members remain available. |
| DISTRIBUTION-003 | Unallocated remainder stays track. Over-allocation scales geometry and explains the original percentage. |
| DISTRIBUTION-004 | Visual minimum 4px is not numeric precision. Keep exact shares and a textual breakdown, including with legend=none. |
Recorded design decisions
The Figma distribution instance paints six categories plus Other, while its documentation says at most six parts. The approved implementation plan uses six total (five plus Other when grouping). Tiny segments use constrained minimum widths, so the legend and tooltip supply exact data. Supporting text uses soft-pearl 800 where lighter Figma text would miss contrast requirements.