nexabase-report 0.2.5 → 0.2.8

package/examples/blazor-razor-invoice/invoice-report.json

@@ -0,0 +1,537 @@
+{
+  "metadata": {
+    "version": "1.0",
+    "name": "Factura de Venta",
+    "description": "Factura comercial con datos del cliente, detalle de productos y totales. Ejemplo de integración Blazor Razor + nexabase-report.",
+    "author": "NexaBase",
+    "createdAt": "2026-05-09T00:00:00.000Z"
+  },
+  "layout": {
+    "page": {
+      "format": "A4",
+      "orientation": "portrait",
+      "margins": {
+        "top": 1.5,
+        "right": 1,
+        "bottom": 1,
+        "left": 1
+      }
+    },
+    "bands": [
+      {
+        "id": "rh_factura",
+        "type": "ReportHeader",
+        "height": 250,
+        "elements": [
+          {
+            "id": "rect_header",
+            "type": "Rectangle",
+            "x": 0,
+            "y": 0,
+            "width": 680,
+            "height": 100,
+            "shapeType": "Rectangle",
+            "options": {
+              "lineColor": "#1e40af",
+              "strokeWidth": 2,
+              "fillColor": "#eff6ff"
+            }
+          },
+          {
+            "id": "t_empresa",
+            "type": "Text",
+            "x": 20,
+            "y": 10,
+            "width": 300,
+            "height": 24,
+            "content": "MI EMPRESA S.A.",
+            "style": {
+              "fontSize": "20px",
+              "fontWeight": "bold",
+              "color": "#1e3a8a"
+            }
+          },
+          {
+            "id": "t_empresa_nit",
+            "type": "Text",
+            "x": 20,
+            "y": 36,
+            "width": 200,
+            "height": 14,
+            "content": "NIT: 901.234.567-8",
+            "style": {
+              "fontSize": "11px",
+              "color": "#475569"
+            }
+          },
+          {
+            "id": "t_factura_derecha",
+            "type": "Text",
+            "x": 450,
+            "y": 10,
+            "width": 210,
+            "height": 24,
+            "content": "FACTURA DE VENTA",
+            "style": {
+              "fontSize": "18px",
+              "fontWeight": "bold",
+              "color": "#1e40af",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_numero",
+            "type": "Text",
+            "x": 450,
+            "y": 38,
+            "width": 210,
+            "height": 16,
+            "content": "N° {{numeroFactura}}",
+            "style": {
+              "fontSize": "14px",
+              "fontWeight": "bold",
+              "color": "#374151",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_fecha",
+            "type": "Text",
+            "x": 450,
+            "y": 58,
+            "width": 210,
+            "height": 14,
+            "content": "Fecha: {{fecha}}",
+            "style": {
+              "fontSize": "11px",
+              "color": "#64748b",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "line_div",
+            "type": "Line",
+            "x": 0,
+            "y": 105,
+            "width": 680,
+            "height": 2,
+            "shapeType": "Line",
+            "options": {
+              "lineColor": "#1e40af",
+              "strokeWidth": 2
+            }
+          },
+          {
+            "id": "t_cliente_label",
+            "type": "Text",
+            "x": 20,
+            "y": 112,
+            "width": 80,
+            "height": 16,
+            "content": "Cliente:",
+            "style": {
+              "fontSize": "12px",
+              "fontWeight": "bold",
+              "color": "#374151"
+            }
+          },
+          {
+            "id": "t_cliente_nombre",
+            "type": "Text",
+            "x": 100,
+            "y": 112,
+            "width": 280,
+            "height": 16,
+            "content": "{{nombreCliente}}",
+            "style": {
+              "fontSize": "12px",
+              "color": "#1e293b"
+            }
+          },
+          {
+            "id": "t_cliente_nit",
+            "type": "Text",
+            "x": 20,
+            "y": 130,
+            "width": 200,
+            "height": 14,
+            "content": "NIT: {{nitCliente}}",
+            "style": {
+              "fontSize": "11px",
+              "color": "#64748b"
+            }
+          },
+          {
+            "id": "t_cliente_direccion",
+            "type": "Text",
+            "x": 20,
+            "y": 146,
+            "width": 350,
+            "height": 14,
+            "content": "{{direccionCliente}}",
+            "style": {
+              "fontSize": "11px",
+              "color": "#64748b"
+            }
+          },
+          {
+            "id": "t_forma_pago",
+            "type": "Text",
+            "x": 480,
+            "y": 112,
+            "width": 180,
+            "height": 14,
+            "content": "Forma de pago: {{formaPago}}",
+            "style": {
+              "fontSize": "11px",
+              "color": "#475569",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_vendedor",
+            "type": "Text",
+            "x": 480,
+            "y": 130,
+            "width": 180,
+            "height": 14,
+            "content": "Vendedor: {{vendedor}}",
+            "style": {
+              "fontSize": "11px",
+              "color": "#475569",
+              "textAlign": "right"
+            }
+          }
+        ]
+      },
+      {
+        "id": "db_items",
+        "type": "DataBand",
+        "height": 280,
+        "dataSource": "items",
+        "elements": [
+          {
+            "id": "t_items_title",
+            "type": "Text",
+            "x": 0,
+            "y": 5,
+            "width": 250,
+            "height": 20,
+            "content": "Detalle de Productos",
+            "style": {
+              "fontSize": "13px",
+              "fontWeight": "bold",
+              "color": "#1e3a8a"
+            }
+          },
+          {
+            "id": "table_items",
+            "type": "Table",
+            "x": 0,
+            "y": 30,
+            "width": 680,
+            "height": 240,
+            "tableColumns": [
+              {
+                "id": "col_codigo",
+                "title": "Código",
+                "width": 80,
+                "binding": "codigo"
+              },
+              {
+                "id": "col_producto",
+                "title": "Producto",
+                "width": 260,
+                "binding": "descripcion"
+              },
+              {
+                "id": "col_cantidad",
+                "title": "Cant.",
+                "width": 70,
+                "binding": "cantidad"
+              },
+              {
+                "id": "col_precio",
+                "title": "Precio Unit.",
+                "width": 110,
+                "binding": "precioUnitario"
+              },
+              {
+                "id": "col_descuento",
+                "title": "Desc.",
+                "width": 60,
+                "binding": "descuentoPorcentaje"
+              },
+              {
+                "id": "col_subtotal",
+                "title": "Subtotal",
+                "width": 100,
+                "binding": "subtotal"
+              }
+            ],
+            "tableShowFooter": true,
+            "style": {
+              "fontSize": "11px"
+            }
+          }
+        ]
+      },
+      {
+        "id": "rf_totales",
+        "type": "ReportFooter",
+        "height": 120,
+        "elements": [
+          {
+            "id": "line_sep",
+            "type": "Line",
+            "x": 400,
+            "y": 0,
+            "width": 280,
+            "height": 1,
+            "shapeType": "Line",
+            "options": {
+              "lineColor": "#94a3b8",
+              "strokeWidth": 1
+            }
+          },
+          {
+            "id": "t_subtotal_label",
+            "type": "Text",
+            "x": 400,
+            "y": 8,
+            "width": 120,
+            "height": 18,
+            "content": "Subtotal:",
+            "style": {
+              "fontSize": "12px",
+              "fontWeight": "bold",
+              "color": "#374151",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_subtotal_val",
+            "type": "Text",
+            "x": 530,
+            "y": 8,
+            "width": 150,
+            "height": 18,
+            "content": "${[sum(subtotal)]}",
+            "style": {
+              "fontSize": "12px",
+              "color": "#374151",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_descuento_label",
+            "type": "Text",
+            "x": 400,
+            "y": 28,
+            "width": 120,
+            "height": 16,
+            "content": "Descuento total:",
+            "style": {
+              "fontSize": "11px",
+              "color": "#64748b",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_descuento_val",
+            "type": "Text",
+            "x": 530,
+            "y": 28,
+            "width": 150,
+            "height": 16,
+            "content": "${[sum(descuentoPorcentaje)]}%",
+            "style": {
+              "fontSize": "11px",
+              "color": "#dc2626",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_iva_label",
+            "type": "Text",
+            "x": 400,
+            "y": 48,
+            "width": 120,
+            "height": 16,
+            "content": "IVA (19%):",
+            "style": {
+              "fontSize": "11px",
+              "color": "#64748b",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_iva_val",
+            "type": "Text",
+            "x": 530,
+            "y": 48,
+            "width": 150,
+            "height": 16,
+            "content": "${[sum(subtotal) * 0.19]}",
+            "style": {
+              "fontSize": "11px",
+              "color": "#64748b",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "line_total",
+            "type": "Line",
+            "x": 400,
+            "y": 70,
+            "width": 280,
+            "height": 2,
+            "shapeType": "Line",
+            "options": {
+              "lineColor": "#1e40af",
+              "strokeWidth": 2
+            }
+          },
+          {
+            "id": "t_total_label",
+            "type": "Text",
+            "x": 400,
+            "y": 76,
+            "width": 120,
+            "height": 28,
+            "content": "TOTAL:",
+            "style": {
+              "fontSize": "16px",
+              "fontWeight": "bold",
+              "color": "#1e3a8a",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_total_val",
+            "type": "Text",
+            "x": 530,
+            "y": 76,
+            "width": 150,
+            "height": 28,
+            "content": "${[sum(subtotal) * 1.19]}",
+            "style": {
+              "fontSize": "18px",
+              "fontWeight": "bold",
+              "color": "#1e3a8a",
+              "textAlign": "right"
+            }
+          }
+        ]
+      },
+      {
+        "id": "pf_pagina",
+        "type": "PageFooter",
+        "height": 30,
+        "elements": [
+          {
+            "id": "t_pagina",
+            "type": "Text",
+            "x": 0,
+            "y": 8,
+            "width": 680,
+            "height": 16,
+            "content": "Página {{Page}} de {{TotalPages}} — Generado: {{Now}}",
+            "style": {
+              "fontSize": "9px",
+              "color": "#94a3b8",
+              "textAlign": "center"
+            }
+          }
+        ]
+      }
+    ],
+    "watermark": {
+      "text": "",
+      "opacity": 0
+    },
+    "generateTOC": false
+  },
+  "dataSources": [
+    {
+      "id": "ds_factura",
+      "collection": "",
+      "alias": "factura",
+      "enabled": true,
+      "isManual": true,
+      "manualData": [
+        {
+          "numeroFactura": "FV-2026-00456",
+          "fecha": "2026-05-09",
+          "nombreCliente": "CLIENTE EJEMPLO S.A.S.",
+          "nitCliente": "900.987.654-3",
+          "direccionCliente": "Carrera 15 # 88-40, Bogotá D.C.",
+          "formaPago": "Crédito 30 días",
+          "vendedor": "Carlos Mendoza"
+        }
+      ]
+    },
+    {
+      "id": "ds_items",
+      "collection": "",
+      "alias": "items",
+      "enabled": true,
+      "isManual": true,
+      "manualData": [
+        {
+          "codigo": "P-001",
+          "descripcion": "Portátil HP ProBook 450 G10",
+          "cantidad": 2,
+          "precioUnitario": 3250000,
+          "descuentoPorcentaje": 5,
+          "subtotal": 6175000
+        },
+        {
+          "codigo": "P-002",
+          "descripcion": "Monitor Dell 27'' UltraSharp",
+          "cantidad": 2,
+          "precioUnitario": 1450000,
+          "descuentoPorcentaje": 0,
+          "subtotal": 2900000
+        },
+        {
+          "codigo": "P-003",
+          "descripcion": "Teclado mecánico Logitech MX",
+          "cantidad": 5,
+          "precioUnitario": 285000,
+          "descuentoPorcentaje": 10,
+          "subtotal": 1282500
+        },
+        {
+          "codigo": "P-004",
+          "descripcion": "Mouse wireless Logitech MX Master 3",
+          "cantidad": 5,
+          "precioUnitario": 380000,
+          "descuentoPorcentaje": 10,
+          "subtotal": 1710000
+        },
+        {
+          "codigo": "P-005",
+          "descripcion": "Webcam Logitech Brio 4K",
+          "cantidad": 3,
+          "precioUnitario": 650000,
+          "descuentoPorcentaje": 0,
+          "subtotal": 1950000
+        },
+        {
+          "codigo": "P-006",
+          "descripcion": "Docking station Dell WD19TBS",
+          "cantidad": 2,
+          "precioUnitario": 890000,
+          "descuentoPorcentaje": 5,
+          "subtotal": 1691000
+        }
+      ]
+    }
+  ],
+  "dictionary": {
+    "dataSources": [],
+    "manualFields": []
+  },
+  "documentType": "Report"
+}

package/examples/integration/AspNetCoreRazorPages.cshtml

@@ -0,0 +1,52 @@
+@page "/reports/view/{id:int}"
+@model MyApp.Pages.Reports.ViewModel
+@inject IReportService ReportService
+
+@{
+    var reportDef = await ReportService.GetDefinitionAsync(Model.Id);
+    var reportData = await ReportService.GetDataAsync(Model.Id);
+}
+
+<link rel="stylesheet" href="~/lib/nexabase-report/style.css" />
+
+<div class="report-viewer" style="height: 800px;">
+    <nexa-viewer id="viewer" minimal></nexa-viewer>
+</div>
+
+<div class="actions mt-3">
+    <button onclick="exportPdf()" class="btn btn-primary">PDF</button>
+    <button onclick="exportExcel()" class="btn btn-success">Excel</button>
+</div>
+
+@section Scripts {
+    <script src="~/lib/nexabase-report/nexabase-report.umd.js"></script>
+    <script>
+        let initialized = false;
+
+        document.addEventListener('DOMContentLoaded', function() {
+            if (!initialized) {
+                NexaReport.registerNexaReport();
+                initialized = true;
+            }
+
+            const viewer = document.getElementById('viewer');
+            viewer.definition = @Html.Raw(reportDef);
+            viewer.data = @Html.Raw(reportData);
+        });
+
+        function exportPdf() {
+            document.getElementById('viewer').exportPdf();
+        }
+
+        function exportExcel() {
+            document.getElementById('viewer').exportExcel();
+        }
+    </script>
+}
+
+<style>
+    .report-viewer { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: white; }
+    .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; margin-right: 8px; }
+    .btn-primary { background: #1e40af; color: white; }
+    .btn-success { background: #16a34a; color: white; }
+</style>

package/examples/integration/BlazorRazor.razor

@@ -0,0 +1,84 @@
+@page "/reports/{id:int}"
+@using System.Text.Json
+@inject HttpClient Http
+@inject IJSRuntime JS
+
+<div class="report-container" style="height: @Height">
+    <nexa-viewer id="@ViewerId" minimal></nexa-viewer>
+</div>
+
+@code {
+    [Parameter] public int Id { get; set; }
+    [Parameter] public string Height { get; set; } = "800px";
+
+    private const string ViewerId = "nexa-report-viewer";
+    private bool _initialized = false;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && !_initialized)
+        {
+            _initialized = true;
+            await InitializeReport();
+        }
+    }
+
+    private async Task InitializeReport()
+    {
+        try
+        {
+            // Cargar definición del reporte
+            var definition = await Http.GetFromJsonAsync<JsonElement>($"/api/reports/{Id}/definition");
+
+            // Cargar datos (puede venir de una API diferente)
+            var data = await Http.GetFromJsonAsync<List<Dictionary<string, object>>>($"/api/reports/{Id}/data");
+
+            await JS.InvokeVoidAsync("nexaReportRender", ViewerId, definition, data);
+        }
+        catch (Exception ex)
+        {
+            Console.Error.WriteLine($"Error cargando reporte: {ex.Message}");
+        }
+    }
+
+    public async Task ExportPdf()
+    {
+        await JS.InvokeVoidAsync("nexaReportExportPdf", ViewerId);
+    }
+
+    public async Task ExportExcel()
+    {
+        await JS.InvokeVoidAsync("nexaReportExportExcel", ViewerId);
+    }
+}
+
+@section Scripts {
+    <script src="_content/nexabase-report/nexabase-report.umd.js"></script>
+    <script>
+        let nexaRegistered = false;
+
+        function nexaReportRender(viewerId, definition, data) {
+            if (!nexaRegistered) {
+                NexaReport.registerNexaReport();
+                nexaRegistered = true;
+            }
+
+            // pequeña demora para asegurar que el custom element está listo
+            setTimeout(() => {
+                const viewer = document.getElementById(viewerId);
+                if (viewer) {
+                    viewer.definition = definition;
+                    viewer.data = data;
+                }
+            }, 50);
+        }
+
+        function nexaReportExportPdf(viewerId) {
+            document.getElementById(viewerId)?.exportPdf();
+        }
+
+        function nexaReportExportExcel(viewerId) {
+            document.getElementById(viewerId)?.exportExcel();
+        }
+    </script>
+}