Dashboard Nidus/Bar Chart

Bar Chart

Gráfico de barras horizontal para el dashboard de administración. Cada barra se escala proporcionalmente al valor máximo del conjunto de datos. Incluye etiqueta, barra y valor con porcentaje. Ideal para rankings y distribuciones.

Datos por defecto

Usa DASHBOARD_BAR_CHART_MOCK si no se pasan datos.

Distribución por navegador

Enero – Junio 2024

Planillas o Excel
186 (32%)
Whatsapp
145 (25%)
Papel o cuaderno
107 (19%)
Sistema Digital
83 (14%)
No hay un control claro
52 (9%)
Chrome lidera con el 33%

Basado en datos de sesiones del período.

Datos personalizados

Pasar data prop con tu propio array.

Respuestas por ciudad

Mayo 2026

Buenos Aires
312 (33%)
Córdoba
245 (26%)
Rosario
178 (19%)
Mendoza
134 (14%)
La Plata
89 (9%)
Buenos Aires con mayor participación

Distribución geográfica de respuestas recibidas.

Color personalizado

El color de barra es configurable con la prop color.

Planillas o Excel
186 (32%)
Whatsapp
145 (25%)
Papel o cuaderno
107 (19%)
Sistema Digital
83 (14%)
No hay un control claro
52 (9%)

Props

Interfaz pública del componente DashboardBarChart.

PropTipoDefaultDescripción
dataIDashboardBarChartEntry[]DASHBOARD_BAR_CHART_MOCKArray de entradas con label (string) y value (number).
colorstring"#486057"Color de relleno de las barras (cualquier valor CSS válido).

IDashboardBarChartEntry

interface IDashboardBarChartEntry {
  label: string;  // Etiqueta del eje Y
  value: number;  // Valor numérico
}

Uso

import { DashboardBarChart } from '@repo/ui';

const data = [
  { label: 'Chrome',  value: 186 },
  { label: 'Firefox', value: 145 },
  { label: 'Safari',  value: 107 },
];

<DashboardBarChart data={data} color="#486057" />