// royalty-viz.jsx — Royalty Visualizer screen
// ─────────────────────────────────────────────────────────────────
// Dedicated full-screen surface for exploring royalty income across
// every dimension. Cross-filter store keeps all 9 charts in sync.
//
// Layout:
// ╔═════════════════════════════════════════════════════════════╗
// ║ Header · period · granularity · currency · data-source pill ║
// ║ Filter chips (live, click ✕ to remove) ║
// ║ KPI strip · gross / lines / sources / works / territories ║
// ╠═════════════════════════════════════════════════════════════╣
// ║ Tab bar: Overview · Time · Composition · Geo · Long-tail ║
// ╠═════════════════════════════════════════════════════════════╣
// ║ Chart panels per tab — click any element to cross-filter ║
// ╚═════════════════════════════════════════════════════════════╝
//
// Tweaks panel: granularity, currency, color palette, log/linear,
// chart density, focus mode (single chart fullscreen), data source.
//
// Exports: window.ScreenRoyaltyViz
// ─────────────────────────────────────────────────────────────────
(function () {
if (typeof window === 'undefined' || !window.React) return;
const _S = React.useState, _E = React.useEffect, _M = React.useMemo;
function Mono({ children, upper, size, color, style, ...rest }) {
return {children};
}
// ─── KPI cell ────────────────────────────────────────────────
function Stat({ l, v, sub, tone, border }) {
return (
);
}
// ─── Filter chips ────────────────────────────────────────────
function FilterChips({ filter, onClear, onRemove }) {
const items = Object.entries(filter || {}).flatMap(([dim, v]) => {
if (Array.isArray(v)) return v.map(x => ({ dim, value: x }));
return [{ dim, value: v }];
});
if (!items.length) return null;
return (
FILTERED ·
{items.map((it, i) => (
))}
);
}
// ─── Section card ────────────────────────────────────────────
function Card({ title, sub, right, children, style }) {
return (
);
}
// ─── MAIN SCREEN ─────────────────────────────────────────────
function ScreenRoyaltyViz({ go, payload }) {
const PageHeader = window.PageHeader;
const RVE = window.RVE;
const RVCharts = window.RVCharts;
const [tab, setTab] = _S(payload?.tab || 'overview');
const [granularity, setGran] = _S('month');
const [filter, setFilter] = _S(RVE?.getFilter() || {});
const [_v, bump] = _S(0);
const [focus, setFocus] = _S(null);
_E(() => {
if (!RVE) return;
const unsub = RVE.subscribe((f) => { setFilter({ ...f }); bump(x => x + 1); });
return unsub;
}, []);
if (!RVE || !RVCharts) {
return Royalty viz engine not loaded.
;
}
const lines = _M(() => RVE.fetchLines(), [_v]);
const ds = RVE.dataSource();
// KPI summary
const kpi = _M(() => {
const sources = new Set(), works = new Set(), territories = new Set();
let gross = 0;
lines.forEach(l => { gross += l.gross; sources.add(l.source); works.add(l.work); if (l.territory) territories.add(l.territory); });
return { gross, lines: lines.length, sources: sources.size, works: works.size, territories: territories.size };
}, [lines]);
function ToggleFn(dim) { return (val) => { RVE.toggleFilter(dim, val); }; }
return (
{PageHeader && (
)}
{/* Granularity / data-source pills */}
GRANULARITY
{['month', 'quarter', 'year'].map(g => (
))}
RVE.clearFilter()} onRemove={(d, v) => RVE.toggleFilter(d, v)}/>
{/* KPI strip */}
{/* Tabs */}
{[
{ k: 'overview', l: 'Overview' },
{ k: 'time', l: 'Time' },
{ k: 'composition', l: 'Composition' },
{ k: 'geo', l: 'Geography' },
{ k: 'longtail', l: 'Long-tail' },
].map(t => (
))}
{tab === 'overview' && }
{tab === 'time' && }
{tab === 'composition' && }
{tab === 'geo' && }
{tab === 'longtail' && }
{focus && setFocus(null)} title={focus.title} children={focus.children}/>}
RVE.toggleFilter('period', p.key)} />
RVE.toggleFilter('sourceKind', c.source)} />
RVE.toggleFilter('work', r.key)} />
RVE.toggleFilter('work', r.key)} />
);
}
// ═══════════════════════════════════════════════════════════════
// TIME — granularity, MoM/YoY, cohorts
// ═══════════════════════════════════════════════════════════════
function TimeTab({ lines, granularity }) {
const RVE = window.RVE, RVC = window.RVCharts;
const [showYoY, setShowYoY] = _S(true);
const ts = _M(() => RVE.timeSeries(lines, { granularity }), [lines, granularity]);
const heat = _M(() => {
const top = RVE.groupBy(lines, 'work', 16).rows.map(r => r.key);
const subset = lines.filter(l => top.includes(l.work));
return RVE.heatmap(subset, 'work', 'period');
}, [lines]);
const cohort = _M(() => RVE.cohort(lines), [lines]);
return (
setShowYoY(e.target.checked)}/> show YoY}
>
RVE.toggleFilter('period', p.key)} />
{ RVE.toggleFilter('work', c.row); RVE.toggleFilter('period', c.col); }} />
RVE.toggleFilter('release', c.release)} />
);
}
// ═══════════════════════════════════════════════════════════════
// COMPOSITION — sources, products, writers, sankey
// ═══════════════════════════════════════════════════════════════
function CompositionTab({ lines }) {
const RVE = window.RVE, RVC = window.RVCharts;
const sankey = _M(() => RVE.sankey(lines, ['sourceKind', 'work', 'writer']), [lines]);
const bySource = _M(() => RVE.groupBy(lines, 'source', 12).rows, [lines]);
const byProduct = _M(() => RVE.groupBy(lines, 'productType').rows, [lines]);
const byWriter = _M(() => RVE.groupBy(lines, 'writer', 12).rows, [lines]);
return (
{
const dim = n.layer === 0 ? 'sourceKind' : n.layer === 1 ? 'work' : 'writer';
RVE.toggleFilter(dim, n.name);
}} />
);
}
// ═══════════════════════════════════════════════════════════════
// GEO — choropleth + table
// ═══════════════════════════════════════════════════════════════
function GeoTab({ lines }) {
const RVE = window.RVE, RVC = window.RVCharts;
const territories = _M(() => RVE.choropleth(lines), [lines]);
return (
RVE.toggleFilter('territory', r.key)} />
);
}
// ═══════════════════════════════════════════════════════════════
// LONG-TAIL — sparkline grid + pareto
// ═══════════════════════════════════════════════════════════════
function LongtailTab({ lines }) {
const RVE = window.RVE, RVC = window.RVCharts;
const sparks = _M(() => RVE.sparkGrid(lines, { dim: 'work', limit: 60 }), [lines]);
const pareto = _M(() => RVE.pareto(lines, 'work').rows.slice(0, 50), [lines]);
const eighty = pareto.findIndex(r => r.cumPct >= 0.8);
return (
= 0 ? `Top ${eighty + 1} works (${(((eighty + 1) / pareto.length) * 100).toFixed(0)}%) earn 80% of revenue.` : 'Long-tail concentration view.'}>
RVE.toggleFilter('work', r.key)} />
RVE.toggleFilter('work', it.key)} />
);
}
// ─── Helpers ─────────────────────────────────────────────────
function Legend({ series }) {
const RVC = window.RVCharts;
return (
{series.map((s, i) => (
{s.key}
))}
);
}
function RankedList({ rows, dim, wide }) {
const RVE = window.RVE, RVC = window.RVCharts;
const max = rows[0]?.value || 1;
return (
{rows.map((r, i) => (
RVE.toggleFilter(dim, r.key)} style={{
display: 'grid', gridTemplateColumns: wide ? '40px 1fr 100px 60px' : '30px 1fr 80px',
gap: 10, padding: '7px 0', alignItems: 'center', cursor: 'pointer',
borderBottom: i < rows.length - 1 ? '1px solid var(--rule-soft)' : 0,
}}>
{i + 1}
{RVC.fmt$(r.value)}
{wide &&
{(r.share * 100).toFixed(1)}%}
))}
e.stopPropagation()} style={{ background: 'var(--bg)', border: '1px solid var(--rule)', width: '90vw', maxWidth: 1400, maxHeight: '90vh', overflow: 'auto', padding: 28 }}>
{title}
{children}
);
}
window.ScreenRoyaltyViz = ScreenRoyaltyViz;
console.log('[RoyaltyViz] loaded');
})();