componente · @solu30/ui-kit/display

CapacityBar

Barra de consumo sobre un total que cambia de color por umbrales, con llenarla como bueno o como malo.

13 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

carlosmartinpavon
gestorsalon
luigi
raquetea

El componente, montado

Cargando el espécimen…

export function CapacitySpecimen() {
  return (
    <Stage label="CapacityBar · tres tramos" tall>
      <div className="flex w-full flex-col gap-4">
        <CapacityBar used={38} total={50} label="Salón principal" showCount showPercent />
        <CapacityBar used={11} total={50} label="Terraza" showCount showPercent />
      </div>
    </Stage>
  )
}

De specimens/display.tsx · CapacitySpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { CapacityBar } from '@solu30/ui-kit/display'

Props

9 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
used	sí	`number`	—
total	sí	`number`	—
label	opcional	`string`	—
showCount	opcional	`boolean`	—
showPercent	opcional	`boolean`	—
thresholds	opcional	`{ warn: number; critical: number; }`	Breakpoints de porcentaje, SIEMPRE ascendentes (`warn < critical`) independientemente de `direction` — el shape no cambia entre modelos, solo qué color se pinta en cada tramo: - `fill-is-bad`: `[0, warn)` verde · `[warn, critical)` amarillo · `[critical, 100]` rojo. - `fill-is-good`: `[0, warn)` rojo · `[warn, critical)` amarillo · `[critical, 100]` verde. Ej. completitud 85/60 (≥85 verde, ≥60 amarillo, <60 rojo): `direction="fill-is-good"` + `thresholds={{ warn: 60, critical: 85 }}`.
direction	opcional	`CapacityBarDirection`	—
disableAnimation	opcional	`boolean`	—
className	opcional	`string`	—

Ejemplo del paquete

// Los umbrales van SIEMPRE ascendentes; `direction` decide qué color cae en cada tramo.
<CapacityBar used={148} total={180} label="Ocupación" showCount showPercent />

// Completitud: llenarla es lo bueno, así que ≥85 es verde.
<CapacityBar used={72} total={100} direction="fill-is-good" thresholds={{ warn: 60, critical: 85 }} />

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.