BreakdownBar

A single bar split into segments to show how one total divides up.

1<template>2  <Card title="Findings overview">3    <template #header-actions>4      <DropdownMenu :items="groupByItems">5        <Button variant="secondary" size="sm" trailing-icon="i-lucide-chevron-down">{{ activeGroupBy }}</Button>6      </DropdownMenu>7    </template>8    <BreakdownBar :segments="segments" :total="total" :aria-label="t('dashboard.pr-review.findings-overview')" />9  </Card>10</template>

Props

Name	Type	Default
segments	BreakdownSegment[]	-
total	number	sum of the counts
totalFormat	(n: number) => string	n.toLocaleString()
shareFormat	(share: number) => string	formatShare (whole-number percent)
showLegend	boolean	true
legendTotals	boolean	true
highlighted	string \| null	null
isLoading	boolean	false
emptyLabel	string	"No data for this period"
ariaLabel	string	-

Guidelines

Do

Use it for a part-to-whole split of one number - findings by severity, scans by type, spend by source - where the reader needs the shares and the total, not a trend.
Put it in a Card with the card's own title, and the "group by" control, if any, in #header-actions; this fragment is the bar, the total and the legend only.
Pass total when the whole is larger than the parts (resolved out of all findings); the remainder stays as empty track.

From an i18n'd app, pass totalFormat, shareFormat, emptyLabel and ariaLabel - the layer is not i18n-wired.

Don't

Don't reach for this to show change over time - that is TrendChart. There is no axis here, only shares of one number.
Don't pass segments whose counts are already percentages; pass raw counts and let the bar derive the widths from total.
Don't hand-roll the hover dimming, the tooltip or the legend around it - the built-in ChartLegend and v-model:highlighted already do all three, and the legend is the keyboard path for the dimming.