function createElectionChart( initialConfig = {}, provinciasMap, diputadosPorProvincia, candidatosFotos = new Map() ) { const container = html`

`; let currentConfig = { id: "election-chart-HOME", provincia: "MENDOZA", modo: "DIPUTADOS", anchoBloque: 150, altoBloque: 200, modoSubnacional: false, hayDatos: true, ...initialConfig }; // Variables de estado y de una sola inicialización let processor = null; let porcentajeMaximoGlobal = 100; let maxPartidos = 10; let isDataConnected = false; // --- FUNCIONES INTERNAS (INICIALIZACIÓN, EVENTOS, D3) --- function obtenerDatosCandidato(provincia, nombrePartido) { const candidatosProvinciaMap = candidatosFotos.get(provincia); if (!candidatosProvinciaMap) return null; const candidato = candidatosProvinciaMap.get(nombrePartido); if (!candidato) return null; return { nombre: candidato.nombre, fotoUrl: candidato.foto ? `https://visualizando.ar/elecciones2025/${candidato.foto.toLowerCase()}.png` : null }; } function updateProvinciaClass(provincia) { const wrapper = container.querySelector(".election-chart-wrapper"); if (wrapper) { if ( ["MENDOZA", "SAN JUAN", "CAPITAL", "GUAYMALLEN"].includes(provincia) ) { wrapper.classList.add("esMendozaOSanJuan"); } else { wrapper.classList.remove("esMendozaOSanJuan"); } } } function updateScrollIndicators() { const scrollWrapper = container.querySelector(".resultados-scroll-wrapper"); const indicatorsWrapper = container.querySelector( ".scroll-indicators-wrapper" ); if (!scrollWrapper || !indicatorsWrapper) return; const hasOverflow = scrollWrapper.scrollWidth > scrollWrapper.clientWidth; const isScrolledToEnd = scrollWrapper.scrollLeft + scrollWrapper.clientWidth >= scrollWrapper.scrollWidth - 5; indicatorsWrapper.classList.toggle( "has-overflow", hasOverflow && !isScrolledToEnd ); indicatorsWrapper.classList.toggle("scrolled-to-end", isScrolledToEnd); } function updateWrapperVisibility(hayDatos) { const wrapper = container.querySelector(".election-chart-wrapper"); if (wrapper) { wrapper.style.display = hayDatos ? "block" : "none"; } } function initializeStructure() { const { anchoBloque, altoBloque, id: chartId, modoSubnacional } = currentConfig; const provinciasDisponibles = Array.from(provinciasMap.keys()); const labelSelector = modoSubnacional ? "DEPARTAMENTO" : "PROVINCIA"; const claseSubnacional = modoSubnacional ? "modo-subnacional" : ""; container.innerHTML = `

${labelSelector}:

ELECCIÓN:

DIPUTADOS

SENADORES

${ modoSubnacional ? '

CONCEJALES

' : "" }

-- bancas en juego

ESCRUTINIO:

`; attachEventListeners(chartId); updateProvinciaClass(currentConfig.provincia); updateWrapperVisibility(currentConfig.hayDatos); // Listener para el scroll const scrollWrapper = container.querySelector(".resultados-scroll-wrapper"); if (scrollWrapper) { scrollWrapper.addEventListener("scroll", updateScrollIndicators); const resizeObserver = new ResizeObserver(updateScrollIndicators); resizeObserver.observe(scrollWrapper); } setTimeout(updateScrollIndicators, 100); } function calculateAndCreateSlots(dataSource) { currentConfig.dataSource = dataSource; const tienesDatos = dataSource && Object.keys(dataSource).length > 0; currentConfig.hayDatos = tienesDatos; updateWrapperVisibility(tienesDatos); if (!tienesDatos) { console.warn("No hay datos disponibles para mostrar el gráfico"); return; } processor = createElectionDataProcessor( (p, m) => dataSource[p]?.[m] || [], provinciasMap, diputadosPorProvincia ); porcentajeMaximoGlobal = processor.calcularPorcentajeMaximoGlobal(); const provincias = processor.getProvinciasDisponibles(); let max = 0; const modos = currentConfig.modoSubnacional ? ["DIPUTADOS", "SENADORES", "CONCEJALES"] : ["DIPUTADOS", "SENADORES"]; provincias.forEach((prov) => { modos.forEach((modo) => { const partidos = processor.getPartidosOrdenados(prov, modo); if (partidos.length > 0) { max = Math.max(max, partidos.length); } }); }); maxPartidos = max; const containerEl = d3 .select(container) .select(`#resultados-${currentConfig.id}`); containerEl.html(""); const slots = containerEl .selectAll(".candidato") .data(d3.range(maxPartidos)) .enter() .append("div") .attr("class", "candidato collapsed"); slots .append("div") .attr("class", "candidato-inner") .call((inner) => { const barra = inner.append("div").attr("class", "foto-container"); barra.append("div").attr("class", "barra-fondo"); barra.append("div").attr("class", "porcentaje-overlay"); const infoFoto = barra .append("div") .attr("class", "candidato-info-foto"); const circulo = infoFoto .append("div") .attr("class", "circulo-foto-candidato"); circulo.append("img").attr("class", "foto-candidato"); infoFoto.append("div").attr("class", "candidato-nombre-foto"); const info = inner.append("div").attr("class", "info"); info.append("div").attr("class", "partido"); if (!currentConfig.modoSubnacional) info.append("div").attr("class", "bancas"); info.append("div").attr("class", "circulitos-bancas"); }); setTimeout(updateScrollIndicators, 100); } function updateControls(provincia, modo, estadoRecuento, fechaTotalizacion) { if (!processor) return; const senadoresDisponible = processor.checkSenadoresDisponible(provincia); const concejalesDisponible = currentConfig.modoSubnacional && currentConfig.dataSource?.[provincia]?.CONCEJALES?.length > 0; const senadoresBtn = container.querySelector('[data-modo="SENADORES"]'); const diputadosBtn = container.querySelector('[data-modo="DIPUTADOS"]'); const concejalesBtn = container.querySelector('[data-modo="CONCEJALES"]'); container.querySelectorAll(".switch-option").forEach((btn) => { btn.classList.remove("active"); if (btn.dataset.modo === modo) { btn.classList.add("active"); } }); if (senadoresBtn) { senadoresBtn.classList.toggle("disabled", !senadoresDisponible); senadoresBtn.style.opacity = senadoresDisponible ? "1" : "0.3"; senadoresBtn.style.cursor = senadoresDisponible ? "pointer" : "not-allowed"; } if (concejalesBtn) { concejalesBtn.classList.toggle("disabled", !concejalesDisponible); concejalesBtn.style.opacity = concejalesDisponible ? "1" : "0.3"; concejalesBtn.style.cursor = concejalesDisponible ? "pointer" : "not-allowed"; } const totalBancas = processor.calcularTotalBancas(provincia, modo); const bancasText = container.querySelector(".bancas-en-juego"); if (bancasText) { bancasText.textContent = totalBancas > 0 ? `${totalBancas} banca${totalBancas !== 1 ? "s" : ""} en juego` : "--"; } const porcentajeEscrutinio = estadoRecuento?.mesasTotalizadasPorcentaje || 0; const progressFill = container.querySelector( `#progress-fill-${currentConfig.id}` ); if (progressFill) { progressFill.style.width = `${porcentajeEscrutinio}%`; } const escrutinioText = container.querySelector( `#escrutinio-${currentConfig.id}` ); if (escrutinioText) { escrutinioText.textContent = `${Math.floor(porcentajeEscrutinio)}%`; } const fechaEl = container.querySelector( `#fecha-totalizacion-${currentConfig.id}` ); if (fechaEl && fechaTotalizacion) { fechaEl.textContent = ""; // fechaEl.textContent = `Actualizado: ${d3.timeFormat("%H:%M")( // new Date(+new Date(fechaTotalizacion) - 180) // )}`; } } function attachEventListeners(chartId) { container .querySelector(`#select-${chartId}`) .addEventListener("change", (e) => { if (!processor) return; currentConfig.provincia = e.target.value; updateProvinciaClass(currentConfig.provincia); const modoActualDisponible = currentConfig.modo === "DIPUTADOS" || (currentConfig.modo === "SENADORES" && processor.checkSenadoresDisponible(currentConfig.provincia)) || (currentConfig.modo === "CONCEJALES" && currentConfig.dataSource?.[currentConfig.provincia]?.CONCEJALES ?.length > 0); if (!modoActualDisponible) { currentConfig.modo = "DIPUTADOS"; } updateFullDisplay(); }); container.querySelectorAll(".switch-option").forEach((opt) => { opt.addEventListener("click", (e) => { if (!processor || e.currentTarget.classList.contains("disabled")) return; currentConfig.modo = e.currentTarget.dataset.modo; updateFullDisplay(); }); }); } function updateFullDisplay() { if (!processor) return; const provincia = currentConfig.provincia; const modo = currentConfig.modo; const estadoRecuento = currentConfig.dataSource?.[provincia]?.estadoRecuento; const fechaTotalizacion = currentConfig.dataSource?.[provincia]?.fechaTotalizacion; updateControls(provincia, modo, estadoRecuento, fechaTotalizacion); const partidos = processor.getPartidosOrdenados(provincia, modo); const chartId = currentConfig.id; const containerEl = d3.select(container).select(`#resultados-${chartId}`); containerEl.selectAll(".candidato").each(function (d, i) { const slot = d3.select(this); const partido = partidos[i]; if (partido) { slot .classed("collapsed", false) .style("order", i) .datum({ nombre: partido.nombre }); const candidato = obtenerDatosCandidato(provincia, partido.nombre); const infoFoto = slot.select(".candidato-info-foto"); if (candidato?.fotoUrl) { infoFoto.transition().duration(300).style("opacity", "1"); infoFoto.select(".candidato-nombre-foto").text(candidato.nombre); infoFoto .select(".circulo-foto-candidato") .style("background-color", partido.color); infoFoto.select(".foto-candidato").attr("src", candidato.fotoUrl); } else { infoFoto.style("opacity", "0"); } slot .select(".foto-container") .transition() .duration(400) .style("background", partido.color + "33"); slot .select(".barra-fondo") .transition() .duration(600) .style( "height", `${(partido.porcentaje / porcentajeMaximoGlobal) * 100}%` ) .style("background", partido.color); slot.select(".partido").text(partido.nombre); slot .select(".porcentaje-overlay") .text(`${partido.porcentaje.toFixed(1)}%`); slot .select(".bancas") .text( currentConfig.modoSubnacional ? "" : `${partido.bancas} banca${partido.bancas !== 1 ? "s" : ""}` ); const circulos = slot .select(".circulitos-bancas") .selectAll(".circulo-banca") .data(d3.range(partido.bancas)); circulos.exit().transition().duration(200).style("opacity", 0).remove(); circulos .enter() .append("div") .attr("class", "circulo-banca") .merge(circulos) .style("background", partido.color) .transition() .duration(300) .style("opacity", 1); } else { slot.classed("collapsed", true).datum(null); } }); setTimeout(updateScrollIndicators, 700); } function refreshData(dataSource) { currentConfig.dataSource = dataSource; const tienesDatos = dataSource && Object.keys(dataSource).length > 0; currentConfig.hayDatos = tienesDatos; updateWrapperVisibility(tienesDatos); if (!tienesDatos) { console.warn("No hay datos disponibles para actualizar el gráfico"); return; } const provincia = currentConfig.provincia; const modo = currentConfig.modo; const estadoRecuento = dataSource?.[provincia]?.estadoRecuento; const fechaTotalizacion = dataSource?.[provincia]?.fechaTotalizacion; updateControls(provincia, modo, estadoRecuento, fechaTotalizacion); const partidos = createElectionDataProcessor( (p, m) => dataSource[p]?.[m] || [], provinciasMap, diputadosPorProvincia ).getPartidosOrdenados(provincia, modo); const partidosMap = new Map( partidos.map((p, i) => [p.nombre, { ...p, orden: i }]) ); d3.select(container) .selectAll(".candidato:not(.collapsed)") .each(function () { const slot = d3.select(this); const slotData = slot.datum(); if (!slotData || !slotData.nombre) return; const partidoNuevo = partidosMap.get(slotData.nombre); if (partidoNuevo) { slot.style("order", partidoNuevo.orden); const candidato = obtenerDatosCandidato( provincia, partidoNuevo.nombre ); const infoFoto = slot.select(".candidato-info-foto"); if (candidato?.fotoUrl) { infoFoto.style("opacity", "1"); infoFoto.select(".candidato-nombre-foto").text(candidato.nombre); infoFoto .select(".circulo-foto-candidato") .style("background-color", partidoNuevo.color); infoFoto.select(".foto-candidato").attr("src", candidato.fotoUrl); } else { infoFoto.style("opacity", "0"); } slot .select(".barra-fondo") .transition("refresh") .duration(750) .ease(d3.easeCubicInOut) .style( "height", `${(partidoNuevo.porcentaje / porcentajeMaximoGlobal) * 100}%` ) .style("background", partidoNuevo.color); slot .select(".porcentaje-overlay") .text(`${partidoNuevo.porcentaje.toFixed(1)}%`); slot .select(".bancas") .text( `${partidoNuevo.bancas} banca${ partidoNuevo.bancas !== 1 ? "s" : "" }` ); const circulos = slot .select(".circulitos-bancas") .selectAll(".circulo-banca") .data(d3.range(partidoNuevo.bancas)); circulos.exit().remove(); circulos .enter() .append("div") .attr("class", "circulo-banca") .merge(circulos) .style("background", partidoNuevo.color) .style("opacity", 1); } }); setTimeout(updateScrollIndicators, 800); } // --- API PÚBLICA --- container.renderData = function (dataSource) { if (!isDataConnected) { calculateAndCreateSlots(dataSource); updateFullDisplay(); isDataConnected = true; } else { refreshData(dataSource); } }; container.setVisibility = function (visible) { currentConfig.hayDatos = visible; updateWrapperVisibility(visible); }; container.getVisibility = function () { return currentConfig.hayDatos; }; initializeStructure(); return container; }