nexabase-report 0.2.9 → 0.2.11

package/examples/integration/BlazorServer.razor

@@ -1,91 +1,91 @@
-@page "/report/{ReportId:int}"
-@inject IHttpClientFactory HttpFactory
-@inject IJSRuntime JS
-
-<PageTitle>Reporte #@ReportId</PageTitle>
-
-<div class="report-wrapper" style="height: @Height; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
-    <nexa-viewer ref="viewerElement" id="@($"r-{ReportId}")"></nexa-viewer>
-</div>
-
-<div class="report-actions mt-4 flex gap-2">
-    <button class="btn btn-primary" @onclick="ExportPdf">
-        <i class="pi pi-file-pdf"></i> Exportar PDF
-    </button>
-    <button class="btn btn-success" @onclick="ExportExcel">
-        <i class="pi pi-file-excel"></i> Exportar Excel
-    </button>
-    <button class="btn btn-outline" @onclick="Refresh">
-        <i class="pi pi-refresh"></i> Recargar
-    </button>
-</div>
-
-@code {
-    [Parameter] public int ReportId { get; set; }
-    [Parameter] public string Height { get; set; } = "800px";
-
-    private ElementReference viewerElement;
-    private HttpClient? _http;
-
-    protected override void OnInitialized()
-    {
-        _http = HttpFactory.CreateClient("NexaBaseApi");
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-        {
-            await LoadReport();
-        }
-    }
-
-    private async Task LoadReport()
-    {
-        try
-        {
-            var definition = await _http!.GetFromJsonAsync<dynamic>($"/api/reports/{ReportId}");
-            var data = await _http!.GetFromJsonAsync<dynamic>($"/api/reports/{ReportId}/data");
-
-            await JS.InvokeVoidAsync("blazorInterop.renderReport", viewerElement, definition, data);
-        }
-        catch (Exception ex)
-        {
-            Console.WriteLine($"Error: {ex.Message}");
-        }
-    }
-
-    private async Task ExportPdf()
-    {
-        await JS.InvokeVoidAsync("blazorInterop.exportPdf", viewerElement);
-    }
-
-    private async Task ExportExcel()
-    {
-        await JS.InvokeVoidAsync("blazorInterop.exportExcel", viewerElement);
-    }
-
-    private async Task Refresh()
-    {
-        await LoadReport();
-    }
-}
-
-<style>
-    .report-wrapper {
-        background: white;
-    }
-    .btn {
-        padding: 8px 16px;
-        border-radius: 6px;
-        border: none;
-        cursor: pointer;
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        font-size: 14px;
-    }
-    .btn-primary { background: #1e40af; color: white; }
-    .btn-success { background: #16a34a; color: white; }
-    .btn-outline { background: white; color: #374151; border: 1px solid #d1d5db; }
-</style>
+@page "/report/{ReportId:int}"
+@inject IHttpClientFactory HttpFactory
+@inject IJSRuntime JS
+
+<PageTitle>Reporte #@ReportId</PageTitle>
+
+<div class="report-wrapper" style="height: @Height; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
+    <nexa-viewer ref="viewerElement" id="@($"r-{ReportId}")"></nexa-viewer>
+</div>
+
+<div class="report-actions mt-4 flex gap-2">
+    <button class="btn btn-primary" @onclick="ExportPdf">
+        <i class="pi pi-file-pdf"></i> Exportar PDF
+    </button>
+    <button class="btn btn-success" @onclick="ExportExcel">
+        <i class="pi pi-file-excel"></i> Exportar Excel
+    </button>
+    <button class="btn btn-outline" @onclick="Refresh">
+        <i class="pi pi-refresh"></i> Recargar
+    </button>
+</div>
+
+@code {
+    [Parameter] public int ReportId { get; set; }
+    [Parameter] public string Height { get; set; } = "800px";
+
+    private ElementReference viewerElement;
+    private HttpClient? _http;
+
+    protected override void OnInitialized()
+    {
+        _http = HttpFactory.CreateClient("NexaBaseApi");
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await LoadReport();
+        }
+    }
+
+    private async Task LoadReport()
+    {
+        try
+        {
+            var definition = await _http!.GetFromJsonAsync<dynamic>($"/api/reports/{ReportId}");
+            var data = await _http!.GetFromJsonAsync<dynamic>($"/api/reports/{ReportId}/data");
+
+            await JS.InvokeVoidAsync("blazorInterop.renderReport", viewerElement, definition, data);
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error: {ex.Message}");
+        }
+    }
+
+    private async Task ExportPdf()
+    {
+        await JS.InvokeVoidAsync("blazorInterop.exportPdf", viewerElement);
+    }
+
+    private async Task ExportExcel()
+    {
+        await JS.InvokeVoidAsync("blazorInterop.exportExcel", viewerElement);
+    }
+
+    private async Task Refresh()
+    {
+        await LoadReport();
+    }
+}
+
+<style>
+    .report-wrapper {
+        background: white;
+    }
+    .btn {
+        padding: 8px 16px;
+        border-radius: 6px;
+        border: none;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 14px;
+    }
+    .btn-primary { background: #1e40af; color: white; }
+    .btn-success { background: #16a34a; color: white; }
+    .btn-outline { background: white; color: #374151; border: 1px solid #d1d5db; }
+</style>

package/examples/integration/index.html

@@ -1,100 +1,100 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>nexabase-report - Ejemplos de Integración</title>
-    <style>
-        body { font-family: system-ui, sans-serif; max-width: 900px; margin: 40px auto; padding: 20px; background: #f9fafb; }
-        h1 { color: #1e3a8a; }
-        h2 { color: #374151; margin-top: 32px; border-bottom: 2px solid #e5e7eb; padding-bottom: 8px; }
-        .card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
-        .card h3 { margin: 0 0 8px 0; color: #1e40af; }
-        .card p { margin: 0 0 12px 0; color: #64748b; font-size: 14px; }
-        .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
-        .badge-razor { background: #eff6ff; color: #1e40af; }
-        .badge-blazor { background: #f0fdf4; color: #16a34a; }
-        .badge-html { background: #fef3c7; color: #92400e; }
-        .badge-jquery { background: #ede9fe; color: #6d28d9; }
-        code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
-        pre { background: #1f2937; color: #f9fafb; padding: 16px; border-radius: 8px; overflow-x: auto; }
-        pre code { background: none; color: inherit; }
-        .file-link { color: #1e40af; text-decoration: none; font-size: 13px; }
-        .file-link:hover { text-decoration: underline; }
-    </style>
-</head>
-<body>
-    <h1>📊 nexabase-report — Ejemplos de Integración</h1>
-    <p>Ejemplos funcionales de cómo integrar el visor de reportes en diferentes tecnologías.</p>
-
-    <h2>🟦 Blazor Server / Razor</h2>
-
-    <div class="card">
-        <h3>Blazor Razor Page</h3>
-        <p>Componente para Blazor Server (.NET 8) con IJSRuntime para interactuar con el custom element.</p>
-        <span class="badge badge-razor">Razor</span>
-        <a class="file-link" href="BlazorRazor.razor">Ver archivo →</a>
-    </div>
-
-    <div class="card">
-        <h3>Blazor Server Page (code-behind)</h3>
-        <p>Page completa con Injected HttpClient, manejo de parámetros y botones de exportación.</p>
-        <span class="badge badge-blazor">Blazor Server</span>
-        <a class="file-link" href="BlazorServer.razor">Ver archivo →</a>
-    </div>
-
-    <h2>🟩 ASP.NET Core Razor Pages</h2>
-
-    <div class="card">
-        <h3>Razor Pages (.cshtml)</h3>
-        <p>Ejemplo clásico de Razor Pages con section Scripts y HTML helpers para serializar datos.</p>
-        <span class="badge badge-razor">Razor Pages</span>
-        <a class="file-link" href="AspNetCoreRazorPages.cshtml">Ver archivo →</a>
-    </div>
-
-    <h2>🟨 Vanilla HTML + JS</h2>
-
-    <div class="card">
-        <h3>jQuery + HTML</h3>
-        <p>Ejemplo puro con jQuery que genera datos simulados (como haría un backend .NET) y los pasa al visor.</p>
-        <span class="badge badge-jquery">jQuery</span>
-        <a class="file-link" href="integration-jquery.html">Ver archivo →</a>
-    </div>
-
-    <h2>📁 Archivos de Definición de Reportes</h2>
-
-    <div class="card">
-        <h3>invoice-report.json</h3>
-        <p>Reporte de factura de venta listo para cargar. Compatible con todos los ejemplos de arriba.</p>
-        <a class="file-link" href="../blazor-razor-invoice/invoice-report.json">Ver archivo →</a>
-    </div>
-
-    <h2>🔧 Cómo usar</h2>
-
-    <pre><code># 1. Build del proyecto
-npm run build
-
-# 2. Copiar dist/ a tu proyecto ASP.NET
-# o usar un CDN (jsDelivr, unpkg)
-
-# 3. En tu .cshtml o .razor:
-&lt;link rel="stylesheet" href="~/lib/nexabase-report/style.css" />
-&lt;script src="~/lib/nexabase-report/nexabase-report.umd.js">&lt;/script>
-
-# 4. Registrar y usar
-NexaReport.registerNexaReport();
-const viewer = document.getElementById('viewer');
-viewer.definition = definitionJson;
-viewer.data = dataArray;</code></pre>
-
-    <h2>⚡ Tips para .NET</h2>
-
-    <ul>
-        <li>Usa <code>JsonSerializer.Serialize()</code> para convertir tus modelos a JSON</li>
-        <li>Pasa los datos como <code>List&lt;Dictionary&lt;string, object&gt;&gt;</code> o tu modelo directamente</li>
-        <li>Para datos de múltiples fuentes, usa el formato <code>{ "alias": [...] }</code></li>
-        <li>El viewer funciona tanto en Blazor Server (con IJSRuntime) como en Blazor WebAssembly</li>
-    </ul>
-
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>nexabase-report - Ejemplos de Integración</title>
+    <style>
+        body { font-family: system-ui, sans-serif; max-width: 900px; margin: 40px auto; padding: 20px; background: #f9fafb; }
+        h1 { color: #1e3a8a; }
+        h2 { color: #374151; margin-top: 32px; border-bottom: 2px solid #e5e7eb; padding-bottom: 8px; }
+        .card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
+        .card h3 { margin: 0 0 8px 0; color: #1e40af; }
+        .card p { margin: 0 0 12px 0; color: #64748b; font-size: 14px; }
+        .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
+        .badge-razor { background: #eff6ff; color: #1e40af; }
+        .badge-blazor { background: #f0fdf4; color: #16a34a; }
+        .badge-html { background: #fef3c7; color: #92400e; }
+        .badge-jquery { background: #ede9fe; color: #6d28d9; }
+        code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
+        pre { background: #1f2937; color: #f9fafb; padding: 16px; border-radius: 8px; overflow-x: auto; }
+        pre code { background: none; color: inherit; }
+        .file-link { color: #1e40af; text-decoration: none; font-size: 13px; }
+        .file-link:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+    <h1>📊 nexabase-report — Ejemplos de Integración</h1>
+    <p>Ejemplos funcionales de cómo integrar el visor de reportes en diferentes tecnologías.</p>
+
+    <h2>🟦 Blazor Server / Razor</h2>
+
+    <div class="card">
+        <h3>Blazor Razor Page</h3>
+        <p>Componente para Blazor Server (.NET 8) con IJSRuntime para interactuar con el custom element.</p>
+        <span class="badge badge-razor">Razor</span>
+        <a class="file-link" href="BlazorRazor.razor">Ver archivo →</a>
+    </div>
+
+    <div class="card">
+        <h3>Blazor Server Page (code-behind)</h3>
+        <p>Page completa con Injected HttpClient, manejo de parámetros y botones de exportación.</p>
+        <span class="badge badge-blazor">Blazor Server</span>
+        <a class="file-link" href="BlazorServer.razor">Ver archivo →</a>
+    </div>
+
+    <h2>🟩 ASP.NET Core Razor Pages</h2>
+
+    <div class="card">
+        <h3>Razor Pages (.cshtml)</h3>
+        <p>Ejemplo clásico de Razor Pages con section Scripts y HTML helpers para serializar datos.</p>
+        <span class="badge badge-razor">Razor Pages</span>
+        <a class="file-link" href="AspNetCoreRazorPages.cshtml">Ver archivo →</a>
+    </div>
+
+    <h2>🟨 Vanilla HTML + JS</h2>
+
+    <div class="card">
+        <h3>jQuery + HTML</h3>
+        <p>Ejemplo puro con jQuery que genera datos simulados (como haría un backend .NET) y los pasa al visor.</p>
+        <span class="badge badge-jquery">jQuery</span>
+        <a class="file-link" href="integration-jquery.html">Ver archivo →</a>
+    </div>
+
+    <h2>📁 Archivos de Definición de Reportes</h2>
+
+    <div class="card">
+        <h3>invoice-report.json</h3>
+        <p>Reporte de factura de venta listo para cargar. Compatible con todos los ejemplos de arriba.</p>
+        <a class="file-link" href="../blazor-razor-invoice/invoice-report.json">Ver archivo →</a>
+    </div>
+
+    <h2>🔧 Cómo usar</h2>
+
+    <pre><code># 1. Build del proyecto
+npm run build
+
+# 2. Copiar dist/ a tu proyecto ASP.NET
+# o usar un CDN (jsDelivr, unpkg)
+
+# 3. En tu .cshtml o .razor:
+&lt;link rel="stylesheet" href="~/lib/nexabase-report/style.css" />
+&lt;script src="~/lib/nexabase-report/nexabase-report.umd.js">&lt;/script>
+
+# 4. Registrar y usar
+NexaReport.registerNexaReport();
+const viewer = document.getElementById('viewer');
+viewer.definition = definitionJson;
+viewer.data = dataArray;</code></pre>
+
+    <h2>⚡ Tips para .NET</h2>
+
+    <ul>
+        <li>Usa <code>JsonSerializer.Serialize()</code> para convertir tus modelos a JSON</li>
+        <li>Pasa los datos como <code>List&lt;Dictionary&lt;string, object&gt;&gt;</code> o tu modelo directamente</li>
+        <li>Para datos de múltiples fuentes, usa el formato <code>{ "alias": [...] }</code></li>
+        <li>El viewer funciona tanto en Blazor Server (con IJSRuntime) como en Blazor WebAssembly</li>
+    </ul>
+
+</body>
+</html>