Report viewer · banded reports

import { ReportViewer } from "./components/report/viewer.js"; // A report is plain JSON: bands of positioned elements, in mm. Text holds// expressions in braces, with an optional format after the colon.const report = {  title: "Sales by region",  page: { size: "A4", margins: 14 },  dataSource: "orders",  parameters: [{ name: "minAmount", default: 0 }],  filter: "amount >= Param.minAmount",  groups: [{    name: "region", by: "region",    header: { height: 8, repeat: true, elements: [      { x: 0, y: 0, w: 180, h: 8, text: "{region}{iif(Repeated, ' (continued)', '')}", bold: true } ] },    footer: { height: 7, elements: [      { x: 100, y: 0, w: 80, h: 7, text: "{Sum(amount):C2}", align: "right", bold: true } ] },  }],  bands: {    pageHeader:   { height: 7, elements: [{ x: 0, y: 0, w: 60, h: 7, text: "DATE", bold: true }] },    detail:       { height: 5, stripe: "#f8fafc", elements: [      { x: 0,  y: 0, w: 60, h: 5, text: "{date:MMM dd}" },      { x: 60, y: 0, w: 80, h: 5, text: "{product}" },          // long text grows the row      { x: 140, y: 0, w: 40, h: 5, text: "{amount:N2}", align: "right" } ] },    reportFooter: { height: 10, elements: [{ x: 0, y: 2, w: 180, h: 8, text: "Total {Sum(amount):C2}", bold: true }] },    pageFooter:   { height: 6, elements: [{ x: 0, y: 0, w: 180, h: 6, text: "Page {Page} of {Pages}", align: "right" }] },  },}; const minAmount = signal(0);ReportViewer({ report, data: { orders }, params: () => ({ minAmount: minAmount() }), height: "780px" });// data may be a promise; report / data / params may be getters — the viewer lays out again when they change.// Sum · Count · Avg · Min · Max · DistinctCount · RunningSum over the group, 'page' or 'report'.// Formats: C2 N0 P1 F2 · dd.MM.yyyy · MMM d · custom "#,##0.00". Print → the browser's print / Save as PDF. // More element types:{ type: "chart", chart: "hbar", category: "region", value: "amount", sort: "-value", format: "C0", x: 0, y: 20, w: 90, h: 50 }{ type: "barcode", symbology: "code128" | "ean13" | "qr", value: "{no}", x: 96, y: 5, w: 52, h: 16 }{ type: "subreport", source: "lines", report: { bands: { detail: { … } } }, x: 4, y: 31, w: 174, h: 20 }{ x: 130, y: 0, w: 26, h: 5, text: "{amount:N2}", conditions: [{ when: "amount >= 15000", style: { color: "#15803d", bold: true } }] }// parameters: [{ name: "minAmount", label: "Minimum amount", type: "number", default: 0 }]  → the ⚙ Parameters form