import { motion } from 'framer-motion'; import type { CanvasComponent } from '../../types/canvas'; import { RendererWrapper, NoDataPlaceholder, type ComponentRenderContext } from './RendererWrapper'; interface Props { component: CanvasComponent; ctx: ComponentRenderContext } interface GeoRow { district: string; lat?: number; lng?: number; lead_count?: number; count?: number; avg_qd_score?: number; x?: number; y?: number; } export function GeoMapRenderer({ component, ctx }: Props) { const rows = (component.dataRows ?? []) as unknown as GeoRow[]; const intensityField = (component.visualizationParameters as { intensityField?: string }).intensityField ?? 'lead_count'; const tooltipFields = (component.visualizationParameters as { tooltipFields?: string[] }).tooltipFields ?? ['district', 'lead_count']; if (!rows.length) return ( ); const maxVal = Math.max(...rows.map((r) => Number(r[intensityField as keyof GeoRow] ?? r.count ?? r.lead_count ?? 0))); return (
{/* Dubai grid lines (decorative) */} {/* Coastline glow */}
{/* Legend */}

Lead Intensity

{[ { label: 'High', color: '#0EA5E9' }, { label: 'Medium', color: '#22D3EE' }, { label: 'Low', color: '#164E63' }, ].map(({ label, color }) => (
{label}
))}
{/* District pins */} {rows.map((row, i) => { const val = Number(row[intensityField as keyof GeoRow] ?? row.count ?? row.lead_count ?? 0); const ratio = maxVal > 0 ? val / maxVal : 0; const color = ratio > 0.7 ? '#0EA5E9' : ratio > 0.4 ? '#22D3EE' : '#164E63'; const size = 6 + ratio * 14; const x = row.x ?? (20 + i * 12); const y = row.y ?? (30 + i * 8); return ( {/* Tooltip */}

{row.district}

{tooltipFields.map((f) => (

{f.replace(/_/g, ' ')}: {String(row[f as keyof GeoRow] ?? '—')}

))}
); })}
); }