Datos tipados (Spans)

Estos componentes muestran cada celda de un informe con su formato: el dinero con su símbolo, la fecha en hora local, los minutos como duración, los bytes como MB. No hace falta formatear a mano ni tener en cuenta la cultura del cliente.

Todos siguen el mismo patrón: reciben el valor sin formato y deciden cómo mostrarlo. Casi todos aceptan un Class y un FontSize. El formato y la región salen del ICultureService que registra AddDinaZen, así que el mismo componente se adapta a cualquier país. Cada uno corresponde a un tipo de columna de un informe del SDK: la columna trae el dato y el span lo muestra.

El tipo del dato decide el componente: un decimal de euros va en DnzSpanMoney, un porcentaje en DnzSpanPercent, unos minutos en DnzSpanMinutes. No hay un span genérico que valga para todo.

Qué formatea cada uno

AutoColor: verde positivo, rojo negativo

DnzSpanMoney, DnzSpanDecimal y DnzSpanPercent traen AutoColor. Activado, el valor se muestra en verde si es positivo y en rojo si es negativo. Sirve para saldos, márgenes y variaciones, donde el signo distingue lo que suma de lo que resta.

<DnzSpanMoney Amount=@cliente.Saldo AutoColor=true />

<DnzSpanMoney Amount=@factura.Total />

DnzSpanMoney

Importes de dinero con el símbolo de moneda y el formato de la región del cliente. Para listados de facturas, totales y resúmenes.

<DnzSpanMoney Amount=@factura.Total AutoColor=true />

Con etiqueta e icono para un KPI en una tarjeta:

<DnzSpanMoney Amount=@resumen.PendienteCobro Label="Pendiente de cobro" Icon="payments" AutoColorRed=true FontSize="20px" />

Parámetros

DnzSpanDecimal

Cualquier decimal con un sufijo libre detrás: unidades de stock, kilos u otra unidad. Donde DnzSpanMoney pone la moneda, este pone el texto de Symbol.

<DnzSpanDecimal Value=@articulo.Stock Symbol=" uds" />

Una diferencia con color según el signo:

<DnzSpanDecimal Value=@diferencia Symbol=" kg" AutoColor=true />

Parámetros

DnzSpanPercent

Porcentaje: recibe el número en escala de 0 a 100 (12.5), añade el % y recorta los decimales sobrantes.

<DnzSpanPercent Value=@informe.Margen Decimals="2" AutoColor=true />

Parámetros

DnzSpanInteger

Entero: trunca la parte decimal del valor y lo muestra sin símbolos. Para contadores y cantidades enteras.

<DnzSpanInteger Value=@item.Quantity />

Parámetros

DnzSpanDate

Fecha (sin hora) en formato legible y localizado, con una etiqueta opcional que indica si es Hoy, Mañana, Ayer, Pasado o Futuro. Trabaja con DateOnly.

<DnzSpanDate Value=@DateOnly.FromDateTime(item.FechaCreacion) />

Con la etiqueta de estado para una agenda de vencimientos:

<DnzSpanDate Value=@vencimiento.Fecha ShowStatus=true />

Parámetros

DnzSpanDateTime

Fecha y hora completas. Se muestra en modo relativo (hace 5 min), como texto pequeño y discreto o con la etiqueta de estado. Trabaja con DateTime.

<DnzSpanDateTime Value=@item.FechaModificacion />

Modo relativo para una lista de actividad reciente:

<DnzSpanDateTime Value=@evento.Cuando Relative=true ShowStatus=true />

Parámetros

DnzSpanMinutes

Convierte un número de minutos en una duración corta: 45 se muestra como 45m, 90 como 1h 30m y 180 como 3h. Admite negativos (les antepone el signo). Para tiempos de servicio, citas o tareas medidas en minutos.

<DnzSpanMinutes Value=@cita.DuracionMinutos />

Parámetros

DnzSpanKV

Par clave-valor: la etiqueta encima o a la izquierda y el valor debajo o al lado. Es el bloque de detalle típico de un diálogo o una ficha. Recibe el valor ya formateado como string, o un ChildContent con marcado libre.

<DnzSpanKV Key="Estado" Value=@item.Estado Icon="check_circle" />

<DnzSpanKV Key="Total" Horizontal=true Icon="euro" TextRight=true>
    <DnzSpanMoney Amount=@factura.Total />
</DnzSpanKV>

Parámetros

Acepta atributos extra que se pasan al elemento raíz.

DnzSpanBytes

Tamaño de fichero a partir de un long de bytes, con cambio automático de unidad: B, KB, MB, GB o TB según la magnitud. Para adjuntos, copias de seguridad y almacenamiento.

<DnzSpanBytes Value=@adjunto.SizeInBytes />

Parámetros

DnzSpanGigaBytes

Igual que DnzSpanBytes pero partiendo de GB (decimal). A partir de 1024 GB sube a TB; por debajo de 1 GB baja a MB o KB. Con AutoColor avisa cuando el consumo pasa de 50 o de 100 GB.

<DnzSpanGigaBytes Value=@tenant.AlmacenamientoGb AutoColor=true />

Parámetros

DnzSpanGrams

Peso a partir de gramos (decimal). Hasta 1000 lo muestra en gr; por encima pasa a Kg con dos decimales. Para básculas y pesaje en TPV.

<DnzSpanGrams Value=@linea.PesoGramos FontSize="15px" />

Parámetros

DnzTimeSpanDisplay

Muestra un TimeSpan descompuesto en partes con su etiqueta: 2d 3h 15m. Solo incluye las partes distintas de cero. Número y etiqueta tienen estilos por separado.

<DnzTimeSpanDisplay Value=@(sesion.Fin - sesion.Inicio) ShowSeconds=true />

Con texto para el caso vacío:

<DnzTimeSpanDisplay Value=@tarea.TiempoInvertido EmptyText="Sin registrar" />

Parámetros

DnzTimeSpanDisplayCompact

El mismo desglose que DnzTimeSpanDisplay, con número y etiqueta en tamaño pequeño. Para tablas y celdas.

<DnzTimeSpanDisplayCompact Value=@tarea.Duracion />

Parámetros

DnzTimeSpanDisplayBadge

El mismo desglose, con cada parte dentro de una etiqueta. Para resaltar duraciones en cabeceras o resúmenes.

<DnzTimeSpanDisplayBadge Value=@sesion.Duracion />

Parámetros

Patrón típico: columna de informe a span

Estos componentes encajan sobre las filas que devuelve un informe del SDK. Cada columna tiene su span.

@foreach (var fila in informe.Filas)
{
    <DnzSpanKV Key="Cliente" Value=@fila.Cliente @key=@fila.ID />
    <DnzSpanMoney Amount=@fila.Total AutoColor=true />
    <DnzSpanDate Value=@fila.Fecha ShowStatus=true />
}

Relacionado

• KPIs y métricas: cuando el dato tipado es la cifra protagonista de una tarjeta.
• Etiquetas y estados: para estados y etiquetas de color, no valores numéricos.
• Tablas e informes: listados donde estos spans son las celdas.
• Componentes: el resto de familias de DinaZen.
• Informes de Dinaup Flex: de dónde salen las columnas que muestras.
• Cliente Dinaup (SDK .NET): el que trae los datos.