const data={channels:[ {name:'YouTube',icon:'▶',value:'14,2 K seguidores',status:'ok',statusText:'Actualizado',type:'official',bar:28.6,url:'https://www.youtube.com/@notodoanimacion'}, {name:'Facebook',icon:'f',value:'12.854',status:'ok',statusText:'Referencia',type:'official',bar:25.9,url:'https://www.facebook.com/notodoanimacion'}, {name:'LinkedIn',icon:'in',value:'10.305 seguidores',status:'ok',statusText:'Verificado',type:'official',bar:20.8,url:'https://www.linkedin.com/company/notodoanimacion-es/'}, {name:'Instagram',icon:'◎',value:'3.066 seguidores',status:'ok',statusText:'Actualizado',type:'official',bar:6.2,url:'https://www.instagram.com/notodoanimacion.es/'}, {name:'X',icon:'X',value:'1.853 seguidores',status:'ok',statusText:'Actualizado',type:'official',bar:3.7,url:'https://x.com/notodoanimacion'}, {name:'TikTok',icon:'♪',value:'2.100 seguidores',status:'ok',statusText:'Actualizado',type:'official',bar:4.2,url:'https://www.tiktok.com/@notodoanimacion'}, {name:'Pinterest',icon:'p',value:'49,7 mil seguidores',sub:'173 mil visualizaciones mensuales',status:'ok',statusText:'Actualizado',type:'official',bar:100,url:'https://es.pinterest.com/animalstudios/'} ],personal:[ {name:'Facebook',icon:'f',value:'5.100 seguidores',status:'ok',statusText:'Actualizado',type:'personal',url:'https://www.facebook.com/jonathan.cortes.7568/'}, {name:'LinkedIn',icon:'in',value:'20.770 seguidores',status:'ok',statusText:'Actualizado',type:'personal',url:'https://www.linkedin.com/in/animalstudios/'}, {name:'Instagram',icon:'◎',value:'1.481 seguidores',status:'ok',statusText:'Actualizado',type:'personal',url:'https://www.instagram.com/_joncortes/'} ]}; const $=s=>document.querySelector(s);const channels=$('#channels');const personalChannels=$('#personalChannels'); function cardMarkup(x){const tag=x.url?'a':'article';const end=x.url?' target="_blank" rel="noopener" href="'+x.url+'"':'';const stateClass=x.url?'isLink':x.status==='pending'?'isPending':'';const foot=x.url?'Abrir perfil ↗':x.status==='pending'?'Sin URL confirmada':'URL pendiente';return `<${tag} class="card channel ${stateClass} social-${x.name.toLowerCase()}"${end}> ${x.icon} ${x.name}${x.type==='personal'?' (personal)':''} ${x.value} ${x.sub?` ${x.sub} `:''}● ${x.statusText} ${foot}› ${tag}>`} function render(){channels.innerHTML=data.channels.map(cardMarkup).join('');personalChannels.innerHTML=data.personal.map(cardMarkup).join('')} function renderBars(){const max=14200;$('#bars').innerHTML=data.channels.map(x=>` ${x.name} ${x.value.replace(/seguidores/gi,'').trim()} `).join('')} $('#report').onclick=()=>alert('El informe se generará cuando se conecten las fuentes analíticas completas.');const app=document.querySelector('.app');const navButtons=document.querySelectorAll('.nav button');const summaryButton=navButtons[0],communityButton=navButtons[1],dashboard=document.querySelector('.main');summaryButton.addEventListener('click',()=>{dashboard.hidden=true;summaryButton.classList.add('active');communityButton.classList.remove('active')});communityButton.addEventListener('click',()=>{dashboard.hidden=false;communityButton.classList.add('active');summaryButton.classList.remove('active')});$('#collapseBtn').onclick=()=>{const collapsed=app.classList.toggle('collapsed');$('#collapseBtn').textContent=collapsed?'›':'‹';$('#collapseBtn').setAttribute('aria-expanded',String(!collapsed));$('#collapseBtn').setAttribute('aria-label',collapsed?'Expandir menú lateral':'Plegar menú lateral')};render();renderBars();const svg=document.querySelector('.chart svg'),startYear=2012,currentYear=new Date().getFullYear(),yearCount=Math.max(1,currentYear-startYear);svg.querySelectorAll('text').forEach(t=>{if(t.getAttribute('y')==='247'||['Ene','Mar','May','Jul','Sep'].includes(t.textContent))t.remove()});const yearLabels=document.createElementNS('http://www.w3.org/2000/svg','g');yearLabels.id='yearLabels';yearLabels.innerHTML=Array.from({length:yearCount+1},(_,i)=>{const x=45+i*(635/yearCount);return `${startYear+i}`}).join('');svg.appendChild(yearLabels); svg.setAttribute('viewBox','0 0 700 260');svg.setAttribute('preserveAspectRatio','xMidYMid meet');const labels=document.getElementById('yearLabels');if(labels){const years=labels.querySelectorAll('text');years.forEach((t,i)=>t.setAttribute('x',(55+i*(590/(years.length-1))).toFixed(1)));} const maxAudience=121429,topY=25,bottomY=225,leftX=45,rightX=680; const ratios=[.10,.27,.24,.48,.58,.54,.75,.84,.94,1]; const points=ratios.map((ratio,index)=>({x:leftX+index*((rightX-leftX)/(ratios.length-1)),y:bottomY-ratio*(bottomY-topY)})); const lineD=points.map((point,index)=>(index?'L':'M')+point.x.toFixed(1)+' '+point.y.toFixed(1)).join(' '); svg.querySelector('.line').setAttribute('d',lineD); svg.querySelector('.area').setAttribute('d',lineD+` L${rightX} ${bottomY} L${leftX} ${bottomY}Z`); const ticks=[{y:'229',v:'0'},{y:'179',v:'50,3K'},{y:'129',v:'100,7K'},{y:'79',v:'151,0K'},{y:'29',v:'201,3K'}]; ticks.forEach(tick=>{const node=Array.from(svg.querySelectorAll('text')).find(text=>text.getAttribute('y')===tick.y);if(node)node.textContent=tick.v}); function fitDashboardToViewport(){ if(window.innerWidth<1101){ app.style.removeProperty('--dashboard-scale'); app.style.width='100%'; app.style.transform='none'; app.style.height='auto'; app.style.minHeight='100dvh'; document.documentElement.style.overflowX='hidden'; document.documentElement.style.overflowY='auto'; document.body.style.overflowX='hidden'; document.body.style.overflowY='auto'; return; } app.style.setProperty('--dashboard-scale','1');app.style.width='100%'; requestAnimationFrame(()=>{ const naturalHeight=app.scrollHeight; const availableHeight=Math.max(1,window.innerHeight-2); const scale=Math.min(1,availableHeight/naturalHeight); app.style.setProperty('--dashboard-scale',String(scale)); app.style.width=scale<1?`${100/scale}%`:'100%'; }); } window.addEventListener('resize',fitDashboardToViewport,{passive:true}); window.addEventListener('load',fitDashboardToViewport,{once:true}); requestAnimationFrame(fitDashboardToViewport);