<bmx-pivot-grid>

<div class="row" role="group" aria-label="Example actions">
  <bmx-button id="ex-pg-margin" variant="soft">Add a margin</bmx-button>
  <bmx-button id="ex-pg-share" toggle variant="soft">Show as % of total</bmx-button>
  <bmx-button id="ex-pg-top" toggle variant="soft">Top 3 reps</bmx-button>
  <bmx-button id="ex-pg-bars" toggle variant="soft">Data bars</bmx-button>
  <bmx-button id="ex-pg-swap" variant="ghost">Swap rows and columns</bmx-button>
  <bmx-button id="ex-pg-excel" variant="ghost">Download Excel</bmx-button>
</div>

<bmx-pivot-grid id="ex-pg" label="Sales" field-list="closed" style="--bmx-pivot-grid-height: 30rem; margin-block-start: 1rem"></bmx-pivot-grid>

<div class="row" style="margin-block-start: 1rem">
  <span class="note" id="ex-pg-out">
    <strong>Everything is live.</strong> Open and close regions and years with their arrows (or the arrow keys), open
    the field list with its tool to drag fields between Filters, Columns, Rows and Values, click a heading at the top
    left to sort and filter, and double-click a total to drill through to its records.
  </span>
</div>

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

  const pivot = document.getElementById('ex-pg');
  const out = document.getElementById('ex-pg-out');

  // Records are plain objects. Twenty thousand of them, made up here.
  const regions = ['North', 'South', 'East', 'West'];
  const countries = { North: ['Scotland', 'Norway'], South: ['Spain', 'Italy'], East: ['Poland', 'Greece'], West: ['Ireland', 'Portugal'] };
  const products = ['Laptops', 'Monitors', 'Docks', 'Keyboards'];
  let seed = 7;
  const random = () => ((seed = (seed * 1103515245 + 12345) % 2147483648) / 2147483648);
  const records = Array.from({ length: 20000 }, () => {
    const region = regions[Math.floor(random() * 4)];
    return {
      region,
      country: countries[region][Math.floor(random() * 2)],
      product: products[Math.floor(random() * 4)],
      rep: `Rep ${1 + Math.floor(random() * 10)}`,
      ordered: `202${5 + Math.floor(random() * 2)}-${String(1 + Math.floor(random() * 12)).padStart(2, '0')}-${String(1 + Math.floor(random() * 28)).padStart(2, '0')}`,
      units: 1 + Math.floor(random() * 12),
      revenue: Math.round(random() * 250000) / 100,
      cost: Math.round(random() * 160000) / 100,
    };
  });

  // Fields only where the data cannot say it: formats, titles, a hierarchy.
  pivot.fields = [
    { field: 'revenue', format: { style: 'currency', currency: 'GBP' } },
    { field: 'cost', format: { style: 'currency', currency: 'GBP' } },
    { field: 'ordered', title: 'Order date' },
  ];
  pivot.hierarchies = [{ name: 'geography', title: 'Geography', levels: ['region', 'country'] }];
  const layout = {
    rows: ['region', 'country'],
    columns: ['ordered:year', 'ordered:quarter'],
    filters: ['product'],
    values: [{ field: 'revenue', title: 'Revenue' }],
  };
  pivot.layout = layout;
  pivot.data = records;

  pivot.addEventListener('bmxPivotUpdate', event => {
    const { records: count, took, worker } = event.detail;
    out.textContent = `${count.toLocaleString()} records totalled in ${took} ms${worker ? ' on a background thread' : ''}.`;
  });
  pivot.addEventListener('bmxPivotDrillThrough', event => {
    out.textContent = `${event.detail.count} records behind ${[...event.detail.rowPath, ...event.detail.columnPath].join(' / ') || 'the grand total'}.`;
  });

  document.getElementById('ex-pg-margin').addEventListener('click', async () => {
    const current = await pivot.getLayout();
    if (current.values.some(v => v.title === 'Margin')) return;
    await pivot.setLayout({ ...current, values: [...current.values, { title: 'Margin', formula: '([Revenue] - [cost]) / [Revenue]', format: { style: 'percent' } }] });
  });
  document.getElementById('ex-pg-share').addEventListener('bmxActivate', async event => {
    const current = await pivot.getLayout();
    await pivot.setLayout({ ...current, values: current.values.map(v => (v.title === 'Revenue' ? { ...v, showAs: event.detail.pressed ? 'percentOfGrandTotal' : undefined } : v)) });
  });
  document.getElementById('ex-pg-top').addEventListener('bmxActivate', async event => {
    const current = await pivot.getLayout();
    const rows = event.detail.pressed ? ['rep'] : layout.rows;
    const settings = event.detail.pressed ? { rep: { top: { count: 3, other: true } } } : {};
    await pivot.setLayout({ ...current, rows, settings });
  });
  document.getElementById('ex-pg-bars').addEventListener('bmxActivate', event => {
    // Rules are data; `value` names a value by its title or position.
    pivot.formatRules = event.detail.pressed
      ? [{ type: 'bars', value: 'Revenue' }, { type: 'highlight', value: 'Revenue', when: { op: 'top', value: 3 }, tone: 'success', bold: true }]
      : [];
  });
  document.getElementById('ex-pg-excel').addEventListener('click', () => pivot.download('xlsx'));
  document.getElementById('ex-pg-swap').addEventListener('click', async () => {
    const current = await pivot.getLayout();
    await pivot.setLayout({ ...current, rows: current.columns, columns: current.rows });
  });
</script>