Chart · distribución de ánimo

Mostrar cómo se reparten las respuestas en los 5 niveles, no solo el promedio.

Barra apilada con la cantidad de pulsos por nivel de ánimo.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/mood-distribution.json

import

import { MoodDistribution } from "@moodinary/ui/components/mood-distribution";

Ejemplos

Con leyenda

Variante disponible con colores plenos. Analíticas usa la variante suave con filas enlazadas a pulsos.

Datos ilustrativos.

Muy bajo3
Bajo7
Neutral14
Bien18
Muy bien9

Código

default.tsx

import { MoodDistribution } from "@moodinary/ui/components/mood-distribution";

const items = [
	{ count: 3, label: "Muy bajo", level: 1 },
	{ count: 7, label: "Bajo", level: 2 },
	{ count: 14, label: "Neutral", level: 3 },
	{ count: 18, label: "Bien", level: 4 },
	{ count: 9, label: "Muy bien", level: 5 },
];

export default function ChartMoodDistributionDefault() {
	return (
		<div className="w-full max-w-md">
			<p className="mb-2 text-ink-3 text-xs">Datos ilustrativos.</p>
			<MoodDistribution aria-label="Distribución de ánimo" items={items} />
		</div>
	);
}

Analíticas, con enlaces

La app usa soft y renderLink para filtrar pulsos por nivel. Estos enlaces son ilustrativos.

Datos ilustrativos. Los enlaces no navegan a una organización real.

Muy bajo2
Bajo5
Neutral11
Bien20
Muy bien6

Código

soft.tsx

import { MoodDistribution } from "@moodinary/ui/components/mood-distribution";

const items = [
	{ count: 2, label: "Muy bajo", level: 1 },
	{ count: 5, label: "Bajo", level: 2 },
	{ count: 11, label: "Neutral", level: 3 },
	{ count: 20, label: "Bien", level: 4 },
	{ count: 6, label: "Muy bien", level: 5 },
];
const renderLink = (item: (typeof items)[number], row: React.ReactNode) => (
	<a
		className="block rounded-[7px] outline-none transition-colors hover:bg-bg-soft focus-visible:ring-3 focus-visible:ring-org-ring"
		href="#pulsos-filtrados"
		title={`Ver pulsos «${item.label}»`}
	>
		{row}
	</a>
);
export default function ChartMoodDistributionSoft() {
	return (
		<div className="w-full max-w-md">
			<p className="mb-2 text-ink-3 text-xs">
				Datos ilustrativos. Los enlaces no navegan a una organización real.
			</p>
			<MoodDistribution
				aria-label="Distribución de ánimo"
				items={items}
				renderLink={renderLink}
				soft
			/>
		</div>
	);
}

Props

MoodDistribution

Prop	Tipo	Default	Descripción
items	{ level, label, count }[]	-	Cantidad por nivel.
legend	boolean	true	Muestra la leyenda.
soft	boolean	false	Barra en tintes suaves.
renderLink	(item, row) => ReactNode	-	Hace clickeable cada fila de la leyenda.
className	string	-	Clases extra.

Cuándo sí y cuándo no

Hacé

Incluí los cinco niveles.
Usá la leyenda cuando hay espacio.
Permití filtrar por nivel con renderLink.

Evitá

No la uses con muy pocos pulsos.
No cambies el orden de los niveles.
No uses otros colores.

La barra tiene role="img" con un resumen en texto.
La leyenda repite los números.