<bmx-report-viewer>

<bmx-report-viewer id="ex-rv" style="--bmx-report-viewer-height: 34rem"></bmx-report-viewer>

<div class="row" style="margin-block-start: 1rem">
  <span class="note" id="ex-rv-out">
    <strong>Everything runs in the browser.</strong> The report is a JSON definition and the rows are an array; the
    viewer lays them out into A4 pages, and the same pages print and download as a tagged PDF. Open
    <strong>Parameters</strong> to pick a region, type in <strong>Find</strong>, or open the side panel for the
    contents. Close a region with the arrow beside it, click a column heading to sort, and use
    <strong>Export</strong> for an Excel workbook, a CSV file or a web page.
  </span>
</div>

<script type="module">
  await customElements.whenDefined('bmx-report-viewer');

  const viewer = document.getElementById('ex-rv');
  const out = document.getElementById('ex-rv-out');

  // The report: bands of positioned items, in points. Every computed value is an
  // expression in the report language - never script - so a definition from a
  // database is safe to open.
  viewer.report = {
    title: 'Orders by region',
    language: 'en-GB',
    currency: 'GBP',
    page: { size: 'A4', margin: 40 },
    parameters: [{ name: 'region', label: 'Region', type: 'choice', choices: [{ value: '', label: 'All regions' }, 'North', 'South'], default: '' }],
    filter: "params.region = '' or region = params.region",
    fields: [{ name: 'amount', value: 'quantity * price' }],
    reportHeader: {
      height: 210,
      items: [
        { type: 'text', x: 0, y: 0, width: 515, height: 24, text: '{{ ReportTitle }}', heading: 1, style: { size: 18, bold: true, color: '#1b3f8f' } },
        { type: 'text', x: 0, y: 26, width: 515, height: 12, text: '{{ count() }} orders worth {{ format(sum(amount), "C") }}', style: { color: '#52606d' } },
        // A chart is an item like any other: here, the whole report's sales by customer.
        { type: 'chart', x: 0, y: 46, width: 515, height: 150, kind: 'bar', category: 'customer', order: 'value', series: [{ value: 'amount', label: 'Sales' }], format: 'C0', labels: true },
      ],
    },
    // Headings with `sort` re-sort the report when the reader clicks them.
    pageHeader: {
      height: 18,
      items: [
        { type: 'text', x: 90, y: 3, width: 200, height: 11, text: 'CUSTOMER', sort: 'customer', style: { size: 7.5, bold: true, color: '#52606d' } },
        { type: 'text', x: 395, y: 3, width: 116, height: 11, text: 'AMOUNT', sort: 'amount', style: { size: 7.5, bold: true, color: '#52606d', align: 'end' } },
      ],
    },
    groups: [
      {
        by: 'region',
        bookmark: "region + ' region'",
        // The reader can close and open each region in the viewer.
        drilldown: 'expanded',
        header: { height: 24, items: [{ type: 'text', x: 16, y: 6, width: 300, height: 14, text: '{{ region }}', heading: 2, style: { size: 11, bold: true } }] },
        footer: {
          height: 22,
          items: [
            { type: 'line', x: 395, y: 2, width: 120, height: 0, color: '#9aa5b1' },
            { type: 'text', x: 395, y: 6, width: 120, height: 12, value: 'sum(amount)', style: { align: 'end', format: 'C', bold: true } },
          ],
        },
      },
    ],
    detail: {
      height: 15,
      alternateBackground: '#f5f7fa',
      items: [
        { type: 'text', x: 4, y: 2, width: 80, height: 11, value: 'date', style: { format: 'dd MMM yyyy' } },
        { type: 'text', x: 90, y: 2, width: 200, height: 11, value: 'customer' },
        { type: 'text', x: 300, y: 2, width: 60, height: 11, value: 'quantity', style: { align: 'end' } },
        { type: 'text', x: 395, y: 2, width: 116, height: 11, value: 'amount', style: { align: 'end', format: 'C' } },
      ],
    },
    pageFooter: {
      height: 14,
      items: [{ type: 'text', x: 315, y: 2, width: 200, height: 10, text: 'Page {{ PageNumber }} of {{ PageCount }}', style: { size: 7, align: 'end', color: '#7b8794' } }],
    },
  };

  const customers = ['Acme Ltd', 'Bolt & Co', 'Cogworks', 'Delta Supplies', 'Evergreen Farms', 'Fulcrum Tools'];
  viewer.data = Array.from({ length: 120 }, (_, i) => ({
    date: `2026-${String(1 + (i % 9)).padStart(2, '0')}-${String(1 + ((i * 7) % 28)).padStart(2, '0')}`,
    region: i % 3 ? 'North' : 'South',
    customer: customers[i % customers.length],
    quantity: 1 + ((i * 13) % 20),
    price: 20 + ((i * 37) % 180),
  }));

  viewer.addEventListener('bmxReportRender', event => {
    const { pageCount, rowCount } = event.detail;
    out.textContent = `bmxReportRender: ${rowCount} rows on ${pageCount} pages.`;
  });
</script>