// ============================================================ // GEO HEATMAP — UK-focused geographic intelligence // Used by Analytics Intelligence Center + Analytics Breakdown. // Brass + cyan over matte black. Always-visible regions. // ============================================================ // Simplified UK + Ireland outline (abstracted, not cartographically precise). // Coordinates picked so cities land where they belong roughly. const UK_OUTLINE = "M 260 60 L 280 50 L 305 60 L 320 50 L 332 65 L 340 80 L 350 95 L 360 115 L 365 135 L 358 152 L 340 160 L 332 175 L 325 195 L 320 218 L 318 240 L 312 262 L 304 280 L 296 296 L 282 310 L 268 322 L 252 335 L 240 348 L 230 362 L 224 380 L 220 400 L 218 422 L 224 442 L 232 458 L 218 462 L 200 460 L 188 450 L 178 432 L 170 414 L 162 392 L 158 372 L 150 354 L 146 332 L 142 312 L 138 290 L 138 268 L 142 248 L 152 228 L 162 210 L 174 196 L 184 178 L 196 162 L 208 144 L 218 126 L 228 108 L 240 92 L 252 78 L 260 60 Z"; const IE_OUTLINE = "M 100 240 L 112 232 L 126 230 L 138 240 L 144 256 L 142 272 L 134 286 L 122 296 L 108 298 L 96 292 L 88 280 L 86 264 L 92 250 L 100 240 Z"; // UK & Ireland cities with mock business data const UK_CITIES = [ { id: 'london', name: 'London', x: 308, y: 390, leads: 1284, revenue: 184200, conv: 24.2, bookings: 412, color: '#5dffb0' }, { id: 'manchester', name: 'Manchester', x: 252, y: 268, leads: 612, revenue: 84200, conv: 21.4, bookings: 184, color: '#4be8ff' }, { id: 'birmingham', name: 'Birmingham', x: 268, y: 332, leads: 442, revenue: 64100, conv: 18.8, bookings: 124, color: '#4be8ff' }, { id: 'leeds', name: 'Leeds', x: 280, y: 252, leads: 312, revenue: 48400, conv: 19.2, bookings: 92, color: '#8b6bff' }, { id: 'bristol', name: 'Bristol', x: 232, y: 388, leads: 248, revenue: 38400, conv: 17.4, bookings: 68, color: '#8b6bff' }, { id: 'liverpool', name: 'Liverpool', x: 236, y: 270, leads: 184, revenue: 24800, conv: 14.2, bookings: 42, color: '#ff7ad9' }, { id: 'glasgow', name: 'Glasgow', x: 196, y: 134, leads: 168, revenue: 28400, conv: 22.4, bookings: 48, color: '#ff7ad9' }, { id: 'edinburgh', name: 'Edinburgh', x: 232, y: 138, leads: 142, revenue: 24200, conv: 23.1, bookings: 38, color: '#ff7ad9' }, { id: 'cardiff', name: 'Cardiff', x: 208, y: 408, leads: 88, revenue: 12400, conv: 11.8, bookings: 24, color: '#ffb14b' } ]; const METRICS = { leads: { label: 'Leads', key: 'leads', fmt: v => v.toLocaleString(), unit: '', hue: '#4be8ff' }, revenue: { label: 'Revenue', key: 'revenue', fmt: v => `£${(v/1000).toFixed(1)}k`, unit: '', hue: '#5dffb0' }, conv: { label: 'Conversion', key: 'conv', fmt: v => `${v.toFixed(1)}%`, unit: '', hue: '#8b6bff' }, bookings: { label: 'Bookings', key: 'bookings', fmt: v => v.toLocaleString(), unit: '', hue: '#e8c98a' } }; function GeoHeatmap({ data = UK_CITIES, defaultMetric = 'revenue', defaultPeriod = '30d', onPushToast }) { const [metric, setMetric] = React.useState(defaultMetric); const [period, setPeriod] = React.useState(defaultPeriod); const [hover, setHover] = React.useState(null); const [selected, setSelected] = React.useState(null); const [zoom, setZoom] = React.useState(1); const [pan, setPan] = React.useState({ x: 0, y: 0 }); const m = METRICS[metric]; const vals = data.map(d => d[m.key]); const max = Math.max(...vals); const min = Math.min(...vals); // Stats const top = [...data].sort((a, b) => b[m.key] - a[m.key])[0]; const bottom = [...data].sort((a, b) => a[m.key] - b[m.key])[0]; const total = vals.reduce((s, v) => s + v, 0); // Radius mapping for bubbles const radius = (val) => 8 + ((val - min) / (max - min || 1)) * 22; // Opacity / glow intensity mapping const intensity = (val) => 0.3 + ((val - min) / (max - min || 1)) * 0.7; const isEmpty = data.length === 0 || max === 0; if (isEmpty) { return (

No map data yet

Connect channels or leads to unlock geographic intelligence.

); } return (

{/* Top control bar */}

{Object.entries(METRICS).map(([k, def]) => ( ))}

{['24h','7d','30d','90d','ytd'].map(p => ( ))}

{/* Map canvas */}

UK · GEO · {METRICS[metric].label.toUpperCase()} · {period.toUpperCase()} 9 REGIONS · LIVE {/* Zoom controls */}

{Math.round(zoom * 100)}%

{/* Legend */}

Low

{[0.2, 0.4, 0.6, 0.8, 1].map((a, i) => (

))}

High · {m.label}

{/* Hover tooltip */} {hover && (() => { const c = data.find(x => x.id === hover); if (!c) return null; return (

{c.name}

Leads{c.leads.toLocaleString()}

Revenue£{c.revenue.toLocaleString()}

Conversion{c.conv}%

Bookings{c.bookings}

); })()}

{/* Right rail */}

{/* Summary */}

Top region

{top.name}

{m.fmt(top[m.key])} {m.label.toLowerCase()}

Underperforming

{bottom.name}

{m.fmt(bottom[m.key])} {m.label.toLowerCase()}

Total {m.label.toLowerCase()}

{m.fmt(total)}

across {data.length} regions

{/* Region list */}

REGIONS · BY {m.label.toUpperCase()}

{[...data].sort((a, b) => b[m.key] - a[m.key]).map((c, i) => (

setHover(c.id)} onMouseLeave={() => setHover(null)} onClick={() => setSelected(s => s === c.id ? null : c.id)} > #{i + 1} {c.name}

{m.fmt(c[m.key])}

))}

); } window.GeoHeatmap = GeoHeatmap; window.UK_CITIES = UK_CITIES;