// Sponsorship Data — market-intel library of sponsorship deals (imported from
// the Weekly Brand Review workbook + manually added). Includes the treemap
// "Sponsorship Distribution by brand category and property segment":
// header = brand category, breakdown = property segments within it.
const DEAL_PALETTE = [
'var(--accent)', 'var(--sig-blue-fg)', 'var(--sig-purple-fg)', 'var(--positive)',
'var(--pending)', 'var(--sig-amber-fg)', 'var(--attention)', 'var(--muted)',
];
function SponsorshipDataPage({ onToast }) {
const [deals, setDeals] = React.useState(null); // null = loading
const [error, setError] = React.useState('');
const [q, setQ] = React.useState('');
const [seg, setSeg] = React.useState('all');
const [src, setSrc] = React.useState('all');
// Category filter. null = all. Otherwise { label, cats:[...] } — cats holds one
// real category, or every category merged into the treemap's "Other" box.
const [catSel, setCatSel] = React.useState(null);
const [expanded, setExpanded] = React.useState(null);
const [page, setPage] = React.useState(0);
const PAGE_SIZE = 50;
// Any filter change returns to the first page.
React.useEffect(() => { setPage(0); }, [q, seg, src, catSel]);
// The library loads without `notes` and `assets` — the two long text columns,
// only ever read for the one row a user expands. On a few thousand deals they
// were most of the payload, and the server had to build all of it in memory.
const [truncated, setTruncated] = React.useState(0); // rows the cap left out
React.useEffect(() => {
window.IPSEM_API.getDealLibrary()
.then((res) => {
const rows = (res && res.deals) || [];
setDeals(rows);
setTruncated(res && res.truncated ? (res.total || 0) - rows.length : 0);
})
.catch((e) => { setError(e.message || 'Could not load deals'); setDeals([]); });
}, []);
// Expanding a row pulls that deal's full record once, then keeps it.
const dealsRef = React.useRef(null);
dealsRef.current = deals;
const openRow = React.useCallback((id) => {
setExpanded((cur) => (cur === id ? null : id));
const row = (dealsRef.current || []).find((d) => d.id === id);
if (!row || row._full) return;
window.IPSEM_API.getDeal(id)
.then((full) => setDeals((c) => (c || []).map((d) => d.id === id ? { ...d, ...full, _full: true } : d)))
.catch(() => setDeals((c) => (c || []).map((d) => d.id === id ? { ...d, _full: true } : d)));
}, []);
const segments = React.useMemo(() => {
const s = new Set();
(deals || []).forEach((d) => { if (d.propertySegment) s.add(d.propertySegment); });
return Array.from(s).sort();
}, [deals]);
const filtered = React.useMemo(() => {
const s = q.trim().toLowerCase();
return (deals || []).filter((d) =>
(seg === 'all' || d.propertySegment === seg) &&
(src === 'all' || (d.dealSource || 'Others') === src) &&
(!catSel || catSel.cats.includes(d.category || 'Uncategorised')) &&
(!s ||
(d.brandName || '').toLowerCase().includes(s) ||
(d.category || '').toLowerCase().includes(s) ||
(d.propertyName || '').toLowerCase().includes(s) ||
(d.propertySegment || '').toLowerCase().includes(s))
);
}, [deals, q, seg, src, catSel]);
// Every category present, by deal count (for the dropdown filter).
const categories = React.useMemo(() => {
const m = {};
(deals || []).forEach((d) => {
const c = d.category || 'Uncategorised';
m[c] = (m[c] || 0) + 1;
});
return Object.entries(m).sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
}, [deals]);
// Treemap input: respects search/segment/source filters but NOT the category
// click (so you can always click a different category).
const treeDeals = React.useMemo(() => {
const s = q.trim().toLowerCase();
return (deals || []).filter((d) =>
(seg === 'all' || d.propertySegment === seg) &&
(src === 'all' || (d.dealSource || 'Others') === src) &&
(!s ||
(d.brandName || '').toLowerCase().includes(s) ||
(d.category || '').toLowerCase().includes(s) ||
(d.propertyName || '').toLowerCase().includes(s) ||
(d.propertySegment || '').toLowerCase().includes(s))
);
}, [deals, q, seg, src]);
// KPIs reflect the active filters so they reconcile with the table count.
const kpi = React.useMemo(() => {
const list = filtered;
const brands = new Set(list.map((d) => d.brandName)).size;
const cats = new Set(list.map((d) => d.category || 'Uncategorised')).size;
const value = list.reduce((a, d) => a + (Number(d.estValueUsd) || 0), 0);
return { total: list.length, brands, cats, value };
}, [filtered]);
// Clamp the page into range on the same render so a shrinking result set
// never slices past the end (the effect above resets to 0 a frame later).
const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
const safePage = Math.min(page, pageCount - 1);
if (deals === null) {
return
Loading sponsorship data…
;
}
return (
Sponsorship Data
Market intelligence: who sponsors what, where, and at what estimated value.
Imported from the Weekly Brand Review workbook.
{error ? (
{error}
) : null}
{truncated > 0 ? (
Showing the first {(deals || []).length.toLocaleString()} deals — {truncated.toLocaleString()} more are in the
database but not on this page, so the chart and totals below cover the first {(deals || []).length.toLocaleString()} only.