Vistas avanzadas

Componentes especializados fuera del CRUD: línea de tiempo Gantt, código resaltado para documentar dentro de la app y selectores de rango de fechas con presets.

Piezas más especializadas, fuera del CRUD de cada día. Aquí tienes la planificación en línea de tiempo con DnzGenericGantt, el código resaltado para documentar dentro de la app (DnzHighlightCode y DnzCodeWindow) y los selectores de rango de fechas con presets para alimentar informes y dashboards (DnzDateRangeSelector y DnzDateTimeRangeSelector).

Qué componente uso

Tres familias dentro de la página:

Necesito...	Componente
Pintar tareas/recursos en una línea de tiempo con zoom y navegación	`DnzGenericGantt`
Mostrar un snippet con resaltado de sintaxis, copiar y números de línea	`DnzHighlightCode`
Lo mismo pero con aspecto de ventana (dots de macOS, temas, footer)	`DnzCodeWindow`
Elegir un rango de fechas (solo día) con presets tipo "Últimos 7 días"	`DnzDateRangeSelector`
Elegir un rango con fecha y hora (incluye el HH:mm)	`DnzDateTimeRangeSelector`

DnzGanttToolBar no se usa suelto: lo monta DnzGenericGantt por dentro para la barra de navegación y zoom. Lo documentamos abajo por transparencia, pero tú solo tocas el Gantt.

DnzGenericGantt

Línea de tiempo tipo Gantt: filas por grupo (empleado, recurso, tarea) y barras por intervalo de tiempo, con barra superior para navegar, cambiar de vista (Horas / Semana / Mes / Año) y hacer zoom.

Le pasas dos listas: los Groups (las filas) y los SourceItems (las barras). Cada item se asocia a su fila por GroupId. El componente recalcula el layout solo cuando cambias de vista o de fecha.

<DnzGenericGantt Groups=@_grupos SourceItems=@_citas OnItemClick=@AbrirCita />

@code {
    private List<GanttGroup> _grupos = new();
    private List<GanttItem> _citas = new();

    protected override void OnInitialized()
    {
        _grupos.Add(new GanttGroup { Id = "tecnico-1", Text = "Laura (Taller A)" });
        _grupos.Add(new GanttGroup { Id = "tecnico-2", Text = "Marcos (Taller B)" });

        _citas.Add(new GanttItem("c-1001", "tecnico-1", "Revision 8430-KLM", DateTime.Today.AddHours(9), DateTime.Today.AddHours(11), null));
        _citas.Add(new GanttItem("c-1002", "tecnico-2", "ITV 1190-ZRT", DateTime.Today.AddHours(10), DateTime.Today.AddHours(12), null, "background:#0d6efd;color:#fff"));
    }

    private void AbrirCita(GanttItem item) { /* item.Data trae tu objeto de negocio */ }
}

Parámetro	Tipo	Para qué
`Groups`	`List<GanttGroup>`	Filas del Gantt. Cada `GanttGroup` tiene `Id`, `Text` y `Template` opcional para pintar la celda de la fila.
`SourceItems`	`List<GanttItem>`	Barras a colocar. Cada `GanttItem` se ata a su fila por `GroupId` y lleva `From`/`To`, `Text`, `Tooltip` y `RowStyle` (CSS inline de la barra).
`OnItemClick`	`EventCallback<GanttItem>`	Se dispara al hacer clic en una barra. Recupera tu entidad desde `item.Data`.

Por encima de 20.000 items el componente deja de pintar y muestra un aviso de "demasiados resultados". Es a propósito: filtra antes de pasarle los datos, no le eches el listado entero.

GanttItem se construye con el constructor new GanttItem(id, groupId, text, from, to, data, styleX). El ultimo parametro es CSS inline opcional para colorear la barra.

DnzGanttToolBar

Barra de control del Gantt: flechas anterior/siguiente, botón "Hoy", selector de vista (Horas / Semana / Mes / Año) y zoom. La monta DnzGenericGantt internamente; normalmente no la instancias tú.

<DnzGanttToolBar Viewport=@_viewport ViewportChanged=@OnViewportChanged />

@code {
    private GanttViewport _viewport = new() { ViewMode = GanttViewMode.Hour, FocusDate = DateTime.Today };

    private void OnViewportChanged(GanttViewport vp) => _viewport = vp;
}

Parámetro	Tipo	Default	Para qué
`Viewport`	`GanttViewport`	(requerido)	Estado actual: `FocusDate`, `ViewMode` y `Zoom`. La barra lo lee para pintar titulo y modo activo.
`ViewportChanged`	`EventCallback<GanttViewport>`		Se dispara al navegar, cambiar de vista o tocar el zoom. Devuelve una copia nueva del viewport.

DnzHighlightCode

Bloque de código con resaltado de sintaxis (highlight.js), cabecera con el lenguaje y el nombre de fichero, botón de copiar y números de línea opcionales. Para documentar dentro de la app: snippets de setup, ejemplos de uso, comandos.

<DnzHighlightCode Code=@_snippet Language="csharp" DnzFileName="Program.cs" ShowLineNumbers="true" />

@code {
    private string _snippet = "builder.Services.AddDinaZen();";
}

Parámetro	Tipo	Default	Para qué
`Code`	`string`	`""`	El código a mostrar.
`Language`	`string`	`""`	Lenguaje para el resaltado: `csharp`, `razor`, `bash`, `json`, `sql`, `vb`... Acepta alias (`cs`, `js`, `cshtml`).
`DnzFileName`	`string`	`""`	Nombre de fichero a mostrar en la cabecera (ej. `Program.cs`).
`ShowCopy`	`bool`	`true`	Muestra el boton de copiar al portapapeles.
`ShowLineNumbers`	`bool`	`false`	Pinta la columna de números de línea.
`Size`	`DnzHighlightCodeSize`	`Default`	Tamaño del bloque: `Small`, `Default` o `Large`.

Razor (razor / cshtml) se resalta como XML por dentro. Es el truco de highlight.js, tú solo pasas Language="razor".

DnzCodeWindow

Lo mismo que DnzHighlightCode pero con estética de ventana: los tres puntos rojo/amarillo/verde de macOS, título, temas de color y un footer opcional. Para landings, demos o documentación donde quieras que el código "se vea bonito".

<DnzCodeWindow Code=@_setup Language="csharp" Title="Program.cs" Theme="DnzCodeWindow.DnzCodeWindowTheme.Dracula" ShowLineNumbers="true">
    <span class="text-muted">Registra DinaZen en el arranque.</span>
</DnzCodeWindow>

@code {
    private string _setup = "builder.Services.AddDinaZen();";
}

Parámetro	Tipo	Default	Para qué
`Code`	`string`	`""`	El código a mostrar.
`Language`	`string`	`""`	Lenguaje del resaltado (mismos alias que `DnzHighlightCode`, más `py`, `go`, `rs`, `dockerfile`...).
`Title`	`string`	`""`	Titulo de la ventana (nombre de fichero o descripcion).
`ShowCopy`	`bool`	`true`	Muestra el boton de copiar.
`ShowLineNumbers`	`bool`	`false`	Pinta los números de línea.
`Tilted`	`bool`	`false`	Aplica un efecto 3D inclinado, útil en landings.
`Size`	`DnzCodeWindowSize`	`Default`	`Small`, `Default` o `Large`.
`Theme`	`DnzCodeWindowTheme`	`Dark`	Tema visual: `Dark`, `Light`, `Monokai` o `Dracula`.
`ChildContent`	`RenderFragment`		Contenido del footer de la ventana (nota, enlace, etc.).

Si solo quieres mostrar un snippet copiable con resaltado en una ficha o subpage, tira de DnzHighlightCode. Es más plano y ocupa menos.

Si es una landing o una demo donde el código es parte del diseño, DnzCodeWindow con Theme y Tilted queda mucho mejor.

DnzDateRangeSelector

Selector de rango de fechas (solo día, sin hora) con un desplegable de presets: Hoy, Ayer, Últimos 7 días, Este mes, Este trimestre, Este año, etc. Al elegir "Personalizado" aparecen dos date pickers Desde/Hasta. El componente devuelve el rango ya calculado como DateOnly; tú solo recargas datos.

<DnzDateRangeSelector @bind-SelectedPreset=@_preset OnRangeChanged=@CargarFacturas />

@code {
    private DnzDateRangeSelector.DateRangePreset _preset = DnzDateRangeSelector.DateRangePreset.Last30Days;

    private async Task CargarFacturas((DateOnly From, DateOnly To) rango)
    {
        // recargar el listado de facturas entre rango.From y rango.To
    }
}

Parámetro	Tipo	Default	Para qué
`SelectedPreset`	`DateRangePreset`	`Last7Days`	Preset activo. Bindeable con `@bind-SelectedPreset`.
`SelectedPresetChanged`	`EventCallback<DateRangePreset>`		Se dispara al cambiar de preset (lo usa el binding).
`OnRangeChanged`	`EventCallback<(DateOnly From, DateOnly To)>`		Se dispara con el rango ya calculado cada vez que cambia. Aquí recargas tus datos.

OnRangeChanged salta tambien en el primer render con el preset por defecto, asi que el listado carga solo sin tener que disparar nada a mano.

DnzDateTimeRangeSelector

Gemelo del anterior pero con hora: los date pickers personalizados incluyen HH:mm y el rango se devuelve como DateTime (no DateOnly). Úsalo cuando el intervalo importa al minuto: logs, fichajes, eventos, auditoría.

<DnzDateTimeRangeSelector @bind-SelectedPreset=@_preset OnRangeChanged=@CargarEventos />

@code {
    private DnzDateTimeRangeSelector.DateTimeRangePreset _preset = DnzDateTimeRangeSelector.DateTimeRangePreset.Today;

    private async Task CargarEventos((DateTime From, DateTime To) rango)
    {
        // consultar eventos entre rango.From y rango.To
    }
}

Parámetro	Tipo	Default	Para qué
`SelectedPreset`	`DateTimeRangePreset`	`Last7Days`	Preset activo. Bindeable con `@bind-SelectedPreset`.
`SelectedPresetChanged`	`EventCallback<DateTimeRangePreset>`		Se dispara al cambiar de preset (lo usa el binding).
`OnRangeChanged`	`EventCallback<(DateTime From, DateTime To)>`		Se dispara con el rango ya calculado (con hora) cada vez que cambia.

Regla rápida: si el dato es "por día" (ventas, stock, facturación) usa DnzDateRangeSelector. Si necesitas el minuto exacto (logs, fichajes, trazabilidad) usa DnzDateTimeRangeSelector. No mezcles tipos: uno te da DateOnly y el otro DateTime.

Relacionado: Intro a DinaZen · Índice de componentes · SDK .NET · Informes Flex · Guías de estilo C#/Blazor