`public/panels/insights.js`

53 lines
// Insights hub — merges the 8 preview analytics panels under one nav entry
// WITHOUT duplicating their code. A wrapping tab bar swaps a SINGLE content pane:
// clicking a tab loads that panel's html into #ins-content and calls its own
// MCC_PANELS[id].init(pane). Single-pane (not 8 panes) so only one panel's DOM
// exists at a time — no cross-panel id collisions, lighter than mounting all 8.
window.MCC_PANELS = window.MCC_PANELS || {};
window.MCC_PANELS['insights'] = {
  async init(root) {
    const ORIGIN = location.origin;
    const TABS = [
      { id: 'performance',   label: 'Performance' },
      { id: 'segment-perf',  label: 'Segment Perf' },
      { id: 'send-times',    label: 'Send Times' },
      { id: 'segments',      label: 'Segments' },
      { id: 'journeys',      label: 'Journeys' },
      { id: 'profiles',      label: 'Profiles' },
      { id: 'follow-counts', label: 'Follow Counts' },
      { id: 'ab-tests',      label: 'A/B Tests' },
    ];
    const bar = root.querySelector('#ins-tabs');
    const content = root.querySelector('#ins-content');
    let current = null;

    async function ensureScript(id) {
      if (window.MCC_PANELS[id]) return;
      await new Promise(res => {
        const s = document.createElement('script');
        s.src = ORIGIN + '/panels/' + id + '.js';
        s.onload = res; s.onerror = res;
        document.body.appendChild(s);
      });
    }
    async function show(id) {
      if (current === id) return;
      current = id;
      bar.querySelectorAll('.ins-tab').forEach(b => b.classList.toggle('active', b.dataset.id === id));
      content.innerHTML = '<div class="loading">Loading…</div>';
      try {
        const r = await fetch(ORIGIN + '/panels/' + id + '.html', { credentials: 'same-origin' });
        content.innerHTML = r.ok ? await r.text() : `<div class="muted">Could not load ${id}.</div>`;
      } catch { content.innerHTML = `<div class="muted">Could not load ${id}.</div>`; return; }
      await ensureScript(id);
      try {
        if (window.MCC_PANELS[id] && window.MCC_PANELS[id].init) await window.MCC_PANELS[id].init(content);
      } catch (e) { console.error('[insights] ' + id + ' init failed', e); }
    }

    bar.innerHTML = TABS.map(t => `<button type="button" class="ins-tab" data-id="${t.id}">${t.label}</button>`).join('');
    bar.querySelectorAll('.ins-tab').forEach(btn => btn.onclick = () => show(btn.dataset.id));
    show(TABS[0].id); // Performance is the default view
  },
};