Dashboard Nidus/Donut Chart

Donut Chart

Gráfico de dona construido con recharts. Muestra distribución proporcional entre categorías con leyenda personalizada. Los colores se asignan automáticamente o pueden pasarse por datos.

Datos por defecto

Usa DASHBOARD_DONUT_CHART_MOCK si no se pasan datos.

Distribución por categoría

Enero – Junio 2024

Propietario 400
Administrador 300
Arquitecto 200
Comisión directiva 150
Seguridad 100
Grupo A representa el 34%

Distribución proporcional entre los grupos.

Colores personalizados

Pasar color en cada entrada para sobreescribir la paleta automática.

Tipo de obra por categoría

Mayo 2026

Residencial 520
Comercial 310
Industrial 180
Mixto 95
Residencial es el tipo dominante

Basado en obras registradas en el período.

Standalone

El gráfico puede usarse sin ChartContainer.

Propietario 400
Administrador 300
Arquitecto 200
Comisión directiva 150
Seguridad 100

Props

Interfaz pública del componente DashboardDonutChart.

PropTipoDefaultDescripción
dataIDashboardDonutChartEntry[]DASHBOARD_DONUT_CHART_MOCKArray con label, value y color opcional por entrada.
chartHeightnumber192Altura en píxeles del canvas de recharts.

Uso

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

const data = [
  { label: 'Grupo A', value: 400 },
  { label: 'Grupo B', value: 300 },
  { label: 'Grupo C', value: 200, color: '#f47840' },
];

<DashboardDonutChart data={data} chartHeight={220} />