Orbit UI

Stage Bars

PRO

Barra unica segmentada que reparte un total entre etapas o estados. Ocupa una fila y comunica proporcion mejor que una torta cuando los segmentos son pocos.

npx orbitui-cli add stage-bars

Pipeline de ventas

3.040

Oportunidades activas por etapa

  • Nuevos1.24041%
  • Contactados89029%
  • En negociación42014%
  • Ganados31010%
  • Perdidos1806%

Props

PropTipoDescripción
segments*StageSegment[]
heightnumber
formatValue(value: number) => string
showLegendboolean
separatedbooleanDeja un hueco entre segmentos en lugar de una barra continua.
classNamestring
aria-label*string

Qué instala

Archivo
components/orbit/charts/stage-bars.tsx
Componentes
cx
Paquetes npm
ninguno

A partir de la instalación el archivo es tuyo: editalo sin miedo. Si volvés a correr add y lo modificaste, el CLI pregunta antes de pisarlo.