Monthly est. {tab.toLowerCase()} spend
TOP 3 · 2025 · {tabLabel} · HOVER FOR DETAIL
setHover(null)}>
{[0, 1, 2, 3].map((r) => (
€{Math.round(f * max)}K
))}
{enabled.Terno && (!focus || focus === "Terno") && (
{hover && activeSeries.length > 0 && (() => {
const leftPct = (xAt(hover.i) / w) * 100;
const showRight = leftPct < 65;
return (
{months[hover.i]} 2025 · {tab}
{activeSeries.map(([k, s]) => (
{k}
€{s.data[hover.i]}K
))}
);
})()}
{months.map((m, i) => (
{m}
))}
{Object.entries(series).map(([k, s]) => {
const on = enabled[k];
return (
setEnabled((x) => ({ ...x, [k]: !x[k] }))} style={{
display: "flex", alignItems: "center", gap: 6,
padding: "6px 10px", borderRadius: 999,
background: on ? "var(--bg-4)" : "transparent",
border: `1px solid ${on ? "var(--border-hairline-strong)" : "var(--border-hairline)"}`,
cursor: "pointer", opacity: on ? 1 : 0.45,
transition: "all 160ms var(--ease-out)",
}}>
{k}
);
})}
);
}
/* ============== SOV DONUT (fixed: proper full circle, no weird bleed) ============== */
function SovDonut() {
const { focus, setFocus, tab } = React.useContext(DashCtx);
// Tab-driven SoV: % of the full market (MARKET_TOTAL) — matches the competitor table exactly.
// Top-5 + Others = 100% so the donut shows a realistic distribution.
const slicesRaw = React.useMemo(() => {
const market = MARKET_TOTAL[tab] || 1;
const base = RAW_ROWS.map((r, i) => {
const d = getRowFor(r, tab);
return {
name: r.n, color: r.dot, spend: d.spend,
sov: +((d.spend / market) * 100).toFixed(1),
yoy: ["+18.2%","+6.1%","+12.7%","-4.3%","+2.4%"][i],
};
});
const top5Sov = base.reduce((a, s) => a + s.sov, 0);
const othersSov = +Math.max(0, 100 - top5Sov).toFixed(1);
if (othersSov > 0) {
base.push({ name: "Others (8)", color: "var(--bg-6)", spend: +(MARKET_TOTAL[tab] - base.reduce((a, s) => a + s.spend, 0)).toFixed(1), sov: othersSov, yoy: "" });
}
return base;
}, [tab]);
const [hoverName, setHoverName] = React.useState(null);
const active = hoverName || focus;
const activeSlice = slicesRaw.find((s) => s.name === active);
// SVG donut using arc paths — robust, full circle
const size = 180, r = 70, rInner = 48, cx = size / 2, cy = size / 2;
const polar = (deg) => {
const a = ((deg - 90) * Math.PI) / 180;
return [cx + r * Math.cos(a), cy + r * Math.sin(a), cx + rInner * Math.cos(a), cy + rInner * Math.sin(a)];
};
const arcPath = (startDeg, endDeg) => {
const [x1o, y1o, x1i, y1i] = polar(startDeg);
const [x2o, y2o, x2i, y2i] = polar(endDeg);
const large = endDeg - startDeg > 180 ? 1 : 0;
return `M ${x1o} ${y1o} A ${r} ${r} 0 ${large} 1 ${x2o} ${y2o} L ${x2i} ${y2i} A ${rInner} ${rInner} 0 ${large} 0 ${x1i} ${y1i} Z`;
};
let cursor = 0;
const arcs = slicesRaw.map((s) => {
const start = cursor;
const end = cursor + (s.sov / 100) * 360;
cursor = end;
return { ...s, start, end };
});
const tabLabel = tab === "TOTAL" ? "COMBINED" : tab;
return (
Share of voice
% OF {tabLabel} BUDGET · HOVER SLICE
{arcs.map((s) => {
const isFoc = !focus || focus === s.name;
const isHover = hoverName === s.name;
return (
setHoverName(s.name)}
onMouseLeave={() => setHoverName(null)}
onClick={() => setFocus(focus === s.name ? null : s.name)}
/>
);
})}
{activeSlice ? activeSlice.name : tab}
{activeSlice ? `${activeSlice.sov}%` : fmtM(slicesRaw.reduce((a, s) => a + (s.spend || 0), 0))}
{activeSlice && activeSlice.yoy && (
{activeSlice.yoy}
)}
{slicesRaw.map((s) => {
const isFoc = !focus || focus === s.name;
const on = hoverName === s.name;
return (
setFocus(focus === s.name ? null : s.name)}
onMouseEnter={() => setHoverName(s.name)}
onMouseLeave={() => setHoverName(null)}
style={{
display: "flex", alignItems: "center", gap: 8,
padding: "4px 6px", borderRadius: 4, cursor: "pointer",
background: on ? "var(--bg-4)" : "transparent",
opacity: isFoc ? 1 : 0.4,
transition: "all 160ms var(--ease-out)",
}}>
{s.name}
{s.sov}%
);
})}
);
}
function ExecSummaryPanel({ lang }) {
const bullets = lang === "SK" ? [
"Terno drží 34% SoV — 2.6× nad mediánom; agresívny pharmacy push v Q2.",
"JYSK eskaluje v júli +233% mesačne — klasické sezónne okno.",
"Dr.Max presúva z Google na Meta (58→64%) — zmena stratégie.",
] : [
"Terno holds 34% SoV — 2.6× above the median; aggressive pharmacy push in Q2.",
"JYSK escalates in July +233% monthly — a classic seasonal window.",
"Dr.Max is shifting Google to Meta (58→64%) — strategy change detected.",
];
return (