);
}
// ─── SEMrush table with built-in sparklines/bars ──────────
function OrganicTable({ rows }) {
const cols = [
{ key: 'avgPosition', label: 'Avg. position', info: 'Average ranking across all keywords. Lower is better — position 1 is the top of Google.', fmt: (v) => v == null ? '—' : v.toFixed(1), invert: true },
{ key: 'kwsTop3', label: 'KWs top-3', info: 'Number of keywords for which this site ranks in positions 1, 2 or 3 — the "above-the-fold" SEO real estate.', fmt: fmtNumLive },
{ key: 'kwsTop10', label: 'KWs top-10', info: 'Keywords ranking on page 1 of Google (positions 1–10). Bigger pool of meaningful organic visibility.', fmt: fmtNumLive },
{ key: 'winRate', label: 'Win rate', info: 'Of head-to-head keyword overlaps, how often this site ranks above the competition.', fmt: (v) => fmtPctLive(v, 1) },
{ key: 'top3Share', label: 'Top-3 share', info: 'This site\'s share of all top-3 organic positions across the tracked keyword universe.', fmt: (v) => fmtPctLive(v, 1) },
{ key: 'uniqueKws', label: 'Unique KWs', info: 'Keywords this site ranks for that no other competitor in the set does — a moat indicator.', fmt: fmtNumLive }];
return (
Domain
{cols.map((c) =>
{c.label}
)}
{rows.map((r) =>
{r.name || r.domain}
{r.isUs && us}
{cols.map((c) => {
const all = rows.map((x) => x[c.key]).filter((v) => v != null);
const max = Math.max(...all) || 1;
const min = Math.min(...all) || 0;
const v = r[c.key];
const t = v == null ? 0 : c.invert ? 1 - (v - min) / (max - min || 1) : (v - min) / (max - min || 1);
return (
{c.fmt(v)}
);
})}
)}
);
}
// ─── Info Tip — small (i) with hover tooltip ──────────────
function InfoTip({ text }) {
const [open, setOpen] = useStateC(false);
return (
setOpen(true)}
onMouseLeave={() => setOpen(false)}
onClick={(e) => {e.stopPropagation();setOpen((o) => !o);}}>
{open && {text}}
);
}
// ─── Section B2 — Absolute channel visits (grouped bar chart) ──
function ChannelAbsolute({ rows, channels }) {
// rows: [{domain, name, color, isUs, organic, paid, direct, referral, social, total}]
const [activeChannel, setActiveChannel] = useStateC('all');
const visibleChannels = activeChannel === 'all' ? channels : channels.filter((c) => c.id === activeChannel);
// Find global max for scale
const allVals = rows.flatMap((r) => visibleChannels.map((c) => r[c.id] || 0));
const max = Math.max(...allVals) || 1;
return (
{channels.map((c) =>
)}
{rows.map((r) =>
{r.name || r.domain}
Total: {fmtNumLive(r.total)}
{r.isUs && us}
{visibleChannels.map((c) => {
const v = r[c.id] || 0;
const widthPct = v / max * 100;
return (
{c.label}
{widthPct > 14 && {fmtNumLive(v)}}
{widthPct <= 14 && {fmtNumLive(v)}}
);
})}
)}
);
}
// ─── Paid SOV grid ───────────────────────────────────────
function PaidGrid({ rows }) {
const metrics = [
{ key: 'impShare', label: 'Impression share', hint: 'Share of total possible impressions' },
{ key: 'topOfPageRate', label: 'Top of page rate', hint: 'Ads shown at top of SERP' },
{ key: 'outrankingShare', label: 'Outranking share', hint: 'Times ranked above the rest' },
{ key: 'overlapRate', label: 'Overlap rate', hint: 'Auctions seen alongside us' },
{ key: 'brandOverlapRate', label: 'Brand bidding', hint: 'Their imp share when searches are for CarBrain branded KWs — how aggressively they bid against our brand' }];
return (
{rows.map((r) =>
{r.name || r.domain}
{r.isUs && us}
{metrics.map((m) => {
const v = r[m.key];
// For "us" row, outranking/overlap/brand are N/A (we don't compete with ourselves)
const isNA = r.isUs && ['outrankingShare', 'overlapRate', 'brandOverlapRate'].includes(m.key);
return (
{m.label}
{isNA ? '—' : fmtPctLive(v, 1)}
);
})}
)}
);
}
// ─── Brand attack — tornado/back-to-back bars ─────────────────────
// LEFT side = "Auction overlap" — % of CarBrain's non-branded paid auctions
// where this competitor also appears (Section E col F).
// RIGHT side = "Brand defense gap" — competitor's impression share when the
// search query is a CarBrain-branded keyword (Section E col G).
// Note: this is share *within* the CarBrain-branded campaign only,
// which is itself a slice of total paid activity.
function BrandAttackChord({ rows = [], paidRows = [] }) {
const us = rows.find(r => r.isUs);
const competitorsBase = rows.filter(r => !r.isUs);
if (!us || competitorsBase.length === 0) return null;
const findPaid = (domain) => {
if (!domain || !paidRows.length) return null;
const target = String(domain).toLowerCase().trim();
let hit = paidRows.find(p => String(p.domain).toLowerCase().trim() === target);
if (hit) return hit;
const targetRoot = target.replace(/^www\./, '').split('.')[0];
return paidRows.find(p => {
const pRoot = String(p.domain).toLowerCase().trim().replace(/^www\./, '').split('.')[0];
return pRoot === targetRoot;
}) || null;
};
const competitors = competitorsBase.map(c => {
const p = findPaid(c.domain);
return {
...c,
overlapRate: p?.overlapRate ?? 0,
brandOverlapRate: p?.brandOverlapRate ?? 0,
};
});
// Sort: rows with the largest combined paid-pressure on top
const sorted = [...competitors].sort((a, b) =>
((b.overlapRate + b.brandOverlapRate) - (a.overlapRate + a.brandOverlapRate))
);
// Use a shared scale so left/right bars are visually comparable.
const maxAll = Math.max(
60,
...sorted.flatMap(c => [c.overlapRate, c.brandOverlapRate])
);
const widthFor = (v) => Math.max(0, (v / maxAll) * 100);
return (
{/* Header — two side titles + center axis label */}
Left
Auction overlap
% of {us.name}'s non-branded paid auctions where this competitor also bid
{us.name}
Right
Brand defense gap
Competitor's imp share within {us.name}'s branded campaign (slice of total paid)
How to read: bars on both sides = competitor pressures {us.name} both in the open market AND on branded queries (dual-front threat).
Big right bar only = predatory brand bidding (intercepting users who searched for {us.name} by name).
Big left bar only = market overlap without direct brand attack.
);
}
// ─── Section F — Lead share (estimated leads + purchased units) ────
function LeadShare({ rows, paidRows = [], brandedRows = [] }) {
const maxLeads = Math.max(...rows.map(r => r.estLeads || 0)) || 1;
const us = rows.find(r => r.isUs);
const competitors = rows.filter(r => !r.isUs);
// Helper: find related row by exact domain match (case-insensitive, trimmed).
const findByDomain = (list, domain) => {
if (!list || list.length === 0 || !domain) return null;
const target = String(domain).toLowerCase().trim();
let hit = list.find(p => String(p.domain).toLowerCase().trim() === target);
if (hit) return hit;
const targetRoot = target.replace(/^www\./, '').split('.')[0];
hit = list.find(p => {
const pRoot = String(p.domain).toLowerCase().trim().replace(/^www\./, '').split('.')[0];
return pRoot === targetRoot;
});
return hit || null;
};
const nonBrandedShareFor = (domain) => {
const m = findByDomain(brandedRows, domain);
return m && m.nonBrandedShare != null ? m.nonBrandedShare : 50;
};
// Paid auction overlap (Section E) — only signal we have for our own pool
const paidOverlapFor = (domain) => {
const m = findByDomain(paidRows, domain);
return m && m.overlapRate != null ? m.overlapRate : null;
};
// ── Pool composition: of OUR non-branded leads, how much overlaps with each competitor in paid auctions
const usNonBrandedShare = us ? nonBrandedShareFor(us.domain) : 50;
const usTotalLeads = us?.estLeads || 0;
const usNonBrandedLeads = usTotalLeads * (usNonBrandedShare / 100);
const usBrandedLeads = usTotalLeads - usNonBrandedLeads;
const overlapBreakdown = competitors.map(c => {
const overlapPct = paidOverlapFor(c.domain);
const overlapLeads = overlapPct != null ? usNonBrandedLeads * (overlapPct / 100) : null;
return { ...c, overlapPct, overlapLeads };
});
// Sum of overlaps may exceed 100% — overlaps aren't mutually exclusive.
const rawOverlapSum = overlapBreakdown.reduce((s, c) => s + (c.overlapLeads || 0), 0);
let scaledOverlap;
let exclusiveToUs;
if (rawOverlapSum > usNonBrandedLeads) {
const factor = usNonBrandedLeads / rawOverlapSum;
scaledOverlap = overlapBreakdown.map(c => ({
...c,
overlapLeadsRendered: c.overlapLeads != null ? c.overlapLeads * factor : null,
}));
exclusiveToUs = 0;
} else {
scaledOverlap = overlapBreakdown.map(c => ({ ...c, overlapLeadsRendered: c.overlapLeads }));
exclusiveToUs = usNonBrandedLeads - rawOverlapSum;
}
const compositionTotal = usNonBrandedLeads;
// Compute units share % from raw estPurchased
const totalUnits = rows.reduce((s, r) => s + (r.estPurchased || 0), 0) || 1;
const rowsWithUnitsShare = rows.map(r => ({
...r,
unitsShare: ((r.estPurchased || 0) / totalUnits) * 100,
}));
return (
Paid search · Two ways competitors contest {us.name}
How competitors show up against us in paid search
Two stacked metrics from Section E — both show paid-search pressure on {us.name}, but from different angles.
Left bars measure overlap in the open market; right bars measure who's
intercepting users that already searched for {us.name} by name.
Scope note · right side: the "Brand defense gap" is competitor impression share within {us.name}'s branded campaign only
— i.e. when the search query contains "{us.name.toLowerCase()}". The branded campaign is itself a slice of total paid activity,
so a 57% gap doesn't mean "57% of all paid impressions," it means "57% of impressions on {us.name}-branded queries."
Read this chart: a long bar on the right = predatory brand bidding. ClunkerJunker captures{' '}
{(paidRows.find(c => /clunker/i.test(c.domain))?.brandOverlapRate || 0).toFixed(0)}% of impressions when users search for {us.name} by name —
and they also overlap heavily on the left ({(paidRows.find(c => /clunker/i.test(c.domain))?.overlapRate || 0).toFixed(0)}% of our non-branded auctions),
which makes them a dual-front threat. Wheelzy{' '}
({(paidRows.find(c => /wheelzy/i.test(c.domain))?.brandOverlapRate || 0).toFixed(0)}% brand) does the same at lower volume.
Peddle is absent from branded auctions ({(paidRows.find(c => /peddle/i.test(c.domain))?.brandOverlapRate || 0).toFixed(0)}%) but pressures us on the left side — different strategy, possibly heavier on SEO and non-branded paid.