Moodinary/UI

Chart · bar

Comparar equipos o días. Siempre ordenado y con el valor visible.

Barras horizontales para comparar equipos, días o categorías.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/bar-list.json
import
import { BarList } from "@moodinary/ui/components/bar-list";

Ejemplos

Por equipo

fraction de 0 a 1 marca el largo.

Pulsos por equipo, datos ilustrativos.

  • 4.º A41
  • Equipo Ventas33
  • 2.º B27
  • Equipo Soporte15
Código
teams.tsx
import { BarList } from "@moodinary/ui/components/bar-list";

const items = [
	["4.º A", 41],
	["Equipo Ventas", 33],
	["2.º B", 27],
	["Equipo Soporte", 15],
].map(([label, n]) => ({
	fraction: Number(n) / 41,
	id: String(label),
	label,
	value: n,
}));

export default function ChartBarTeams() {
	return (
		<div className="w-full max-w-md">
			<p className="mb-2 text-ink-3 text-xs">
				Pulsos por equipo, datos ilustrativos.
			</p>
			<BarList aria-label="Pulsos por equipo" items={items} />
		</div>
	);
}

Con color de ánimo

color acepta var(--m1) a var(--m5).

Clima por equipo, datos ilustrativos.

  • 4.º A2,9
  • Equipo Ventas3,6
  • Equipo Soporte4,3
Código
colored.tsx
import { BarList } from "@moodinary/ui/components/bar-list";
import { moodLevel } from "@moodinary/ui/components/mood-dot";

const items = [
	{ avg: 2.9, id: "4a", label: "4.º A" },
	{ avg: 3.6, id: "ventas", label: "Equipo Ventas" },
	{ avg: 4.3, id: "soporte", label: "Equipo Soporte" },
].map((team) => ({
	color: `var(--m${moodLevel(team.avg)})`,
	fraction: (team.avg - 1) / 4,
	id: team.id,
	label: team.label,
	value: team.avg.toLocaleString("es-AR"),
}));
export default function ChartBarClimate() {
	return (
		<div className="w-full max-w-md">
			<p className="mb-2 text-ink-3 text-xs">
				Clima por equipo, datos ilustrativos.
			</p>
			<BarList aria-label="Clima por equipo" items={items} />
		</div>
	);
}

Props

BarList

PropTipoDefaultDescripción
items{ id, label, value, fraction, color? }[]-Filas.
labelWidthnumber110Ancho de la etiqueta en px.
renderLink(item, row) => ReactNode-Hace clickeable cada fila.
classNamestring-Clases extra.

Cuándo sí y cuándo no

Hacé
  • Para clima por equipo, ordená por atención y calculá fraction = (promedio - 1) / 4, como en Analíticas.
  • Mostrá el valor al lado.
  • Usá color solo si significa algo.
Evitá
  • No compares más de 10 barras.
  • No uses colores de ánimo para conteos.
  • No cortes etiquetas largas sin tooltip.

Accesibilidad

  • Es una lista; el valor se lee como texto.
  • Con renderLink, cada fila es focusable.