)}
);
}
/* Comparison label — what the toolbar chip shows. The "kind" is
what gets sent to the backend; the label is human-readable. */
function compareLabel(value, sites) {
if (!value) return 'vs previous period';
if (value === 'last_year') return 'vs same period last year';
if (value.startsWith('site:')) {
const id = value.slice(5);
const s = (sites || []).find((x) => x.id === id);
return 'vs ' + (s ? s.name : 'site');
}
return 'vs previous period';
}
/* Comparison picker dropdown. Shows the three modes: previous period
(no comparison; default), same period last year, or any single site
in the user's org. Click outside closes. */
function CompareMenu({ value, sites, onPick, onClose }) {
const ref = useRef(null);
useEffect(() => {
function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) onClose(); }
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, [onClose]);
return (
);
}
/* Centred modal — same pattern other CMS modals use. Single text
input + a "share with team" toggle that's hidden when the user
doesn't have analytics.share_views. */
function SaveViewModal({ defaultName, canShare, onSave, onCancel }) {
const [name, setName] = useState(defaultName || '');
const [shared, setShared] = useState(false);
const [busy, setBusy] = useState(false);
function submit(e) {
if (e) e.preventDefault();
if (!name.trim() || busy) return;
setBusy(true);
Promise.resolve(onSave(name.trim(), shared)).finally(() => setBusy(false));
}
return (
);
}
/* Multi-format export menu — drops a small dropdown next to the chip
with CSV / XLSX / JSON options. Each option exports a bundle of
(metrics + campaigns + species + events) for the current range. */
function ExportMenu({ range, metrics, campaigns, species, events }) {
const [open, setOpen] = useState(false);
const [showSchedule, setShowSchedule] = useState(false);
const ref = useRef(null);
useEffect(() => {
function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, []);
const bundle = {
range, exported_at: new Date().toISOString(),
metrics, campaigns, species, events,
};
function exportJson() {
const blob = new Blob([JSON.stringify(bundle, null, 2)], { type: 'application/json' });
triggerDownload(blob, `analytics-overview-${range}.json`);
setOpen(false);
}
function exportXlsx() {
if (!window.XLSX) {
window.toast && window.toast('Spreadsheet library still loading — try again in a moment.', 'warn');
return;
}
const wb = window.XLSX.utils.book_new();
/* Metrics sheet — flatten the nested KPI object into a single row. */
const flat = {};
Object.entries(metrics || {}).forEach(([k, v]) => {
if (v && typeof v === 'object') {
Object.entries(v).forEach(([kk, vv]) => {
if (Array.isArray(vv)) return; // skip sparkline arrays
flat[`${k}.${kk}`] = vv;
});
} else {
flat[k] = v;
}
});
window.XLSX.utils.book_append_sheet(wb, window.XLSX.utils.json_to_sheet([flat]), 'Metrics');
window.XLSX.utils.book_append_sheet(wb, window.XLSX.utils.json_to_sheet(campaigns || []), 'Campaigns');
window.XLSX.utils.book_append_sheet(wb, window.XLSX.utils.json_to_sheet(species || []), 'Species');
window.XLSX.utils.book_append_sheet(wb, window.XLSX.utils.json_to_sheet(events || []), 'Events');
window.XLSX.writeFile(wb, `analytics-overview-${range}.xlsx`);
setOpen(false);
}
function exportCsv() {
/* "All CSV" of the metrics row only — same as the old chip behaviour. */
downloadCsv('analytics-overview-' + range, [{ range, ...flatMetrics(metrics) }]);
setOpen(false);
}
/* PDF report — opens the server-rendered HTML report in a new tab with
?print=1 so the browser's print dialog auto-fires. The user picks
"Save as PDF". Auth uses the httpOnly cookie which is same-origin
and automatic on window.open() — the ?token= query fallback was
removed (audit CRIT-4) because tokens in URLs end up in access
logs and browser history. */
function exportPdf() {
/* Cookies are httpOnly + same-origin, so window.open carries auth
without us having to embed the JWT in the URL (which would leak
to access logs and browser history). */
const { from, to } = rangeToDates(range);
const sp = new URLSearchParams({ from, to, print: '1' });
window.open('/api/analytics/report.html?' + sp.toString(), '_blank');
setOpen(false);
}
return (
setOpen((o) => !o)} style={{ cursor: 'pointer' }}>
↓ Export
{open && (
)}
{showSchedule && window.ScheduledReportModal && (
setShowSchedule(false)}
onSaved={() => {
setShowSchedule(false);
window.toast && window.toast('Scheduled report saved — manage it under Alerts → Scheduled reports.');
}}
/>
)}
);
}
function flatMetrics(metrics) {
const out = {};
Object.entries(metrics || {}).forEach(([k, v]) => {
if (v && typeof v === 'object' && 'value' in v) out[k] = v.value;
else if (v != null && typeof v !== 'object') out[k] = v;
});
return out;
}
function triggerDownload(blob, filename) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = filename;
document.body.appendChild(a); a.click(); document.body.removeChild(a);
setTimeout(() => URL.revokeObjectURL(url), 1000);
}
/* ─── Engagement panel ────────────────────────────────────────────
Shows passive-viewing signals — average dwell per species, hold rate,
total holds. Sources from /api/analytics/engagement which itself reads
the kiosk-emitted species.exposure + species.hold events. Renders
nothing if there's no data yet (so the panel doesn't shout at
operators of orgs that haven't shipped the kiosk update). */
function EngagementPanel({ data, loading, range }) {
if (loading) return null;
if (!data || !data.totals) return null;
const totals = data.totals;
const species = data.species || [];
/* Hide the whole panel until we have at least one exposure recorded.
New deployments need 24h or so before this becomes useful. */
if (totals.exposures === 0) return null;
function fmtMs(ms) {
const v = Number(ms) || 0;
if (v < 1000) return v + ' ms';
if (v < 60000) return (v / 1000).toFixed(1) + ' s';
return Math.floor(v / 60000) + 'm ' + Math.round((v % 60000) / 1000) + 's';
}
return (
🤚 Passive engagement
What visitors actually watch (no tap required)
{fmtN(totals.exposures)} exposures · {fmtN(totals.holds)} holds ({fmtPct(totals.hold_rate_pct, 1)} hold rate)
{/* Top species by hold rate */}
Species
Avg time on screen
Holds
Hold rate
Avg hold
{species.length === 0 && (
Not enough engagement data yet — check back after a few hours of visitor activity.