Chart · line

Evolución del clima en el tiempo. Bandas de fondo = umbrales de ánimo. Hover o flechas para ver cada semana.

Ánimo promedio en el tiempo, escala de 1 a 5.

Instalación

shadcn

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

import

import { MoodLineChart } from "@moodinary/ui/components/mood-line-chart";

Ejemplos

Bandas

Fondo con las bandas de ánimo y highlight para marcar un tramo.

4.º A, datos ilustrativos.

Muy bajoBajoNeutralBienMuy bienBaja sostenida

Código

bands.tsx

import { MoodLineChart } from "@moodinary/ui/components/mood-line-chart";

const data = [3.6, 3.5, 3.7, 3.2, 2.9, 2.8, 3.1, 3.4].map((value, i) => ({
	label: `Sem ${i + 1}`,
	value,
}));

export default function ChartLineBands() {
	return (
		<div className="w-full">
			<p className="mb-2 text-ink-3 text-xs">4.º A, datos ilustrativos.</p>
			<MoodLineChart
				data={data}
				highlight={{ from: 4, label: "Baja sostenida", to: 5 }}
				label="Ánimo promedio de 4.º A por semana, datos ilustrativos"
			/>
		</div>
	);
}

Tendencia

variant="trend": grilla simple, puntos y valor final.

Promedio semanal, datos ilustrativos.

Promedio de la organización

Código

trend.tsx

import { MoodLineChart } from "@moodinary/ui/components/mood-line-chart";

const data = [3.1, 3.3, 3.2, 3.5, 3.6, 3.8].map((value, i) => ({
	label: `Sem ${i + 1}`,
	tip: `Semana ${i + 1}`,
	value,
}));
export default function ChartLineTrend() {
	return (
		<div className="w-full">
			<p className="mb-2 text-ink-3 text-xs">
				Promedio semanal, datos ilustrativos.
			</p>
			<MoodLineChart
				data={data}
				label="Promedio semanal de ejemplo"
				seriesLabel="Promedio de la organización"
				variant="trend"
			/>
		</div>
	);
}

Props

MoodLineChart

Prop	Tipo	Default	Descripción
data	{ value, label, tip? }[]	-	Puntos en orden.
label	string	-	aria-label del gráfico.
variant	"bands" \| "trend"	"bands"	Estilo.
highlight	{ from, to, label }	-	Tramo sombreado.
seriesLabel	string	"Promedio"	Nombre de la serie en trend.
legend	ReactNode	-	Leyenda extra.
className	string	-	Clases extra.

Cuándo sí y cuándo no

Hacé

Describí el gráfico en label.
Marcá bajas sostenidas con highlight.
Con pocos pulsos, avisá que la lectura es provisional.

Evitá

No muestres tendencia con Niebla (menos de 8 pulsos en la semana).
No cambies la escala 1 a 5.
No pongas más de una serie.

El gráfico es un figure con leyenda y un control role="slider" nombrado por label.
Foco o hover muestran el valor; las flechas recorren los puntos.