DistributionBar

Horizontal stacked bar and optional legend from named items with color and percentage share.

Barra horizontal segmentada para partilhas (por exemplo categorias de vendas, quotas, etc.): recebe uma lista com name, color e percentage. Valores positivos são normalizados para a barra somar 100% da largura; a legenda mostra a percentagem já normalizada. Por defeito ordena por maior partilha primeiro.

Importação

import {
	DistributionBar,
	type DistributionItem,
} from "@zexon/ui/blocks/distribution-bar";

Uso

Exemplo

Eletrónica42.0%Casa28.0%Lazer18.0%Outros12.0%

Itens com percentage ≤ 0 são ignorados. maxLabels limita quantas entradas aparecem na legenda; a barra continua a usar todos os itens válidos.

Props

Prop	Tipo	Predefinição	Notas
`items`	`DistributionItem[]`	—	`name`, `percentage`, `color`
`showLabels`	`boolean`	`true`	Legenda com bolinha de cor e %
`maxLabels`	`number`	`6`	Limite de linhas na legenda
`sortByPercentage`	`boolean`	`true`	Ordem decrescente por partilha
`fractionDigits`	`number`	`1`	Casas decimais na legenda e `title`
`emptyMessage`	`string`	`"Nenhum dado para mostrar"`	Sem dados ou soma zero

Demais props repassam-se ao div raiz (className, id, etc.).

Card3D

ImagesBadge