Dashboard Nidus/Pie Chart

Pie Chart

Gráfico de torta construido con recharts. Similar al DashboardDonutChart pero sin el hueco central. Ideal para mostrar distribuciones de categorías mutuamente excluyentes.

Datos por defecto

Usa DASHBOARD_PIE_CHART_MOCK si no se pasan datos.

Distribución por categoría

Enero – Junio 2024

Grupo A 400
Grupo B 300
Grupo C 200
Grupo D 150
Grupo E 100
Grupo A es la categoría dominante

Distribución proporcional entre los grupos.

Estado de obras

Ejemplo con datos de estado de proyectos de construcción.

Estado de obras registradas

Mayo 2026

En progreso 280
Completado 420
Pausado 145
Cancelado 65
420 obras completadas este período

Distribución según el estado de avance.

Standalone

El gráfico puede usarse sin ChartContainer.

Grupo A 400
Grupo B 300
Grupo C 200
Grupo D 150
Grupo E 100

Props

Interfaz pública del componente DashboardPieChart.

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

Uso

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

const data = [
  { label: 'En progreso', value: 280 },
  { label: 'Completado',  value: 420, color: '#486057' },
  { label: 'Cancelado',   value: 65 },
];

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