Dashboard Nidus/Chart Container
Chart Container
Tarjeta contenedora para gráficos del dashboard. Incluye cabecera con título y rango de fechas, un slot de contenido donde se inserta el gráfico, y un footer con estadísticas y descripción. Soporta estado vacío.
Con gráfico de barras
ChartContainer envolviendo un DashboardBarChart.
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 33%
Total de visitas en el período seleccionado.
Con gráfico de dona
ChartContainer envolviendo un DashboardDonutChart.
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 definidos.
Estado vacío
Con isEmpty={true} se muestra el texto de emptyText en lugar del gráfico.
Distribución por navegador
Enero – Junio 2024
Aún no hay datos disponibles para mostrar.
Props
Interfaz pública del componente DashboardChartContainer.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
title | string | — | Título del gráfico mostrado en la cabecera. |
date | string | undefined | Rango de fechas o período (e.g. "Enero – Junio 2024"). |
stats | string | undefined | Estadística principal del footer (acompañada del ícono AlertCircle). |
description | string | undefined | Descripción secundaria en el footer. |
isEmpty | boolean | false | Activa el estado vacío: oculta children y muestra emptyText. |
emptyText | string | "Aún no hay datos disponibles..." | Texto mostrado cuando isEmpty es true. |
children | ReactNode | undefined | Slot del gráfico. Se oculta cuando isEmpty es true. |
Uso
Envolvé cualquier gráfico de dashboard-nidus dentro del slot children.
import {
DashboardChartContainer,
DashboardBarChart,
} from '@repo/ui';
<DashboardChartContainer
title="Distribución por navegador"
date="Enero – Junio 2024"
stats="Chrome lidera con 33%"
description="Total de visitas en el período."
>
<DashboardBarChart data={myData} />
</DashboardChartContainer>