KPIs y métricas

Para un cuadro de mando lo que manda es la cifra: número grande, etiqueta corta y, si puedes, una tendencia que diga si va bien o mal. Esta familia te da las piezas para montar ese panel sin pelearte con HTML. La tarjeta destacada la pones con DnzKpiCard. Cuando quieres una tira compacta de varios números (cabeceras, pies de ficha) tiras de DnzKpiInline. Para agrupar varias tarjetas en rejilla responsive usas DnzKpiRow. Para grupos de estadísticas dentro de una card, DnzStatsDisplay o DnzStatItem. Y para comparar tiempo planificado contra real, DnzTimeComparisonDisplay.

Qué componente uso

DnzKpiCard

La tarjeta de un KPI: título, cifra grande, icono opcional, color, badge de comparativa porcentual y mini-gráfico de tendencia. Tiene tres modos según cómo la configures.

<DnzKpiCard Title="Ventas del mes" Value=@($"€ {ventasMes:N0}") Icon="payments" Color="#1565c0" DeltaPercent=@variacionPct DeltaLabel="vs mes anterior" Tooltip="Facturacion del mes en curso" />

<DnzKpiCard IsCompact=true Title="Activas" Value=@activas.STR() Icon="check_circle" Color="#16a34a" />

<DnzKpiCard Title="MRR" Value=@($"€ {mrr:N0}") Icon="trending_up" HighlightColor="DnzKpiCard.HighlightColorType.Green" Tooltip="Monthly Recurring Revenue" />

El delta se colorea solo: positivo en verde, negativo en rojo, cero en gris, con su flecha. Si tu métrica es "cuanto menos mejor" (gastos, tiempos), pon DeltaInvertColors=true para que bajar salga en verde.

Parámetros

HighlightColorType admite: Undefined, Auto, Red, Blue, Green, Yellow, Orange, Purple, Black, White, Gray.

DnzKpiRow

Contenedor en rejilla responsive para tus DnzKpiCard. Mete dentro cuantas tarjetas quieras y el grid se reparte solo según el ancho mínimo que le digas. No tienes que tocar el grid: las columnas se ajustan al ancho disponible y bajan de línea cuando no caben.

<DnzKpiRow MinCardWidth="260">
    <DnzKpiCard Title="Ventas del mes" Value=@($"€ {ventasMes:N0}") Icon="payments" Color="#1565c0" DeltaPercent=@variacionPct DeltaLabel="vs mes anterior" />
    <DnzKpiCard Title="Tickets emitidos" Value=@ticketsHoy.STR() Icon="receipt_long" Color="#6a1b9a" />
    <DnzKpiCard Title="Stock bajo mínimo" Value=@stockBajo.STR() Icon="warning" Color="#e65100" />
</DnzKpiRow>

Parámetros

DnzKpiInline

Tira horizontal compacta de varios números, separados por punto, barra o pipe (estilo GitHub). Ideal para cabeceras de ficha, pies de card o líneas de meta-información. Los items se pasan como lista, no como markup hijo.

<DnzKpiInline Items=@KpiItems Separator="DnzKpiInline.SeparatorType.Pipe" />

@code {
    List<DnzKpiInline.ItemModel> KpiItems = new()
    {
        new("Horas oficiales", "40h 00m", Icon: "calendar_month"),
        new("Realizado", "38h 30m", Icon: "work", ValueColor: "#d97706"),
        new("Horas extra", "2h 15m", Icon: "more_time"),
    };
}

Parámetros

ItemModel es un record con estos campos (todos menos los dos primeros son opcionales): Label, Value, Icon, ValueColor, IconColor, Tooltip. Si IconColor va vacío, el icono hereda el color del valor.

DnzStatItem

Un stat suelto: icono a la izquierda, valor grande y etiqueta debajo. A diferencia de DnzKpiCard, el valor es contenido libre (ChildContent), así que puedes meter un DnzSpanMoney, un badge o lo que necesites.

<div class="d-flex flex-wrap gap-4">
    <DnzStatItem Label="Clientes activos" Icon="people"><span>1.234</span></DnzStatItem>
    <DnzStatItem Label="Facturado" Icon="payments"><DnzSpanMoney Amount=@totalFacturado /></DnzStatItem>
    <DnzStatItem Label="Pedidos" Icon="shopping_cart"><span>89</span></DnzStatItem>
</div>

El Icon acepta tanto un nombre de icono Material como una ruta de imagen: si empieza por / o http, lo pinta como <img>.

Parámetros

DnzStatsDisplay

Grupo de estadísticas valor + etiqueta + unidad dentro de una card, repartidas en horizontal. Le pasas una lista de StatisticModel como datos (no como hijos) y él se encarga del layout, pintando una celda por cada métrica.

<RadzenCard>
    <DnzCardTitle Title="Resumen" Icon="analytics" Compact=true />
    <DnzStatsDisplay Statistics=@stats Variant="Variant.Text" />
</RadzenCard>

@code {
    private List<DnzStatsDisplay.StatisticModel> stats = new()
    {
        new() { Value = "12", Label = "Usuarios" },
        new() { Value = "45,3", Label = "Base de datos", Unit = "GB" },
        new() { Value = "8,1", Label = "Archivos", Unit = "GB" },
    };
}

Parámetros

StatisticModel tiene tres campos: Value (string), Label (string) y Unit (string).

DnzStatsDisplay.Item (subcomponente)

Es la celda que pinta cada cifra individual: valor grande, unidad más pequeña al lado y etiqueta debajo. No lo usas directamente: DnzStatsDisplay lo instancia por ti, uno por cada elemento de Statistics. Lo documentamos para que veas qué recibe cada celda.

Parámetros

DnzTimeComparisonDisplay

Compara tiempo planificado contra tiempo real y lo pinta con color de semáforo: verde si vas holgado, amarillo si te acercas al límite, rojo si te pasas. Pensado para tareas, partes de trabajo y presupuestos de horas. Los tiempos entran en minutos y se formatean solos a h/m.

<DnzTimeComparisonDisplay PlannedTime="480" ActualTime="510" Label="Reparacion 1042" />

Eso pinta "8h 30m / 8h" con badge "+30m" en rojo (te has pasado) y barra de progreso. Variantes:

<DnzTimeComparisonDisplay PlannedTime="120" ActualTime="90" Label="Montaje" />

<DnzTimeComparisonDisplay PlannedTime="120" ActualTime="90" Compact=true />

<DnzTimeComparisonDisplay ActualTime="135" Label="Tiempo invertido" />

El color y el icono de estado salen solos del porcentaje: verde hasta el 80%, amarillo entre 80% y 100%, rojo al pasarse o si el tiempo real es negativo.

Parámetros

DnzSummaryBar

Barra de totales para informes Flex. No le pasas datos a mano: lee el ReportContext de la cascada y suma las columnas de dinero, numéricas, minutos, booleanas (cuenta los true, ej. 5 / 20) y el rango de la fecha principal. La pones dentro de un informe y se rellena sola.

<CascadingValue Value=@reportContext>
    <DnzSummaryBar />
</CascadingValue>

Parámetros

Relacionado

Ver tambien: Índice de componentes · Intro DinaZen · Cookbook de patrones · Badges y estados · Tarjetas y layout · Tablas e informes · Informes (Flex) · Cliente Dinaup