Function drawFunnel

telemetry-dashboard/public/app.js:271–293

* The two-stage conversion funnel, drawn as proportional bars rather than a * chart: two bars and a percentage is the whole story, and a two-slice pie or a * two-bar chart would be more chrome than data.

(section, funnel)

 * two-bar chart would be more chrome than data.
 */
function drawFunnel(section, funnel) {
  const host = $(section, 'funnel');
  host.replaceChildren();

  for (const stage of funnel.stages) {
    const row = el('div', 'funnel-stage');
    const head = el('div', 'funnel-label');
    head.append(el('span', null, stage.label), el('span', 'funnel-value', stage.value.toLocaleString('en-US')));
    const track = el('div', 'funnel-track');
    const fill = el('div', 'funnel-fill');
    // Width is the datum, so it is set from JS rather than a style attribute —
    // the CSP here allows no inline styles at all.
    fill.style.width = `${Math.max(0, Math.min(1, stage.share)) * 100}%`;
    track.append(fill);
    row.append(head, track);
    host.append(row);
  }

  const rate = funnel.rate === null ? '—' : `${(funnel.rate * 100).toFixed(1)}%`;
  host.append(
    el('p', 'funnel-summary', `${rate} converted · ${funnel.dropped.toLocaleString('en-US')} dropped off`),
  );
}

function drawChart(section, panel, config) {
  const canvas = $(section, 'canvas');