\n \n \n \n
`;\n },\n mounted(d2, root){\n\n const $ = s => root.querySelector(s);\n const NS = 'http://www.w3.org/2000/svg';\n const norm = s => (s||'').normalize('NFKD').replace(/[̀-ͯ]/g,'').toUpperCase().replace(/[^A-Z0-9]+/g,' ').trim();\n const esc = s => (s==null?'':String(s)).replace(/[&<>]/g, c => ({'&':'&','<':'<','>':'>'}[c]));\n const splitUfs = s => (s||'').split(',').map(x=>x.trim().toUpperCase()).filter(Boolean);\n\n async function geoUF(uf){\n const code = UF_CODE[uf] || uf;\n const r = await fetch('https://raw.githubusercontent.com/tbrugz/geodata-br/master/geojson/geojs-'+code+'-mun.json');\n if (!r.ok) throw new Error('geo ' + uf);\n return r.json();\n }\n function buildAdj(features){\n const pts = f => {\n const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates], s=new Set();\n ps.forEach(poly=>poly.forEach(ring=>ring.forEach(p=>s.add(Math.round(p[0]*1000)/1000+','+Math.round(p[1]*1000)/1000))));\n return s;\n };\n const feat = {}, idx = {};\n features.forEach(f => { const nm = norm(f.properties.name || f.properties.NOME || f.properties.nome); feat[nm] = { f, pts: pts(f) }; });\n for (const nm in feat) feat[nm].pts.forEach(p => (idx[p] = idx[p] || []).push(nm));\n const nbrs = nm => {\n const c = {};\n feat[nm].pts.forEach(p => idx[p].forEach(o => { if (o !== nm) c[o] = (c[o] || 0) + 1; }));\n return Object.entries(c).filter(([, n]) => n >= 2).map(([o]) => o);\n };\n return { feat, nbrs };\n }\n function project(feats){\n let mnx=1/0,mny=1/0,mxx=-1/0,mxy=-1/0;\n const each = cb => feats.forEach(f=>{const g=f.geometry,ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];ps.forEach(p=>p.forEach(r=>r.forEach(cb)));});\n each(p=>{mnx=Math.min(mnx,p[0]);mxx=Math.max(mxx,p[0]);mny=Math.min(mny,p[1]);mxy=Math.max(mxy,p[1]);});\n const mlat=(mny+mxy)/2, kx=Math.cos(mlat*Math.PI/180), W=700,H=500,pad=22;\n const gw=(mxx-mnx)*kx, gh=(mxy-mny), sc=Math.min((W-2*pad)/gw,(H-2*pad)/gh);\n const ox=(W-gw*sc)/2, oy=(H-gh*sc)/2;\n const pr = p=>[ox+(p[0]-mnx)*kx*sc, oy+(mxy-p[1])*sc];\n pr.scale = sc;\n return pr;\n }\n function pathFor(f,pr){\n const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n return ps.map(poly=>poly.map(r=>'M'+r.map(p=>{const q=pr(p);return q[0].toFixed(1)+','+q[1].toFixed(1);}).join('L')+'Z').join('')).join('');\n }\n function cxy(f,pr){\n let x=0,y=0,n=0; const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n ps.forEach(poly=>poly[0].forEach(p=>{const q=pr(p);x+=q[0];y+=q[1];n++;}));\n return [x/n, y/n];\n }\n // Clips a projected ring (screen-space [x,y] points) against a single straight half-plane\n // (side(x,y) >= 0 is kept) via Sutherland-Hodgman. Unlike a wedge radiating from one apex —\n // which only covers a shape the apex can \"see\" the whole border of — a straight-line cut is\n // exact for ANY simple polygon, convex or concave, so stacking these never leaves a gap.\n function clipHalfPlane(ring, side){\n const out = [];\n const n = ring.length;\n for (let i = 0; i < n; i++){\n const curr = ring[i], prev = ring[(i - 1 + n) % n];\n const sCurr = side(curr[0], curr[1]);\n const sPrev = side(prev[0], prev[1]);\n const currIn = sCurr >= -1e-9;\n const prevIn = sPrev >= -1e-9;\n if (currIn) {\n if (!prevIn) out.push(intersectHalfPlane(prev, curr, side));\n out.push(curr);\n } else if (prevIn) {\n out.push(intersectHalfPlane(prev, curr, side));\n }\n }\n return out;\n }\n function intersectHalfPlane(p1, p2, side){\n const s1 = side(p1[0], p1[1]), s2 = side(p2[0], p2[1]);\n const t = s1 / (s1 - s2);\n return [p1[0] + t * (p2[0] - p1[0]), p1[1] + t * (p2[1] - p1[1])];\n }\n // Full projected bounding box of a município — used to lay bands across its ENTIRE geometry\n // (all MultiPolygon parts included), so the bands always tile the whole shape, islands too.\n function bboxOf(f, pr){\n let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;\n const g = f.geometry, ps = g.type === 'MultiPolygon' ? g.coordinates : [g.coordinates];\n ps.forEach(poly => poly.forEach(ring => ring.forEach(p => {\n const q = pr(p);\n minX = Math.min(minX, q[0]); maxX = Math.max(maxX, q[0]);\n minY = Math.min(minY, q[1]); maxY = Math.max(maxY, q[1]);\n })));\n return [minX, minY, maxX, maxY];\n }\n // A vertical band [x0,x1) of the município, clipped against its REAL border on both sides.\n function stripeClipPath(f, pr, x0, x1){\n const g = f.geometry, ps = g.type === 'MultiPolygon' ? g.coordinates : [g.coordinates];\n let d = '';\n ps.forEach(poly => poly.forEach(ring => {\n let pts = ring.map(p => pr(p));\n pts = clipHalfPlane(pts, (x) => x - x0);\n if (pts.length) pts = clipHalfPlane(pts, (x) => x1 - x);\n if (pts.length >= 3) d += 'M' + pts.map(q => q[0].toFixed(1) + ',' + q[1].toFixed(1)).join('L') + 'Z';\n }));\n return d;\n }\n const loader = (on, t, isErr) => {\n const l = $('#loader');\n l.classList.toggle('hidden', !on);\n l.classList.toggle('err', !!isErr);\n if (t != null) l.textContent = t;\n };\n\n let S = { assign: { ...(d2.param('assignments', {}) || {}) }, targets: new Set(), clickable: new Set(), closeFeats: {}, nbrFeats: [], labels: {}, pr: null, view: { scale: 1, tx: 0, ty: 0 }, groupAssign: {} };\n let dragStart = null, dragMoved = false;\n\n // Live sector for a município: the Store (if bound) is the source of truth —\n // reads are tracked, so an external change to the Store re-renders this map.\n // `S.assign` is only the bootstrap default (from `assignments`) before the\n // Store has an entry, or the fallback when no `store` param is bound at all.\n function getAssign(key){\n const storeRef = d2.param('store');\n if (!storeRef) return S.assign[key];\n const prop = d2.param('prop');\n if (prop) {\n const obj = d2.store(storeRef).get(prop, {}) || {};\n return key in obj ? obj[key] : S.assign[key];\n }\n return d2.store(storeRef).get(key, S.assign[key]);\n }\n\n // Writes back through the same `prop` indirection as getAssign(): when `prop` is set,\n // values land on store[prop][key] (a nested object) instead of store[key] directly —\n // the same shape a Setter targeting `@Store.prop` would produce.\n function setAssign(key, value){\n S.assign[key] = value;\n const storeRef = d2.param('store');\n if (!storeRef) return;\n const prop = d2.param('prop');\n if (prop) {\n const obj = { ...(d2.store(storeRef).get(prop, {}) || {}) };\n obj[key] = value;\n d2.store(storeRef).set(prop, obj);\n } else {\n d2.store(storeRef).set(key, value);\n }\n }\n\n // A município can hold MULTIPLE sectors at once — stored as an array instead of\n // a single string. cycleAt() advances just one slot of that array (one pie wedge)\n // through `groups`, padding the array if the clicked index didn't exist yet.\n // `groups` is now an array of { sector, municipio } — sector is the value cycled\n // through on click; municipio (comma-separated) statically pins that sector's color\n // onto municípios that aren't part of the interactive store-backed assignment.\n function sectorNames(){\n return (d2.param('groups', []) || []).map(g => g.sector);\n }\n\n function cycleAt(key, idx, arrLen){\n const gs = sectorNames();\n if (!gs.length) return null;\n let arr = getAssign(key);\n arr = Array.isArray(arr) ? [...arr] : [];\n while (arr.length < arrLen) arr.push('');\n const next = gs[(gs.indexOf(arr[idx]) + 1) % gs.length];\n arr[idx] = next;\n setAssign(key, arr);\n return next;\n }\n\n function svgPoint(evt){\n const svg = $('#map');\n const pt = svg.createSVGPoint();\n pt.x = evt.clientX; pt.y = evt.clientY;\n const ctm = svg.getScreenCTM();\n if (!ctm) return { x: 0, y: 0 };\n const p = pt.matrixTransform(ctm.inverse());\n return { x: p.x, y: p.y };\n }\n function applyTransform(){\n const g = $('#viewport');\n if (g) g.setAttribute('transform', `translate(${S.view.tx} ${S.view.ty}) scale(${S.view.scale})`);\n }\n d2.on('.stage', 'wheel', e => {\n e.preventDefault();\n const p = svgPoint(e);\n const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;\n const next = Math.min(8, Math.max(0.15, S.view.scale * factor));\n const k = next / S.view.scale;\n S.view.tx = p.x - k * (p.x - S.view.tx);\n S.view.ty = p.y - k * (p.y - S.view.ty);\n S.view.scale = next;\n applyTransform();\n });\n d2.on('.stage', 'mousedown', e => {\n if (e.button !== 0) return;\n const p = svgPoint(e);\n dragStart = { x: p.x, y: p.y, tx: S.view.tx, ty: S.view.ty };\n dragMoved = false;\n });\n d2.on(window, 'mousemove', e => {\n if (!dragStart) return;\n const p = svgPoint(e);\n const dx = p.x - dragStart.x, dy = p.y - dragStart.y;\n if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) dragMoved = true;\n S.view.tx = dragStart.tx + dx;\n S.view.ty = dragStart.ty + dy;\n applyTransform();\n });\n d2.on(window, 'mouseup', () => { dragStart = null; });\n\n // This component paints imperatively (mounted-driven SVG, not the reactive\n // render() string), so a Store read here isn't auto-tracked the way it would\n // be inside render(). Poll the bound Store's sector values every frame and\n // redraw when any of them changed — this is what makes an EXTERNAL write to\n // the Store (not just this map's own clicks) show up on the map.\n let lastAssignSnapshot = {};\n d2.raf(() => {\n const storeRef = d2.param('store');\n if (!storeRef) return;\n let changed = false;\n Object.keys(S.closeFeats).forEach(key => {\n const v = getAssign(key);\n // Arrays (multi-sector municípios) are compared by a joined signature, not by\n // reference — a store that clones on read would otherwise look \"changed\" every frame.\n const sig = Array.isArray(v) ? v.join('\u0001') : v;\n if (lastAssignSnapshot[key] !== sig) { changed = true; lastAssignSnapshot[key] = sig; }\n });\n if (changed) drawMap();\n });\n\n function drawMap(){\n const svg = $('#map'); svg.innerHTML = '';\n const viewport = document.createElementNS(NS, 'g');\n viewport.setAttribute('id', 'viewport');\n svg.appendChild(viewport);\n applyTransform();\n const groupDefs = d2.param('groups', []) || [];\n const sectors = groupDefs.map(g => g.sector);\n const colors = d2.param('colors', {});\n const colorFor = g => colors[g] || PALETTE[sectors.indexOf(g) % PALETTE.length] || '#94a3b8';\n // Base label size tracks the projection's own fit scale, so labels stay proportionate\n // to the shapes whether the auto-fit is tight (one neighborhood) or wide (distant targets).\n const labelFontSize = Math.max(4, Math.min(14, 9 * ((S.pr.scale || 1000) / 1000)));\n\n S.nbrFeats.forEach(f => {\n const p = document.createElementNS(NS, 'path');\n p.setAttribute('d', pathFor(f, S.pr));\n p.setAttribute('class', 'bg');\n p.setAttribute('data-key', 'bg-' + (f.properties.name || f.properties.NOME || f.properties.nome || ''));\n viewport.appendChild(p);\n });\n\n Object.entries(S.closeFeats).forEach(([key, f]) => {\n const clickable = S.clickable.has(key);\n const groupSectors = !clickable ? S.groupAssign[key] : null;\n const groupSector = groupSectors ? groupSectors[0] : null;\n const currentVal = getAssign(key);\n const arrVal = Array.isArray(currentVal) ? currentVal : null;\n const isPie = !!(arrVal && arrVal.length >= 2 && clickable);\n // Static group pins can also stack more than one sector onto the same município\n // (e.g. two `groups[]` entries both listing it) — split those into a pie too.\n const isGroupPie = !!(groupSectors && groupSectors.length >= 2);\n const soloSector = arrVal ? arrVal[0] : currentVal;\n const p = document.createElementNS(NS, 'path');\n p.setAttribute('d', pathFor(f, S.pr));\n p.setAttribute('data-key', key);\n p.setAttribute('class', ['muni', clickable ? '' : 'ctx'].filter(Boolean).join(' '));\n\n if (isPie || isGroupPie) {\n // Multiple sectors share this município — the shape itself is a neutral\n // safety-net backdrop; the wedges below (clipped to the REAL border, one per\n // array entry) carry the actual colors and fully cover the município's area.\n const pieSectors = isPie ? arrVal : groupSectors;\n p.setAttribute('fill', '#eef0f5');\n p.onmousemove = e => {\n const tip = $('#tip');\n tip.style.opacity = 1; tip.style.left = (e.clientX + 12) + 'px'; tip.style.top = (e.clientY + 12) + 'px';\n const names = pieSectors.map(v => v || 'sem destino').join(', ');\n tip.innerHTML = `${esc(S.labels[key] || key)}carregando malhas…
\n ${pieSectors.length} setores: ${esc(names)}`;\n };\n p.onmouseleave = () => { $('#tip').style.opacity = 0; };\n } else {\n if (groupSector) {\n p.setAttribute('fill', colorFor(groupSector));\n p.setAttribute('fill-opacity', '0.3');\n } else {\n p.setAttribute('fill', soloSector ? colorFor(soloSector) : (clickable ? '#94a3b8' : '#dcdfe8'));\n }\n if (clickable) {\n p.onclick = () => {\n if (dragMoved) { dragMoved = false; return; }\n let next;\n if (arrVal) {\n next = cycleAt(key, 0, arrVal.length || 1);\n } else {\n const gs = sectorNames();\n if (!gs.length) return;\n next = gs[(gs.indexOf(getAssign(key)) + 1) % gs.length];\n setAssign(key, next);\n }\n drawMap();\n d2.emit('onChange', arrVal ? { municipio: key, sectorIndex: 0, setor: next } : { municipio: key, setor: next });\n };\n }\n p.onmousemove = e => {\n const tip = $('#tip');\n tip.style.opacity = 1; tip.style.left = (e.clientX + 12) + 'px'; tip.style.top = (e.clientY + 12) + 'px';\n const label = groupSector || soloSector || (clickable ? 'sem destino' : 'apenas contexto');\n tip.innerHTML = `${esc(S.labels[key] || key)}
${esc(label)}`;\n };\n p.onmouseleave = () => { $('#tip').style.opacity = 0; };\n }\n viewport.appendChild(p);\n\n const [cx, cy] = cxy(f, S.pr);\n\n if (isPie || isGroupPie) {\n const wedgeSectors = isPie ? arrVal : groupSectors;\n const n = wedgeSectors.length;\n // Bands across the FULL bounding box of this município, not wedges around a center —\n // a center point can't always \"see\" a concave shape's whole border, which used to leave\n // slivers uncovered; straight parallel cuts always tile the entire shape exactly.\n const [bx0, , bx1] = bboxOf(f, S.pr);\n const stripeW = (bx1 - bx0) / n;\n wedgeSectors.forEach((sector, i) => {\n const d = stripeClipPath(f, S.pr, bx0 + i * stripeW, bx0 + (i + 1) * stripeW);\n if (!d) return;\n const wedge = document.createElementNS(NS, 'path');\n wedge.setAttribute('d', d);\n wedge.setAttribute('class', 'wedge');\n wedge.setAttribute('fill', sector ? colorFor(sector) : '#94a3b8');\n // Static group pins (`groups[]`) aren't interactable — keep them at ~30% opacity so\n // they read as context, distinct from a real Store-backed sector assignment.\n wedge.setAttribute('fill-opacity', isPie ? '1' : '0.3');\n wedge.style.cursor = isPie ? 'pointer' : 'default';\n if (isPie) {\n wedge.onclick = () => {\n if (dragMoved) { dragMoved = false; return; }\n const next = cycleAt(key, i, n);\n drawMap();\n d2.emit('onChange', { municipio: key, sectorIndex: i, setor: next });\n };\n }\n wedge.onmousemove = e => {\n const tip = $('#tip');\n tip.style.opacity = 1; tip.style.left = (e.clientX + 12) + 'px'; tip.style.top = (e.clientY + 12) + 'px';\n tip.innerHTML = `${esc(S.labels[key] || key)} — setor ${i + 1}/${n}
${esc(sector || 'sem destino')}`;\n };\n wedge.onmouseleave = () => { $('#tip').style.opacity = 0; };\n viewport.appendChild(wedge);\n });\n }\n\n const t = document.createElementNS(NS, 'text');\n t.setAttribute('class', 'mlabel'); t.setAttribute('x', cx); t.setAttribute('y', cy);\n t.style.fontSize = labelFontSize + 'px';\n t.textContent = (S.labels[key] || key).slice(0, 13);\n viewport.appendChild(t);\n });\n\n $('#legend').innerHTML = sectors.map(g => `${esc(g)}`).join('');\n }\n\n async function load(){\n loader(true, 'carregando malhas…', false);\n try {\n const ufs = splitUfs(d2.param('ufs', 'PR'));\n if (!ufs.length) throw new Error('informe ao menos uma UF em \"ufs\"');\n const manualNbr = splitUfs(d2.param('neighborUfs', ''));\n const autoNbr = ufs.flatMap(u => UF_BORDERS[u] || []);\n const nbrUfs = [...new Set(manualNbr.length ? manualNbr : autoNbr)].filter(u => !ufs.includes(u));\n const allUfs = [...new Set([...ufs, ...nbrUfs])];\n const geos = await Promise.all(allUfs.map(u => geoUF(u).catch(() => null)));\n\n const closeUfSet = new Set(ufs);\n const allFeats = [];\n const stateNames = [];\n allUfs.forEach((u, i) => {\n const g = geos[i]; if (!g) return;\n const inClose = closeUfSet.has(u);\n g.features.forEach(f => {\n allFeats.push(f);\n if (inClose) stateNames.push(norm(f.properties.name || f.properties.NOME || f.properties.nome || ''));\n });\n });\n if (!allFeats.length) throw new Error('nenhuma malha carregada para essas UFs');\n\n const adj = buildAdj(allFeats);\n\n const targetsRaw = (d2.param('municipio', '') || '').split(',').map(x => x.trim()).filter(Boolean);\n const targetNames = targetsRaw.map(norm);\n const foundTargets = targetNames.filter(t => adj.feat[t]);\n if (targetNames.length && !foundTargets.length) throw new Error('município(s) não encontrado(s) na(s) UF(s) informada(s): ' + targetsRaw.join(', '));\n S.targets = new Set(foundTargets);\n\n // Interactive scope (\"close\"): each target município (comma-separated in `municipio`)\n // + its direct neighbors — NOT the whole state. Falls back to the whole state when no\n // `municipio` is set.\n const neighborhoodNames = foundTargets.length\n ? [...new Set(foundTargets.flatMap(t => [t, ...adj.nbrs(t)]))]\n : stateNames;\n\n // Statically pins a sector's color onto whatever municípios are listed in that\n // group's `municipio` field — these are display-only, not interactively assignable.\n // A município can be listed by more than one group (e.g. Astorga under both Setor A\n // and Setor B) — keep every sector that claims it so drawMap() can split it into a pie.\n const groupAssign = {};\n (d2.param('groups', []) || []).forEach(g => {\n (g.municipio || '').split(',').map(x => x.trim()).filter(Boolean).forEach(n => {\n const key = norm(n);\n (groupAssign[key] = groupAssign[key] || []).push(g.sector);\n });\n });\n\n // A município already carrying a sector assignment joins the interactive set even when\n // it's not adjacent to the target — this is what `neighborUfs` is for: letting a sector\n // reach into a município from a bordering state, as long as that UF was loaded.\n const assignedSet = new Set(Object.keys(S.assign).map(norm));\n const assignedLoaded = [...assignedSet].filter(n => adj.feat[n]);\n const groupLoaded = Object.keys(groupAssign).filter(n => adj.feat[n]);\n const closingNames = [...new Set([...neighborhoodNames, ...assignedLoaded, ...groupLoaded])];\n const closingSet = new Set(closingNames);\n\n S.closeFeats = {}; S.labels = {};\n closingNames.forEach(n => { if (adj.feat[n]) { S.closeFeats[n] = adj.feat[n].f; S.labels[n] = adj.feat[n].f.properties.name || n; } });\n\n S.clickable = new Set(closingNames.filter(n => assignedSet.has(n)));\n S.groupAssign = groupAssign;\n\n // Everything else loaded (rest of the state / neighbor states) is faint background context.\n const restNames = new Set();\n allFeats.forEach(f => {\n const n = norm(f.properties.name || f.properties.NOME || f.properties.nome || '');\n if (adj.feat[n] && !closingSet.has(n)) restNames.add(n);\n });\n S.nbrFeats = [...restNames].map(n => adj.feat[n].f);\n\n const zoomFeats = Object.values(S.closeFeats);\n S.pr = project(zoomFeats.length ? zoomFeats : allFeats);\n S.view = { scale: 1, tx: 0, ty: 0 };\n drawMap();\n loader(false);\n } catch (e) {\n loader(true, 'erro: ' + e.message + ' (clique p/ tentar de novo)', true);\n }\n }\n\n $('#loader').onclick = () => {\n if (!$('#loader').classList.contains('err')) return;\n S.closeFeats = {}; S.nbrFeats = []; S.labels = {};\n load();\n };\n\n load();\n },\n};"}},"assignments":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"assignments"}}}},"colors":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"colors"}}}},"groups":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"groups"}}}},"municipio":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"municipio"}}}},"neighborUfs":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"neighborUfs"}}}},"onChange":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"onChange"}}}},"store":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"store"}}}},"ufs":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"ufs"}}}},"prop":{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"prop"}}}}}}}},"__d2PrevCode":{"code":"const UF_CODE={RO:'11',AC:'12',AM:'13',RR:'14',PA:'15',AP:'16',TO:'17',MA:'21',PI:'22',CE:'23',RN:'24',PB:'25',PE:'26',AL:'27',SE:'28',BA:'29',MG:'31',ES:'32',RJ:'33',SP:'35',PR:'41',SC:'42',RS:'43',MS:'50',MT:'51',GO:'52',DF:'53'};\nconst UF_BORDERS={AC:['AM','RO'],AL:['BA','PE','SE'],AM:['AC','RO','RR','PA','MT'],AP:['PA'],\n BA:['AL','SE','PE','PI','TO','GO','MG','ES'],CE:['PI','PB','PE','RN'],DF:['GO','MG'],\n ES:['BA','MG','RJ'],GO:['DF','MT','MS','MG','BA','TO'],MA:['PA','TO','PI'],\n MG:['BA','GO','DF','MS','SP','RJ','ES'],MS:['MT','GO','MG','SP','PR'],MT:['RO','AM','PA','TO','GO','MS'],\n PA:['AP','AM','MT','TO','MA','RR'],PB:['RN','CE','PE'],PE:['PB','CE','PI','BA','AL'],\n PI:['MA','TO','BA','PE','CE'],PR:['SP','MS','SC'],RJ:['ES','MG','SP'],RN:['CE','PB'],\n RO:['AC','AM','MT'],RR:['AM','PA'],RS:['SC'],SC:['PR','RS'],SE:['BA','AL'],\n SP:['MG','RJ','PR','MS'],TO:['PA','MA','PI','BA','GO','MT']};\nconst PALETTE=['#8b7fd6','#d1b048','#67bd5b','#5aa9d6','#d67fa8','#c98a4b'];\n\nexport default {\n css: `\n :host{display:block;width:100%;height:100%;box-sizing:border-box}\n .wrap{position:relative;height:100%;display:flex;flex-direction:column;font:12px -apple-system,BlinkMacSystemFont,\"Segoe UI\",Inter,sans-serif;background:#f4f4f8}\n .stage{flex:1;min-height:0;position:relative;cursor:grab}\n .stage:active{cursor:grabbing}\n svg{width:100%;height:100%;display:block}\n .muni{stroke:#0b0d12;stroke-width:1.1;transition:filter .1s}\n .muni.ctx{cursor:default}\n .muni:not(.ctx){cursor:pointer}\n .muni:not(.ctx):hover{filter:brightness(1.25)}\n .wedge{cursor:pointer;stroke:#fff;stroke-width:0.6;transition:filter .1s}\n .wedge:hover{filter:brightness(1.25)}\n .bg{fill:#ffffff;stroke:#1a1a1a;stroke-width:.5;opacity:.5}\n .mlabel{fill:#1a1a1a;font-size:9px;font-weight:700;pointer-events:none;user-select:none;text-anchor:middle;paint-order:stroke;stroke:rgba(255,255,255,.6);stroke-width:0.5px}\n .legend{display:flex;gap:10px;flex-wrap:wrap;padding:8px 10px;border-top:1px solid #e7e7ef;background:#fff}\n .legend span{display:inline-flex;align-items:center;gap:5px}\n .legend b{width:10px;height:10px;border-radius:3px;display:inline-block}\n .load{position:absolute;inset:0;background:rgba(244,244,248,.92);display:flex;align-items:center;justify-content:center;z-index:5;color:#71717f;text-align:center;padding:16px;cursor:default}\n .load.err{cursor:pointer;text-decoration:underline;color:#c8104e}\n .load.hidden{display:none}\n .tip{position:fixed;pointer-events:none;background:#000;color:#fff;border-radius:7px;padding:6px 8px;font-size:11px;opacity:0;transition:opacity .1s;z-index:9;max-width:220px}\n `,\n render(){\n return `
\n \n \n \n
`;\n },\n mounted(d2, root){\n\n const $ = s => root.querySelector(s);\n const NS = 'http://www.w3.org/2000/svg';\n const norm = s => (s||'').normalize('NFKD').replace(/[̀-ͯ]/g,'').toUpperCase().replace(/[^A-Z0-9]+/g,' ').trim();\n const esc = s => (s==null?'':String(s)).replace(/[&<>]/g, c => ({'&':'&','<':'<','>':'>'}[c]));\n const splitUfs = s => (s||'').split(',').map(x=>x.trim().toUpperCase()).filter(Boolean);\n\n async function geoUF(uf){\n const code = UF_CODE[uf] || uf;\n const r = await fetch('https://raw.githubusercontent.com/tbrugz/geodata-br/master/geojson/geojs-'+code+'-mun.json');\n if (!r.ok) throw new Error('geo ' + uf);\n return r.json();\n }\n function buildAdj(features){\n const pts = f => {\n const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates], s=new Set();\n ps.forEach(poly=>poly.forEach(ring=>ring.forEach(p=>s.add(Math.round(p[0]*1000)/1000+','+Math.round(p[1]*1000)/1000))));\n return s;\n };\n const feat = {}, idx = {};\n features.forEach(f => { const nm = norm(f.properties.name || f.properties.NOME || f.properties.nome); feat[nm] = { f, pts: pts(f) }; });\n for (const nm in feat) feat[nm].pts.forEach(p => (idx[p] = idx[p] || []).push(nm));\n const nbrs = nm => {\n const c = {};\n feat[nm].pts.forEach(p => idx[p].forEach(o => { if (o !== nm) c[o] = (c[o] || 0) + 1; }));\n return Object.entries(c).filter(([, n]) => n >= 2).map(([o]) => o);\n };\n return { feat, nbrs };\n }\n function project(feats){\n let mnx=1/0,mny=1/0,mxx=-1/0,mxy=-1/0;\n const each = cb => feats.forEach(f=>{const g=f.geometry,ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];ps.forEach(p=>p.forEach(r=>r.forEach(cb)));});\n each(p=>{mnx=Math.min(mnx,p[0]);mxx=Math.max(mxx,p[0]);mny=Math.min(mny,p[1]);mxy=Math.max(mxy,p[1]);});\n const mlat=(mny+mxy)/2, kx=Math.cos(mlat*Math.PI/180), W=700,H=500,pad=22;\n const gw=(mxx-mnx)*kx, gh=(mxy-mny), sc=Math.min((W-2*pad)/gw,(H-2*pad)/gh);\n const ox=(W-gw*sc)/2, oy=(H-gh*sc)/2;\n const pr = p=>[ox+(p[0]-mnx)*kx*sc, oy+(mxy-p[1])*sc];\n pr.scale = sc;\n return pr;\n }\n function pathFor(f,pr){\n const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n return ps.map(poly=>poly.map(r=>'M'+r.map(p=>{const q=pr(p);return q[0].toFixed(1)+','+q[1].toFixed(1);}).join('L')+'Z').join('')).join('');\n }\n function cxy(f,pr){\n let x=0,y=0,n=0; const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n ps.forEach(poly=>poly[0].forEach(p=>{const q=pr(p);x+=q[0];y+=q[1];n++;}));\n return [x/n, y/n];\n }\n // Clips a projected ring (screen-space [x,y] points) to the angular wedge between\n // a0/a1 (apex cx,cy) via two Sutherland-Hodgman half-plane cuts — this is what makes\n // a sector's slice follow the município's REAL border instead of sitting in a circle.\n function intersectLine(p1, p2, cx, cy, dx, dy){\n const ex = p2[0]-p1[0], ey = p2[1]-p1[1];\n const denom = ey*dx - ex*dy;\n if (Math.abs(denom) < 1e-9) return p1;\n const s = (dy*(p1[0]-cx) - dx*(p1[1]-cy)) / denom;\n return [p1[0] + s*ex, p1[1] + s*ey];\n }\n function clipRingWedge(ring, cx, cy, a0, a1){\n const side = (angle, x, y) => Math.cos(angle)*(y-cy) - Math.sin(angle)*(x-cx);\n const mid = (a0 + a1) / 2;\n const refX = cx + Math.cos(mid), refY = cy + Math.sin(mid);\n const sign0 = side(a0, refX, refY) >= 0 ? 1 : -1;\n const sign1 = side(a1, refX, refY) >= 0 ? 1 : -1;\n function clipEdge(points, angle, keepSign){\n const dx = Math.cos(angle), dy = Math.sin(angle);\n const out = [];\n const n = points.length;\n for (let i = 0; i < n; i++){\n const curr = points[i], prev = points[(i - 1 + n) % n];\n const sCurr = side(angle, curr[0], curr[1]);\n const sPrev = side(angle, prev[0], prev[1]);\n const currIn = keepSign >= 0 ? sCurr >= -1e-9 : sCurr <= 1e-9;\n const prevIn = keepSign >= 0 ? sPrev >= -1e-9 : sPrev <= 1e-9;\n if (currIn) {\n if (!prevIn) out.push(intersectLine(prev, curr, cx, cy, dx, dy));\n out.push(curr);\n } else if (prevIn) {\n out.push(intersectLine(prev, curr, cx, cy, dx, dy));\n }\n }\n return out;\n }\n let pts = clipEdge(ring, a0, sign0);\n if (pts.length) pts = clipEdge(pts, a1, sign1);\n return pts;\n }\n function wedgeClipPath(f, pr, cx, cy, a0, a1){\n const g = f.geometry, ps = g.type === 'MultiPolygon' ? g.coordinates : [g.coordinates];\n let d = '';\n ps.forEach(poly => poly.forEach(ring => {\n const projected = ring.map(p => pr(p));\n const clipped = clipRingWedge(projected, cx, cy, a0, a1);\n if (clipped.length >= 3) d += 'M' + clipped.map(q => q[0].toFixed(1) + ',' + q[1].toFixed(1)).join('L') + 'Z';\n }));\n return d;\n }\n const loader = (on, t, isErr) => {\n const l = $('#loader');\n l.classList.toggle('hidden', !on);\n l.classList.toggle('err', !!isErr);\n if (t != null) l.textContent = t;\n };\n\n let S = { assign: { ...(d2.param('assignments', {}) || {}) }, targets: new Set(), clickable: new Set(), closeFeats: {}, nbrFeats: [], labels: {}, pr: null, view: { scale: 1, tx: 0, ty: 0 }, groupAssign: {} };\n let dragStart = null, dragMoved = false;\n\n // Live sector for a município: the Store (if bound) is the source of truth —\n // reads are tracked, so an external change to the Store re-renders this map.\n // `S.assign` is only the bootstrap default (from `assignments`) before the\n // Store has an entry, or the fallback when no `store` param is bound at all.\n function getAssign(key){\n const storeRef = d2.param('store');\n if (!storeRef) return S.assign[key];\n const prop = d2.param('prop');\n if (prop) {\n const obj = d2.store(storeRef).get(prop, {}) || {};\n return key in obj ? obj[key] : S.assign[key];\n }\n return d2.store(storeRef).get(key, S.assign[key]);\n }\n\n // Writes back through the same `prop` indirection as getAssign(): when `prop` is set,\n // values land on store[prop][key] (a nested object) instead of store[key] directly —\n // the same shape a Setter targeting `@Store.prop` would produce.\n function setAssign(key, value){\n S.assign[key] = value;\n const storeRef = d2.param('store');\n if (!storeRef) return;\n const prop = d2.param('prop');\n if (prop) {\n const obj = { ...(d2.store(storeRef).get(prop, {}) || {}) };\n obj[key] = value;\n d2.store(storeRef).set(prop, obj);\n } else {\n d2.store(storeRef).set(key, value);\n }\n }\n\n // A município can hold MULTIPLE sectors at once — stored as an array instead of\n // a single string. cycleAt() advances just one slot of that array (one pie wedge)\n // through `groups`, padding the array if the clicked index didn't exist yet.\n // `groups` is now an array of { sector, municipio } — sector is the value cycled\n // through on click; municipio (comma-separated) statically pins that sector's color\n // onto municípios that aren't part of the interactive store-backed assignment.\n function sectorNames(){\n return (d2.param('groups', []) || []).map(g => g.sector);\n }\n\n function cycleAt(key, idx, arrLen){\n const gs = sectorNames();\n if (!gs.length) return null;\n let arr = getAssign(key);\n arr = Array.isArray(arr) ? [...arr] : [];\n while (arr.length < arrLen) arr.push('');\n const next = gs[(gs.indexOf(arr[idx]) + 1) % gs.length];\n arr[idx] = next;\n setAssign(key, arr);\n return next;\n }\n\n function svgPoint(evt){\n const svg = $('#map');\n const pt = svg.createSVGPoint();\n pt.x = evt.clientX; pt.y = evt.clientY;\n const ctm = svg.getScreenCTM();\n if (!ctm) return { x: 0, y: 0 };\n const p = pt.matrixTransform(ctm.inverse());\n return { x: p.x, y: p.y };\n }\n function applyTransform(){\n const g = $('#viewport');\n if (g) g.setAttribute('transform', `translate(${S.view.tx} ${S.view.ty}) scale(${S.view.scale})`);\n }\n d2.on('.stage', 'wheel', e => {\n e.preventDefault();\n const p = svgPoint(e);\n const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;\n const next = Math.min(8, Math.max(0.15, S.view.scale * factor));\n const k = next / S.view.scale;\n S.view.tx = p.x - k * (p.x - S.view.tx);\n S.view.ty = p.y - k * (p.y - S.view.ty);\n S.view.scale = next;\n applyTransform();\n });\n d2.on('.stage', 'mousedown', e => {\n if (e.button !== 0) return;\n const p = svgPoint(e);\n dragStart = { x: p.x, y: p.y, tx: S.view.tx, ty: S.view.ty };\n dragMoved = false;\n });\n d2.on(window, 'mousemove', e => {\n if (!dragStart) return;\n const p = svgPoint(e);\n const dx = p.x - dragStart.x, dy = p.y - dragStart.y;\n if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) dragMoved = true;\n S.view.tx = dragStart.tx + dx;\n S.view.ty = dragStart.ty + dy;\n applyTransform();\n });\n d2.on(window, 'mouseup', () => { dragStart = null; });\n\n // This component paints imperatively (mounted-driven SVG, not the reactive\n // render() string), so a Store read here isn't auto-tracked the way it would\n // be inside render(). Poll the bound Store's sector values every frame and\n // redraw when any of them changed — this is what makes an EXTERNAL write to\n // the Store (not just this map's own clicks) show up on the map.\n let lastAssignSnapshot = {};\n d2.raf(() => {\n const storeRef = d2.param('store');\n if (!storeRef) return;\n let changed = false;\n Object.keys(S.closeFeats).forEach(key => {\n const v = getAssign(key);\n // Arrays (multi-sector municípios) are compared by a joined signature, not by\n // reference — a store that clones on read would otherwise look \"changed\" every frame.\n const sig = Array.isArray(v) ? v.join('\u0001') : v;\n if (lastAssignSnapshot[key] !== sig) { changed = true; lastAssignSnapshot[key] = sig; }\n });\n if (changed) drawMap();\n });\n\n function drawMap(){\n const svg = $('#map'); svg.innerHTML = '';\n const viewport = document.createElementNS(NS, 'g');\n viewport.setAttribute('id', 'viewport');\n svg.appendChild(viewport);\n applyTransform();\n const groupDefs = d2.param('groups', []) || [];\n const sectors = groupDefs.map(g => g.sector);\n const colors = d2.param('colors', {});\n const colorFor = g => colors[g] || PALETTE[sectors.indexOf(g) % PALETTE.length] || '#94a3b8';\n // Base label size tracks the projection's own fit scale, so labels stay proportionate\n // to the shapes whether the auto-fit is tight (one neighborhood) or wide (distant targets).\n const labelFontSize = Math.max(4, Math.min(14, 9 * ((S.pr.scale || 1000) / 1000)));\n\n S.nbrFeats.forEach(f => {\n const p = document.createElementNS(NS, 'path');\n p.setAttribute('d', pathFor(f, S.pr));\n p.setAttribute('class', 'bg');\n p.setAttribute('data-key', 'bg-' + (f.properties.name || f.properties.NOME || f.properties.nome || ''));\n viewport.appendChild(p);\n });\n\n Object.entries(S.closeFeats).forEach(([key, f]) => {\n const clickable = S.clickable.has(key);\n const groupSectors = !clickable ? S.groupAssign[key] : null;\n const groupSector = groupSectors ? groupSectors[0] : null;\n const currentVal = getAssign(key);\n const arrVal = Array.isArray(currentVal) ? currentVal : null;\n const isPie = !!(arrVal && arrVal.length >= 2 && clickable);\n // Static group pins can also stack more than one sector onto the same município\n // (e.g. two `groups[]` entries both listing it) — split those into a pie too.\n const isGroupPie = !!(groupSectors && groupSectors.length >= 2);\n const soloSector = arrVal ? arrVal[0] : currentVal;\n const p = document.createElementNS(NS, 'path');\n p.setAttribute('d', pathFor(f, S.pr));\n p.setAttribute('data-key', key);\n p.setAttribute('class', ['muni', clickable ? '' : 'ctx'].filter(Boolean).join(' '));\n\n if (isPie || isGroupPie) {\n // Multiple sectors share this município — the shape itself is a neutral\n // safety-net backdrop; the wedges below (clipped to the REAL border, one per\n // array entry) carry the actual colors and fully cover the município's area.\n const pieSectors = isPie ? arrVal : groupSectors;\n p.setAttribute('fill', '#eef0f5');\n p.onmousemove = e => {\n const tip = $('#tip');\n tip.style.opacity = 1; tip.style.left = (e.clientX + 12) + 'px'; tip.style.top = (e.clientY + 12) + 'px';\n const names = pieSectors.map(v => v || 'sem destino').join(', ');\n tip.innerHTML = `${esc(S.labels[key] || key)}carregando malhas…
\n ${pieSectors.length} setores: ${esc(names)}`;\n };\n p.onmouseleave = () => { $('#tip').style.opacity = 0; };\n } else {\n if (groupSector) {\n p.setAttribute('fill', colorFor(groupSector));\n p.setAttribute('fill-opacity', '0.3');\n } else {\n p.setAttribute('fill', soloSector ? colorFor(soloSector) : (clickable ? '#94a3b8' : '#dcdfe8'));\n }\n if (clickable) {\n p.onclick = () => {\n if (dragMoved) { dragMoved = false; return; }\n let next;\n if (arrVal) {\n next = cycleAt(key, 0, arrVal.length || 1);\n } else {\n const gs = sectorNames();\n if (!gs.length) return;\n next = gs[(gs.indexOf(getAssign(key)) + 1) % gs.length];\n setAssign(key, next);\n }\n drawMap();\n d2.emit('onChange', arrVal ? { municipio: key, sectorIndex: 0, setor: next } : { municipio: key, setor: next });\n };\n }\n p.onmousemove = e => {\n const tip = $('#tip');\n tip.style.opacity = 1; tip.style.left = (e.clientX + 12) + 'px'; tip.style.top = (e.clientY + 12) + 'px';\n const label = groupSector || soloSector || (clickable ? 'sem destino' : 'apenas contexto');\n tip.innerHTML = `${esc(S.labels[key] || key)}
${esc(label)}`;\n };\n p.onmouseleave = () => { $('#tip').style.opacity = 0; };\n }\n viewport.appendChild(p);\n\n const [cx, cy] = cxy(f, S.pr);\n\n if (isPie || isGroupPie) {\n const wedgeSectors = isPie ? arrVal : groupSectors;\n const n = wedgeSectors.length;\n wedgeSectors.forEach((sector, i) => {\n const a0 = -Math.PI / 2 + i * (2 * Math.PI / n);\n const a1 = -Math.PI / 2 + (i + 1) * (2 * Math.PI / n);\n const d = wedgeClipPath(f, S.pr, cx, cy, a0, a1);\n if (!d) return;\n const wedge = document.createElementNS(NS, 'path');\n wedge.setAttribute('d', d);\n wedge.setAttribute('class', 'wedge');\n wedge.setAttribute('fill', sector ? colorFor(sector) : '#94a3b8');\n // Static group pins (`groups[]`) aren't interactable — keep them at ~30% opacity so\n // they read as context, distinct from a real Store-backed sector assignment.\n wedge.setAttribute('fill-opacity', isPie ? '1' : '0.3');\n wedge.style.cursor = isPie ? 'pointer' : 'default';\n if (isPie) {\n wedge.onclick = () => {\n if (dragMoved) { dragMoved = false; return; }\n const next = cycleAt(key, i, n);\n drawMap();\n d2.emit('onChange', { municipio: key, sectorIndex: i, setor: next });\n };\n }\n wedge.onmousemove = e => {\n const tip = $('#tip');\n tip.style.opacity = 1; tip.style.left = (e.clientX + 12) + 'px'; tip.style.top = (e.clientY + 12) + 'px';\n tip.innerHTML = `${esc(S.labels[key] || key)} — setor ${i + 1}/${n}
${esc(sector || 'sem destino')}`;\n };\n wedge.onmouseleave = () => { $('#tip').style.opacity = 0; };\n viewport.appendChild(wedge);\n });\n }\n\n const t = document.createElementNS(NS, 'text');\n t.setAttribute('class', 'mlabel'); t.setAttribute('x', cx); t.setAttribute('y', cy);\n t.style.fontSize = labelFontSize + 'px';\n t.textContent = (S.labels[key] || key).slice(0, 13);\n viewport.appendChild(t);\n });\n\n $('#legend').innerHTML = sectors.map(g => `${esc(g)}`).join('');\n }\n\n async function load(){\n loader(true, 'carregando malhas…', false);\n try {\n const ufs = splitUfs(d2.param('ufs', 'PR'));\n if (!ufs.length) throw new Error('informe ao menos uma UF em \"ufs\"');\n const manualNbr = splitUfs(d2.param('neighborUfs', ''));\n const autoNbr = ufs.flatMap(u => UF_BORDERS[u] || []);\n const nbrUfs = [...new Set(manualNbr.length ? manualNbr : autoNbr)].filter(u => !ufs.includes(u));\n const allUfs = [...new Set([...ufs, ...nbrUfs])];\n const geos = await Promise.all(allUfs.map(u => geoUF(u).catch(() => null)));\n\n const closeUfSet = new Set(ufs);\n const allFeats = [];\n const stateNames = [];\n allUfs.forEach((u, i) => {\n const g = geos[i]; if (!g) return;\n const inClose = closeUfSet.has(u);\n g.features.forEach(f => {\n allFeats.push(f);\n if (inClose) stateNames.push(norm(f.properties.name || f.properties.NOME || f.properties.nome || ''));\n });\n });\n if (!allFeats.length) throw new Error('nenhuma malha carregada para essas UFs');\n\n const adj = buildAdj(allFeats);\n\n const targetsRaw = (d2.param('municipio', '') || '').split(',').map(x => x.trim()).filter(Boolean);\n const targetNames = targetsRaw.map(norm);\n const foundTargets = targetNames.filter(t => adj.feat[t]);\n if (targetNames.length && !foundTargets.length) throw new Error('município(s) não encontrado(s) na(s) UF(s) informada(s): ' + targetsRaw.join(', '));\n S.targets = new Set(foundTargets);\n\n // Interactive scope (\"close\"): each target município (comma-separated in `municipio`)\n // + its direct neighbors — NOT the whole state. Falls back to the whole state when no\n // `municipio` is set.\n const neighborhoodNames = foundTargets.length\n ? [...new Set(foundTargets.flatMap(t => [t, ...adj.nbrs(t)]))]\n : stateNames;\n\n // Statically pins a sector's color onto whatever municípios are listed in that\n // group's `municipio` field — these are display-only, not interactively assignable.\n // A município can be listed by more than one group (e.g. Astorga under both Setor A\n // and Setor B) — keep every sector that claims it so drawMap() can split it into a pie.\n const groupAssign = {};\n (d2.param('groups', []) || []).forEach(g => {\n (g.municipio || '').split(',').map(x => x.trim()).filter(Boolean).forEach(n => {\n const key = norm(n);\n (groupAssign[key] = groupAssign[key] || []).push(g.sector);\n });\n });\n\n // A município already carrying a sector assignment joins the interactive set even when\n // it's not adjacent to the target — this is what `neighborUfs` is for: letting a sector\n // reach into a município from a bordering state, as long as that UF was loaded.\n const assignedSet = new Set(Object.keys(S.assign).map(norm));\n const assignedLoaded = [...assignedSet].filter(n => adj.feat[n]);\n const groupLoaded = Object.keys(groupAssign).filter(n => adj.feat[n]);\n const closingNames = [...new Set([...neighborhoodNames, ...assignedLoaded, ...groupLoaded])];\n const closingSet = new Set(closingNames);\n\n S.closeFeats = {}; S.labels = {};\n closingNames.forEach(n => { if (adj.feat[n]) { S.closeFeats[n] = adj.feat[n].f; S.labels[n] = adj.feat[n].f.properties.name || n; } });\n\n S.clickable = new Set(closingNames.filter(n => assignedSet.has(n)));\n S.groupAssign = groupAssign;\n\n // Everything else loaded (rest of the state / neighbor states) is faint background context.\n const restNames = new Set();\n allFeats.forEach(f => {\n const n = norm(f.properties.name || f.properties.NOME || f.properties.nome || '');\n if (adj.feat[n] && !closingSet.has(n)) restNames.add(n);\n });\n S.nbrFeats = [...restNames].map(n => adj.feat[n].f);\n\n const zoomFeats = Object.values(S.closeFeats);\n S.pr = project(zoomFeats.length ? zoomFeats : allFeats);\n S.view = { scale: 1, tx: 0, ty: 0 };\n drawMap();\n loader(false);\n } catch (e) {\n loader(true, 'erro: ' + e.message + ' (clique p/ tentar de novo)', true);\n }\n }\n\n $('#loader').onclick = () => {\n if (!$('#loader').classList.contains('err')) return;\n S.closeFeats = {}; S.nbrFeats = []; S.labels = {};\n load();\n };\n\n load();\n },\n};","at":"2026-07-30T22:59:10.568Z"}},"updatedAt":"2026-07-30T23:02:48.653Z","createdAt":"2026-07-29T06:04:19.119Z"},{"_id":"6a69a173253cab7975060043","component":"data2-core-types@Component","system":"6a57cfe9673eb7e3c5e57784","params":{"component":"nGePVjqDWdX2KQL8ahh-w","package":"natura-geomarketing","title":"Log","parameters":{"params":{"fields":{"message":{"params":{"component":"data2-core-primitives@String","index":{"component":"data2-core-primitives@Number","params":{"content":0}}},"component":"data2-core-types@ComponentParameter"},"data":{"params":{"component":"data2-core-primitives@Object","index":{"component":"data2-core-primitives@Number","params":{"content":1}}},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@FieldSet"},"definition":{"params":{"actions":[{"params":{"actions":[{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"prevResult"}}},"component":"data2-core-types@Reference"},{"component":"data2-core-types@Interaction","params":{"module":{"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"__LoggerService"}},"prop":"log","args":[{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"message"}}}},{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"data"}}}}]}}]},"component":"data2-core-flow@Parallel"},{"component":"data2-core-types@Reference","params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"prevResult.0"}}}}]},"component":"data2-core-flow@Series"}},"updatedAt":"2026-07-29T06:45:12.754Z","createdAt":"2026-07-29T06:45:07.664Z"},{"_id":"6a69b10fece2da0d644e73a8","component":"data2-core-types@Component","system":"6a57cfe9673eb7e3c5e57784","params":{"component":"gA5O7o100HVWfKwEEPNyM","package":"natura-geomarketing","title":"stringNormalize","parameters":{"text":{"component":"data2-core-types@ComponentParameter","params":{"component":"data2-core-primitives@String"}}},"definition":{"component":"data2-core-flow@Series","params":{"actions":[{"component":"data2-core-flow@Step","params":{"action":{"component":"data2-core-functions@Replace","params":{"haystack":{"component":"data2-core-types@Reference","params":{"reference":"text"}},"needle":{"component":"data2-core-types@Regex","params":{"pattern":"[àáâãäåÀÁÂÃÄÅ]","flags":"g"}},"patch":"a"}},"resultName":"n1"}},{"component":"data2-core-flow@Step","params":{"action":{"component":"data2-core-functions@Replace","params":{"haystack":{"component":"data2-core-types@Reference","params":{"reference":"n1"}},"needle":{"component":"data2-core-types@Regex","params":{"pattern":"[èéêëÈÉÊË]","flags":"g"}},"patch":"e"}},"resultName":"n2"}},{"component":"data2-core-flow@Step","params":{"action":{"component":"data2-core-functions@Replace","params":{"haystack":{"component":"data2-core-types@Reference","params":{"reference":"n2"}},"needle":{"component":"data2-core-types@Regex","params":{"pattern":"[ìíîïÌÍÎÏ]","flags":"g"}},"patch":"i"}},"resultName":"n3"}},{"component":"data2-core-flow@Step","params":{"action":{"component":"data2-core-functions@Replace","params":{"haystack":{"component":"data2-core-types@Reference","params":{"reference":"n3"}},"needle":{"component":"data2-core-types@Regex","params":{"pattern":"[òóôõöÒÓÔÕÖ]","flags":"g"}},"patch":"o"}},"resultName":"n4"}},{"component":"data2-core-flow@Step","params":{"action":{"component":"data2-core-functions@Replace","params":{"haystack":{"component":"data2-core-types@Reference","params":{"reference":"n4"}},"needle":{"component":"data2-core-types@Regex","params":{"pattern":"[ùúûüÙÚÛÜ]","flags":"g"}},"patch":"u"}},"resultName":"n5"}},{"component":"data2-core-flow@Step","params":{"action":{"component":"data2-core-functions@Replace","params":{"haystack":{"component":"data2-core-types@Reference","params":{"reference":"n5"}},"needle":{"component":"data2-core-types@Regex","params":{"pattern":"[çÇ]","flags":"g"}},"patch":"c"}},"resultName":"n6"}},{"component":"data2-core-flow@Step","params":{"action":{"component":"data2-core-functions@Replace","params":{"haystack":{"component":"data2-core-types@Reference","params":{"reference":"n6"}},"needle":{"component":"data2-core-types@Regex","params":{"pattern":"[ñÑ]","flags":"g"}},"patch":"n"}},"resultName":"n7"}},{"component":"data2-core-flow@Step","params":{"action":{"component":"data2-core-functions@toUpperCase","params":{"string":{"component":"data2-core-types@Reference","params":{"reference":"n7"}}}},"resultName":"n8"}},{"component":"data2-core-flow@Step","params":{"action":{"component":"data2-core-functions@Replace","params":{"haystack":{"component":"data2-core-types@Reference","params":{"reference":"n8"}},"needle":{"component":"data2-core-types@Regex","params":{"pattern":"[^A-Z0-9]+","flags":"g"}},"patch":" "}},"resultName":"n9"}},{"component":"data2-core-functions@StringTrim","params":{"string":{"component":"data2-core-types@Reference","params":{"reference":"n9"}}}}]}}},"updatedAt":"2026-07-29T07:51:46.849Z","createdAt":"2026-07-29T07:51:43.443Z"},{"_id":"6a6c3111b1994f0f4b08f439","component":"data2-core-types@Component","system":"6a57cfe9673eb7e3c5e57784","params":{"component":"Y-BartZI5BwXJmLbhFG_3","package":"natura-geomarketing","title":"Fechar setor","parameters":{"params":{"fields":{"setor":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@FieldSet"},"definition":{"params":{"actions":[{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.setor"}},"value":{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"setor"}}},"component":"data2-core-types@Reference"}},"component":"data2-core-types@Setter"},{"component":"data2-core-types@Interaction","params":{"module":{"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"7rq4WNBhLtN4x9qy-262L"}},"prop":"filter","args":[{"params":{"fields":{"CD_SETOR":{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"setor"}}},"component":"data2-core-types@Reference"}}},"component":"data2-core-types@FieldSet"}]}},{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.UF"}},"value":{"component":"data2-core-types@Getter","params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"7rq4WNBhLtN4x9qy-262L"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.records.0.UF"}}}}},"component":"data2-core-types@Setter"},{"params":{"actions":{"params":{"array":{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"7rq4WNBhLtN4x9qy-262L"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.records"}}},"component":"data2-core-types@Getter"},"mapper":{"disabled":false,"component":"data2-core-functions@Function","params":{"parameters":[{"component":"data2-core-primitives@String","params":{"content":"m"}}],"body":{"params":{"actions":[{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.municipios"}},"value":{"params":{"array":{"params":{"components":[{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.municipios"}}},"component":"data2-core-types@Getter"},[]]},"component":"data2-core-logical-operators@Or"},"item":{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"m.MUNICIPIO"}}},"component":"data2-core-types@Reference"}},"component":"data2-core-functions@ArrayPush"}},"component":"data2-core-types@Setter"},{"params":{"municipio":{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"m.MUNICIPIO"}}},"component":"data2-core-types@Reference"},"uf":{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"m.UF"}}},"component":"data2-core-types@Reference"}},"component":"natura-geomarketing@4vQ1HUOSYMGvZGCOV2GYd"},{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.neighboring_municipios"}},"value":{"params":{"arrays":[{"params":{"components":[{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.neighboring_municipios"}}},"component":"data2-core-types@Getter"},[]]},"component":"data2-core-logical-operators@Or"},{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"prevResult"}}},"component":"data2-core-types@Reference"}]},"component":"data2-core-functions@ArrayConcat"}},"component":"data2-core-types@Setter"},{"params":{"text":{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"m.MUNICIPIO"}}},"component":"data2-core-types@Reference"}},"component":"natura-geomarketing@gA5O7o100HVWfKwEEPNyM"},{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.municipios_normalized"}},"value":{"params":{"array":{"params":{"components":[{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.municipios_normalized"}}},"component":"data2-core-types@Getter"},[]]},"component":"data2-core-logical-operators@Or"},"item":{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"prevResult"}}},"component":"data2-core-types@Reference"}},"component":"data2-core-functions@ArrayPush"}},"component":"data2-core-types@Setter"}]},"component":"data2-core-flow@Series"}}}},"component":"data2-core-functions@ArrayMap"}},"component":"data2-core-flow@Parallel"},{"params":{"resultName":{"component":"data2-core-primitives@String","params":{"content":"municipios"}},"action":{"params":{"array":{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"7rq4WNBhLtN4x9qy-262L"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.records"}}},"component":"data2-core-types@Getter"},"mapper":{"disabled":false,"component":"data2-core-functions@Function","params":{"parameters":[{"component":"data2-core-primitives@String","params":{"content":"m"}}],"body":{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"m.MUNICIPIO"}}},"component":"data2-core-types@Reference"}}}},"component":"data2-core-functions@ArrayMap"}},"component":"data2-core-flow@Step"},{"component":"data2-core-types@Interaction","params":{"module":{"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"umJZo_TTyw0E3lOwBNmk2"}},"prop":"filter","args":[{"params":{"fields":{"a":{"component":"data2-core-types@Getter","params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.setor"}}}},"b":{"params":{"arrays":[{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.municipios"}}},"component":"data2-core-types@Getter"},{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.neighboring_municipios"}}},"component":"data2-core-types@Getter"}]},"component":"data2-core-functions@ArrayConcat"}}},"component":"data2-core-types@FieldSet"}]}},{"params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"ziIl3zJpxF2x8qsRQy10a"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.setores_destino"}},"value":{"params":{"array":{"component":"data2-core-types@Getter","params":{"module":{"disabled":false,"component":"data2-core-types@InteractiveModuleReference","params":{"reference":"umJZo_TTyw0E3lOwBNmk2"}},"prop":{"component":"data2-core-primitives@String","params":{"content":"data.records"}}}},"mapper":{"disabled":false,"component":"data2-core-functions@Function","params":{"parameters":[{"component":"data2-core-primitives@String","params":{"content":"m"}}],"body":{"sector":{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"m.CD_SETOR"}}},"component":"data2-core-types@Reference"},"municipio":{"params":{"reference":{"component":"data2-core-primitives@String","params":{"content":"m.MUNICIPIO"}}},"component":"data2-core-types@Reference"}}}}},"component":"data2-core-functions@ArrayMap"}},"component":"data2-core-types@Setter"}]},"component":"data2-core-flow@Series"}},"updatedAt":"2026-07-31T06:20:31.140Z","createdAt":"2026-07-31T05:22:25.177Z"},{"_id":"6a71ddb4a9d7cf0ea99224f1","component":"data2-core-types@Component","system":"6a57cfe9673eb7e3c5e57784","params":{"component":"FjpgPxu84sgMMjMKJhyUm","package":"natura-geomarketing","title":"Interactive sales group map v2","parameters":{"component":"data2-core-types@FieldSet","params":{"fields":{"country_list":{"params":{"component":"data2-core-primitives@Object","list":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"location_id":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"location_label":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"location_colors":{"params":{"component":"data2-core-primitives@Object","list":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"color":{"params":{"component":"data2-core-types@Color"},"component":"data2-core-types@ComponentParameter"},"color_id":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"color_label":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"onClick":{"params":{"component":"data2-core-types@Interaction"},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@ComponentParameter"},"region_list":{"params":{"component":"data2-core-primitives@Object","list":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"location_id":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"location_label":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"location_colors":{"params":{"component":"data2-core-primitives@Object","list":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"color":{"params":{"component":"data2-core-types@Color"},"component":"data2-core-types@ComponentParameter"},"color_id":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"color_label":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"onClick":{"params":{"component":"data2-core-types@Interaction"},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@ComponentParameter"},"state_list":{"params":{"component":"data2-core-primitives@Object","list":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"location_id":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"location_label":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"location_colors":{"params":{"component":"data2-core-primitives@Object","list":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"color":{"params":{"component":"data2-core-types@Color"},"component":"data2-core-types@ComponentParameter"},"color_id":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"color_label":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"onClick":{"params":{"component":"data2-core-types@Interaction"},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@ComponentParameter"},"city_list":{"params":{"component":"data2-core-primitives@Object","list":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"location_id":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"location_label":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"location_colors":{"params":{"component":"data2-core-primitives@Object","list":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"color":{"params":{"component":"data2-core-types@Color"},"component":"data2-core-types@ComponentParameter"},"color_id":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"color_label":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"onClick":{"params":{"component":"data2-core-types@Interaction"},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@ComponentParameter"},"municipality_list":{"params":{"component":"data2-core-primitives@Object","list":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"location_id":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"location_label":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"location_colors":{"params":{"component":"data2-core-primitives@Object","list":{"component":"data2-core-primitives@Boolean","params":{"content":true}},"parameters":{"color":{"params":{"component":"data2-core-types@Color"},"component":"data2-core-types@ComponentParameter"},"color_id":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"color_label":{"params":{"component":"data2-core-primitives@String"},"component":"data2-core-types@ComponentParameter"},"onClick":{"params":{"component":"data2-core-types@Interaction"},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@ComponentParameter"}}},"component":"data2-core-types@ComponentParameter"},"should_render_neighbors":{"component":"data2-core-primitives@Boolean"},"touch_controls":{"component":"data2-core-primitives@Boolean"}}}},"definition":{"preventEvaluation":true,"component":"data2-core-types@Definition","params":{"def":{"component":"data2-code-components@CodeHost","params":{"code":{"component":"data2-core-primitives@String","params":{"content":"const UF_CODE={RO:'11',AC:'12',AM:'13',RR:'14',PA:'15',AP:'16',TO:'17',MA:'21',PI:'22',CE:'23',RN:'24',PB:'25',PE:'26',AL:'27',SE:'28',BA:'29',MG:'31',ES:'32',RJ:'33',SP:'35',PR:'41',SC:'42',RS:'43',MS:'50',MT:'51',GO:'52',DF:'53'};\nconst UF_BORDERS={AC:['AM','RO'],AL:['BA','PE','SE'],AM:['AC','RO','RR','PA','MT'],AP:['PA'],\n BA:['AL','SE','PE','PI','TO','GO','MG','ES'],CE:['PI','PB','PE','RN'],DF:['GO','MG'],\n ES:['BA','MG','RJ'],GO:['DF','MT','MS','MG','BA','TO'],MA:['PA','TO','PI'],\n MG:['BA','GO','DF','MS','SP','RJ','ES'],MS:['MT','GO','MG','SP','PR'],MT:['RO','AM','PA','TO','GO','MS'],\n PA:['AP','AM','MT','TO','MA','RR'],PB:['RN','CE','PE'],PE:['PB','CE','PI','BA','AL'],\n PI:['MA','TO','BA','PE','CE'],PR:['SP','MS','SC'],RJ:['ES','MG','SP'],RN:['CE','PB'],\n RO:['AC','AM','MT'],RR:['AM','PA'],RS:['SC'],SC:['PR','RS'],SE:['BA','AL'],\n SP:['MG','RJ','PR','MS'],TO:['PA','MA','PI','BA','GO','MT']};\nconst UF_NAMES={RO:'Rondônia',AC:'Acre',AM:'Amazonas',RR:'Roraima',PA:'Pará',AP:'Amapá',TO:'Tocantins',\n MA:'Maranhão',PI:'Piauí',CE:'Ceará',RN:'Rio Grande do Norte',PB:'Paraíba',PE:'Pernambuco',AL:'Alagoas',\n SE:'Sergipe',BA:'Bahia',MG:'Minas Gerais',ES:'Espírito Santo',RJ:'Rio de Janeiro',SP:'São Paulo',\n PR:'Paraná',SC:'Santa Catarina',RS:'Rio Grande do Sul',MS:'Mato Grosso do Sul',MT:'Mato Grosso',\n GO:'Goiás',DF:'Distrito Federal'};\nconst REGION_UFS={N:['RO','AC','AM','RR','PA','AP','TO'],NE:['MA','PI','CE','RN','PB','PE','AL','SE','BA'],\n CO:['MS','MT','GO','DF'],SE:['MG','ES','RJ','SP'],S:['PR','SC','RS']};\nconst REGION_NAMES={N:'Norte',NE:'Nordeste',CO:'Centro-Oeste',SE:'Sudeste',S:'Sul'};\nconst PALETTE=['#8b7fd6','#d1b048','#67bd5b','#5aa9d6','#d67fa8','#c98a4b'];\n\nexport default {\n css: `\n :host{display:block;width:100%;height:100%;box-sizing:border-box}\n .wrap{position:relative;height:100%;display:flex;flex-direction:column;font:13px -apple-system,BlinkMacSystemFont,\"SF Pro Text\",Inter,sans-serif;background:transparent;overflow:hidden;border-radius:0px;border:0px solid rgba(0,0,0,.08);box-shadow:0 6px 20px rgba(0,0,0,.12)}\n .stage{flex:1;min-height:0;position:relative;cursor:grab;touch-action:none}\n .stage:active{cursor:grabbing}\n svg{width:100%;height:100%;display:block}\n .area{stroke:rgba(255,255,255,.2);stroke-width:.85;stroke-linejoin:round;stroke-linecap:round}\n .wedge{stroke:rgba(255,255,255,.7);stroke-width:.5;stroke-linejoin:round;cursor:pointer;transition:filter .15s ease}\n .wedge:hover{filter:brightness(1.16)}\n .wedge.touchy{stroke-width:.9}\n .lbl{fill:#1D1D1F;font-size:9px;font-weight:600;pointer-events:none;user-select:none;text-anchor:middle;paint-order:stroke;stroke:rgba(255,255,255,.7);stroke-width:.6px}\n .legend{display:none!important;position:absolute;left:10px;bottom:10px;max-width:64%;max-height:70%;overflow:auto;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(0,0,0,.08);font-size:11px;box-shadow:0 8px 24px rgba(0,0,0,.20)}\n .legend .grp{display:flex;flex-direction:column;gap:3px}\n .legend .grpname{font-weight:700;color:rgba(0,0,0,.5);font-size:10px;text-transform:uppercase;letter-spacing:.06em}\n .legend .row{display:flex;align-items:center;gap:6px;color:#1D1D1F}\n .legend b{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}\n .tip{display:none!important;position:fixed;pointer-events:none;background:rgba(255,255,252,.95);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);color:#1D1D1F;border:1px solid rgba(0,0,0,.08);border-radius:6px;padding:6px 9px;font-size:11px;opacity:0;transition:opacity .12s ease;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:9;max-width:220px}\n .infobar{display:none!important;position:absolute;left:0;right:0;bottom:0;background:rgba(246,246,247,.85);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-top:1px solid rgba(0,0,0,.1);color:#1D1D1F;padding:10px 14px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:10px;transform:translateY(100%);transition:transform .18s ease;z-index:8}\n .infobar.show{transform:translateY(0)}\n .infobar .x{opacity:.5;cursor:pointer;padding:2px 7px;border-radius:5px;transition:background .12s ease,opacity .12s ease}\n .infobar .x:hover{opacity:.9;background:rgba(0,0,0,.06)}\n .load{position:absolute;inset:0;background:rgba(236,236,236,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:5;color:rgba(0,0,0,.5);text-align:center;padding:16px;cursor:default;font-size:13px}\n .load.err{cursor:pointer;text-decoration:underline;color:#FF3B30}\n .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(0,0,0,.5);text-align:center;padding:24px;font-size:13px}\n .hidden{display:none}\n `,\n render(){\n return `
\n \n \n \n \n
`;\n },\n mounted(d2, root){\n\n const $ = s => root.querySelector(s);\n const NS = 'http://www.w3.org/2000/svg';\n const norm = s => (s||'').normalize('NFKD').replace(/[̀-ͯ]/g,'').toUpperCase().replace(/[^A-Z0-9]+/g,' ').trim();\n const esc = s => (s==null?'':String(s)).replace(/[&<>]/g, c => ({'&':'&','<':'<','>':'>'}[c]));\n const toArr = v => Array.isArray(v) ? v : [];\n\n function matchUf(idOrName){\n if(!idOrName) return null;\n const up = String(idOrName).trim().toUpperCase();\n if (UF_CODE[up]) return up;\n const n = norm(idOrName);\n const hit = Object.keys(UF_NAMES).find(code => norm(UF_NAMES[code]) === n);\n return hit || null;\n }\n function matchRegion(idOrName){\n if(!idOrName) return null;\n const up = String(idOrName).trim().toUpperCase();\n if (REGION_UFS[up]) return up;\n const n = norm(idOrName);\n const hit = Object.keys(REGION_NAMES).find(code => norm(REGION_NAMES[code]) === n);\n return hit || null;\n }\n\n async function geoUF(uf){\n const code = UF_CODE[uf] || uf;\n const r = await fetch('https://raw.githubusercontent.com/tbrugz/geodata-br/master/geojson/geojs-'+code+'-mun.json');\n if (!r.ok) throw new Error('geo ' + uf);\n return r.json();\n }\n function ptsOf(f){\n const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates], s=new Set();\n ps.forEach(poly=>poly.forEach(ring=>ring.forEach(p=>s.add(Math.round(p[0]*1000)/1000+','+Math.round(p[1]*1000)/1000))));\n return s;\n }\n function buildIndex(features){\n const recs = features.map(f => ({\n name: norm(f.properties.name || f.properties.NOME || f.properties.nome || ''),\n label: f.properties.name || f.properties.NOME || f.properties.nome || '',\n uf: f.__uf, f, pts: ptsOf(f)\n }));\n const ptIdx = {};\n recs.forEach((r,i) => r.pts.forEach(p => (ptIdx[p]=ptIdx[p]||[]).push(i)));\n const nbrsOf = i => {\n const c={};\n recs[i].pts.forEach(p => ptIdx[p].forEach(j => { if (j!==i) c[j]=(c[j]||0)+1; }));\n return Object.entries(c).filter(([,n])=>n>=2).map(([j])=>+j);\n };\n const byUfName = {};\n recs.forEach((r,i) => { byUfName[r.uf]=byUfName[r.uf]||{}; byUfName[r.uf][r.name]=i; });\n const anyName = {};\n recs.forEach((r,i) => { (anyName[r.name]=anyName[r.name]||[]).push(i); });\n return { recs, nbrsOf, byUfName, anyName };\n }\n function project(feats){\n let mnx=1/0,mny=1/0,mxx=-1/0,mxy=-1/0;\n const each = cb => feats.forEach(f=>{const g=f.geometry,ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];ps.forEach(p=>p.forEach(r=>r.forEach(cb)));});\n each(p=>{mnx=Math.min(mnx,p[0]);mxx=Math.max(mxx,p[0]);mny=Math.min(mny,p[1]);mxy=Math.max(mxy,p[1]);});\n const mlat=(mny+mxy)/2, kx=Math.cos(mlat*Math.PI/180), W=700,H=500,pad=22;\n const gw=(mxx-mnx)*kx, gh=(mxy-mny), sc=Math.min((W-2*pad)/gw,(H-2*pad)/gh);\n const ox=(W-gw*sc)/2, oy=(H-gh*sc)/2;\n const pr = p=>[ox+(p[0]-mnx)*kx*sc, oy+(mxy-p[1])*sc];\n pr.scale = sc;\n return pr;\n }\n function pathFor(f,pr){\n const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n return ps.map(poly=>poly.map(r=>'M'+r.map(p=>{const q=pr(p);return q[0].toFixed(1)+','+q[1].toFixed(1);}).join('L')+'Z').join('')).join('');\n }\n function cxy(f,pr){\n let x=0,y=0,n=0; const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n ps.forEach(poly=>poly[0].forEach(p=>{const q=pr(p);x+=q[0];y+=q[1];n++;}));\n return [x/n, y/n];\n }\n function ringsOf(f){\n const g = f.geometry, ps = g.type==='MultiPolygon' ? g.coordinates : [g.coordinates];\n const rings = [];\n ps.forEach(poly => poly.forEach(ring => rings.push(ring)));\n return rings;\n }\n const quant = p => [Math.round(p[0]*1000)/1000, Math.round(p[1]*1000)/1000];\n const keyOf = p => p[0] + ',' + p[1];\n // Dissolves the municipio polygons in `idxs` into their outer boundary (+ any real holes)\n // by cancelling every edge shared by two included polygons — the border between two\n // adjacent included municipios disappears, leaving only the union's true edge. Exact for\n // this dataset because neighboring municipio files share literal boundary coordinates (the\n // same tolerance ptsOf already relies on for adjacency).\n function dissolveRings(idxs, recs){\n if (idxs.length === 1) return ringsOf(recs[idxs[0]].f);\n const edgeCount = new Map(), edges = [];\n idxs.forEach(i => {\n ringsOf(recs[i].f).forEach(ring => {\n const q = ring.map(quant);\n for (let k = 0; k < q.length - 1; k++){\n const a = q[k], b = q[k+1], ka = keyOf(a), kb = keyOf(b);\n if (ka === kb) continue;\n const uk = ka < kb ? ka+'|'+kb : kb+'|'+ka;\n edgeCount.set(uk, (edgeCount.get(uk)||0) + 1);\n edges.push({ a, b, ka, kb, uk });\n }\n });\n });\n const kept = edges.filter(e => edgeCount.get(e.uk) === 1);\n const byStart = new Map();\n kept.forEach(e => {\n if (!byStart.has(e.ka)) byStart.set(e.ka, []);\n byStart.get(e.ka).push(e);\n });\n const used = new Set(), rings = [];\n kept.forEach(seed => {\n if (used.has(seed)) return;\n const ring = [seed.a];\n let cur = seed, guard = 0;\n while (guard++ < 50000) {\n used.add(cur);\n ring.push(cur.b);\n if (cur.kb === seed.ka) break;\n const next = (byStart.get(cur.kb) || []).find(e => !used.has(e));\n if (!next) break;\n cur = next;\n }\n if (ring.length >= 4 && keyOf(ring[0]) === keyOf(ring[ring.length-1])) rings.push(ring);\n });\n return rings;\n }\n function pathFromRings(rings, pr){\n return rings.map(ring => 'M'+ring.map(p=>{const q=pr(p);return q[0].toFixed(1)+','+q[1].toFixed(1);}).join('L')+'Z').join('');\n }\n function stripeClipRings(rings, pr, x0, x1){\n let d = '';\n rings.forEach(ring => {\n let pts = ring.map(p => pr(p));\n pts = clipHalfPlane(pts, (x) => x - x0);\n if (pts.length) pts = clipHalfPlane(pts, (x) => x1 - x);\n if (pts.length >= 3) d += 'M' + pts.map(q => q[0].toFixed(1) + ',' + q[1].toFixed(1)).join('L') + 'Z';\n });\n return d;\n }\n function mergeCentroid(idxs, pr, recs){\n let x=0,y=0,n=0;\n idxs.forEach(i=>{ const [cx,cy]=cxy(recs[i].f,pr); x+=cx; y+=cy; n++; });\n return n ? [x/n, y/n] : [0,0];\n }\n function mergedBbox(idxs, pr, recs){\n let minX=Infinity,minY=Infinity,maxX=-Infinity,maxY=-Infinity;\n idxs.forEach(i => {\n const g=recs[i].f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n ps.forEach(poly=>poly.forEach(ring=>ring.forEach(p=>{\n const q=pr(p);\n minX=Math.min(minX,q[0]); maxX=Math.max(maxX,q[0]);\n minY=Math.min(minY,q[1]); maxY=Math.max(maxY,q[1]);\n })));\n });\n return [minX,minY,maxX,maxY];\n }\n // Sutherland-Hodgman clip against a straight half-plane (side(x,y)>=0 kept). A straight-line\n // cut is exact for ANY simple polygon, convex or concave, so stacking bands never leaves a gap\n // — unlike an angular wedge radiating from one apex, which can't \"see\" a concave shape's whole border.\n function clipHalfPlane(ring, side){\n const out = [];\n const n = ring.length;\n for (let i = 0; i < n; i++){\n const curr = ring[i], prev = ring[(i - 1 + n) % n];\n const sCurr = side(curr[0], curr[1]);\n const sPrev = side(prev[0], prev[1]);\n const currIn = sCurr >= -1e-9;\n const prevIn = sPrev >= -1e-9;\n if (currIn) {\n if (!prevIn) out.push(intersectHalfPlane(prev, curr, side));\n out.push(curr);\n } else if (prevIn) {\n out.push(intersectHalfPlane(prev, curr, side));\n }\n }\n return out;\n }\n function intersectHalfPlane(p1, p2, side){\n const s1 = side(p1[0], p1[1]), s2 = side(p2[0], p2[1]);\n const t = s1 / (s1 - s2);\n return [p1[0] + t * (p2[0] - p1[0]), p1[1] + t * (p2[1] - p1[1])];\n }\n\n const loader = (on, t, isErr) => {\n const l = $('#loader');\n l.classList.toggle('hidden', !on);\n l.classList.toggle('err', !!isErr);\n if (t != null) l.textContent = t;\n };\n\n let IDX = null;\n let S = { pr: null, view: { scale: 1, tx: 0, ty: 0 }, focus: [], ctx: [] };\n let dragStart = null, dragMoved = false;\n let pointers = new Map();\n let pinchDist = null;\n\n function svgPoint(evt){\n const svg = $('#map');\n const pt = svg.createSVGPoint();\n pt.x = evt.clientX; pt.y = evt.clientY;\n const ctm = svg.getScreenCTM();\n if (!ctm) return { x: 0, y: 0 };\n const p = pt.matrixTransform(ctm.inverse());\n return { x: p.x, y: p.y };\n }\n function applyTransform(){\n const g = $('#viewport');\n if (g) g.setAttribute('transform', `translate(${S.view.tx} ${S.view.ty}) scale(${S.view.scale})`);\n }\n function zoomAt(p, factor){\n const next = Math.min(8, Math.max(0.15, S.view.scale * factor));\n const k = next / S.view.scale;\n S.view.tx = p.x - k * (p.x - S.view.tx);\n S.view.ty = p.y - k * (p.y - S.view.ty);\n S.view.scale = next;\n applyTransform();\n }\n d2.on('.stage', 'wheel', e => { e.preventDefault(); zoomAt(svgPoint(e), e.deltaY < 0 ? 1.15 : 1/1.15); });\n d2.on('.stage', 'pointerdown', (e, el) => {\n pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });\n if (pointers.size === 1) {\n const p = svgPoint(e);\n dragStart = { x: p.x, y: p.y, tx: S.view.tx, ty: S.view.ty, pointerId: e.pointerId, el, sx: e.clientX, sy: e.clientY };\n dragMoved = false;\n } else {\n dragStart = null;\n pinchDist = null;\n }\n });\n d2.on(window, 'pointermove', e => {\n if (!pointers.has(e.pointerId)) return;\n pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });\n if (pointers.size === 2) {\n const pts = [...pointers.values()];\n const dist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);\n if (pinchDist) {\n const mid = { clientX: (pts[0].x + pts[1].x) / 2, clientY: (pts[0].y + pts[1].y) / 2 };\n zoomAt(svgPoint(mid), dist / pinchDist);\n dragMoved = true;\n }\n pinchDist = dist;\n return;\n }\n if (!dragStart) return;\n const p = svgPoint(e);\n const dx = p.x - dragStart.x, dy = p.y - dragStart.y;\n // Capture the pointer only once real drag movement is detected. Capturing eagerly on\n // every pointerdown (the previous behavior) redirects the native `click` event's target\n // to the capturing element (a browser click-synthesis quirk with setPointerCapture), so a\n // plain tap on a color wedge never reached its own onclick. Deferring capture until the\n // gesture crosses the drag threshold lets a no-movement click hit-test normally.\n //\n // The threshold is measured in SCREEN pixels (clientX/clientY), not viewBox units: a mouse\n // cursor is sub-pixel precise, but a real finger tap naturally drifts several pixels, and\n // the old 0.5-viewBox-unit threshold (~0.6 screen px, shrinking further when zoomed in)\n // misread almost every touch tap as a drag — silently swallowing the color's onClick.\n // Only widen the tolerance when the instance opts into touch_controls — that param is\n // already the explicit signal this instance is being driven by touch, so gate on it\n // instead of sniffing e.pointerType (unreliable on hybrid/stylus devices anyway).\n if (!dragMoved) {\n const sdx = e.clientX - dragStart.sx, sdy = e.clientY - dragStart.sy;\n const touchMode = !!d2.param('touch_controls', false);\n const threshold = touchMode ? 10 : 4;\n if (Math.hypot(sdx, sdy) > threshold) {\n dragMoved = true;\n try { dragStart.el.setPointerCapture?.(dragStart.pointerId); } catch (_) {}\n }\n }\n if (dragMoved) {\n S.view.tx = dragStart.tx + dx; S.view.ty = dragStart.ty + dy;\n applyTransform();\n }\n });\n d2.on(window, 'pointerup', e => { pointers.delete(e.pointerId); pinchDist = null; if (!pointers.size) dragStart = null; });\n d2.on(window, 'pointercancel', e => { pointers.delete(e.pointerId); pinchDist = null; dragStart = null; });\n\n function showInfo(desc, evt){\n const touch = !!d2.param('touch_controls', false);\n const sub = desc.color ? esc(desc.color.color_label || desc.color.color_id) : 'apenas contexto';\n if (touch) {\n $('#infobarText').textContent = `${desc.label}${desc.color ? ' · ' + sub : ''}`;\n $('#infobar').classList.add('show');\n } else {\n const tip = $('#tip');\n if (evt) { tip.style.left = (evt.clientX + 12) + 'px'; tip.style.top = (evt.clientY + 12) + 'px'; }\n tip.innerHTML = `${esc(desc.label)}${desc.color ? 'carregando malhas do Brasil…
\n Nenhuma localização declarada — informe country_list, region_list, state_list, city_list ou municipality_list.
\n ' + sub : ''}`;\n tip.style.opacity = 1;\n }\n }\n function hideInfo(){ $('#tip').style.opacity = 0; }\n $('#infobarClose').onclick = () => $('#infobar').classList.remove('show');\n\n function addCountry(list, focus, usedUfs){\n list.forEach((entry, ei) => {\n if (!entry) return;\n if (String(entry.location_id||'').trim().toUpperCase() !== 'BR') {\n d2.log('multiescala: country_list só suporta BR por enquanto (' + entry.location_id + ')');\n return;\n }\n const ufs = Object.keys(UF_CODE);\n ufs.forEach(u => usedUfs.add(u));\n const idxs = ufs.flatMap(u => IDX.byUfName[u] ? Object.values(IDX.byUfName[u]) : []);\n if (!idxs.length) return;\n focus.push({ key: `country-${ei}`, idxs, level: 'country', entry, label: entry.location_label || 'Brasil', colors: toArr(entry.location_colors) });\n });\n }\n function addRegion(list, focus, usedUfs, usedRegions){\n list.forEach((entry, ei) => {\n if (!entry) return;\n const rc = matchRegion(entry.location_id);\n if (!rc) { d2.log('multiescala: region_list id não reconhecido (' + entry.location_id + ')'); return; }\n usedRegions.add(rc);\n REGION_UFS[rc].forEach(u => usedUfs.add(u));\n const idxs = REGION_UFS[rc].flatMap(u => IDX.byUfName[u] ? Object.values(IDX.byUfName[u]) : []);\n if (!idxs.length) return;\n focus.push({ key: `region-${ei}`, idxs, level: 'region', entry, label: entry.location_label || REGION_NAMES[rc], colors: toArr(entry.location_colors) });\n });\n }\n function addState(list, focus, usedUfs){\n list.forEach((entry, ei) => {\n if (!entry) return;\n const uf = matchUf(entry.location_id);\n if (!uf) { d2.log('multiescala: state_list id não reconhecido (' + entry.location_id + ')'); return; }\n usedUfs.add(uf);\n const idxs = IDX.byUfName[uf] ? Object.values(IDX.byUfName[uf]) : [];\n if (!idxs.length) return;\n focus.push({ key: `state-${ei}`, idxs, level: 'state', entry, label: entry.location_label || UF_NAMES[uf] || uf, colors: toArr(entry.location_colors) });\n });\n }\n function addLeaf(list, level, focus, usedUfs){\n list.forEach((entry, ei) => {\n if (!entry) return;\n const n = norm(entry.location_id);\n const matches = IDX.anyName[n];\n if (!matches || !matches.length) { d2.log('multiescala: ' + level + ' não encontrado (' + entry.location_id + ')'); return; }\n const i = matches[0];\n usedUfs.add(IDX.recs[i].uf);\n focus.push({ key: `${level}-${ei}`, idxs: [i], level, entry, label: entry.location_label || IDX.recs[i].label, colors: toArr(entry.location_colors) });\n });\n }\n\n function buildScene(){\n const countryList = toArr(d2.param('country_list', []));\n const regionList = toArr(d2.param('region_list', []));\n const stateList = toArr(d2.param('state_list', []));\n const cityList = toArr(d2.param('city_list', []));\n const muniList = toArr(d2.param('municipality_list', []));\n const wantNeighbors = !!d2.param('should_render_neighbors', false);\n\n const focus = [];\n const usedUfs = new Set();\n const usedRegions = new Set();\n const lowest = (cityList.length || muniList.length) ? 'leaf'\n : stateList.length ? 'state'\n : regionList.length ? 'region'\n : countryList.length ? 'country' : null;\n\n addCountry(countryList, focus, usedUfs);\n addRegion(regionList, focus, usedUfs, usedRegions);\n addState(stateList, focus, usedUfs);\n addLeaf(cityList, 'city', focus, usedUfs);\n addLeaf(muniList, 'municipality', focus, usedUfs);\n\n const ctx = [];\n const focusIdxSet = new Set(focus.flatMap(s => s.idxs));\n if (wantNeighbors && lowest) {\n if (lowest === 'leaf') {\n const nbrIdx = new Set();\n focus.filter(s => s.level === 'municipality' || s.level === 'city')\n .forEach(s => IDX.nbrsOf(s.idxs[0]).forEach(j => { if (!focusIdxSet.has(j)) nbrIdx.add(j); }));\n if (nbrIdx.size) ctx.push({ idxs: [...nbrIdx] });\n } else if (lowest === 'state') {\n const nbrUfs = new Set([...usedUfs].flatMap(u => UF_BORDERS[u] || []).filter(u => !usedUfs.has(u)));\n nbrUfs.forEach(u => { if (IDX.byUfName[u]) ctx.push({ idxs: Object.values(IDX.byUfName[u]) }); });\n } else if (lowest === 'region') {\n const nbrRegions = new Set();\n [...usedUfs].forEach(u => (UF_BORDERS[u] || []).forEach(b => {\n const br = Object.keys(REGION_UFS).find(r => REGION_UFS[r].includes(b));\n if (br && !usedRegions.has(br)) nbrRegions.add(br);\n }));\n nbrRegions.forEach(r => {\n const idxs = REGION_UFS[r].flatMap(u => IDX.byUfName[u] ? Object.values(IDX.byUfName[u]) : []);\n if (idxs.length) ctx.push({ idxs });\n });\n }\n }\n\n S.focus = focus; S.ctx = ctx;\n\n if (!focus.length && !ctx.length) {\n $('#empty').classList.remove('hidden');\n $('#legend').classList.add('hidden');\n $('#map').innerHTML = '';\n return;\n }\n $('#empty').classList.add('hidden');\n\n const zoomIdxs = focus.length ? focus.flatMap(s => s.idxs) : ctx.flatMap(s => s.idxs);\n S.pr = project(zoomIdxs.map(i => IDX.recs[i].f));\n S.view = { scale: 1, tx: 100, ty: 0 };\n drawMap();\n }\n\n function drawMap(){\n const svg = $('#map'); svg.innerHTML = '';\n const viewport = document.createElementNS(NS, 'g');\n viewport.setAttribute('id', 'viewport');\n svg.appendChild(viewport);\n applyTransform();\n const touch = !!d2.param('touch_controls', false);\n const labelFontSize = Math.max(4, Math.min(14, 9 * ((S.pr && S.pr.scale || 1000) / 1000)));\n\n S.ctx.forEach((c, i) => {\n const p = document.createElementNS(NS, 'path');\n p.setAttribute('d', pathFromRings(dissolveRings(c.idxs, IDX.recs), S.pr));\n p.setAttribute('data-key', 'ctx-' + i);\n p.setAttribute('class', 'area');\n p.setAttribute('fill', '#dcdfe8');\n p.setAttribute('opacity', '.55');\n viewport.appendChild(p);\n });\n\n const legendGroups = [];\n S.focus.forEach(item => {\n const rings = dissolveRings(item.idxs, IDX.recs);\n const dFull = pathFromRings(rings, S.pr);\n const base = document.createElementNS(NS, 'path');\n base.setAttribute('d', dFull);\n base.setAttribute('data-key', item.key + '-base');\n base.setAttribute('class', 'area');\n base.setAttribute('fill', item.colors.length ? '#eef0f5' : '#94a3b8');\n base.onmousemove = e => showInfo({ label: item.label, color: null }, e);\n base.onmouseleave = hideInfo;\n viewport.appendChild(base);\n\n if (item.colors.length) {\n const [bx0, , bx1] = mergedBbox(item.idxs, S.pr, IDX.recs);\n const n = item.colors.length;\n const stripeW = (bx1 - bx0) / n;\n item.colors.forEach((c, ci) => {\n const d = stripeClipRings(rings, S.pr, bx0 + ci * stripeW, bx0 + (ci + 1) * stripeW);\n if (!d) return;\n const wedge = document.createElementNS(NS, 'path');\n wedge.setAttribute('d', d);\n wedge.setAttribute('data-key', item.key + '-w' + ci);\n wedge.setAttribute('class', 'wedge' + (touch ? ' touchy' : ''));\n wedge.setAttribute('fill', c.color || PALETTE[ci % PALETTE.length]);\n wedge.onclick = (e) => {\n if (dragMoved) { dragMoved = false; return; }\n if (touch) showInfo({ label: item.label, color: c });\n // The ONLY click entry point — a color with no `onClick` just isn't actionable.\n // Augment the REAL click event (not a bare payload object) so APIs that need a\n // genuine DOM event as their first arg (e.g. @__DialogsService, which walks\n // $event.parentElement to find the modal mount point) still work, while\n // `$event.color_id` etc. remain readable.\n if (typeof c.onClick === 'function') {\n c.onClick(Object.assign(e, {\n level: item.level,\n location_id: item.entry.location_id,\n location_label: item.entry.location_label,\n color_id: c.color_id,\n color_label: c.color_label,\n color: c.color,\n }));\n }\n };\n if (!touch) {\n wedge.onmousemove = e => showInfo({ label: item.label, color: c }, e);\n wedge.onmouseleave = hideInfo;\n }\n viewport.appendChild(wedge);\n });\n }\n\n const [cx, cy] = item.idxs.length > 1 ? mergeCentroid(item.idxs, S.pr, IDX.recs) : cxy(IDX.recs[item.idxs[0]].f, S.pr);\n const t = document.createElementNS(NS, 'text');\n t.setAttribute('class', 'lbl'); t.setAttribute('x', cx); t.setAttribute('y', cy);\n t.style.fontSize = labelFontSize + 'px';\n t.textContent = (item.label || '').slice(0, 16);\n viewport.appendChild(t);\n\n if (item.colors.length) legendGroups.push({ entry: item.entry, items: item.colors });\n });\n\n renderLegend(legendGroups);\n }\n function renderLegend(groups){\n const el = $('#legend');\n if (!groups.length) { el.classList.add('hidden'); return; }\n el.classList.remove('hidden');\n el.innerHTML = groups.map(g => {\n const rows = g.items.map(c => `
${esc(c.color_label || c.color_id)}
`).join('');\n return `${esc(g.entry.location_label || g.entry.location_id || '')}
${rows}\n \n \n \n \n
`;\n },\n mounted(d2, root){\n\n const $ = s => root.querySelector(s);\n const NS = 'http://www.w3.org/2000/svg';\n const norm = s => (s||'').normalize('NFKD').replace(/[̀-ͯ]/g,'').toUpperCase().replace(/[^A-Z0-9]+/g,' ').trim();\n const esc = s => (s==null?'':String(s)).replace(/[&<>]/g, c => ({'&':'&','<':'<','>':'>'}[c]));\n const toArr = v => Array.isArray(v) ? v : [];\n\n function matchUf(idOrName){\n if(!idOrName) return null;\n const up = String(idOrName).trim().toUpperCase();\n if (UF_CODE[up]) return up;\n const n = norm(idOrName);\n const hit = Object.keys(UF_NAMES).find(code => norm(UF_NAMES[code]) === n);\n return hit || null;\n }\n function matchRegion(idOrName){\n if(!idOrName) return null;\n const up = String(idOrName).trim().toUpperCase();\n if (REGION_UFS[up]) return up;\n const n = norm(idOrName);\n const hit = Object.keys(REGION_NAMES).find(code => norm(REGION_NAMES[code]) === n);\n return hit || null;\n }\n\n async function geoUF(uf){\n const code = UF_CODE[uf] || uf;\n const r = await fetch('https://raw.githubusercontent.com/tbrugz/geodata-br/master/geojson/geojs-'+code+'-mun.json');\n if (!r.ok) throw new Error('geo ' + uf);\n return r.json();\n }\n function ptsOf(f){\n const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates], s=new Set();\n ps.forEach(poly=>poly.forEach(ring=>ring.forEach(p=>s.add(Math.round(p[0]*1000)/1000+','+Math.round(p[1]*1000)/1000))));\n return s;\n }\n function buildIndex(features){\n const recs = features.map(f => ({\n name: norm(f.properties.name || f.properties.NOME || f.properties.nome || ''),\n label: f.properties.name || f.properties.NOME || f.properties.nome || '',\n uf: f.__uf, f, pts: ptsOf(f)\n }));\n const ptIdx = {};\n recs.forEach((r,i) => r.pts.forEach(p => (ptIdx[p]=ptIdx[p]||[]).push(i)));\n const nbrsOf = i => {\n const c={};\n recs[i].pts.forEach(p => ptIdx[p].forEach(j => { if (j!==i) c[j]=(c[j]||0)+1; }));\n return Object.entries(c).filter(([,n])=>n>=2).map(([j])=>+j);\n };\n const byUfName = {};\n recs.forEach((r,i) => { byUfName[r.uf]=byUfName[r.uf]||{}; byUfName[r.uf][r.name]=i; });\n const anyName = {};\n recs.forEach((r,i) => { (anyName[r.name]=anyName[r.name]||[]).push(i); });\n return { recs, nbrsOf, byUfName, anyName };\n }\n function project(feats){\n let mnx=1/0,mny=1/0,mxx=-1/0,mxy=-1/0;\n const each = cb => feats.forEach(f=>{const g=f.geometry,ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];ps.forEach(p=>p.forEach(r=>r.forEach(cb)));});\n each(p=>{mnx=Math.min(mnx,p[0]);mxx=Math.max(mxx,p[0]);mny=Math.min(mny,p[1]);mxy=Math.max(mxy,p[1]);});\n const mlat=(mny+mxy)/2, kx=Math.cos(mlat*Math.PI/180), W=700,H=500,pad=22;\n const gw=(mxx-mnx)*kx, gh=(mxy-mny), sc=Math.min((W-2*pad)/gw,(H-2*pad)/gh);\n const ox=(W-gw*sc)/2, oy=(H-gh*sc)/2;\n const pr = p=>[ox+(p[0]-mnx)*kx*sc, oy+(mxy-p[1])*sc];\n pr.scale = sc;\n return pr;\n }\n function pathFor(f,pr){\n const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n return ps.map(poly=>poly.map(r=>'M'+r.map(p=>{const q=pr(p);return q[0].toFixed(1)+','+q[1].toFixed(1);}).join('L')+'Z').join('')).join('');\n }\n function cxy(f,pr){\n let x=0,y=0,n=0; const g=f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n ps.forEach(poly=>poly[0].forEach(p=>{const q=pr(p);x+=q[0];y+=q[1];n++;}));\n return [x/n, y/n];\n }\n function ringsOf(f){\n const g = f.geometry, ps = g.type==='MultiPolygon' ? g.coordinates : [g.coordinates];\n const rings = [];\n ps.forEach(poly => poly.forEach(ring => rings.push(ring)));\n return rings;\n }\n const quant = p => [Math.round(p[0]*1000)/1000, Math.round(p[1]*1000)/1000];\n const keyOf = p => p[0] + ',' + p[1];\n // Dissolves the municipio polygons in `idxs` into their outer boundary (+ any real holes)\n // by cancelling every edge shared by two included polygons — the border between two\n // adjacent included municipios disappears, leaving only the union's true edge. Exact for\n // this dataset because neighboring municipio files share literal boundary coordinates (the\n // same tolerance ptsOf already relies on for adjacency).\n function dissolveRings(idxs, recs){\n if (idxs.length === 1) return ringsOf(recs[idxs[0]].f);\n const edgeCount = new Map(), edges = [];\n idxs.forEach(i => {\n ringsOf(recs[i].f).forEach(ring => {\n const q = ring.map(quant);\n for (let k = 0; k < q.length - 1; k++){\n const a = q[k], b = q[k+1], ka = keyOf(a), kb = keyOf(b);\n if (ka === kb) continue;\n const uk = ka < kb ? ka+'|'+kb : kb+'|'+ka;\n edgeCount.set(uk, (edgeCount.get(uk)||0) + 1);\n edges.push({ a, b, ka, kb, uk });\n }\n });\n });\n const kept = edges.filter(e => edgeCount.get(e.uk) === 1);\n const byStart = new Map();\n kept.forEach(e => {\n if (!byStart.has(e.ka)) byStart.set(e.ka, []);\n byStart.get(e.ka).push(e);\n });\n const used = new Set(), rings = [];\n kept.forEach(seed => {\n if (used.has(seed)) return;\n const ring = [seed.a];\n let cur = seed, guard = 0;\n while (guard++ < 50000) {\n used.add(cur);\n ring.push(cur.b);\n if (cur.kb === seed.ka) break;\n const next = (byStart.get(cur.kb) || []).find(e => !used.has(e));\n if (!next) break;\n cur = next;\n }\n if (ring.length >= 4 && keyOf(ring[0]) === keyOf(ring[ring.length-1])) rings.push(ring);\n });\n return rings;\n }\n function pathFromRings(rings, pr){\n return rings.map(ring => 'M'+ring.map(p=>{const q=pr(p);return q[0].toFixed(1)+','+q[1].toFixed(1);}).join('L')+'Z').join('');\n }\n function stripeClipRings(rings, pr, x0, x1){\n let d = '';\n rings.forEach(ring => {\n let pts = ring.map(p => pr(p));\n pts = clipHalfPlane(pts, (x) => x - x0);\n if (pts.length) pts = clipHalfPlane(pts, (x) => x1 - x);\n if (pts.length >= 3) d += 'M' + pts.map(q => q[0].toFixed(1) + ',' + q[1].toFixed(1)).join('L') + 'Z';\n });\n return d;\n }\n function mergeCentroid(idxs, pr, recs){\n let x=0,y=0,n=0;\n idxs.forEach(i=>{ const [cx,cy]=cxy(recs[i].f,pr); x+=cx; y+=cy; n++; });\n return n ? [x/n, y/n] : [0,0];\n }\n function mergedBbox(idxs, pr, recs){\n let minX=Infinity,minY=Infinity,maxX=-Infinity,maxY=-Infinity;\n idxs.forEach(i => {\n const g=recs[i].f.geometry, ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n ps.forEach(poly=>poly.forEach(ring=>ring.forEach(p=>{\n const q=pr(p);\n minX=Math.min(minX,q[0]); maxX=Math.max(maxX,q[0]);\n minY=Math.min(minY,q[1]); maxY=Math.max(maxY,q[1]);\n })));\n });\n return [minX,minY,maxX,maxY];\n }\n // Sutherland-Hodgman clip against a straight half-plane (side(x,y)>=0 kept). A straight-line\n // cut is exact for ANY simple polygon, convex or concave, so stacking bands never leaves a gap\n // — unlike an angular wedge radiating from one apex, which can't \"see\" a concave shape's whole border.\n function clipHalfPlane(ring, side){\n const out = [];\n const n = ring.length;\n for (let i = 0; i < n; i++){\n const curr = ring[i], prev = ring[(i - 1 + n) % n];\n const sCurr = side(curr[0], curr[1]);\n const sPrev = side(prev[0], prev[1]);\n const currIn = sCurr >= -1e-9;\n const prevIn = sPrev >= -1e-9;\n if (currIn) {\n if (!prevIn) out.push(intersectHalfPlane(prev, curr, side));\n out.push(curr);\n } else if (prevIn) {\n out.push(intersectHalfPlane(prev, curr, side));\n }\n }\n return out;\n }\n function intersectHalfPlane(p1, p2, side){\n const s1 = side(p1[0], p1[1]), s2 = side(p2[0], p2[1]);\n const t = s1 / (s1 - s2);\n return [p1[0] + t * (p2[0] - p1[0]), p1[1] + t * (p2[1] - p1[1])];\n }\n\n const loader = (on, t, isErr) => {\n const l = $('#loader');\n l.classList.toggle('hidden', !on);\n l.classList.toggle('err', !!isErr);\n if (t != null) l.textContent = t;\n };\n\n let IDX = null;\n let S = { pr: null, view: { scale: 1, tx: 0, ty: 0 }, focus: [], ctx: [] };\n let dragStart = null, dragMoved = false;\n let pointers = new Map();\n let pinchDist = null;\n\n function svgPoint(evt){\n const svg = $('#map');\n const pt = svg.createSVGPoint();\n pt.x = evt.clientX; pt.y = evt.clientY;\n const ctm = svg.getScreenCTM();\n if (!ctm) return { x: 0, y: 0 };\n const p = pt.matrixTransform(ctm.inverse());\n return { x: p.x, y: p.y };\n }\n function applyTransform(){\n const g = $('#viewport');\n if (g) g.setAttribute('transform', `translate(${S.view.tx} ${S.view.ty}) scale(${S.view.scale})`);\n }\n function zoomAt(p, factor){\n const next = Math.min(8, Math.max(0.15, S.view.scale * factor));\n const k = next / S.view.scale;\n S.view.tx = p.x - k * (p.x - S.view.tx);\n S.view.ty = p.y - k * (p.y - S.view.ty);\n S.view.scale = next;\n applyTransform();\n }\n d2.on('.stage', 'wheel', e => { e.preventDefault(); zoomAt(svgPoint(e), e.deltaY < 0 ? 1.15 : 1/1.15); });\n d2.on('.stage', 'pointerdown', (e, el) => {\n pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });\n if (pointers.size === 1) {\n const p = svgPoint(e);\n dragStart = { x: p.x, y: p.y, tx: S.view.tx, ty: S.view.ty, pointerId: e.pointerId, el, sx: e.clientX, sy: e.clientY };\n dragMoved = false;\n } else {\n dragStart = null;\n pinchDist = null;\n }\n });\n d2.on(window, 'pointermove', e => {\n if (!pointers.has(e.pointerId)) return;\n pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });\n if (pointers.size === 2) {\n const pts = [...pointers.values()];\n const dist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);\n if (pinchDist) {\n const mid = { clientX: (pts[0].x + pts[1].x) / 2, clientY: (pts[0].y + pts[1].y) / 2 };\n zoomAt(svgPoint(mid), dist / pinchDist);\n dragMoved = true;\n }\n pinchDist = dist;\n return;\n }\n if (!dragStart) return;\n const p = svgPoint(e);\n const dx = p.x - dragStart.x, dy = p.y - dragStart.y;\n // Capture the pointer only once real drag movement is detected. Capturing eagerly on\n // every pointerdown (the previous behavior) redirects the native `click` event's target\n // to the capturing element (a browser click-synthesis quirk with setPointerCapture), so a\n // plain tap on a color wedge never reached its own onclick. Deferring capture until the\n // gesture crosses the drag threshold lets a no-movement click hit-test normally.\n //\n // The threshold is measured in SCREEN pixels (clientX/clientY), not viewBox units: a mouse\n // cursor is sub-pixel precise, but a real finger tap naturally drifts several pixels, and\n // the old 0.5-viewBox-unit threshold (~0.6 screen px, shrinking further when zoomed in)\n // misread almost every touch tap as a drag — silently swallowing the color's onClick.\n // Only widen the tolerance when the instance opts into touch_controls — that param is\n // already the explicit signal this instance is being driven by touch, so gate on it\n // instead of sniffing e.pointerType (unreliable on hybrid/stylus devices anyway).\n if (!dragMoved) {\n const sdx = e.clientX - dragStart.sx, sdy = e.clientY - dragStart.sy;\n const touchMode = !!d2.param('touch_controls', false);\n const threshold = touchMode ? 10 : 4;\n if (Math.hypot(sdx, sdy) > threshold) {\n dragMoved = true;\n try { dragStart.el.setPointerCapture?.(dragStart.pointerId); } catch (_) {}\n }\n }\n if (dragMoved) {\n S.view.tx = dragStart.tx + dx; S.view.ty = dragStart.ty + dy;\n applyTransform();\n }\n });\n d2.on(window, 'pointerup', e => { pointers.delete(e.pointerId); pinchDist = null; if (!pointers.size) dragStart = null; });\n d2.on(window, 'pointercancel', e => { pointers.delete(e.pointerId); pinchDist = null; dragStart = null; });\n\n function showInfo(desc, evt){\n const touch = !!d2.param('touch_controls', false);\n const sub = desc.color ? esc(desc.color.color_label || desc.color.color_id) : 'apenas contexto';\n if (touch) {\n $('#infobarText').textContent = `${desc.label}${desc.color ? ' · ' + sub : ''}`;\n $('#infobar').classList.add('show');\n } else {\n const tip = $('#tip');\n if (evt) { tip.style.left = (evt.clientX + 12) + 'px'; tip.style.top = (evt.clientY + 12) + 'px'; }\n tip.innerHTML = `${esc(desc.label)}${desc.color ? 'carregando malhas do Brasil…
\n Nenhuma localização declarada — informe country_list, region_list, state_list, city_list ou municipality_list.
\n ' + sub : ''}`;\n tip.style.opacity = 1;\n }\n }\n function hideInfo(){ $('#tip').style.opacity = 0; }\n $('#infobarClose').onclick = () => $('#infobar').classList.remove('show');\n\n function addCountry(list, focus, usedUfs){\n list.forEach((entry, ei) => {\n if (!entry) return;\n if (String(entry.location_id||'').trim().toUpperCase() !== 'BR') {\n d2.log('multiescala: country_list só suporta BR por enquanto (' + entry.location_id + ')');\n return;\n }\n const ufs = Object.keys(UF_CODE);\n ufs.forEach(u => usedUfs.add(u));\n const idxs = ufs.flatMap(u => IDX.byUfName[u] ? Object.values(IDX.byUfName[u]) : []);\n if (!idxs.length) return;\n focus.push({ key: `country-${ei}`, idxs, level: 'country', entry, label: entry.location_label || 'Brasil', colors: toArr(entry.location_colors) });\n });\n }\n function addRegion(list, focus, usedUfs, usedRegions){\n list.forEach((entry, ei) => {\n if (!entry) return;\n const rc = matchRegion(entry.location_id);\n if (!rc) { d2.log('multiescala: region_list id não reconhecido (' + entry.location_id + ')'); return; }\n usedRegions.add(rc);\n REGION_UFS[rc].forEach(u => usedUfs.add(u));\n const idxs = REGION_UFS[rc].flatMap(u => IDX.byUfName[u] ? Object.values(IDX.byUfName[u]) : []);\n if (!idxs.length) return;\n focus.push({ key: `region-${ei}`, idxs, level: 'region', entry, label: entry.location_label || REGION_NAMES[rc], colors: toArr(entry.location_colors) });\n });\n }\n function addState(list, focus, usedUfs){\n list.forEach((entry, ei) => {\n if (!entry) return;\n const uf = matchUf(entry.location_id);\n if (!uf) { d2.log('multiescala: state_list id não reconhecido (' + entry.location_id + ')'); return; }\n usedUfs.add(uf);\n const idxs = IDX.byUfName[uf] ? Object.values(IDX.byUfName[uf]) : [];\n if (!idxs.length) return;\n focus.push({ key: `state-${ei}`, idxs, level: 'state', entry, label: entry.location_label || UF_NAMES[uf] || uf, colors: toArr(entry.location_colors) });\n });\n }\n function addLeaf(list, level, focus, usedUfs){\n list.forEach((entry, ei) => {\n if (!entry) return;\n const n = norm(entry.location_id);\n const matches = IDX.anyName[n];\n if (!matches || !matches.length) { d2.log('multiescala: ' + level + ' não encontrado (' + entry.location_id + ')'); return; }\n const i = matches[0];\n usedUfs.add(IDX.recs[i].uf);\n focus.push({ key: `${level}-${ei}`, idxs: [i], level, entry, label: entry.location_label || IDX.recs[i].label, colors: toArr(entry.location_colors) });\n });\n }\n\n function buildScene(){\n const countryList = toArr(d2.param('country_list', []));\n const regionList = toArr(d2.param('region_list', []));\n const stateList = toArr(d2.param('state_list', []));\n const cityList = toArr(d2.param('city_list', []));\n const muniList = toArr(d2.param('municipality_list', []));\n const wantNeighbors = !!d2.param('should_render_neighbors', false);\n\n const focus = [];\n const usedUfs = new Set();\n const usedRegions = new Set();\n const lowest = (cityList.length || muniList.length) ? 'leaf'\n : stateList.length ? 'state'\n : regionList.length ? 'region'\n : countryList.length ? 'country' : null;\n\n addCountry(countryList, focus, usedUfs);\n addRegion(regionList, focus, usedUfs, usedRegions);\n addState(stateList, focus, usedUfs);\n addLeaf(cityList, 'city', focus, usedUfs);\n addLeaf(muniList, 'municipality', focus, usedUfs);\n\n const ctx = [];\n const focusIdxSet = new Set(focus.flatMap(s => s.idxs));\n if (wantNeighbors && lowest) {\n if (lowest === 'leaf') {\n const nbrIdx = new Set();\n focus.filter(s => s.level === 'municipality' || s.level === 'city')\n .forEach(s => IDX.nbrsOf(s.idxs[0]).forEach(j => { if (!focusIdxSet.has(j)) nbrIdx.add(j); }));\n if (nbrIdx.size) ctx.push({ idxs: [...nbrIdx] });\n } else if (lowest === 'state') {\n const nbrUfs = new Set([...usedUfs].flatMap(u => UF_BORDERS[u] || []).filter(u => !usedUfs.has(u)));\n nbrUfs.forEach(u => { if (IDX.byUfName[u]) ctx.push({ idxs: Object.values(IDX.byUfName[u]) }); });\n } else if (lowest === 'region') {\n const nbrRegions = new Set();\n [...usedUfs].forEach(u => (UF_BORDERS[u] || []).forEach(b => {\n const br = Object.keys(REGION_UFS).find(r => REGION_UFS[r].includes(b));\n if (br && !usedRegions.has(br)) nbrRegions.add(br);\n }));\n nbrRegions.forEach(r => {\n const idxs = REGION_UFS[r].flatMap(u => IDX.byUfName[u] ? Object.values(IDX.byUfName[u]) : []);\n if (idxs.length) ctx.push({ idxs });\n });\n }\n }\n\n S.focus = focus; S.ctx = ctx;\n\n if (!focus.length && !ctx.length) {\n $('#empty').classList.remove('hidden');\n $('#legend').classList.add('hidden');\n $('#map').innerHTML = '';\n return;\n }\n $('#empty').classList.add('hidden');\n\n const zoomIdxs = focus.length ? focus.flatMap(s => s.idxs) : ctx.flatMap(s => s.idxs);\n S.pr = project(zoomIdxs.map(i => IDX.recs[i].f));\n S.view = { scale: 1, tx: 100, ty: 0 };\n drawMap();\n }\n\n function drawMap(){\n const svg = $('#map'); svg.innerHTML = '';\n const viewport = document.createElementNS(NS, 'g');\n viewport.setAttribute('id', 'viewport');\n svg.appendChild(viewport);\n applyTransform();\n const touch = !!d2.param('touch_controls', false);\n const labelFontSize = Math.max(4, Math.min(14, 9 * ((S.pr && S.pr.scale || 1000) / 1000)));\n\n S.ctx.forEach((c, i) => {\n const p = document.createElementNS(NS, 'path');\n p.setAttribute('d', pathFromRings(dissolveRings(c.idxs, IDX.recs), S.pr));\n p.setAttribute('data-key', 'ctx-' + i);\n p.setAttribute('class', 'area');\n p.setAttribute('fill', '#dcdfe8');\n p.setAttribute('opacity', '.55');\n viewport.appendChild(p);\n });\n\n const legendGroups = [];\n S.focus.forEach(item => {\n const rings = dissolveRings(item.idxs, IDX.recs);\n const dFull = pathFromRings(rings, S.pr);\n const base = document.createElementNS(NS, 'path');\n base.setAttribute('d', dFull);\n base.setAttribute('data-key', item.key + '-base');\n base.setAttribute('class', 'area');\n base.setAttribute('fill', item.colors.length ? '#eef0f5' : '#94a3b8');\n base.onmousemove = e => showInfo({ label: item.label, color: null }, e);\n base.onmouseleave = hideInfo;\n viewport.appendChild(base);\n\n if (item.colors.length) {\n const [bx0, , bx1] = mergedBbox(item.idxs, S.pr, IDX.recs);\n const n = item.colors.length;\n const stripeW = (bx1 - bx0) / n;\n item.colors.forEach((c, ci) => {\n const d = stripeClipRings(rings, S.pr, bx0 + ci * stripeW, bx0 + (ci + 1) * stripeW);\n if (!d) return;\n const wedge = document.createElementNS(NS, 'path');\n wedge.setAttribute('d', d);\n wedge.setAttribute('data-key', item.key + '-w' + ci);\n wedge.setAttribute('class', 'wedge' + (touch ? ' touchy' : ''));\n wedge.setAttribute('fill', c.color || PALETTE[ci % PALETTE.length]);\n wedge.onclick = (e) => {\n if (dragMoved) { dragMoved = false; return; }\n if (touch) showInfo({ label: item.label, color: c });\n // The ONLY click entry point — a color with no `onClick` just isn't actionable.\n // Augment the REAL click event (not a bare payload object) so APIs that need a\n // genuine DOM event as their first arg (e.g. @__DialogsService, which walks\n // $event.parentElement to find the modal mount point) still work, while\n // `$event.color_id` etc. remain readable.\n if (typeof c.onClick === 'function') {\n c.onClick(Object.assign(e, {\n level: item.level,\n location_id: item.entry.location_id,\n location_label: item.entry.location_label,\n color_id: c.color_id,\n color_label: c.color_label,\n color: c.color,\n }));\n }\n };\n if (!touch) {\n wedge.onmousemove = e => showInfo({ label: item.label, color: c }, e);\n wedge.onmouseleave = hideInfo;\n }\n viewport.appendChild(wedge);\n });\n }\n\n const [cx, cy] = item.idxs.length > 1 ? mergeCentroid(item.idxs, S.pr, IDX.recs) : cxy(IDX.recs[item.idxs[0]].f, S.pr);\n const t = document.createElementNS(NS, 'text');\n t.setAttribute('class', 'lbl'); t.setAttribute('x', cx); t.setAttribute('y', cy);\n t.style.fontSize = labelFontSize + 'px';\n t.textContent = (item.label || '').slice(0, 16);\n viewport.appendChild(t);\n\n if (item.colors.length) legendGroups.push({ entry: item.entry, items: item.colors });\n });\n\n renderLegend(legendGroups);\n }\n function renderLegend(groups){\n const el = $('#legend');\n if (!groups.length) { el.classList.add('hidden'); return; }\n el.classList.remove('hidden');\n el.innerHTML = groups.map(g => {\n const rows = g.items.map(c => `
${esc(c.color_label || c.color_id)}
`).join('');\n return `${esc(g.entry.location_label || g.entry.location_id || '')}
${rows}Simulador de Realocação de Setores
\n \n \n \n ● dado ao vivo\n read-only · nunca escreve\n \n\n Como usar → \n 1. Escolha um setor pra fechar (ou 🎲).\n 2. O simulador puxa o dado real, acha os setores vizinhos (geografia, cruzando estados) e sugere o destino de cada município.\n 3. Clique ★ Modelo ÓTIMO p/ minimizar quebra de relação, ou ajuste no mapa/botões.\n 4. Veja o impacto antes → depois no relatório.\n
\n\n
\n\n\n\n
\n\n \n
\n \n
\n \n \n Mapa — clique num município p/ trocar o setor destino
\n\n \n \n
\n Coloridos = municípios do setor fechado (cor = destino). Cinza = vizinhos (contexto). Shapes reais IBGE/tbrugz.
\n \n
\n \n
\n \n \n \n \n
\n \n \n \n
\n
\n \n
\n\n \n
\n\n ★ ÓTIMO = equilibra a carga entre os setores e minimiza a quebra (contíguo; não empilha tudo num setor). TOBE = sugestão por vizinhança. Indicadores atualizam ao vivo.
\n \n \n Span por setor (CBs) — base + entrantes
\n \n\n
\n \n CBs deslocadas
\n\n \n \n
\n \n
\n\n Municípios → setor destino
\nClique no código do setor pra mandar o município inteiro pra lá (regra de negócio). A cor acompanha o mapa.
\n \n \n
\n
\n\n Líderes — destino e CBs deslocadas
\nHome = setor que ficou com a maioria das CBs da líder. Deslocadas = CBs dela que caíram noutro setor (viram “fora do setor” ou “quebra de relação”).
\n \n \n \n
\n carregando…
⚠ Contiguidade quebrada em ${bad.join(', ')} — município(s) desconectado(s) do território do setor. Use ★ ÓTIMO ou reassocie no mapa.
`\n :`✓ Contíguo — cada setor forma uma região conectada.
`;\n}\nfunction renderKpis(){const c=compute();\n if(S.view==='asis'){const mc=Object.keys(S.munis).filter(m=>m!=='__OUTROS__').length;\n $('#kpis').innerHTML=[\n {n:fmt(closingCbs()),l:`CBs no setor ${S.sector}`,t:'Total de CBs cadastradas no setor hoje (estrutura atual).'},\n {n:fmt(mc),l:'Municípios do setor',t:'Municípios que compõem o território do setor hoje.'},\n {n:fmt(S.leaders.length),l:'Líderes (grupos)',t:'Líderes ativas dentro do setor hoje.'},\n {n:fmt(S.dest.length),l:'Setores adjacentes',t:'Setores vizinhos que poderiam receber os municípios se o setor fechar.'},\n ].map(k=>`${k.n}
${k.l}
${k.n}
${k.l}
Estrutura atual — o setor ${S.sector} ainda existe. Alterne pra TOBE pra ver a redistribuição.
`;\n return;}\n const max=Math.max(...S.dest.map(s=>c.span[s]),1);\n $('#spans').innerHTML=S.dest.map(s=>{const base=+(S.baseMetrics[s]?.cbs||0),i=c.inc[s];\n return ``;}).join('')\n +`Claro = base atual · cheio = CBs entrantes do ${S.sector}.
`;\n}\nfunction renderMuni(){const c=compute();const ms=Object.keys(S.munis).filter(m=>m!=='__OUTROS__').sort((a,b)=>S.munis[b].cbs-S.munis[a].cbs);\n if(S.view==='asis'){$('#muniList').innerHTML=ms.map(m=>`${m}
${fmt(S.munis[m].cbs)} CBs
setor ${S.sector}Hoje todos pertencem ao setor ${S.sector}. No TOBE cada um vira botões de destino.
`;return;}\n $('#muniList').innerHTML=ms.map(m=>`${m}
${fmt(S.munis[m].cbs)} CBs
\n ${S.dest.map(s=>``).join('')}
+ ${fmt(S.munis.__OUTROS__.cbs)} CBs em municípios sem shape na UF (tratar à parte).
`:'');\n $('#muniList').querySelectorAll('.seg button').forEach(b=>b.onclick=()=>{S.assign[b.parentElement.dataset.m]=b.dataset.s;renderAll();});\n}\nfunction renderLeaders(){const c=compute();\n if(S.view==='asis'){$('#leaders').innerHTML=`\n Política: ${S.policy==='fora'?'manter vínculo (CBs fora do setor)':'quebrar relação'} · ${fmt(c.desloc)} CBs impactadas.`;\n}\nfunction renderReport(){const c=compute();\n S.metric=S.metric||'cbs';\n const metrics=[['cbs','CBs'],['ativas','Ativas'],['pedidos','Pedidos'],['pontos','Pontos'],['receita','Receita','$'],['rec_nat','Rec. Natura','$'],['rec_avon','Rec. Avon','$']];\n const KEYS=metrics.map(m=>m[0]);\n const incBy={};S.dest.forEach(s=>incBy[s]=Object.fromEntries(KEYS.map(k=>[k,0])));\n Object.entries(S.munis).forEach(([m,o])=>{if(m==='__OUTROS__')return;const s=S.assign[m];if(!s)return;KEYS.forEach(k=>incBy[s][k]+=o[k]||0);});\n const closeTot={};KEYS.forEach(k=>closeTot[k]=Object.entries(S.munis).filter(([m])=>m!=='__OUTROS__').reduce((a,[,o])=>a+(o[k]||0),0));\n const trend=S.trend.slice(-6);\n const chartHTML=mk=>{\n const isM=['receita','rec_nat','rec_avon'].includes(mk); const fN=isM?money:fmt;\n const data=S.dest.map(s=>({label:s,color:S.color[s],antes:+(S.baseMetrics[s]?.[mk]||0),depois:+(S.baseMetrics[s]?.[mk]||0)+(incBy[s]?.[mk]||0)}));\n data.push({label:S.sector+'✕',color:'#c8104e',antes:closeTot[mk]||0,depois:0});\n const max=Math.max(...data.flatMap(d=>[d.antes,d.depois]),1);\n const W=720,H=290,base=238,top=42,maxH=base-top,n=data.length,gw=(W-16)/n;\n let g='';\n data.forEach((d,i)=>{const cx=8+gw*i+gw/2,bw=Math.min(30,gw*0.30);\n const ah=d.antes/max*maxH,dh=d.depois/max*maxH,ax=cx-bw-2,dx=cx+2;\n g+=`
\n
\n Impacto antes → depois por setor
\nBarra clara = antes · barra cheia = depois (base + entrantes do ${S.sector}) · ${S.sector}✕ = setor que fecha · % = variação
\n ${chartHTML(S.metric)}`;\n h+=`Antes → Depois por setor receptor (snapshot atual)
\n| Setor | ${metrics.map(m=>`${m[1]} | `).join('')}
|---|---|
| ${s} | `+\n metrics.map(([k])=>{const bv=+b[k]||0,av=bv+ (inc[k]||0);const d=bv?((av-bv)/bv*100):0;const f=metrics.find(x=>x[0]===k)[2]==='$'?money:fmt;\n return `${f(av)} =0?'up':'dn'}\">${d>0?'+':''}${d.toFixed(0)}% | `;}).join('')+`
| ${S.sector} (sai) | `+metrics.map(([k,,t])=>`${(t==='$'?money:fmt)(closeTot[k]||0)} | `).join('')+`
Consultoras por nível — antes → depois por setor receptor
\n| Setor | ${NIVEIS.map(n=>`${n} | `).join('')}Total |
|---|---|---|
| ${s} | `+\n NIVEIS.map(nv=>{const b=base[nv]||0,i=inc[nv]||0,a=b+i;tb+=b;ta+=a;\n return `${a?fmt(a):'·'}${i?` +${fmt(i)} `:''} | `;}).join('')+\n `${fmt(ta)}${ta-tb?` +${fmt(ta-tb)} `:''} |
Número = CBs por nível depois da migração · +N = entrantes do ${S.sector}. Base + entrantes por nível.
`;\n const spk=(key)=>{const vals=trend.map(t=>+t[key]||0);const mx=Math.max(...vals,1);\n return `${vals.map(v=>``).join('')}
\n ${trend.map(t=>String(t.ciclo).slice(-2)).join(' · ')}
`;};\n h+=`Setor ${S.sector} — últimos ${trend.length} ciclos (tendência)
\nComo o setor que fecha vinha performando — pra dimensionar o que está sendo redistribuído.
\n \n ${[['cbs','CBs'],['ativas','Ativas'],['receita','Receita'],['pontos','Pontos']].map(([k,l])=>``).join('')}
`;\n $('#tab-report').innerHTML=h;\n const sel=$('#metricSel'); if(sel) sel.onchange=()=>{S.metric=sel.value; renderReport();};\n}\nfunction project(feats){let mnx=1/0,mny=1/0,mxx=-1/0,mxy=-1/0;\n const each=cb=>feats.forEach(f=>{const g=f.geometry,ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];ps.forEach(p=>p.forEach(r=>r.forEach(cb)));});\n each(p=>{mnx=Math.min(mnx,p[0]);mxx=Math.max(mxx,p[0]);mny=Math.min(mny,p[1]);mxy=Math.max(mxy,p[1]);});\n const mlat=(mny+mxy)/2,kx=Math.cos(mlat*Math.PI/180),W=700,H=500,pad=22;\n const gw=(mxx-mnx)*kx,gh=(mxy-mny),sc=Math.min((W-2*pad)/gw,(H-2*pad)/gh);\n const ox=(W-gw*sc)/2,oy=(H-gh*sc)/2;\n return p=>[ox+(p[0]-mnx)*kx*sc, oy+(mxy-p[1])*sc];\n}\nfunction pathFor(f,pr){const g=f.geometry,ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n return ps.map(poly=>poly.map(r=>'M'+r.map(p=>{const q=pr(p);return q[0].toFixed(1)+','+q[1].toFixed(1);}).join('L')+'Z').join('')).join('');}\nfunction cxy(f,pr){let x=0,y=0,n=0;const g=f.geometry,ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];ps.forEach(poly=>poly[0].forEach(p=>{const q=pr(p);x+=q[0];y+=q[1];n++;}));return[x/n,y/n];}\nfunction drawMap(){const c=compute();const NS='http://www.w3.org/2000/svg';const svg=$('#map');svg.innerHTML='';\n const feats=[...S.nbrFeat,...Object.values(S.geoFeat)];if(!feats.length)return;const pr=project(feats);\n S.nbrFeat.forEach(f=>{const p=document.createElementNS(NS,'path');p.setAttribute('d',pathFor(f,pr));p.setAttribute('class','nbr');svg.appendChild(p);\n const ct=cxy(f,pr);const t=document.createElementNS(NS,'text');t.setAttribute('class','nlabel');t.setAttribute('x',ct[0]);t.setAttribute('y',ct[1]);t.textContent=(f.properties.name||'').slice(0,14);svg.appendChild(t);});\n const asis=S.view==='asis';\n Object.entries(S.geoFeat).forEach(([m,f])=>{const p=document.createElementNS(NS,'path');p.setAttribute('d',pathFor(f,pr));\n p.setAttribute('class','muni'+(S.selected===m?' sel':''));p.setAttribute('fill',asis?CLOSE_COLOR:(S.color[S.assign[m]]||'#444'));\n if(!asis) p.onclick=()=>{const i=S.dest.indexOf(S.assign[m]);S.assign[m]=S.dest[(i+1)%S.dest.length];S.selected=m;renderAll();};\n p.style.cursor=asis?'default':'pointer';\n p.onmousemove=e=>{const t=$('#tip');t.style.opacity=1;t.style.left=(e.clientX+12)+'px';t.style.top=(e.clientY+12)+'px';\n t.innerHTML=asis?`${m}${l}
${spk(k)}${fmt(S.munis[m]?.cbs||0)} CBs · setor ${S.sector}`:`${m}
${fmt(S.munis[m]?.cbs||0)} CBs → ${S.assign[m]}
clique p/ trocar`;};\n p.onmouseleave=()=>$('#tip').style.opacity=0;svg.appendChild(p);\n const ct=cxy(f,pr);const t=document.createElementNS(NS,'text');t.setAttribute('class','mlabel');t.setAttribute('x',ct[0]);t.setAttribute('y',ct[1]);\n t.innerHTML=`${m.slice(0,13)}
\n configuração\n
Estratégia de autenticação não encontrada
\nNão foi possível resolver ${esc(AUTH)}. Confirme a referência da AuthenticationStrategy do sistema.
\n\n acesso restrito\n
Simulador de Timeline de Fechamentos
\nEntre com suas credenciais pra abrir a timeline de fechamentos de setores.
\n\n \n \n
\n \n \n \n
\n \n ${err?`⚠ ${esc(err)}
`:''}\n ${d2.state.ok?`✓ Autenticado. No app publicado o redirecionamento é automático.
`:''}\n Geomarketing · Natura. O simulador é read-only sobre o Databricks — cada sessão salva fica presa ao snapshot congelado da simulação.
\n \n configuração\n
Estratégia de autenticação não encontrada
\nNão foi possível resolver ${esc(AUTH)}. Confirme a referência da AuthenticationStrategy do sistema.
\n\n acesso restrito\n
Simulador de Timeline de Fechamentos
\nEntre com suas credenciais pra abrir a timeline de fechamentos de setores.
\n\n \n \n
\n \n \n \n
\n \n ${err?`⚠ ${esc(err)}
`:''}\n ${d2.state.ok?`✓ Autenticado. No app publicado o redirecionamento é automático.
`:''}\n Geomarketing · Natura. O simulador é read-only sobre o Databricks — cada sessão salva fica presa ao snapshot congelado da simulação.
\n ${t}
${b}
${act?``:''}\n \n `;\n\n const sessLevel=(stages[0]&&stages[0].level)||'setor';\n h+=``;\n }\n if(rc.length){\n h+=`
`;\n }\n\n h+=`
Simulador de timeline de fechamentos · sessão compartilhada
\n ${esc(r.label||'Sessão sem nome')}
\n\n ● snapshot congelado · ${esc(r.snapshotRaw||'—')}\n ◇ ${esc(ruleReal)}\n ◈ ${esc(ruleDest)}\n ◎ span: ${spanBits.length?esc(spanBits.join(' · ')):'livre'}\n ${r.sharedBy?`por ${esc(r.sharedBy)}`:''}\n ${r.sharedAt?`${esc(new Date(r.sharedAt).toLocaleString('pt-BR'))}`:''}\n ↗ abrir o simulador\n
\n \n \n \n ${sessLevel==='setor'?``:``}\n \n
`;\n\n if(stages.length>1){\n h+=`${fmt(stages.length)}
Etapa(s) de fechamento
${fmt(sm.totalCbs)}
CBs realocadas na cadeia
${fmt(sm.totalDesloc)}
CBs deslocadas (quebra de relação)
${fmt(sm.totalDesloc)}
CBs com líder dividida entre destinos
${esc((sm.sectors||[]).join(' → ')||'—')}
Ordem de fechamento
`+stages.map((s,i)=>`
`;\n }\n\n // ---- projection helpers (pure; mirrors the simulator's) ----\n const project=feats=>{let mnx=1/0,mny=1/0,mxx=-1/0,mxy=-1/0;\n feats.forEach(f=>{const g=f&&f.geometry;if(!g)return;const ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n ps.forEach(p=>p.forEach(rg=>rg.forEach(pt=>{mnx=Math.min(mnx,pt[0]);mxx=Math.max(mxx,pt[0]);mny=Math.min(mny,pt[1]);mxy=Math.max(mxy,pt[1]);})));});\n if(!isFinite(mnx)) return null;\n const mlat=(mny+mxy)/2,kx=Math.cos(mlat*Math.PI/180),W=680,H=440,pad=16;\n const gw=Math.max((mxx-mnx)*kx,1e-9),gh=Math.max(mxy-mny,1e-9),sc=Math.min((W-2*pad)/gw,(H-2*pad)/gh);\n const ox=(W-gw*sc)/2,oy=(H-gh*sc)/2;\n return {W,H,f:pt=>[ox+(pt[0]-mnx)*kx*sc, oy+(mxy-pt[1])*sc]};};\n const pathFor=(f,pr)=>{const g=f.geometry,ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n return ps.map(poly=>poly.map(rg=>'M'+rg.map(pt=>{const q=pr(pt);return q[0].toFixed(1)+','+q[1].toFixed(1);}).join('L')+'Z').join('')).join('');};\n const cxy=(f,pr)=>{let x=0,y=0,n=0;const g=f.geometry,ps=g.type==='MultiPolygon'?g.coordinates:[g.coordinates];\n ps.forEach(poly=>poly[0].forEach(pt=>{const q=pr(pt);x+=q[0];y+=q[1];n++;}));return n?[x/n,y/n]:[0,0];};\n\n stages.forEach((s,i)=>{\n const color=s.color||{};\n const k=s.kpis||{};\n const LV=lv(s);\n h+=`${i+1}${lv(s).label} ${esc(s.sector)}→${esc((s.dest||[]).join(', ')||'–')}
`).join('')+`\n `;\n\n // antes -> depois\n const M=s.metricas||[];\n if(M.length){\n h+=`
`;\n }\n\n // caveats\n const fl=[];\n if(s.excluidos&&s.excluidos.length) fl.push(`${fmt(s.excluidos.length)} município(s) com poucas CBs ficaram fora da realocação geográfica (quebra de vínculo): ${esc(s.excluidos.slice(0,6).map(x=>x.muni+' ('+x.cbs+')').join(', '))}${s.excluidos.length>6?' +'+(s.excluidos.length-6):''}. As CBs seguiram a líder do seu grupo.`);\n if(s.orphanStranded) fl.push(`${fmt(s.orphanStranded)} CB(s) sem setor a seguir — a líder não ficou com nenhum município realocado.`);\n if(s.noShapeCbs) fl.push(`${fmt(s.noShapeCbs)} CB(s) em municípios sem shape na UF, fora do mapa e de qualquer setor destino.`);\n if(s.optTier===1) fl.push(`O span mínimo não era atingível nesta etapa e foi relaxado pelo modelo.`);\n if(s.optTier===2) fl.push(`Os limites de span não eram atingíveis nesta etapa e foram relaxados pelo modelo.`);\n if(s.optTier===-1) fl.push(`Etapa resolvida por heurística (espaço de busca grande) — os limites de span não são garantidos.`);\n if(s.destRuleFallback) fl.push(`Nenhum município dominante nesta etapa: a regra de destino foi relaxada para \"qualquer município\".`);\n if(s.realocFallback) fl.push(`Todos os municípios ficariam abaixo do limite: a regra de realocação foi relaxada para \"realocar todos\".`);\n if(fl.length) h+=`
`;\n });\n\n // cumulative\n // Este resumo é calculado no rastro de município (world.muniOverride) — hoje só existe pro\n // fechamento de setor; GV/mercado têm o rastro equivalente (secOverride/gvOverride) mas essa\n // agregação ainda não foi refeita nesse grão, então avisa em vez de mostrar tabela vazia.\n const rc=sm.receivers||[];\n if(!rc.length && sessLevel!=='setor'){\n h+=`Etapa ${i+1} · ${LV.low} ${esc(s.sector)} fechad${LV.fem?'a':'o'}
\nTerritório redistribuído para ${esc((s.dest||[]).join(', ')||'—')}${s.domUF?' · '+esc(s.domUF):''}${s.policy?' · política: '+(s.policy==='fora'?'manter vínculo':'quebrar relação'):''}
\n\n \n ${LV.label==='Setor'?``:``}\n \n \n
\n ${fmt(k.cbsRealocadas)}
CBs realocadas
${fmt(k.desloc)}
CBs deslocadas
${fmt(k.desloc)}
CBs com líder dividida
${fmt(k.municipios)}
${LV.childPlural} movid${LV.childFem?'as':'os'}
${fmt(k.lideres)}
Líderes envolvidas
`;\n\n // map\n const gf=s.geoFeat||{}, nb=Array.isArray(s.nbrFeat)?s.nbrFeat:[], ex=Array.isArray(s.excludedFeat)?s.excludedFeat:[];\n const all=[...nb,...ex,...Object.values(gf)].filter(Boolean);\n const P=project(all);\n const unitOf=m=>LV.label==='Setor'?m:((s.unitOfMuni||{})[m]||m);\n if(P){\n let g='';\n nb.forEach(f=>{ if(!f||!f.geometry)return; g+=``;\n const c=cxy(f,P.f);const nm=(f.properties&&f.properties.name)||'';\n if(nm) g+=`${esc(nm.slice(0,13))} `; });\n ex.forEach(f=>{ if(!f||!f.geometry)return; g+=``; });\n if(LV.label==='Setor'){\n Object.entries(gf).forEach(([m,f])=>{ if(!f||!f.geometry)return;\n const dest=(s.assign||{})[m];\n g+=``;\n const c=cxy(f,P.f);\n g+=`${esc(m.slice(0,14))}${esc(dest||'–')} `; });\n } else {\n // GV/mercado: vários municípios do mesmo setor/GV são UMA unidade só na tela — mesma cor,\n // mesmo stroke (a costura entre elas some), um rótulo só no centro do grupo em vez de um\n // por município. Espelha o mapa ao vivo do simulador.\n const groups={};\n Object.entries(gf).forEach(([m,f])=>{ if(!f||!f.geometry)return; const u=unitOf(m); (groups[u]=groups[u]||[]).push(f); });\n Object.entries(groups).forEach(([u,feats])=>{\n const dest=(s.assign||{})[u]; const col=esc(color[dest]||'#8e8e93');\n let cx=0,cy=0,n=0;\n feats.forEach(f=>{ g+=``;\n const c=cxy(f,P.f); cx+=c[0]; cy+=c[1]; n++; });\n if(n){ cx/=n; cy/=n;\n g+=`${esc(u)}${esc(dest||'–')} `;\n }\n });\n }\n h+=`
Mapa da redistribuição
\n \n
\n \n
${(s.dest||[]).map(d=>`${LV.dest} ${esc(d)}`).join('')}\n vizinhos (contexto)\n ${ex.length?`fora da realocação`:''}
`;\n }\n h+=`${LV.childPlural} → ${LV.destLow} destino
`;\n h+=(s.municipios||[]).map(m=>`${esc(m.nome)}${fmt(m.cbs)} CBs\n ${esc(m.destino||'–')}
`).join('')||`Nenhum${LV.childFem?'a':''} ${LV.childLow} realocad${LV.childFem?'a':'o'} nesta etapa.
`;\n\n h+=``;\n // spans\n const ds=s.destinos||[];\n const mx=Math.max(...ds.map(d=>+d.span||0),1);\n h+=`
`;\n }\n h+=`
Tamanho d${LV.fem?'a':'o'} ${LV.destLow} depois da etapa
`;\n h+=ds.map(d=>{const base=+d.base||0,inc=+d.inc||0,orph=+d.orph||0;\n return ``;}).join('')||`Sem ${LV.destLow} destino nesta etapa.
`;\n h+=`Claro = base antes da etapa · cheio = CBs entrantes${(s.orphanTotal?' · faixa final = CBs que seguiram suas líderes':'')}.
`;\n\n // leaders\n const L=s.lideres||[];\n if(L.length){\n const showOrph=L.some(x=>+x.orphan>0);\n h+=`Líderes
| Líder | CBs | ${LV.dest} final | ${showOrph?'Órfãs | ':''}Desloc. |
|---|---|---|---|---|
| ${esc(x.lider||'—')} | ${fmt(x.total)} | \n${x.home?`${esc(x.home)}`:'–'} | \n ${showOrph?`${x.orphan?fmt(x.orphan):'·'} | `:''}\n${fmt(x.desloc||0)} |
Impacto antes → depois por ${LV.destLow} ${LV.fem?'receptora':'receptor'}
| ${LV.dest} | ${M.map(m=>`${esc(m.label)} | `).join('')}
|---|---|
| ${esc(sec)} | `;\n h+=M.map(m=>{const row=(m.rows||[]).find(x=>String(x.s)===String(sec))||{};\n const a=+row.antes||0,b=+row.depois||0,d=a?((b-a)/a*100):0;const f=m.money?money:fmt;\n return `${f(b)} =0?'up':'dn'}\">${d>0?'+':''}${d.toFixed(0)}% | `;}).join('')+`
| ${esc(s.sector)} (sai) | `+M.map(m=>`${(m.money?money:fmt)(m.sai||0)} | `).join('')+`
⚠ ${fl.join('
')}
`;\n h+=`')}
Impacto acumulado da cadeia
\nAinda não disponível pra sessões de ${sessLevel==='gv'?'GV':'mercado'} — veja o relatório de cada etapa acima.
Impacto acumulado da cadeia
\nEfeito de todas as ${fmt(stages.length)} etapa(s) somadas, contra o snapshot congelado sem nenhum fechamento aplicado.
\n| Setor | Situação | CBs antes | CBs depois | Variação |
|---|---|---|---|---|
| ${esc(x.s)} | ${esc(x.situacao||'recebeu território')} | ${fmt(a)} | ${fmt(b)} | \n=0?'up':'dn'}\" style=\"font-size:11.5px\">${d>0?'+':''}${d.toFixed(0)}% |
Visualização somente leitura de uma simulação congelada. Os números refletem o snapshot ${esc(r.snapshotRaw||'—')} e as regras vigentes no momento do compartilhamento — não acompanham o dado ao vivo.
`;\n return h+`