<bmx-report-designer>

<bmx-report-designer id="ex-rd" style="--bmx-report-designer-height: 40rem"></bmx-report-designer>

<div class="row" style="margin-block-start: 1rem">
  <span class="note" id="ex-rd-out">
    <strong>Everything runs in the browser.</strong> Drag a field onto a band, move and resize what is there, and
    edit the selection on the right. The toolbox adds charts, crosstabs, barcodes and QR codes, drawn from the
    sample rows as you place them. <strong>Preview</strong> runs the report in a report viewer;
    <strong>New report</strong> lays out a list, a grouped report, a summary or a form letter for the data's fields.
  </span>
</div>

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

  const designer = document.getElementById('ex-rd');
  const out = document.getElementById('ex-rd-out');

  // Sample rows: the designer finds the fields in them for its field list,
  // and the preview runs the report over them.
  const customers = ['Acme Ltd', 'Bolt & Co', 'Cogworks', 'Delta Supplies', 'Evergreen Farms', 'Fulcrum Tools'];
  designer.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),
  }));

  // Start from a template laid out for those fields - or set `designer.report`
  // to a definition you saved earlier.
  await designer.newReport('grouped', 'Orders by region');

  // Every edit, undo and redo arrives here with the whole new definition.
  designer.addEventListener('bmxReportChange', event => {
    out.textContent = `bmxReportChange: ${event.detail.action}.`;
  });

  // Save: keep the JSON yourself instead of letting it download.
  designer.addEventListener('bmxReportSave', event => {
    event.preventDefault();
    out.textContent = `bmxReportSave: ${event.detail.json.length} characters of JSON ready to store.`;
  });
</script>