KPIs y métricas

Un cuadro de mando se basa en la cifra: número grande, etiqueta corta y una tendencia que indica si va bien o mal. La tarjeta destacada es DnzKpiCard. Para una tira compacta de varios números (cabeceras, pies de ficha), DnzKpiInline. Para agrupar tarjetas en rejilla, DnzKpiRow. Para grupos de estadísticas dentro de una tarjeta, DnzStatsDisplay o DnzStatItem. Cuando el dato decide su propio formato, DnzDynamicStat.

Qué componente uso

DnzKpiCard

La tarjeta de un KPI: título, cifra grande, icono opcional, color, etiqueta de variación porcentual y minigrá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="frente al mes anterior" Tooltip="Facturación del mes en curso" />

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

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

La variación se colorea sola: 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.

Parámetros

Acepta atributos extra que se pasan al elemento raíz (el parámetro se llama Attributes). HighlightColorType admite Undefined, Auto, Red, Blue, Green, Yellow, Orange, Purple, Black, White, Gray.

DnzKpiRow

Contenedor en rejilla para tus DnzKpiCard. Coloca dentro las tarjetas que necesites; 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="frente al 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 barra vertical. Para cabeceras de ficha, pies de tarjeta o líneas de metainformación. Los elementos se pasan como lista, no como marcado 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 Label, Value y, opcionales, Icon, ValueColor, IconColor y Tooltip. Si IconColor va vacío, el icono hereda ValueColor.

DnzStatItem

Un dato suelto: icono a la izquierda, valor grande y etiqueta debajo. El valor es contenido libre (ChildContent), así que dentro cabe un DnzSpanMoney, una etiqueta u otro componente.

<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 un nombre de icono Material o una ruta de imagen: si empieza por / o http, lo muestra como <img>.

Parámetros

DnzStatsDisplay

Grupo de estadísticas valor + etiqueta + unidad dentro de una tarjeta, repartidas en horizontal. Recibe una lista de StatisticModel y muestra una celda por cada métrica.

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

@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 string: Value, Label y Unit.

DnzStatsDisplay.Item

La celda que muestra cada cifra: valor grande, unidad pequeña al lado y etiqueta debajo. DnzStatsDisplay la instancia por ti, una por cada elemento de Statistics.

DnzDynamicStat

Recibe un DnzDynamicStatData y elige cómo mostrarlo. Con Render="Auto", una o varias series con un solo valor se muestran como KPI, y las series con categorías, como gráfica hasta 20 categorías y como tabla por encima. Con AllowViewSwitch=true el usuario alterna entre columnas, líneas, anillo, barras apiladas, radar, polar y tabla.

<DnzCard>
    <DnzCardTitle Icon="show_chart" Title="Ingresos frente a gastos" />
    <DnzDynamicStat Data=@_dataEvolucion Render="DnzDynamicStatRenderE.Chart" ChartType="DnzDynamicStatChartTypeE.Line" AllowViewSwitch=true ChartHeight="280" />
</DnzCard>

@code {
    private DnzDynamicStatData _dataEvolucion;

    protected override void OnInitialized()
    {
        _dataEvolucion = new DnzDynamicStatData
        {
            IsLoaded = true,
            Series = new()
            {
                new DnzDynamicStatSeries
                {
                    Label = "Ingresos", Color = "#16a34a", Format = DnzDynamicStatFormatE.Money,
                    Items = new() { new("Ene", 48250), new("Feb", 51900), new("Mar", 47300) }
                },
                new DnzDynamicStatSeries
                {
                    Label = "Gastos", Color = "#dc2626", Format = DnzDynamicStatFormatE.Money,
                    Items = new() { new("Ene", 31200), new("Feb", 29800), new("Mar", 33500) }
                }
            }
        };
    }
}

Un solo número se muestra como tarjeta KPI:

<DnzDynamicStat Data=@_ventasMes Title="Ventas del mes" Icon="payments" />

@code {
    private DnzDynamicStatData _ventasMes = new()
    {
        IsLoaded = true,
        Series = new() { new DnzDynamicStatSeries { Label = "Ventas", SingleValue = 48250, Format = DnzDynamicStatFormatE.Money } }
    };
}

Mientras IsLoading es true o Data.IsLoaded es false, muestra un DnzSkeleton. Si Data.ErrorMessage tiene texto, muestra el error en su lugar.

Parámetros

Acepta atributos extra (data-testid, aria-*) que van al elemento raíz de cada estado.

Modelo de datos

DnzDynamicStatFormatE admite Auto, Money, Decimal, Integer, Percent y Raw. Los tipos están en DinaZen.Components.DnzDynamicStat.

DnzTimeComparisonDisplay

Compara tiempo planificado contra tiempo real con color de semáforo: verde hasta el 80 %, amarillo hasta el 100 %, rojo al pasarse. Para tareas, partes de trabajo y presupuestos de horas. Los tiempos entran en minutos y se formatean a h y m.

<DnzTimeComparisonDisplay PlannedTime="480" ActualTime="510" Label="Reparación 1042" />

Eso muestra 8h 30m / 8h con la etiqueta +30m en rojo y la barra de progreso. Variantes:

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

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

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

Parámetros

DnzProgressRhythm

Barra de progreso con marcador de progreso esperado: muestra CurrentProgress como barra y ExpectedProgress como una marca vertical, e indica si vas adelantado, en ritmo o retrasado. Los dos valores son porcentajes (0 a 100). Los textos se cambian por parámetro; los valores por defecto están en inglés.

<DnzProgressRhythm CurrentProgress="62" ExpectedProgress="70" Title="Objetivo trimestral" ExpectedLabel="esperado" GoalAchievedText="Objetivo cumplido" OnTrackText="En ritmo" AheadText="Adelantado" BehindText="Retrasado" />

Parámetros

DnzSummaryBar

Barra de totales para informes de Flex. Lee el ReportContext que publica DnzReportProvider y suma las columnas de dinero, la de minutos, cuenta los true de las booleanas y muestra el rango de la fecha principal.

<DnzReportProvider Client=@Client ReportId="7c1d4e90-2f5a-41b8-bc63-9e0a1b2c3d4f">
    <DnzSummaryBar />
</DnzReportProvider>

Parámetros

Relacionado

• Componentes
• DinaZen
• Patrones de uso
• Etiquetas y estados
• Tarjetas y maquetación
• Tablas e informes
• Informes de Flex
• Cliente Dinaup