<bmx-driver-tree>

<div role="group" aria-label="Try it" style="display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center">
  <button type="button" id="ex-dt-plan">Plan against actual</button>
  <button type="button" id="ex-dt-upside">Upside against plan</button>
  <button type="button" id="ex-dt-goal">What conversion makes £30,000 profit?</button>
  <button type="button" id="ex-dt-bridge">Explain the gap</button>
  <label style="display: inline-flex; gap: 6px; align-items: center"><input type="checkbox" id="ex-dt-edit" /> Edit the model</label>
</div>
<bmx-driver-tree id="ex-dt" label="Lantern &amp; Loom, October 2026" style="--bmx-driver-tree-height: 36rem"></bmx-driver-tree>
<p class="note" id="ex-dt-out" role="status" style="margin: 12px 0 0">Choose a blue-edged input and move its slider, or type a value: every driver above it is worked out again and the change shows in green or red against the comparison. Sensitivity ranks the inputs by how much they move profit; Bridge walks from plan to actual one driver at a time.</p>

<script type="module">
  await customElements.whenDefined('bmx-driver-tree');
  const tree = document.getElementById('ex-dt');
  const out = document.getElementById('ex-dt-out');

  // A fictional online homeware shop's monthly profit. Advertising spend drives
  // paid visits and is a cost, and orders drive both sales and fulfilment, so
  // each appears twice in the tree.
  tree.model = {
    title: 'Operating profit',
    root: 'profit',
    currency: 'GBP',
    locale: 'en-GB',
    nodes: [
      { id: 'profit', name: 'Operating profit', formula: 'gross_profit - operating_costs', format: 'currency', description: 'What is left after the goods and the running costs.' },
      { id: 'gross_profit', name: 'Gross profit', formula: 'net_sales * gross_margin', format: 'currency' },
      { id: 'net_sales', name: 'Net sales', formula: 'gross_sales * (1 - return_rate)', format: 'currency' },
      { id: 'gross_sales', name: 'Gross sales', formula: 'orders * aov', format: 'currency' },
      { id: 'orders', name: 'Orders', formula: 'sessions * conversion', format: 'count' },
      { id: 'sessions', name: 'Sessions', formula: 'organic_sessions + paid_sessions', format: 'count' },
      { id: 'organic_sessions', name: 'Organic sessions', value: 180000, format: 'count', min: 120000, max: 240000, step: 1000 },
      { id: 'paid_sessions', name: 'Paid sessions', formula: 'ad_spend / cost_per_click', format: 'count' },
      { id: 'ad_spend', name: 'Advertising spend', value: 42000, format: 'currency', min: 20000, max: 70000, step: 500, better: 'down' },
      { id: 'cost_per_click', name: 'Cost per click', value: 0.7, format: 'currency', decimals: 2, min: 0.4, max: 1.2, step: 0.01, better: 'down' },
      { id: 'conversion', name: 'Conversion rate', value: 0.021, format: 'percent', decimals: 2, min: 0.012, max: 0.032, step: 0.0005 },
      { id: 'aov', name: 'Average order value', value: 64, format: 'currency', decimals: 2, min: 50, max: 80, step: 0.5 },
      { id: 'return_rate', name: 'Return rate', value: 0.08, format: 'percent', decimals: 1, min: 0.04, max: 0.15, step: 0.005, better: 'down' },
      { id: 'gross_margin', name: 'Gross margin', value: 0.52, format: 'percent', decimals: 1, min: 0.45, max: 0.6, step: 0.005 },
      { id: 'operating_costs', name: 'Operating costs', formula: 'ad_spend + fulfilment + fixed_costs', format: 'currency', better: 'down' },
      { id: 'fulfilment', name: 'Fulfilment', formula: 'orders * cost_per_order', format: 'currency', better: 'down' },
      { id: 'cost_per_order', name: 'Cost per order', value: 6.5, format: 'currency', decimals: 2, min: 5, max: 9, step: 0.05, better: 'down' },
      { id: 'fixed_costs', name: 'Fixed costs', value: 58000, format: 'currency', min: 50000, max: 66000, step: 500, better: 'down', description: 'Rent, salaries, software and the warehouse lease.' },
    ],
    scenarios: [
      { id: 'upside', name: 'Upside', values: { conversion: 0.024, aov: 66, ad_spend: 48000 } },
      { id: 'downside', name: 'Downside', values: { conversion: 0.018, return_rate: 0.11, cost_per_click: 0.85 } },
    ],
    actuals: { organic_sessions: 171500, ad_spend: 45200, cost_per_click: 0.74, conversion: 0.0228, aov: 61.4, return_rate: 0.093, gross_margin: 0.505, cost_per_order: 6.8, fixed_costs: 57200 },
  };
  tree.scenario = 'actual';
  tree.compare = 'plan';
  tree.selected = 'profit';

  const money = n => n.toLocaleString('en-GB', { style: 'currency', currency: 'GBP', maximumFractionDigits: 0 });

  document.getElementById('ex-dt-plan').addEventListener('click', () => {
    tree.view = 'tree';
    tree.scenario = 'actual';
    tree.compare = 'plan';
  });
  document.getElementById('ex-dt-upside').addEventListener('click', () => {
    tree.view = 'tree';
    tree.scenario = 'upside';
    tree.compare = 'plan';
  });
  document.getElementById('ex-dt-goal').addEventListener('click', async () => {
    tree.view = 'tree';
    tree.scenario = 'plan';
    tree.compare = '';
    const result = await tree.goalSeek('profit', 30000, 'conversion', true);
    out.textContent = result.ok
      ? `goalSeek(): a conversion rate of ${(result.value * 100).toFixed(2)}% gives ${money(result.achieved)} profit - applied as a what-if.`
      : `goalSeek(): ${result.message}`;
  });
  document.getElementById('ex-dt-bridge').addEventListener('click', () => {
    tree.scenario = 'actual';
    tree.compare = 'plan';
    tree.view = 'bridge';
  });
  document.getElementById('ex-dt-edit').addEventListener('change', e => (tree.editable = e.target.checked));

  tree.addEventListener('bmxValuesChange', e => {
    const profit = e.detail.values.profit;
    if (Number.isFinite(profit)) out.textContent = `bmxValuesChange: operating profit ${money(profit)} for ${e.detail.scenario}.`;
  });
  tree.addEventListener('bmxChange', e => (out.textContent = `bmxChange (${e.detail.reason}): the model has ${e.detail.model.nodes.length} drivers and ${e.detail.model.scenarios.length} scenarios.`));
</script>