https://observatorio.iases.es.gov.br:443/Contents/Item/Display/1816Infográficoshttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/em-producao-conhecendo-as-medidas-socioeducativas<p></p> <p><img width="1660" height="1431" alt="" src="/Media/ObservatorioIases/Logos/2.png" style="display: block; margin-left: auto; margin-right: auto;" /></p> <p></p> <p><img width="1223" height="859" alt="" src="/Media/ObservatorioIases/Logos/1.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>Wed, 15 Apr 2026 16:56:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/em-producao-conhecendo-as-medidas-socioeducativashttps://observatorio.iases.es.gov.br:443/analisefem<p></p> <!-- Tailwind CSS CDN --> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <!-- Chart.js CDN --> <p> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </p> <!-- Lucide Icons --> <p> <script src="https://unpkg.com/lucide@latest"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); body { box-sizing: border-box; font-family: 'Inter', sans-serif; background-color: #f8fafc; padding: 20px 0; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .infographic-card { border-radius: 1.5rem; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.05); opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; padding: 2rem; margin-bottom: 2rem; position: relative; overflow: hidden; } .infographic-card.is-visible { opacity: 1; transform: translateY(0); } /* Temas por seção - Cores diferentes */ .card-header-main { background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 100%); color: white; } .card-evolution { background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%); border-left: 6px solid #6366f1; } .card-race { background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%); border-left: 6px solid #ec4899; } .card-edu { background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%); border-left: 6px solid #3b82f6; } .card-age { background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%); border-left: 6px solid #f59e0b; } .card-laws { background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%); border-left: 6px solid #ef4444; } /* Efeito decorativo de bolha nos cards */ .infographic-card::before { content: ''; position: absolute; top: -30%; right: -20%; width: 200px; height: 200px; border-radius: 50%; opacity: 0.06; pointer-events: none; } .card-evolution::before { background: radial-gradient(circle, #6366f1, transparent); } .card-race::before { background: radial-gradient(circle, #ec4899, transparent); } .card-edu::before { background: radial-gradient(circle, #3b82f6, transparent); } .card-age::before { background: radial-gradient(circle, #f59e0b, transparent); } .card-laws::before { background: radial-gradient(circle, #ef4444, transparent); } .data-header { font-weight: 800; line-height: 1; } .stat-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12); } .chart-container-wrapper { position: relative; height: 300px; width: 100%; margin: 20px 0; } .highlight-bar { height: 12px; border-radius: 9999px; background-color: #e2e8f0; overflow: hidden; margin-top: 8px; } .animated-bar { height: 100%; width: 0; transition: width 2s cubic-bezier(0.23, 1, 0.32, 1); } /* Badge decorativa */ .section-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 40px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } /* Estilos de Tabela */ table { width: 100%; border-collapse: collapse; table-layout: fixed; } th { text-align: left; padding: 10px 14px; background: #f8fafc; font-size: 0.95rem; color: #64748b; text-transform: uppercase; border-bottom: 2px solid #e2e8f0; } td { padding: 8px 14px; border-bottom: 1px solid #f1f5f9; font-size: 1.1rem; color: #1e293b; transition: background-color 0.3s ease; } .bg-total { background-color: #f1f1ff !important; font-weight: 800; color: #4f46e5; border-left: 1px solid #e2e8f0; } .text-center-val { text-align: center; } @media (max-width: 768px) { .container { padding: 0.75rem; } .infographic-card { padding: 1.25rem; } th { font-size: 0.85rem; padding: 8px; } td { font-size: 0.95rem; padding: 6px; } } </style> <div class="container"><!-- Cabeçalho Principal com tema escuro --><header class="text-center infographic-card card-header-main"> <div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full text-sm font-semibold mb-4"><i data-lucide="bar-chart-3" class="w-4 h-4"></i> <span>RELAT&Oacute;RIO OFICIAL 2020&ndash;2025</span></div> <h1 class="text-3xl sm:text-4xl font-black mb-3 tracking-tight">An&aacute;lise Socioeducativa Feminina (ES)</h1> <p class="text-white/70 text-lg mb-8 font-medium">S&eacute;rie Hist&oacute;rica Consolidada 2020 &mdash; 2025</p> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-white/10 rounded-2xl p-6 stat-card backdrop-blur-sm border border-white/20"> <p class="text-sm font-bold opacity-90 uppercase tracking-widest">Total de Entradas</p> <p class="data-header text-6xl mt-2" data-value="300">0</p> <p class="text-sm mt-2 opacity-80">Per&iacute;odo Acumulado</p> </div> <div class="bg-white/10 rounded-2xl p-6 stat-card backdrop-blur-sm border border-white/20"> <p class="text-sm font-bold opacity-90 uppercase tracking-widest">M&eacute;dia Anual</p> <p class="data-header text-6xl mt-2" data-value="50">0</p> <p class="text-sm mt-2 opacity-80">Entradas / Ano</p> </div> <div class="bg-white/10 rounded-2xl p-6 stat-card backdrop-blur-sm border border-white/20"> <p class="text-sm font-bold opacity-90 uppercase tracking-widest">Idade Cr&iacute;tica</p> <p class="data-header text-6xl mt-2" data-value="16" data-suffix=" anos">0</p> <p class="text-sm mt-2 opacity-80">Maior Incid&ecirc;ncia</p> </div> </div> </header><!-- 1. Evolução das Entradas Anuais --> <section class="infographic-card card-evolution"> <div class="section-badge bg-indigo-100 text-indigo-700"><i data-lucide="trending-up" class="w-3.5 h-3.5"></i> <span>Evolu&ccedil;&atilde;o Temporal</span></div> <h2 class="text-xl font-bold text-slate-800 mb-6 flex items-center gap-2"><i data-lucide="line-chart" class="text-indigo-500 w-5 h-5"></i> 1. Evolu&ccedil;&atilde;o das Entradas Anuais</h2> <div class="chart-container-wrapper"><canvas id="trendChart"></canvas></div> </section> <!-- 2. Perfil por Cor/Raça --> <section class="infographic-card card-race"> <div class="section-badge bg-pink-100 text-pink-700"><i data-lucide="users" class="w-3.5 h-3.5"></i> <span>Diversidade &Eacute;tnica</span></div> <h2 class="text-xl font-bold text-slate-800 mb-6 flex items-center gap-2"><i data-lucide="users" class="text-pink-500 w-5 h-5"></i> 2. Perfil por Cor/Ra&ccedil;a (Acumulado 2020-2025)</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-10"> <div class="chart-container-wrapper" style="height: 250px;"><canvas id="raceChart"></canvas></div> <div class="space-y-4"> <div> <div class="flex justify-between items-center mb-1"><span class="font-bold text-slate-700">Parda</span> <span class="text-pink-600 font-black" data-value="63.0" data-suffix="%">0%</span></div> <div class="highlight-bar"> <div class="animated-bar bg-pink-500" data-width="63.0%"></div> </div> <p class="text-sm text-slate-500 mt-1 font-medium">189 Entradas acumuladas</p> </div> <div> <div class="flex justify-between items-center mb-1"><span class="font-bold text-slate-700">Preta</span> <span class="text-pink-600 font-black" data-value="28.0" data-suffix="%">0%</span></div> <div class="highlight-bar"> <div class="animated-bar bg-slate-700" data-width="28.0%"></div> </div> <p class="text-sm text-slate-500 mt-1 font-medium">84 Entradas acumuladas</p> </div> <div> <div class="flex justify-between items-center mb-1"><span class="font-bold text-slate-700">Branca</span> <span class="text-pink-600 font-black" data-value="8.7" data-suffix="%">0%</span></div> <div class="highlight-bar"> <div class="animated-bar bg-blue-400" data-width="8.7%"></div> </div> <p class="text-sm text-slate-500 mt-1 font-medium">26 Entradas acumuladas</p> </div> </div> </div> <div class="overflow-x-auto"> <h3 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-widest">Tabela de Cor/Ra&ccedil;a por Ano</h3> <table class="rounded-xl overflow-hidden border border-slate-100"> <thead> <tr> <th class="w-1/4">Cor / Ra&ccedil;a</th> <th class="text-center-val">2025</th> <th class="text-center-val">2024</th> <th class="text-center-val">2023</th> <th class="text-center-val">2022</th> <th class="text-center-val">2021</th> <th class="text-center-val">2020</th> <th class="bg-total text-center-val">Total</th> </tr> </thead> <tbody id="raceTableBody"></tbody> </table> </div> </section> <!-- 3. Escolaridade --> <section class="infographic-card card-edu"> <div class="section-badge bg-blue-100 text-blue-700"><i data-lucide="graduation-cap" class="w-3.5 h-3.5"></i> <span>N&iacute;vel Educacional</span></div> <h2 class="text-xl font-bold text-slate-800 mb-6 flex items-center gap-2"><i data-lucide="graduation-cap" class="text-blue-500 w-5 h-5"></i> 3. Escolaridade na Entrada (Acumulado 2020-2025)</h2> <div class="chart-container-wrapper" style="height: 350px;"><canvas id="eduChart"></canvas></div> <div class="mt-10 overflow-x-auto"> <h3 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-widest">Tabela de Escolaridade por Ano</h3> <table class="rounded-xl overflow-hidden border border-slate-100"> <thead> <tr> <th class="w-1/3 min-w-[180px]">Escolaridade</th> <th class="text-center-val">2025</th> <th class="text-center-val">2024</th> <th class="text-center-val">2023</th> <th class="text-center-val">2022</th> <th class="text-center-val">2021</th> <th class="text-center-val">2020</th> <th class="bg-total text-center-val">Total</th> </tr> </thead> <tbody id="eduTableBody"></tbody> </table> </div> </section> <!-- 4. Distribuição por Idade --> <section class="infographic-card card-age"> <div class="section-badge bg-amber-100 text-amber-700"><i data-lucide="calendar" class="w-3.5 h-3.5"></i> <span>Faixa Et&aacute;ria</span></div> <h2 class="text-xl font-bold text-slate-800 mb-6 flex items-center gap-2"><i data-lucide="calendar" class="text-amber-500 w-5 h-5"></i> 4. Distribui&ccedil;&atilde;o por Idade (Acumulado)</h2> <div class="chart-container-wrapper" style="height: 350px;"><canvas id="ageChart"></canvas></div> <div class="mt-10 overflow-x-auto"> <h3 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-widest">Tabela Completa de Idades por Ano</h3> <table class="rounded-xl overflow-hidden border border-slate-100"> <thead> <tr> <th class="w-1/4">Idade</th> <th class="text-center-val">2025</th> <th class="text-center-val">2024</th> <th class="text-center-val">2023</th> <th class="text-center-val">2022</th> <th class="text-center-val">2021</th> <th class="text-center-val">2020</th> <th class="bg-total text-center-val">Total</th> </tr> </thead> <tbody id="ageTableBody"></tbody> </table> </div> </section> <!-- 5. Ranking Geral de Atos Infracionais --> <section class="infographic-card card-laws"> <div class="section-badge bg-red-100 text-red-700"><i data-lucide="shield-alert" class="w-3.5 h-3.5"></i> <span>Tipifica&ccedil;&atilde;o Legal</span></div> <h2 class="text-xl font-bold text-slate-800 mb-1 flex items-center gap-2"><i data-lucide="shield-alert" class="text-red-500 w-5 h-5"></i> 5. Ranking Geral de Atos Infracionais</h2> <!-- LEGENDA ORIGINAL RESTAURADA --> <p class="text-base text-slate-500 mb-6 italic leading-relaxed"><strong>Atos Infracionais:</strong> Esta tabela considera a quantidade de leis aplicadas e n&atilde;o o n&uacute;mero de indiv&iacute;duos. Exemplo: Se um jovem ingressou por "Lei de Drogas" e "Crime contra a Pessoa", ele gerar&aacute; dois registros nesta estat&iacute;stica.</p> <div class="chart-container-wrapper" style="height: 550px;"><canvas id="lawChart"></canvas></div> <div class="mt-10 overflow-x-auto"> <h3 class="text-sm font-bold text-slate-400 uppercase mb-4 tracking-widest">Tabela Detalhada de Atos Infracionais</h3> <table class="rounded-xl overflow-hidden border border-slate-100"> <thead> <tr> <th class="w-1/3 min-w-[200px]">Lei / Ato Infracional</th> <th class="text-center-val">2025</th> <th class="text-center-val">2024</th> <th class="text-center-val">2023</th> <th class="text-center-val">2022</th> <th class="text-center-val">2021</th> <th class="text-center-val">2020</th> <th class="bg-total text-center-val">Total</th> </tr> </thead> <tbody id="lawsTableBody"></tbody> </table> </div> </section> <footer class="text-center text-slate-400 py-10"> <p class="text-base sm:text-lg font-medium">Dados consolidados do Sistema Socioeducativo &mdash; Esp&iacute;rito Santo (2020-2025)</p> </footer></div> <p> <script> document.addEventListener("DOMContentLoaded", () => { lucide.createIcons(); Chart.defaults.font.family = "'Inter', sans-serif"; Chart.defaults.color = '#94a3b8'; const getHeatColor = (val, max) => { if (val === 0) return 'transparent'; const intensity = 0.05 + (val / max) * 0.45; return `rgba(79, 70, 229, ${intensity})`; }; const populateTable = (containerId, dataArray) => { const tableBody = document.getElementById(containerId); let globalMax = 0; dataArray.forEach(item => { item.vals.forEach(v => { if (v > globalMax) globalMax = v; }); }); dataArray.forEach(item => { const row = document.createElement('tr'); let cellsHtml = `<td class="font-medium">${item.name}</td>`; item.vals.forEach(val => { const bgColor = getHeatColor(val, globalMax); const isHighValue = (val / globalMax) > 0.6; const textWeight = isHighValue ? 'font-bold' : 'font-normal'; cellsHtml += `<td class="text-center-val ${textWeight}" style="background-color: ${bgColor}" data-value="${val}">0</td>`; }); cellsHtml += `<td class="bg-total text-center-val" data-value="${item.total}">0</td>`; row.innerHTML = cellsHtml; tableBody.appendChild(row); }); }; // Dados ORIGINAIS - NENHUMA ALTERAÇÃO const raceData = [ { name: 'Parda', vals: [41, 42, 35, 23, 28, 20], total: 189 }, { name: 'Preta', vals: [20, 17, 6, 3, 20, 18], total: 84 }, { name: 'Branca', vals: [3, 6, 2, 1, 7, 7], total: 26 }, { name: 'Amarela', vals: [0, 0, 1, 0, 0, 0], total: 1 } ]; const eduData = [ { name: 'Ens. Fund. II', vals: [38, 43, 14, 16, 32, 25], total: 168 }, { name: 'Não Informado', vals: [10, 3, 18, 9, 5, 8], total: 53 }, { name: 'Ens. Médio', vals: [7, 10, 5, 2, 4, 1], total: 29 }, { name: 'EJA Fund', vals: [6, 3, 3, 0, 6, 5], total: 23 }, { name: 'Ens. Fund. I', vals: [3, 4, 2, 0, 7, 6], total: 22 }, { name: 'EJA Médio', vals: [0, 2, 2, 0, 1, 0], total: 5 } ]; const ageData = [ { name: '12 anos', vals: [0, 5, 2, 1, 0, 0], total: 8 }, { name: '13 anos', vals: [4, 5, 2, 2, 3, 3], total: 19 }, { name: '14 anos', vals: [10, 12, 4, 2, 8, 1], total: 37 }, { name: '15 anos', vals: [14, 10, 11, 7, 6, 4], total: 52 }, { name: '16 anos', vals: [11, 17, 13, 5, 15, 22], total: 83 }, { name: '17 anos', vals: [19, 12, 8, 4, 20, 9], total: 72 }, { name: '18 anos', vals: [2, 1, 1, 3, 1, 4], total: 12 }, { name: '19 anos', vals: [2, 2, 2, 1, 0, 2], total: 9 }, { name: '20 anos', vals: [2, 1, 1, 2, 2, 0], total: 8 } ]; const lawData = [ { name: 'Crimes Contra a Pessoa', vals: [28, 17, 8, 16, 39, 45], total: 153 }, { name: 'Crimes Contra o Patrimônio', vals: [14, 10, 9, 5, 17, 13], total: 68 }, { name: 'Lei Antidrogas', vals: [6, 16, 7, 3, 5, 7], total: 44 }, { name: 'Tent. Crimes Contra Pessoa', vals: [1, 1, 1, 0, 6, 16], total: 25 }, { name: 'Contra Administração Pública', vals: [2, 5, 2, 4, 4, 7], total: 24 }, { name: 'Concurso Material', vals: [0, 1, 3, 1, 2, 4], total: 11 }, { name: 'Estatuto do Desarmamento', vals: [0, 5, 0, 3, 1, 1], total: 10 }, { name: 'Concurso de Pessoas', vals: [0, 1, 0, 0, 2, 4], total: 7 }, { name: 'Contra Dignidade Sexual', vals: [0, 2, 1, 1, 1, 2], total: 7 }, { name: 'Contravenções Penais', vals: [1, 1, 1, 0, 1, 2], total: 6 }, { name: 'Concurso Formal', vals: [1, 0, 1, 0, 1, 1], total: 4 }, { name: 'Lei Maria da Penha', vals: [0, 0, 0, 1, 2, 1], total: 4 }, { name: 'Tent. Crimes Patrimônio', vals: [1, 2, 0, 0, 0, 1], total: 4 } ]; populateTable('raceTableBody', raceData); populateTable('eduTableBody', eduData); populateTable('ageTableBody', ageData); populateTable('lawsTableBody', lawData); new Chart(document.getElementById('trendChart'), { type: 'line', data: { labels: ['2020', '2021', '2022', '2023', '2024', '2025'], datasets: [{ data: [45, 55, 27, 44, 65, 64], borderColor: '#6366f1', backgroundColor: 'rgba(99, 102, 241, 0.1)', fill: true, tension: 0.4, pointRadius: 5, pointBackgroundColor: '#fff', pointBorderWidth: 2 }] }, options: { maintainAspectRatio: false, animation: { duration: 2000, easing: 'easeOutQuart' }, plugins: { legend: { display: false } } } }); new Chart(document.getElementById('raceChart'), { type: 'doughnut', data: { labels: ['Parda (189)', 'Preta (84)', 'Branca (26)', 'Amarela (1)'], datasets: [{ data: [189, 84, 26, 1], backgroundColor: ['#ec4899', '#334155', '#60a5fa', '#fcd34d'], borderWidth: 0, hoverOffset: 15 }] }, options: { maintainAspectRatio: false, animation: { animateRotate: true, animateScale: true, duration: 2000 }, plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, padding: 15 } } }, cutout: '65%' } }); new Chart(document.getElementById('eduChart'), { type: 'bar', data: { labels: eduData.map(e => e.name), datasets: [{ data: eduData.map(e => e.total), backgroundColor: '#3b82f6', borderRadius: 5 }] }, options: { indexAxis: 'y', maintainAspectRatio: false, animation: { duration: 2000 }, plugins: { legend: { display: false } } } }); new Chart(document.getElementById('ageChart'), { type: 'bar', data: { labels: ['12', '13', '14', '15', '16', '17', '18', '19', '20'], datasets: [{ data: [8, 19, 37, 52, 83, 72, 12, 9, 8], backgroundColor: '#f59e0b', borderRadius: 8 }] }, options: { maintainAspectRatio: false, animation: { duration: 2000 }, plugins: { legend: { display: false } } } }); new Chart(document.getElementById('lawChart'), { type: 'bar', data: { labels: lawData.map(l => l.name), datasets: [{ data: lawData.map(l => l.total), backgroundColor: '#ef4444', borderRadius: 5 }] }, options: { indexAxis: 'y', maintainAspectRatio: false, animation: { duration: 2000 }, plugins: { legend: { display: false } } } }); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const card = entry.target; card.classList.add('is-visible'); card.querySelectorAll('[data-value]').forEach(num => animateCountUp(num)); card.querySelectorAll('.animated-bar').forEach(bar => bar.style.width = bar.dataset.width); const canvas = card.querySelector('canvas'); if (canvas) { const chart = Chart.getChart(canvas); if (chart) chart.update(); } } }); }, { threshold: 0.1 }); document.querySelectorAll('.infographic-card').forEach(card => observer.observe(card)); function animateCountUp(el) { if (el.dataset.animated) return; el.dataset.animated = "true"; const target = parseFloat(el.dataset.value); const suffix = el.dataset.suffix || ''; let start = null; const duration = 2000; function step(timestamp) { if (!start) start = timestamp; const progress = Math.min((timestamp - start) / duration, 1); const easeProgress = 1 - Math.pow(1 - progress, 3); const current = easeProgress * target; el.textContent = (target % 1 === 0 ? Math.floor(current) : current.toFixed(1)) + suffix; if (progress < 1) requestAnimationFrame(step); else el.textContent = target + suffix; } requestAnimationFrame(step); } }); </script> </p>Wed, 15 Apr 2026 14:12:00 GMThttps://observatorio.iases.es.gov.br:443/analisefemhttps://observatorio.iases.es.gov.br:443/escolaridade/2025<p></p> <!-- Tailwind CSS --> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <!-- Lucide Icons --> <p> <script src="https://unpkg.com/lucide@latest"></script> </p> <!-- Google Fonts: Inter --> <p></p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap'); * { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f1f5f9 0%, #e6edf5 100%); color: #475569; margin: 0; padding: 0; min-height: 100vh; font-size: 1.2em; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; } .chart-container, .visual-card-container { background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); padding: 1.75rem; transition: all 0.3s ease; border: 1px solid #e2e8f0; position: relative; } .chart-container:hover, .visual-card-container:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } h1 { font-size: 2.4rem; font-weight: 800; color: #1e293b; } h3 { font-size: 1.8rem; font-weight: 700; color: #1e293b; } .age-bar-wrapper { flex: 1; display: flex; flex-direction: column; align-items: center; max-width: 5rem; } .age-bar { width: 100%; max-width: 3.5rem; transition: height 1s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.5s ease; border-top-left-radius: 0.6rem; border-top-right-radius: 0.6rem; height: 0; will-change: height; } .progress-bar { height: 24px; background-color: #f1f5f9; border-radius: 12px; overflow: hidden; width: 100%; } .progress-fill { height: 100%; border-radius: 12px; width: 0; transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: width; } .school-item { cursor: pointer; padding: 0.5rem; border-radius: 0.75rem; transition: all 0.2s ease; } .school-item:hover { background: rgba(59, 130, 246, 0.05); } .school-item.active { background: rgba(59, 130, 246, 0.1); outline: 2px solid #3b82f6; } .texto-legenda { font-size: 0.86rem; font-weight: 600; } .category-label { font-size: 1.15rem; font-weight: 700; color: #1e293b; } .age-label { font-size: 1.35rem; font-weight: 800; color: #64748b; } .age-tooltip { font-size: 1.15rem; font-weight: 800; } </style> <div class="container space-y-8"><!-- HEADER --><header class="visual-card-container flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> <div> <h1 class="leading-tight flex items-center gap-3"><i data-lucide="bar-chart-3" class="text-indigo-600 shrink-0" style="width: 42px; height: 42px;"></i> Dashboard das Escolaridades de Entrada em 2025</h1> <p id="filter-status" class="text-slate-600 text-3xl mt-3 italic font-bold tracking-tight">Consolidado Geral de Entradas</p> </div> <div class="flex flex-col items-end shrink-0"><button onclick="resetFilter()" id="reset-btn" style="display: none;" class="mb-4 text-xl font-extrabold text-blue-600 hover:text-blue-800 transition-colors flex items-center gap-2"> <i data-lucide="refresh-cw" class="w-6 h-6"></i> Ver Tudo </button> <span class="text-slate-400 texto-legenda uppercase tracking-widest mb-1">Total de Jovens</span> <span id="stat-total" class="text-5xl font-extrabold text-slate-900 tracking-tighter">1.146</span></div> </header><main class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch"> <!-- COLUNA ESQUERDA --> <div class="lg:col-span-8 space-y-8 flex flex-col"><!-- TOP 10 ESCOLARIDADE (Topo) --> <section class="chart-container flex-grow"> <h3 class="mb-10 flex items-center gap-2"><i data-lucide="graduation-cap" class="text-blue-500 w-8 h-8"></i> Top 10 N&iacute;veis de Escolaridade (Clique para Filtrar)</h3> <div id="school-list" class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-12"><!-- Gerado via JS --></div> </section> <!-- PERFIL POR IDADE (Base) --> <section class="chart-container h-[500px] shrink-0"> <div class="flex items-center justify-between mb-10"> <h3 class="flex items-center gap-2"><i data-lucide="calendar" class="text-indigo-500 w-7 h-7"></i> Perfil por Idade</h3> <div class="text-right"><span id="age-peak" class="text-4xl font-black text-indigo-600 tracking-tighter">375</span> <p class="texto-legenda text-slate-400 uppercase tracking-tighter">Pico na Visualiza&ccedil;&atilde;o</p> </div> </div> <div id="age-chart" class="flex items-end justify-between h-[340px] gap-1 md:gap-2 mb-4 px-4"><!-- Gerado via JS --></div> </section> </div> <!-- COLUNA DIREITA --> <div class="lg:col-span-4 flex flex-col gap-8"><!-- GÊNERO --> <section class="visual-card-container shrink-0"> <h3 class="mb-6 flex items-center gap-2"><i data-lucide="users" class="text-emerald-500 w-7 h-7"></i>Sexo Atribu&iacute;do ao Nascer</h3> <div class="grid grid-cols-2 gap-4"> <div class="bg-indigo-50 p-6 rounded-2xl border border-white shadow-sm flex flex-col items-center text-center"><i data-lucide="user" class="text-indigo-600 mb-2" style="width: 32px; height: 32px;"></i> <span class="texto-legenda uppercase text-slate-400">Masculino</span> <span id="stat-masc" class="text-3xl font-black text-slate-900 my-1">1.082</span> <span id="perc-masc" class="category-label text-indigo-600">94.4%</span></div> <div class="bg-rose-50 p-6 rounded-2xl border border-white shadow-sm flex flex-col items-center text-center"><i data-lucide="user" class="text-rose-500 mb-2" style="width: 32px; height: 32px;"></i> <span class="texto-legenda uppercase text-slate-400">Feminino</span> <span id="stat-fem" class="text-3xl font-black text-slate-900 my-1">64</span> <span id="perc-fem" class="category-label text-rose-500">5.6%</span></div> </div> </section> <!-- COR / RAÇA --> <section class="visual-card-container shrink-0"> <h3 class="mb-8 flex items-center gap-2"><i data-lucide="palette" class="text-orange-500 w-6 h-6"></i> Cor/Ra&ccedil;a</h3> <div id="race-list" class="space-y-8"><!-- Gerado via JS --></div> </section> <!-- MOTIVOS DA APREENSÃO --> <section class="chart-container flex-grow flex flex-col"> <h3 class="mb-10 flex items-center gap-2"><i data-lucide="shield-alert" class="text-rose-500 w-6 h-6"></i> Motivos</h3> <div id="motives-list" class="flex-grow flex flex-col justify-between py-2 gap-8"><!-- Gerado via JS --></div> </section> </div> </main><footer class="mt-12 mb-8 text-center"> <div class="inline-flex items-center gap-4 bg-white px-8 py-4 rounded-[1.2rem] border border-slate-200 shadow-sm text-slate-600 transition-all hover:shadow-md"><i data-lucide="file-text" class="text-slate-400 w-5 h-5"></i> <span class="text-base font-black uppercase tracking-[0.25em]"> Base de Dados: Sistema Socioeducativo ES &bull; Refer&ecirc;ncia 2025 </span></div> </footer></div> <p> <script> // DADOS REAIS EXTRAÍDOS E CONFERIDOS const MASTER_DATA = { total: 1146, gender: { masc: 1082, fem: 64 }, race: [ { name: "Parda", val: 875, perc: 76.3, color: "#9a3412" }, { name: "Preta", val: 196, perc: 17.1, color: "#0f172a" }, { name: "Branca", val: 73, perc: 6.4, color: "#94a3b8" }, { name: "Amarela", val: 2, perc: 0.2, color: "#facc15" } ], motives: [ { name: "Mandado de Busca", val: 525, color: "#4f46e5" }, { name: "Flagrante", val: 488, color: "#e11d48" }, { name: "Recaptura", val: 116, color: "#d97706" }, { name: "Descumprimento MSE", val: 17, color: "#64748b" } ], // AJUSTADO: Removido 21 anos, ajustado 20 anos para 46 (Total 1146) ages: [ { age: 12, val: 5 }, { age: 13, val: 37 }, { age: 14, val: 74 }, { age: 15, val: 149 }, { age: 16, val: 235 }, { age: 17, val: 375 }, { age: 18, val: 148 }, { age: 19, val: 77 }, { age: 20, val: 46 } ], schooling: [ // 8º ano E.F (190) { name: "8º ano E.F", val: 190, ageData: {13:3, 14:18, 15:28, 16:38, 17:65, 18:26, 19:10, 20:2}, genderData: { masc: 183, fem: 7 }, raceData: { "Amarela": 2, "Branca": 10, "Preta": 33, "Parda": 145 }, motivesData: { "Mandado de Busca": 78, "Flagrante": 87, "Recaptura": 21, "Descumprimento MSE": 4 } }, // AJUSTADO: 7º ano E.F (189) - 20 anos = 5, sem 21 anos { name: "7º ano E.F", val: 189, ageData: {12:1, 13:9, 14:18, 15:35, 16:40, 17:55, 18:13, 19:13, 20:5}, genderData: { masc: 172, fem: 17 }, raceData: { "Amarela": 0, "Branca": 10, "Preta": 27, "Parda": 152 }, motivesData: { "Mandado de Busca": 91, "Flagrante": 79, "Recaptura": 16, "Descumprimento MSE": 3 } }, // 1ª Série E.M (150) { name: "1ª Série E.M", val: 150, ageData: {15:7, 16:34, 17:62, 18:33, 19:7, 20:7}, genderData: { masc: 146, fem: 4 }, raceData: { "Amarela": 0, "Branca": 12, "Preta": 25, "Parda": 113 }, motivesData: { "Mandado de Busca": 65, "Flagrante": 61, "Recaptura": 24, "Descumprimento MSE": 0 } }, // AJUSTADO: 6º ano E.F (137) - 20 anos = 3, sem 21 anos { name: "6º ano E.F", val: 137, ageData: {12:1, 13:12, 14:18, 15:24, 16:24, 17:36, 18:14, 19:5, 20:3}, genderData: { masc: 134, fem: 3 }, raceData: { "Amarela": 0, "Branca": 2, "Preta": 23, "Parda": 112 }, motivesData: { "Mandado de Busca": 67, "Flagrante": 59, "Recaptura": 9, "Descumprimento MSE": 2 } }, // 9º ano E.F (136) { name: "9º ano E.F", val: 136, ageData: {14:4, 15:20, 16:35, 17:43, 18:18, 19:9, 20:7}, genderData: { masc: 131, fem: 5 }, raceData: { "Amarela": 0, "Branca": 6, "Preta": 31, "Parda": 99 }, motivesData: { "Mandado de Busca": 61, "Flagrante": 62, "Recaptura": 12, "Descumprimento MSE": 1 } }, // 5º ano E.F (46) { name: "5º ano E.F", val: 46, ageData: {12:1, 13:7, 14:3, 15:5, 16:8, 17:12, 18:3, 19:6, 20:1}, genderData: { masc: 46, fem: 0 }, raceData: { "Amarela": 0, "Branca": 2, "Preta": 7, "Parda": 37 }, motivesData: { "Mandado de Busca": 23, "Flagrante": 19, "Recaptura": 4, "Descumprimento MSE": 0 } }, // AJUSTADO: 2ª Série E.M (40) - 20 anos = 3, sem 21 anos { name: "2ª Série E.M", val: 40, ageData: {16:6, 17:20, 18:4, 19:7, 20:3}, genderData: { masc: 38, fem: 2 }, raceData: { "Amarela": 0, "Branca": 2, "Preta": 7, "Parda": 31 }, motivesData: { "Mandado de Busca": 20, "Flagrante": 15, "Recaptura": 4, "Descumprimento MSE": 1 } }, // 4º ano E.F (26) { name: "4º ano E.F", val: 26, ageData: {12:1, 13:3, 14:4, 15:3, 16:1, 17:9, 18:3, 19:1, 20:1}, genderData: { masc: 26, fem: 0 }, raceData: { "Amarela": 0, "Branca": 0, "Preta": 1, "Parda": 25 }, motivesData: { "Mandado de Busca": 9, "Flagrante": 12, "Recaptura": 5, "Descumprimento MSE": 0 } }, // 8ª Etapa E.F. (EJA) (21) { name: "8ª Etapa E.F. (EJA)", val: 21, ageData: {15:1, 16:6, 17:3, 18:5, 19:4, 20:2}, genderData: { masc: 20, fem: 1 }, raceData: { "Amarela": 0, "Branca": 4, "Preta": 4, "Parda": 13 }, motivesData: { "Mandado de Busca": 10, "Flagrante": 8, "Recaptura": 3, "Descumprimento MSE": 0 } }, // 7ª Etapa E.F. (EJA) (17) { name: "7ª Etapa E.F. (EJA)", val: 17, ageData: {15:1, 16:3, 17:12, 18:1}, genderData: { masc: 17, fem: 0 }, raceData: { "Amarela": 0, "Branca": 0, "Preta": 0, "Parda": 17 }, motivesData: { "Mandado de Busca": 11, "Flagrante": 5, "Recaptura": 1, "Descumprimento MSE": 0 } } ] }; function getAgeBarColor(val, max) { if (max === 0) return 'bg-indigo-100'; const p = (val / max) * 100; if (p >= 90) return 'bg-indigo-900'; if (p >= 70) return 'bg-indigo-700'; if (p >= 50) return 'bg-indigo-600'; if (p >= 30) return 'bg-indigo-400'; if (p >= 15) return 'bg-indigo-300'; return 'bg-indigo-200'; } function getFilteredData(schoolName) { const school = MASTER_DATA.schooling.find(s => s.name === schoolName); if (!school) return MASTER_DATA; const total = school.val; const filteredAges = MASTER_DATA.ages.map(a => ({ ...a, val: school.ageData[a.age] || 0 })); return { total: total, gender: { masc: school.genderData.masc, fem: school.genderData.fem }, race: MASTER_DATA.race.map(r => ({ ...r, val: school.raceData[r.name] || 0 })), motives: MASTER_DATA.motives.map(m => ({ ...m, val: school.motivesData[m.name] || 0 })), ages: filteredAges }; } function renderDashboard(data, isFiltered = false) { const elTotal = document.getElementById('stat-total'); const elMasc = document.getElementById('stat-masc'); const elFem = document.getElementById('stat-fem'); const elPercMasc = document.getElementById('perc-masc'); const elPercFem = document.getElementById('perc-fem'); const elReset = document.getElementById('reset-btn'); const elAgeChart = document.getElementById('age-chart'); const elAgePeak = document.getElementById('age-peak'); const elRaceList = document.getElementById('race-list'); const elMotivesList = document.getElementById('motives-list'); if (elTotal) elTotal.innerText = data.total.toLocaleString('pt-BR'); if (elMasc) elMasc.innerText = data.gender.masc; if (elFem) elFem.innerText = data.gender.fem; if (elPercMasc) elPercMasc.innerText = ((data.gender.masc/data.total)*100).toFixed(1) + '%'; if (elPercFem) elPercFem.innerText = ((data.gender.fem/data.total)*100).toFixed(1) + '%'; if (elReset) elReset.style.display = isFiltered ? 'flex' : 'none'; if (elAgeChart) { const maxVal = Math.max(...data.ages.map(a => a.val)); if (elAgePeak) elAgePeak.innerText = maxVal > 0 ? maxVal : 0; elAgeChart.innerHTML = data.ages.map(a => ` <div class="age-bar-wrapper group relative h-full"> <div class="absolute -top-10 opacity-0 group-hover:opacity-100 bg-slate-900 text-white text-[0.86rem] px-3 py-1.5 rounded-md transition-all whitespace-nowrap z-10 pointer-events-none shadow-lg">${a.val} jovens</div> <div class="w-full flex items-end h-full"> <div class="age-bar ${maxVal > 0 ? getAgeBarColor(a.val, maxVal) : 'bg-indigo-100'} mx-auto" style="height: ${maxVal > 0 ? (a.val/maxVal)*100 : 0}%"></div> </div> <span class="age-label mt-4 ${maxVal > 0 && a.val === maxVal ? 'text-indigo-900 font-black' : ''}">${a.age}</span> </div> `).join(''); } if (elRaceList) { elRaceList.innerHTML = data.race.map(r => ` <div class="flex flex-col gap-2"> <div class="flex justify-between items-center category-label uppercase"> <span class="font-bold text-slate-800">${r.name}</span> <span class="font-black text-slate-900">${r.val} <span class="text-slate-500 texto-legenda font-bold ml-1">(${((r.val/data.total)*100).toFixed(1)}%)</span></span> </div> <div class="progress-bar"><div class="progress-fill" style="width: ${(r.val/data.total)*100}%; background-color: ${r.color}"></div></div> </div> `).join(''); } if (elMotivesList) { elMotivesList.innerHTML = data.motives.map(m => ` <div class="space-y-4"> <div class="flex justify-between items-center category-label uppercase text-slate-900"> <span class="font-bold">${m.name}</span> <span class="text-2xl font-black">${m.val}</span> </div> <div class="progress-bar"><div class="progress-fill" style="width: ${(m.val/data.total)*100}%; background-color: ${m.color}"></div></div> </div> `).join(''); } if (typeof lucide !== 'undefined') lucide.createIcons(); } function renderSchoolList() { const list = document.getElementById('school-list'); if (!list) return; const maxVal = Math.max(...MASTER_DATA.schooling.map(s => s.val)); list.innerHTML = MASTER_DATA.schooling.map(s => ` <div class="school-item space-y-3" onclick="applyFilter('${s.name}', this)"> <div class="flex justify-between items-center category-label uppercase"> <span>${s.name}</span> <span class="font-black text-slate-900">${s.val}</span> </div> <div class="progress-bar"><div class="progress-fill bg-blue-500" style="width: ${(s.val/maxVal)*100}%"></div></div> </div> `).join(''); } function applyFilter(name, el) { const items = document.querySelectorAll('.school-item'); items.forEach(i => i.classList.remove('active')); if (el) el.classList.add('active'); const elFilter = document.getElementById('filter-status'); if (elFilter) elFilter.innerHTML = `Filtrado por: ${name} <span class="text-lg font-medium opacity-80 block md:inline mt-2 md:mt-0 md:ml-3">(Use 'Ver Tudo' para limpar)</span>`; const filtered = getFilteredData(name); renderDashboard(filtered, true); } function resetFilter() { const items = document.querySelectorAll('.school-item'); items.forEach(i => i.classList.remove('active')); const elFilter = document.getElementById('filter-status'); if (elFilter) elFilter.innerText = "Consolidado Geral de Entradas"; renderDashboard(MASTER_DATA); } window.onload = () => { if (typeof lucide !== 'undefined') lucide.createIcons(); renderSchoolList(); renderDashboard(MASTER_DATA); }; </script> </p>Fri, 13 Mar 2026 14:22:00 GMThttps://observatorio.iases.es.gov.br:443/escolaridade/2025https://observatorio.iases.es.gov.br:443/Not%C3%ADcia/atendimentos-tecnicos-2025-estatisticas-gerais<p></p> <p> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f1f5f9 0%, #e6edf5 100%); color: #475569; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; font-size: 1.2em; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; } @media (max-width: 768px) { .container { padding: 1rem; } } .grid { gap: 1rem; } .chart-container, .kpi-card, .visual-card-container { background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); padding: 1.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #e2e8f0; position: relative; overflow: hidden; } @media (max-width: 768px) { .chart-container, .kpi-card, .visual-card-container { padding: 1rem; } } .chart-container::after, .kpi-card::after, .visual-card-container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3); } .chart-container:hover::after, .kpi-card:hover::after, .visual-card-container:hover::after { opacity: 1; } .chart-container:hover, .kpi-card:hover, .visual-card-container:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); } h1, h2 { color: #1e293b; } h1 { font-size: 2.4rem; font-weight: 800; } h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem !important; } .insight-text { color: #475569; font-size: 1.2rem; line-height: 1.6; } .kpi-card p.text-sm { font-size: 1.104rem; font-weight: 600; } .kpi-card p.text-2xl { font-size: 2.208rem; } .visual-card-container .text-2xl { font-size: 1.92rem; } .visual-card-container .text-sm { font-size: 1.2rem; font-weight: 700; } .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; } .delay-700 { animation-delay: 0.7s; } .delay-800 { animation-delay: 0.8s; } .delay-900 { animation-delay: 0.9s; } .chart-height { height: 320px !important; } @media (max-width: 768px) { .chart-height { height: 280px !important; } } canvas { display: block; max-width: 100%; height: auto !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)); } .counting { transition: all 0.5s ease-out; } .loading-complete::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #0ea5e9, #f59e0b); animation: loadingBar 1.5s ease-out; } @keyframes loadingBar { 0% { width: 0; opacity: 1; } 100% { width: 100%; opacity: 0; } } .export-btn { margin-top: 1rem; padding: 0.5rem 1rem; background-color: #0ea5e9; color: white; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.3s; border: none; cursor: pointer; } .export-btn:hover { background-color: #0284c7; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .peak-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background-color: #fef3c7; color: #92400e; margin-left: 0.5rem; } @media (prefers-color-scheme: dark) { body { background: linear-gradient(135deg, #0f172a 0%, #1a2538 100%); color: #cbd5e1; } .chart-container, .kpi-card { background: linear-gradient(135deg, #1e293b 0%, #263445 100%); border-color: #334155; } h1, h2 { color: #f1f5f9; } .insight-text { color: #94a3b8; } .kpi-card .text-sm, .kpi-card .text-2xl { color: #e2e8f0; } } </style> <div class="container"><header class="text-center mb-8 fade-in-up"> <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight">Dashboard de Atendimentos T&eacute;cnicos</h1> <p class="mt-1 text-lg insight-text">IASES - An&aacute;lise Consolidada de 2025</p> <div class="flex justify-center mt-4"><button class="export-btn" id="exportBtn"> <svg fill="none" stroke="currentColor" viewbox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path> </svg> Exportar PDF </button></div> </header> <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="kpi-card flex items-center p-3 fade-in-up delay-100"> <div class="bg-sky-100 text-sky-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path> </svg></div> <div> <p class="text-sm font-medium">Total de Atendimentos</p> <p id="totalAtendimentos" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-200"> <div class="bg-amber-100 text-amber-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg></div> <div> <p class="text-sm font-medium">Total de Horas</p> <p id="totalHoras" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-300"> <div class="bg-green-100 text-green-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path> </svg></div> <div> <p class="text-sm font-medium">M&eacute;dia Mensal</p> <p id="mediaMensal" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-400"> <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> </svg></div> <div> <p class="text-sm font-medium">M&ecirc;s de Pico</p> <p id="mesPico" class="text-2xl font-bold">-</p> </div> </div> </div> <div class="space-y-6"> <div class="chart-container fade-in-up delay-500"> <h2 class="text-2xl font-semibold mb-4 text-center">Evolu&ccedil;&atilde;o Mensal de Atendimentos e Horas</h2> <p class="text-base text-center mb-6 insight-text">Julho registrou o pico m&aacute;ximo do ano tanto em volume de atendimentos (6.255) quanto em horas dedicadas (14.995).</p> <canvas id="mensalChart" class="chart-height"></canvas></div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div class="chart-container fade-in-up delay-600"> <h2 class="text-2xl font-semibold mb-4 text-center">P&uacute;blico-Alvo do Atendimento</h2> <p class="text-base text-center mb-6 insight-text">O atendimento direto ao adolescente permanece como o eixo central, abrangendo 77% das demandas.</p> <canvas id="publicoAlvoChart" class="chart-height"></canvas></div> <div class="chart-container fade-in-up delay-700"> <h2 class="text-2xl font-semibold mb-4 text-center">Principais Tipos de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">A categoria "Acompanhamento" &eacute; o servi&ccedil;o mais recorrente, com volume substancialmente superior &agrave;s demais a&ccedil;&otilde;es.</p> <canvas id="tipoAtendimentoChart" class="chart-height"></canvas></div> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> <div class="chart-container fade-in-up delay-800"> <h2 class="text-2xl font-semibold mb-4 text-center">Forma de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">A modalidade presencial prevalece amplamente, representando 77% do total de atendimentos realizados.</p> <canvas id="formaAtendimentoChart" class="chart-height"></canvas></div> <div class="chart-container fade-in-up delay-900"> <h2 class="text-2xl font-semibold mb-4 text-center">Tipo de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">Os atendimentos individuais s&atilde;o o padr&atilde;o de atua&ccedil;&atilde;o t&eacute;cnica, correspondendo a 92% do total.</p> <canvas id="tipoAtendimentoGeralChart" class="chart-height"></canvas></div> </div> </div> </div> <p> <script> const dataAtendimentosMensal = [4952, 4939, 4570, 4914, 4430, 4902, 6255, 5506, 6147, 6107, 5052, 5138]; const dataHorasMensal = [10664, 9184, 7757, 10834, 6992, 9454, 14995, 11383, 13662, 9945, 7169, 8014]; const labelsMeses = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']; const dataPublicoAlvo = [48209, 6280, 5310, 1450, 870, 716, 77]; const labelsPublicoAlvo = ['Adolescente', 'Adolescente e Família', 'Família', 'Público Externo', 'Adol., Família e P. Ext.', 'Adol. e P. Externo', 'Família e P. Externo']; const dataTipoAtendimento = [36074, 3904, 3492, 2094, 3375, 1562, 947]; const dataFormaAtendimento = [48376, 14536]; const labelsFormaAtendimento = ['Presencial', 'Não Presencial']; const dataTipoAtendimentoGeral = [57803, 5109]; const labelsTipoAtendimentoGeral = ['Individual', 'Grupo']; function animateNumberImproved(element, finalValue, duration = 2000, isPercentage = false) { const startTime = performance.now(); function update(currentTime) { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); const current = finalValue * eased; if (isPercentage) { element.textContent = current.toFixed(1) + '%'; } else { element.textContent = Math.floor(current).toLocaleString('pt-BR'); } if (progress < 1) requestAnimationFrame(update); } requestAnimationFrame(update); } function animateChart(chart, duration = 1000) { const originalData = chart.data.datasets[0].data; chart.data.datasets[0].data = originalData.map(() => 0); chart.update(); let startTime = null; function animate(timestamp) { if (!startTime) startTime = timestamp; let progress = Math.min((timestamp - startTime) / duration, 1); let easedProgress = 1 - Math.pow(1 - progress, 3); chart.data.datasets[0].data = originalData.map(value => value * easedProgress); chart.update(); if (progress < 1) requestAnimationFrame(animate); } requestAnimationFrame(animate); } function addCustomTooltips() { const chartsIds = ['publicoAlvoChart', 'tipoAtendimentoChart', 'formaAtendimentoChart', 'tipoAtendimentoGeralChart']; chartsIds.forEach(chartId => { const canvas = document.getElementById(chartId); if (canvas) { const chart = Chart.getChart(canvas); if (chart) { chart.options.plugins.tooltip = { enabled: true, backgroundColor: '#1e293b', titleColor: '#f8fafc', bodyColor: '#cbd5e1', borderColor: '#0ea5e9', borderWidth: 2, cornerRadius: 8, padding: 12, callbacks: { label: (context) => { const value = context.raw; const total = context.dataset.data.reduce((a, b) => a + b, 0); const percent = ((value / total) * 100).toFixed(1); return `Valor: ${value.toLocaleString('pt-BR')} (${percent}%)`; } } }; chart.update(); } } }); } function highlightPeakMonth() { const peakElement = document.getElementById('mesPico'); const peakMonth = peakElement.textContent; peakElement.innerHTML = `${peakMonth} <span class="peak-badge">Pico</span>`; const peakIndex = labelsMeses.indexOf(peakMonth); if (peakIndex !== -1 && mensalChart) { mensalChart.data.datasets[0].backgroundColor = dataAtendimentosMensal.map((_, i) => i === peakIndex ? '#f59e0b' : '#0ea5e9' ); mensalChart.update(); } } const totalAtendimentos = 62912; const totalHoras = 120053; const mediaMensal = Math.round(totalAtendimentos / 12); const maxAtendimentos = Math.max(...dataAtendimentosMensal); const mesPicoIndex = dataAtendimentosMensal.indexOf(maxAtendimentos); setTimeout(() => { animateNumberImproved(document.getElementById('totalAtendimentos'), totalAtendimentos); animateNumberImproved(document.getElementById('totalHoras'), totalHoras); animateNumberImproved(document.getElementById('mediaMensal'), mediaMensal); document.getElementById('mesPico').textContent = labelsMeses[mesPicoIndex]; }, 500); Chart.defaults.plugins.legend.position = 'bottom'; Chart.defaults.plugins.legend.labels.usePointStyle = true; Chart.defaults.font.size = 14; const charts = []; const mensalChart = new Chart(document.getElementById('mensalChart'), { type: 'bar', data: { labels: labelsMeses, datasets: [ { type: 'bar', label: 'Total Atendimentos', data: dataAtendimentosMensal, backgroundColor: '#0ea5e9', yAxisID: 'y', order: 2 }, { type: 'line', label: 'Horas Atendimento', data: dataHorasMensal, borderColor: '#f59e0b', backgroundColor: 'rgba(245, 158, 11, 0.1)', tension: 0.3, fill: true, yAxisID: 'y1', order: 1 } ] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { position: 'left' }, y1: { position: 'right', grid: { drawOnChartArea: false } } } } }); charts.push(mensalChart); const publicoAlvoChart = new Chart(document.getElementById('publicoAlvoChart'), { type: 'bar', plugins: [ChartDataLabels], data: { labels: labelsPublicoAlvo, datasets: [{ data: dataPublicoAlvo, backgroundColor: '#14b8a6', borderRadius: 4 }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, layout: { padding: { right: 90 } }, plugins: { legend: { display: false }, datalabels: { anchor: 'end', align: 'end', color: '#475569', font: { weight: '600' }, formatter: (v) => v.toLocaleString('pt-BR') } }, scales: { x: { ticks: { display: false }, grid: { display: false } }, y: { grid: { display: false } } } } }); charts.push(publicoAlvoChart); const tipoAtendimentoChart = new Chart(document.getElementById('tipoAtendimentoChart'), { type: 'bar', plugins: [ChartDataLabels], data: { labels: ['Acompanhamento', 'Ações Acolhimento', 'Ligação Assistida', 'Acomp. P/Avaliações', 'Instrumentos Técnicos', 'Intervenções Socioed.', 'Ações de Grupos'], datasets: [{ data: dataTipoAtendimento, backgroundColor: '#3b82f6', borderRadius: 4 }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, layout: { padding: { right: 80 } }, plugins: { legend: { display: false }, datalabels: { anchor: 'end', align: 'end', color: '#475569', font: { weight: '600' }, formatter: (v) => v.toLocaleString('pt-BR') } }, scales: { x: { ticks: { display: false }, grid: { display: false } }, y: { grid: { display: false } } } } }); charts.push(tipoAtendimentoChart); const formaAtendimentoChart = new Chart(document.getElementById('formaAtendimentoChart'), { type: 'pie', plugins: [ChartDataLabels], data: { labels: labelsFormaAtendimento, datasets: [{ data: dataFormaAtendimento, backgroundColor: ['#10b981', '#3b82f6'] }] }, options: { responsive: true, maintainAspectRatio: false } }); charts.push(formaAtendimentoChart); const tipoAtendimentoGeralChart = new Chart(document.getElementById('tipoAtendimentoGeralChart'), { type: 'doughnut', plugins: [ChartDataLabels], data: { labels: labelsTipoAtendimentoGeral, datasets: [{ data: dataTipoAtendimentoGeral, backgroundColor: ['#8b5cf6', '#f59e0b'] }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '60%' } }); charts.push(tipoAtendimentoGeralChart); setTimeout(() => { charts.forEach(c => animateChart(c)); addCustomTooltips(); highlightPeakMonth(); document.getElementById('exportBtn').addEventListener('click', () => window.print()); document.querySelectorAll('.chart-container, .kpi-card').forEach(el => el.classList.add('loading-complete')); }, 1500); </script> </p>Thu, 12 Mar 2026 13:59:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/atendimentos-tecnicos-2025-estatisticas-geraishttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/relatorio-de-visitas-familiares-2024<p></p> <!-- Carrega Tailwind CSS para estilização rápida e responsiva --> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <!-- Carrega a biblioteca Lucide para ícones vetoriais --> <p> <script src="https://unpkg.com/lucide@latest"></script> </p> <!-- Carrega html2canvas para exportação --> <p> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> </p> <!-- Carrega Chart.js e plugin Datalabels --> <p> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); /* CORREÇÃO DE SCROLLBAR AGRESSIVA */ html { overflow-x: hidden; } * { box-sizing: border-box; } /* 3. Garante box-sizing em todos os elementos e pseudo-elementos */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; max-width: 100vw; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; overflow: hidden; } .chart-card { background-color: white; border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } @media (min-width: 768px) { .chart-card { padding: 2rem; } } .chart-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .kpi-value { font-size: 3rem; font-weight: 800; } @media (min-width: 768px) { .kpi-value { font-size: 3.5rem; } } .section-title { font-size: 1.75rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem; text-align: center; } @media (min-width: 768px) { .section-title { font-size: 2rem; } } /* Animações de entrada */ .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } /* Container de gráficos com altura fixa (para gráfico de barras) */ .chart-container { width: 100%; position: relative; } .chart-wrapper { width: 100%; height: 600px; position: relative; overflow: hidden; } .chart-wrapper-sm { width: 100%; height: 350px; position: relative; overflow: hidden; } /* Correção para gráficos não esticarem */ .chart-container canvas { width: 100% !important; height: 100% !important; } /* Badge para percentuais */ .percentage-badge { background: rgba(255, 255, 255, 0.2); padding: 2px 8px; border-radius: 12px; font-size: 0.86rem; font-weight: 600; } /* TEXTOS AUMENTADOS */ .texto-destaque { font-size: 1.15rem; } .texto-card { font-size: 1.04rem; } .texto-legenda { font-size: 1.32rem; } .observacao-texto { font-size: 1.2rem; line-height: 1.6; } .detail-card ul, .detail-card p { font-size: 1rem; } /* Cards de detalhes */ .detail-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border-left: 4px solid; } .detail-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Responsividade melhorada */ @media (max-width: 768px) { .container { padding: 1rem; } .chart-card { padding: 1rem; } .kpi-value { font-size: 2.5rem; } .section-title { font-size: 1.5rem; } .chart-wrapper { height: 450px; } .chart-wrapper-sm { height: 300px; } .texto-destaque { font-size: 1.04rem; } .texto-card { font-size: 0.92rem; } .texto-legenda { font-size: 1.18rem; } .observacao-texto { font-size: 1.08rem; } .detail-card ul, .detail-card p { font-size: 0.98rem; } } @media (max-width: 640px) { .chart-wrapper { height: 400px; } .chart-wrapper-sm { height: 250px; } } /* Estilo para botão de exportação fixo */ .export-btn { position: fixed; bottom: 1rem; right: 1rem; z-index: 50; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Cores personalizadas para os cards */ .card-primary { background: linear-gradient(135deg, #059669 0%, #047857 100%); color: white; } .card-secondary { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; } .card-accent { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); color: white; } /* ===== ESTILOS PARA PRINCIPAIS VISITANTES ===== */ /* Grid de Principais Visitantes */ .principais-visitantes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; padding: 1rem; } .visitante-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.05); opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } .visitante-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); } .icon-container { position: relative; transition: transform 0.3s ease; margin: 0 auto 1rem; } .visitante-card:hover .icon-container { transform: scale(1.05); } /* Barra de progresso */ .progress-bar { height: 6px; background-color: #e5e7eb; border-radius: 3px; overflow: hidden; margin-top: 0.5rem; } .progress-fill { height: 100%; border-radius: 3px; transition: width 1.5s ease-out; } /* Total Geral */ .total-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } /* Cards de tipo de família */ .family-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; } .family-type-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: all 0.3s ease; border-top: 4px solid; } .family-type-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } /* Responsividade para os visitantes */ @media (max-width: 1024px) { .principais-visitantes-grid { grid-template-columns: repeat(3, 1fr); } .family-type-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .principais-visitantes-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 0.5rem; } .visitante-card { padding: 1.2rem; } .family-type-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .principais-visitantes-grid { grid-template-columns: 1fr; } } /* Animações */ @keyframes growBar { from { width: 0%; } to { width: var(--target-width); } } /* Estilo específico para o gráfico de unidades */ #unitChart { font-family: 'Inter', sans-serif; } /* Animação de contagem */ .count-up { display: inline-block; } </style> <div class="container"><!-- Header e Métricas Chave --><header class="text-center mb-12 fade-in-up"> <h1 class="text-4xl md:text-5xl font-extrabold text-slate-800 tracking-tight"><i data-lucide="bar-chart-3" class="inline-block w-8 h-8 text-blue-500"></i> Relat&oacute;rio de Visitas Familiares nas Unidades Socioeducativas (2024)</h1> <!-- NOVO TEXTO ADICIONADO AQUI (COM LARGURA TOTAL) --> <div class="mt-4 w-full bg-blue-50 border border-blue-200 rounded-lg p-4"> <p class="text-blue-800 text-center italic text-base md:text-lg leading-relaxed">"Com o objetivo de assegurar a conviv&ecirc;ncia familiar e comunit&aacute;ria, as Equipes T&eacute;cnica, de Seguran&ccedil;a e a Gest&atilde;o das Unidades Socioeducativas validam e autorizam previamente as visitas aos adolescentes/jovens em cumprimento de Programa/Medida Socioeducativa."</p> </div> <!-- Key Metrics Dashboard --> <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"><!-- Métrica 1: Total Geral --> <div class="chart-card card-secondary p-6 rounded-lg shadow-md flex flex-col items-center"><i data-lucide="users" class="w-6 h-6 mb-2"></i> <span class="text-xs uppercase font-medium">Total Geral de Visitas</span> <span class="kpi-value count-up" data-target="20121">0</span></div> <!-- Métrica 2: Mãe (Destaque) --> <div class="chart-card card-primary p-6 rounded-lg shadow-md flex flex-col items-center"><i data-lucide="heart" class="w-6 h-6 mb-2"></i> <span class="text-xs uppercase font-medium">Foco Principal: A M&atilde;e</span> <span class="kpi-value count-up" data-target="42" data-suffix="%">0%</span></div> <!-- Métrica 3: Família Biológica --> <div class="chart-card card-accent p-6 rounded-lg shadow-md flex flex-col items-center"><i data-lucide="home" class="w-6 h-6 mb-2"></i> <span class="text-xs uppercase font-medium">Fam&iacute;lia Biol&oacute;gica</span> <span class="kpi-value count-up" data-target="73" data-suffix="%">0%</span></div> </div> </header><!-- Layout principal --> <main role="main" aria-label="Relat&oacute;rio de visitas socioeducativas" class="grid grid-cols-1 gap-8"> <!-- Gráfico 1: Distribuição Mensal (Linha) --> <section aria-labelledby="monthly-chart-title" class="chart-card fade-in-up"> <h2 id="monthly-chart-title" class="section-title"><i data-lucide="calendar" aria-hidden="true"></i> 1. Distribui&ccedil;&atilde;o Mensal de Visitas</h2> <div class="chart-container"> <div class="chart-wrapper-sm"><canvas id="monthlyChart"></canvas></div> </div> <div class="mt-4 text-center text-gray-600"> <p class="text-sm">Distribui&ccedil;&atilde;o equilibrada ao longo do ano, com picos em Mar&ccedil;o, Junho, Setembro e Dezembro</p> </div> </section> <!-- Seção 2: Tipo de Família --> <section aria-labelledby="family-type-title" class="chart-card fade-in-up delay-100"> <h2 id="family-type-title" class="section-title"><i data-lucide="award" aria-hidden="true"></i> 2. Destaque: Categorias de V&iacute;nculo Familiar</h2> <div id="familyTypeKPIDisplay" class="mt-8"><!-- Conteúdo gerado via JavaScript --></div> <!-- BLOCO: Análise do Vínculo Familiar --> <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mt-6"> <h3 class="text-lg font-bold text-blue-800 flex items-center mb-2"><i data-lucide="lightbulb" class="w-5 h-5 mr-2 text-blue-500"></i> An&aacute;lise do V&iacute;nculo Familiar</h3> <ul class="list-disc list-inside text-gray-700 space-y-2 observacao-texto ml-4"> <li><span class="font-semibold text-green-600">Preponder&acirc;ncia da Fam&iacute;lia Biol&oacute;gica:</span> As visitas da fam&iacute;lia biol&oacute;gica (Pai, M&atilde;e, Irm&atilde;os e Filhos) representam <strong>73%</strong> (14.721 visitas) do total. Este alto &iacute;ndice confirma o foco principal de manuten&ccedil;&atilde;o do v&iacute;nculo com os parentes de primeiro grau.</li> <li><span class="font-semibold text-green-600">Importante Suporte da Fam&iacute;lia Extensa:</span> A Fam&iacute;lia Extensa (Av&oacute;s, Tios, Sobrinhos, Primos) contribui com <strong>16%</strong> (3.319 visitas), demonstrando uma rede de apoio familiar ampliada.</li> <li><span class="font-semibold text-green-600">V&iacute;nculos Afetivos:</span> Namorados/Companheiros representam <strong>6%</strong> (1.307 visitas), indicando a manuten&ccedil;&atilde;o de relacionamentos afetivos durante a interna&ccedil;&atilde;o.</li> <li><span class="font-semibold text-green-600">Outras Rela&ccedil;&otilde;es:</span> Outros v&iacute;nculos (incluindo sogros, cunhados, padrinhos) somam <strong>4%</strong> (756 visitas), enquanto amigos representam menos de 0,1% (18 visitas).</li> </ul> </div> </section> <!-- Seção 3: Principais Visitantes (Infográfico Moderno) --> <section aria-labelledby="parentesco-chart-title" class="chart-card fade-in-up delay-200"> <h2 id="parentesco-chart-title" class="section-title"><i data-lucide="handshake" aria-hidden="true"></i> 3. Principais Visitantes</h2> <!-- Container para o infográfico --> <div id="parentescoChart" class="chart-container mt-4"><!-- Conteúdo será gerado pelo JavaScript --></div> <!-- BLOCO: Observações Chave --> <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mt-6"> <h3 class="text-lg font-bold text-blue-800 flex items-center mb-2"><i data-lucide="lightbulb" class="w-5 h-5 mr-2 text-blue-500"></i> Observa&ccedil;&otilde;es Chave sobre os Visitantes</h3> <ul class="list-disc list-inside text-gray-700 space-y-2 observacao-texto ml-4"> <li><span class="font-semibold text-green-600">Domin&acirc;ncia Materna:</span> A M&atilde;e &eacute;, de longe, o principal contato, representando <strong>42%</strong> de todas as visitas (8.365 visitas). Este dado refor&ccedil;a o papel central da figura materna no suporte emocional.</li> <li><span class="font-semibold text-green-600">N&uacute;cleo Familiar Imediato:</span> M&atilde;e, Pai e Irm&atilde;os/Irm&atilde;s juntos representam <strong>71%</strong> das visitas (14.222 visitas). Isso indica que a maior parte do apoio &eacute; provida pelos membros mais pr&oacute;ximos da fam&iacute;lia.</li> <li><span class="font-semibold text-green-600">Import&acirc;ncia da Fam&iacute;lia Extensa:</span> Av&oacute;s e Tios/Tias representam <strong>13%</strong> das visitas (2.583 visitas), desempenhando um papel significativo na rede de apoio familiar.</li> <li><span class="font-semibold text-green-600">Outros Visitantes:</span> Os 9 principais visitantes listados representam <strong>95%</strong> do total (19.197 visitas). Os demais parentescos menores somam <strong>5%</strong> (924 visitas).</li> </ul> </div> </section> <!-- Gráfico 4: Visitas por Unidade Socioeducativa --> <section aria-labelledby="unit-chart-title" class="chart-card fade-in-up delay-300"> <h2 id="unit-chart-title" class="section-title"><i data-lucide="building" aria-hidden="true"></i> 4. Distribui&ccedil;&atilde;o por Unidade</h2> <div class="chart-container"> <div class="chart-wrapper"><canvas id="unitChart"></canvas></div> </div> <!-- BLOCO: Análise Contextual ATUALIZADA --> <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded-lg mt-6"> <h3 class="text-lg font-bold text-yellow-800 flex items-center mb-2"><i data-lucide="map-pin" class="w-5 h-5 mr-2 text-yellow-500"></i> An&aacute;lise da Distribui&ccedil;&atilde;o por Unidade</h3> <ul class="list-disc list-inside text-gray-700 space-y-2 observacao-texto ml-4"> <li><span class="font-semibold text-green-600">Unidades de Interna&ccedil;&atilde;o (Maior Incid&ecirc;ncia):</span> As unidades com maior concentra&ccedil;&atilde;o de visitas (METROPOLITANA, UNIS/CACHOEIRO, UNIS, UNIP I, CSE e UNIS/LINHARES) s&atilde;o tipicamente Unidades de Cumprimento de Medida Socioeducativa de Interna&ccedil;&atilde;o. O maior volume &eacute; esperado devido &agrave; natureza prolongada da medida, que requer a manuten&ccedil;&atilde;o do v&iacute;nculo por um per&iacute;odo mais longo.</li> <li><span class="font-semibold text-green-600">Unidades de Interna&ccedil;&atilde;o Provis&oacute;ria e Feminina (Menor Volume/Alta Rotatividade):</span> Unidades de Interna&ccedil;&atilde;o Provis&oacute;ria (UNIP II, UNIP/CACHOEIRO e UNIP/LINHARES) apresentam incid&ecirc;ncia de visitas menor devido &agrave; alta rotatividade e tempo de perman&ecirc;ncia limitado (m&aacute;ximo de 45 dias). A Unidade Feminina de Interna&ccedil;&atilde;o (UFI), que atende o p&uacute;blico feminino (misto de Interna&ccedil;&atilde;o e Provis&oacute;ria), tamb&eacute;m demonstra baixa incid&ecirc;ncia em fun&ccedil;&atilde;o do menor n&uacute;mero de socioeducandas, comparado ao p&uacute;blico masculino.</li> <li><span class="font-semibold text-green-600">Semiliberdade (Diferencial na Conviv&ecirc;ncia):</span> As unidades SEMI (SEMI VILA VELHA e SEMI SERRA) possuem um volume menor de visitas presenciais. Na medida de Semiliberdade, o socioeducando tem a possibilidade de passar mais tempo com seus familiares fora da unidade, resultando em menos necessidade de visitas no ambiente socioeducativo.</li> <li><span class="font-semibold text-green-600">Atendimento Inicial (Fluxo R&aacute;pido):</span> A unidade CIASE, com apenas 3 visitas registradas, funciona como Unidade de Atendimento Inicial. Socioeducandos n&atilde;o permanecem por mais de 24 horas nesta unidade, explicando a incid&ecirc;ncia m&iacute;nima de visitas.</li> </ul> </div> </section> </main><footer class="mt-10 text-center text-sm text-gray-500 p-4">An&aacute;lise gerada com base no Relat&oacute;rio de Visitas Socioeducativas 2024. Total geral: <span class="count-up" data-target="20121">0</span> visitas.</footer></div> <p> <script> // Dados exatos conforme relatório PDF const data = { monthly: [ { month: "Janeiro", total: 1611, percentage: 8 }, { month: "Fevereiro", total: 1698, percentage: 8 }, { month: "Março", total: 1875, percentage: 9 }, { month: "Abril", total: 1680, percentage: 8 }, { month: "Maio", total: 1552, percentage: 8 }, { month: "Junho", total: 1831, percentage: 9 }, { month: "Julho", total: 1686, percentage: 8 }, { month: "Agosto", total: 1731, percentage: 9 }, { month: "Setembro", total: 1810, percentage: 9 }, { month: "Outubro", total: 1411, percentage: 7 }, { month: "Novembro", total: 1426, percentage: 7 }, { month: "Dezembro", total: 1810, percentage: 9 } ], // PRINCIPAIS VISITANTES (Top 9 do relatório) - VALORES ATUALIZADOS E ORDEM CORRIGIDA principaisVisitantes: [ { name: "Mãe", total: 8365, percentage: 42 }, { name: "Irmã/Irmão", total: 3608, percentage: 18 }, { name: "Pai", total: 2249, percentage: 11 }, { name: "Avós", total: 1780, percentage: 9 }, { name: "Namorada(o)/Companheira(o)", total: 1307, percentage: 6 }, { name: "Tios e Tias", total: 803, percentage: 4 }, { name: "Padrasto e Madastra", total: 506, percentage: 3 }, { name: "Filho/Filha", total: 499, percentage: 2 }, { name: "Sobrinhos", total: 469, percentage: 2 } ], // TIPO DE FAMÍLIA (valores atualizados conforme anexo) familyTypes: [ { name: "Biológica", description: "Pai/Mãe/Irmãos/Filhos(as)", total: 14721, percentage: 73, color: '#059669', icon: 'heart-handshake' }, { name: "Extensa", description: "Avós, Tios e Tias, Sobrinhos, Primos", total: 3319, percentage: 16, color: '#3b82f6', icon: 'family' }, { name: "Namorada(o)/Companheira(o)", total: 1307, percentage: 6, color: '#ec4899', icon: 'heart' }, { name: "Outros", description: "Outro(s), Sogra, Cunhado(a), Padrinho e Madrinha", total: 756, percentage: 4, color: '#f59e0b', icon: 'users' }, { name: "Amigos", total: 18, percentage: 0, color: '#6b7280', icon: 'user' } ], // UNIDADES (valores exatos do relatório) units: [ { name: "METROPOLITANA", total: 5023, percentage: 25 }, { name: "UNIS/CACHOEIRO", total: 2953, percentage: 15 }, { name: "UNIS", total: 2929, percentage: 15 }, { name: "UNIP I", total: 2527, percentage: 13 }, { name: "CSE", total: 2082, percentage: 10 }, { name: "UNIS/LINHARES", total: 1951, percentage: 10 }, { name: "UNIP II", total: 979, percentage: 5 }, { name: "UNIP/CACHOEIRO", total: 590, percentage: 3 }, { name: "UNIP/LINHARES", total: 474, percentage: 2 }, { name: "UFI", total: 278, percentage: 1 }, { name: "SEMI VILA VELHA", total: 194, percentage: 1 }, { name: "SEMI SERRA", total: 138, percentage: 1 }, { name: "CIASE", total: 3, percentage: 0 } ] }; const chartColors = [ '#059669', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#6366f1', '#06b6d4', '#14b8a6', '#a855f7' ]; // Função para animação de contagem function animateCount(element, target, duration = 2000, suffix = '') { const start = 0; const increment = target / (duration / 16); // 60fps let current = start; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } if (suffix === '%') { element.textContent = Math.floor(current) + suffix; } else { element.textContent = Math.floor(current).toLocaleString('pt-BR') + suffix; } }, 16); } // Função para animar todos os elementos com contagem function animateAllCounts() { const countElements = document.querySelectorAll('.count-up'); countElements.forEach(element => { const target = parseInt(element.getAttribute('data-target')); const suffix = element.getAttribute('data-suffix') || ''; animateCount(element, target, 2000, suffix); }); } // Função para obter ícone baseado no visitante function getIconForVisitante(name) { const icons = { 'Mãe': 'heart', 'Pai': 'user', 'Irmã/Irmão': 'users', 'Avós': 'home', 'Namorada(o)/Companheira(o)': 'heart', 'Tios e Tias': 'user-cog', 'Filho/Filha': 'users', 'Sobrinhos': 'users', 'Padrasto e Madastra': 'user-plus' }; return icons[name] || 'user'; } // 1. Gráfico Mensal com animação function createMonthlyChart() { const canvas = document.getElementById('monthlyChart'); if (!canvas) { console.error('Elemento monthlyChart não encontrado'); return; } const ctx = canvas.getContext('2d'); const monthlyChart = new Chart(ctx, { type: 'line', data: { labels: data.monthly.map(d => d.month), datasets: [{ label: 'Total de Visitas', data: data.monthly.map(d => 0), // Começa com 0 borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)', tension: 0.4, fill: true, pointBackgroundColor: '#059669', pointRadius: 5, pointHoverRadius: 7 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, title: { display: false }, tooltip: { callbacks: { label: function(context) { const label = context.dataset.label || ''; const value = context.parsed.y || context.parsed; const percentage = ((value / 20121) * 100).toFixed(0); return `${label}: ${value.toLocaleString('pt-BR')} (${percentage}%)`; } } }, datalabels: { align: 'top', anchor: 'end', color: '#3b82f6', font: { size: 11, weight: 'bold' }, formatter: (value) => value.toLocaleString('pt-BR'), } }, scales: { y: { beginAtZero: true, suggestedMin: 1000, grid: { color: 'rgba(0,0,0,0.05)' }, title: { display: true, text: 'Nº de Visitas' }, ticks: { callback: function(value) { return value.toLocaleString('pt-BR'); } } }, x: { grid: { color: 'rgba(0,0,0,0.05)' } } }, animation: { duration: 2000, easing: 'easeOutQuart' } }, plugins: [ChartDataLabels] }); // Animar os dados do gráfico setTimeout(() => { monthlyChart.data.datasets[0].data = data.monthly.map(d => d.total); monthlyChart.update(); }, 500); } // 2. Gráfico Principais Visitantes function createParentescoChart() { const container = document.getElementById('parentescoChart'); if (!container) { console.error('Elemento parentescoChart não encontrado'); return; } const principaisVisitantes = data.principaisVisitantes; const totalVisits = 20121; const top9Total = principaisVisitantes.reduce((sum, item) => sum + item.total, 0); const outrosTotal = totalVisits - top9Total; // Criar HTML dos principais visitantes container.innerHTML = ` <div class="principais-visitantes-grid"> ${principaisVisitantes.map((item, index) => { // Tamanho do ícone proporcional ao percentual const iconSize = 60 + (item.percentage * 0.5); return ` <div class="visitante-card" style="animation-delay: ${index * 0.1}s"> <div class="relative"> <!-- Ícone circular com gradiente --> <div class="icon-container" style="width: ${iconSize}px; height: ${iconSize}px;"> <div class="w-full h-full rounded-full flex items-center justify-center shadow-lg" style="background: linear-gradient(135deg, ${chartColors[index]} 0%, ${chartColors[(index + 5) % chartColors.length]} 100%);"> <i data-lucide="${getIconForVisitante(item.name)}" class="w-${Math.floor(iconSize/3)} h-${Math.floor(iconSize/3)} text-white"></i> </div> </div> <!-- Conteúdo do card --> <div class="text-center mt-2"> <h3 class="font-bold text-lg text-gray-800 mb-2">${item.name}</h3> <!-- PERCENTUAL EM DESTAQUE --> <div class="text-4xl font-bold mb-1 count-up" style="color: ${chartColors[index]}" data-target="${item.percentage}" data-suffix="%">0%</div> <!-- Valor absoluto --> <div class="text-sm text-gray-600 mb-3"> <span class="count-up" data-target="${item.total}">0</span> visitas </div> <!-- Barra de progresso --> <div class="w-full bg-gray-200 rounded-full h-3 overflow-hidden"> <div class="h-full rounded-full progress-fill" style="width: 0%; background-color: ${chartColors[index]};" data-target="${item.percentage}%"> </div> </div> </div> </div> </div> `; }).join('')} </div> <!-- Total Geral --> <div class="mt-8 p-6 total-card rounded-xl shadow-lg"> <div class="text-center"> <div class="flex items-center justify-center mb-3"> <i data-lucide="bar-chart-3" class="w-6 h-6 mr-2 text-white"></i> <span class="text-xl font-semibold">Resumo Geral</span> </div> <div class="grid grid-cols-2 gap-4"> <div class="text-center"> <div class="text-3xl font-bold mb-1 count-up" data-target="${top9Total}">0</div> <div class="text-sm opacity-90">9 Principais Visitantes</div> <div class="text-xs opacity-75">95% do total</div> </div> <div class="text-center"> <div class="text-3xl font-bold mb-1 count-up" data-target="${totalVisits}">0</div> <div class="text-sm opacity-90">Total Geral</div> <div class="text-xs opacity-75">100% das visitas</div> </div> </div> <div class="mt-4 text-sm opacity-90"> <i data-lucide="info" class="w-4 h-4 inline mr-1"></i> Os 9 principais representam 95% do total, outros parentescos somam 5% (<span class="count-up" data-target="${outrosTotal}">0</span> visitas) </div> </div> </div> `; // Re-cria os ícones Lucide if (window.lucide && window.lucide.createIcons) { lucide.createIcons(); } // Animar barras de progresso setTimeout(() => { const progressBars = container.querySelectorAll('.progress-fill'); progressBars.forEach(bar => { const targetWidth = bar.getAttribute('data-target'); bar.style.width = targetWidth; bar.style.transition = 'width 1.5s ease-out'; }); }, 100); } // 3. Destaque: Tipo de Família (KPI Cards - Versão Anterior) function renderFamilyTypeKPI() { const container = document.getElementById('familyTypeKPIDisplay'); if (!container) { console.error('Elemento familyTypeKPIDisplay não encontrado'); return; } const totalVisits = 20121; const familyTypes = data.familyTypes; // Encontrar os dados principais const biologica = familyTypes.find(f => f.name === "Biológica"); const extensa = familyTypes.find(f => f.name === "Extensa"); const namorados = familyTypes.find(f => f.name === "Namorada(o)/Companheira(o)"); const outros = familyTypes.find(f => f.name === "Outros"); const amigos = familyTypes.find(f => f.name === "Amigos"); container.innerHTML = ` <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> <!-- KPI Principal: Família Biológica --> <div class="lg:col-span-2 bg-green-50 p-6 rounded-xl border-4 border-green-500 shadow-lg flex flex-col justify-center items-center text-center"> <i data-lucide="heart-handshake" class="w-12 h-12 text-green-600 mb-3"></i> <span class="text-lg font-semibold text-gray-700">${biologica.name}</span> <div class="mt-2 text-sm text-gray-600">${biologica.description}</div> <div class="flex items-end mt-2"> <span class="kpi-value text-green-600 leading-none count-up" data-target="${biologica.percentage}" data-suffix="%">0%</span> <span class="text-2xl text-green-600 ml-2">(<span class="count-up" data-target="${biologica.total}">0</span> Visitas)</span> </div> <p class="text-sm text-gray-500 mt-2">Do total de <span class="count-up" data-target="${totalVisits}">0</span> visitas registradas.</p> <!-- Progress Bar --> <div class="w-full bg-gray-200 rounded-full h-4 mt-6"> <div class="bg-green-600 h-4 rounded-full" style="width: 0%;" data-target="${biologica.percentage}%"></div> </div> <div class="flex justify-between w-full text-xs font-medium text-gray-500 mt-1"> <span>0%</span> <span>100%</span> </div> </div> <!-- KPIs Secundários --> <div class="flex flex-col space-y-4"> <!-- Família Extensa --> <div class="bg-blue-50 p-4 rounded-xl border border-blue-300 shadow-md"> <div class="flex items-center justify-between"> <span class="font-semibold text-blue-700">${extensa.name}</span> <i data-lucide="${extensa.icon}" class="w-5 h-5 text-blue-500"></i> </div> <div class="text-xs text-blue-600 mb-1">${extensa.description}</div> <span class="text-3xl font-bold text-blue-900 count-up" data-target="${extensa.percentage}" data-suffix="%">0%</span> <p class="text-xs text-blue-600"><span class="count-up" data-target="${extensa.total}">0</span> visitas</p> </div> <!-- Namorada(o)/Companheira(o) --> <div class="bg-pink-50 p-4 rounded-xl border border-pink-300 shadow-md"> <div class="flex items-center justify-between"> <span class="font-semibold text-pink-700">${namorados.name}</span> <i data-lucide="${namorados.icon}" class="w-5 h-5 text-pink-500"></i> </div> <span class="text-3xl font-bold text-pink-900 count-up" data-target="${namorados.percentage}" data-suffix="%">0%</span> <p class="text-xs text-pink-600"><span class="count-up" data-target="${namorados.total}">0</span> visitas</p> </div> <!-- Outros + Amigos --> <div class="bg-orange-50 p-4 rounded-xl border border-orange-300 shadow-md"> <div class="flex items-center justify-between"> <span class="font-semibold text-orange-700">Outros Vínculos</span> <i data-lucide="${outros.icon}" class="w-5 h-5 text-orange-500"></i> </div> <div class="text-xs text-orange-600 mb-1">${outros.description} + Amigos</div> <span class="text-3xl font-bold text-orange-900 count-up" data-target="${outros.percentage + amigos.percentage}" data-suffix="%">0%</span> <p class="text-xs text-orange-600"><span class="count-up" data-target="${outros.total + amigos.total}">0</span> visitas</p> </div> </div> </div> <!-- Resumo Rápido --> <div class="mt-6 bg-gradient-to-r from-blue-50 to-green-50 p-4 rounded-lg"> <div class="text-center"> <div class="flex items-center justify-center mb-2"> <i data-lucide="pie-chart" class="w-5 h-5 mr-2 text-blue-500"></i> <span class="font-semibold text-gray-700">Resumo das Categorias</span> </div> <div class="text-sm text-gray-600"> Família Biológica (${biologica.percentage}%) + Família Extensa (${extensa.percentage}%) = <strong>${biologica.percentage + extensa.percentage}%</strong> do total de visitas </div> </div> </div> `; if (window.lucide && window.lucide.createIcons) { lucide.createIcons(); } // Animar barras de progresso setTimeout(() => { const progressBars = container.querySelectorAll('[data-target$="%"]'); progressBars.forEach(bar => { const targetWidth = bar.getAttribute('data-target'); if (targetWidth) { bar.style.width = targetWidth; bar.style.transition = 'width 1.5s ease-out'; } }); }, 100); } // 4. Gráfico Unidades - VERSÃO CORRIGIDA SEM DATALABELS (para resolver conflito de tooltips) function createUnitChart() { const canvas = document.getElementById('unitChart'); if (!canvas) { console.error('Elemento unitChart não encontrado'); return; } const ctx = canvas.getContext('2d'); // Ordenar unidades por total (decrescente) const sortedUnits = [...data.units].sort((a, b) => b.total - a.total); const chartLabels = sortedUnits.map(d => d.name); const chartData = sortedUnits.map(d => 0); // Começa com 0 const finalData = sortedUnits.map(d => d.total); // Dados finais const chartPercentages = sortedUnits.map(d => d.percentage); // Cores em gradiente (estilo da imagem) const getGradientColor = (ctx, index) => { const gradient = ctx.createLinearGradient(0, 0, 800, 0); if (index < 3) { // Top 3 unidades (verde gradiente) gradient.addColorStop(0, '#10b981'); gradient.addColorStop(0.5, '#059669'); gradient.addColorStop(1, '#047857'); } else if (index < 6) { // Próximas 3 (azul gradiente) gradient.addColorStop(0, '#60a5fa'); gradient.addColorStop(0.5, '#3b82f6'); gradient.addColorStop(1, '#1d4ed8'); } else if (index < 9) { // Médias (laranja gradiente) gradient.addColorStop(0, '#fbbf24'); gradient.addColorStop(0.5, '#f59e0b'); gradient.addColorStop(1, '#d97706'); } else { // Menores (cinza gradiente) gradient.addColorStop(0, '#9ca3af'); gradient.addColorStop(0.5, '#6b7280'); gradient.addColorStop(1, '#4b5563'); } return gradient; }; // Criar o gráfico SEM o plugin DataLabels (que estava causando conflito com tooltips) const unitChart = new Chart(ctx, { type: 'bar', data: { labels: chartLabels, datasets: [{ label: 'Total de Visitas', data: chartData, // Começa com 0 backgroundColor: sortedUnits.map((d, index) => { return getGradientColor(ctx, index); }), borderRadius: { topLeft: 8, bottomLeft: 8, topRight: 8, bottomRight: 8 }, borderWidth: 0, barThickness: 35, categoryPercentage: 0.9, barPercentage: 0.9 }] }, options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y', plugins: { legend: { display: false }, title: { display: false }, // Configuração simplificada do tooltip - SEM conflito tooltip: { enabled: true, mode: 'index', intersect: false, backgroundColor: 'rgba(0, 0, 0, 0.85)', padding: 12, cornerRadius: 8, titleFont: { size: 14, weight: 'bold', family: "'Inter', sans-serif" }, bodyFont: { size: 13, family: "'Inter', sans-serif" }, titleColor: '#ffffff', bodyColor: '#f3f4f6', borderColor: '#059669', borderWidth: 1, callbacks: { title: function(tooltipItems) { const dataIndex = tooltipItems[0].dataIndex; return chartLabels[dataIndex]; }, label: function(context) { // Acessar os dados corretamente const value = context.raw || chartData[context.dataIndex]; const percentage = chartPercentages[context.dataIndex]; return `Visitas: ${value.toLocaleString('pt-BR')}`; }, afterLabel: function(context) { const percentage = chartPercentages[context.dataIndex]; return `Percentual: ${percentage}% do total`; } } } }, scales: { x: { type: 'linear', beginAtZero: true, max: 5500, grid: { color: 'rgba(0, 0, 0, 0.05)', drawBorder: false }, title: { display: true, text: 'Nº de Visitas', font: { size: 14, weight: '600', family: "'Inter', sans-serif" }, padding: { top: 10, bottom: 10 } }, ticks: { callback: function(value) { return value.toLocaleString('pt-BR'); }, font: { size: 12, family: "'Inter', sans-serif" }, padding: 5 }, border: { display: false } }, y: { grid: { display: false, drawBorder: false }, ticks: { autoSkip: false, font: { size: 14, weight: '600', family: "'Inter', sans-serif" }, padding: 15, color: '#1f2937' }, border: { display: false } } }, interaction: { mode: 'index', axis: 'y', intersect: false }, animation: { duration: 2000, easing: 'easeOutQuart' }, layout: { padding: { left: 10, right: 10, top: 20, bottom: 10 } } } }); // Animar os dados do gráfico setTimeout(() => { unitChart.data.datasets[0].data = finalData; unitChart.update(); }, 800); } // Inicialização quando o DOM estiver completamente carregado document.addEventListener('DOMContentLoaded', function() { console.log('DOM completamente carregado, iniciando gráficos...'); try { // Inicializa ícones Lucide if (typeof lucide !== 'undefined' && lucide.createIcons) { lucide.createIcons(); console.log('Ícones Lucide inicializados'); } // Cria os gráficos createMonthlyChart(); console.log('Gráfico mensal criado'); createParentescoChart(); console.log('Gráfico de parentesco criado'); renderFamilyTypeKPI(); console.log('KPI de família criado'); createUnitChart(); console.log('Gráfico de unidades criado'); // Inicia animações de contagem setTimeout(() => { animateAllCounts(); console.log('Animações de contagem iniciadas'); }, 1000); console.log('Todos os gráficos carregados com sucesso!'); } catch (error) { console.error('Erro ao carregar gráficos:', error); console.error('Stack trace:', error.stack); } }); // Fallback: também executar quando a janela carregar completamente window.addEventListener('load', function() { console.log('Window loaded, verificando gráficos...'); // Garante que tudo foi carregado if (typeof Chart !== 'undefined') { console.log('Chart.js carregado'); } }); </script> </p>Fri, 28 Nov 2025 20:32:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/relatorio-de-visitas-familiares-2024https://observatorio.iases.es.gov.br:443/Not%C3%ADcia/perfil-das-decretacoes-de-internacao-provisoria<!-- Tailwind CSS CDN --> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <!-- Chart.js CDN --> <p> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); body { box-sizing: border-box; font-family: 'Inter', sans-serif; background: transparent; min-height: 100%; background-color: #f8fafc; padding: 20px 0; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .infographic-card { box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .infographic-card.is-visible { opacity: 1; transform: translateY(0); } .data-header { font-weight: 800; line-height: 1; } .highlight-bar { height: 8px; border-radius: 9999px; margin-top: 8px; transition: all 0.3s ease; } .animated-bar { transition: width 1.5s cubic-bezier(0.23, 1, 0.32, 1); } .animated-bar.start { width: 0% !important; } .profile-item { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0; transition: all 0.2s ease; } .profile-item:hover { background-color: #f8fafc; padding-left: 8px; } .profile-item:last-child { border-bottom: none; } .chart-container { position: relative; height: 220px; margin: 20px 0; } .stat-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2); } @media (max-width: 768px) { .container { padding: 0.75rem; } } </style> <div class="container"><header class="text-center mb-8 p-8 rounded-2xl bg-white/95 infographic-card"> <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-800 mb-3">Perfil das Decreta&ccedil;&otilde;es de Interna&ccedil;&atilde;o Provis&oacute;ria - 2024</h1> <p class="text-xl text-gray-600 mb-8">An&aacute;lise das Entradas Registradas (Janeiro a Dezembro)</p> <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-2xl p-8 inline-block w-full stat-card"> <p class="text-lg font-medium opacity-90 uppercase tracking-wide">TOTAL DE DECRETA&Ccedil;&Otilde;ES</p> <p class="data-header text-7xl sm:text-8xl mt-2" data-value="629">0</p> <div class="highlight-bar bg-white/30 w-full"></div> </div> </header> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> <section class="bg-white/95 p-8 rounded-2xl infographic-card"> <h2 class="text-2xl font-bold text-gray-800 mb-8 border-b-2 border-blue-200 pb-4"><span class="text-blue-600">1.</span> Distribui&ccedil;&atilde;o por Sexo Atribu&iacute;do ao Nascer</h2> <div class="flex items-center justify-between mb-8 gap-6"> <div class="text-center p-6 rounded-xl flex-1 bg-blue-50 stat-card"><svg class="w-16 h-16 text-blue-600 mx-auto mb-4" fill="currentColor" viewbox="0 0 24 24"> <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 7V9C15 9.55 14.55 10 14 10S13 9.55 13 9V7H11V9C11 9.55 10.45 10 10 10S9 9.55 9 9V7H3V9C3 10.1 3.9 11 5 11V20C5 21.1 5.9 22 7 22H17C18.1 22 19 21.1 19 20V11C20.1 11 21 10.1 21 9Z"></path> </svg> <p class="text-5xl data-header text-blue-600 mb-2" data-value="94.8" data-suffix="%">0%</p> <p class="text-xl font-semibold text-blue-700">Masculino</p> <p class="text-base text-gray-500 mt-1">(596 Entradas)</p> <div class="highlight-bar bg-blue-400 w-full mt-3"></div> </div> <div class="text-center p-6 rounded-xl flex-1 bg-pink-50 stat-card"><svg class="w-16 h-16 text-pink-600 mx-auto mb-4" fill="currentColor" viewbox="0 0 24 24"> <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM7 22H17C18.1 22 19 21.1 19 20V12H16V20H13V12H11V20H8V12H5V20C5 21.1 5.9 22 7 22Z"></path> </svg> <p class="text-5xl data-header text-pink-600 mb-2" data-value="5.2" data-suffix="%">0%</p> <p class="text-xl font-semibold text-pink-700">Feminino</p> <p class="text-base text-gray-500 mt-1">(33 Entradas)</p> <div class="highlight-bar bg-pink-400 w-1/12 mt-3"></div> </div> </div> <div class="chart-container"><canvas id="genderChart"></canvas></div> </section> <section class="bg-white/95 p-8 rounded-2xl infographic-card"> <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b-2 border-green-200 pb-3"><span class="text-green-600">2.</span> Distribui&ccedil;&atilde;o por Cor/Ra&ccedil;a</h2> <div class="space-y-3"> <div class="profile-item"> <div class="w-4 h-4 bg-amber-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">Parda</span> <span class="text-2xl font-bold text-amber-600" data-value="79.7" data-suffix="%">0%</span></div> <div class="highlight-bar bg-amber-200 w-full"> <div class="highlight-bar bg-amber-500 animated-bar start" data-width="79.7%" style="width: 79.7%;"></div> </div> <p class="text-sm text-gray-500 mt-1">501 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-gray-700 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">Preta</span> <span class="text-2xl font-bold text-gray-700" data-value="13.0" data-suffix="%">0%</span></div> <div class="highlight-bar bg-gray-200 w-full"> <div class="highlight-bar bg-gray-700 animated-bar start" data-width="13.0%" style="width: 13.0%;"></div> </div> <p class="text-sm text-gray-500 mt-1">82 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-blue-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">Branca</span> <span class="text-2xl font-bold text-blue-600" data-value="7.0" data-suffix="%">0%</span></div> <div class="highlight-bar bg-blue-200 w-full"> <div class="highlight-bar bg-blue-500 animated-bar start" data-width="7.0%" style="width: 7.0%;"></div> </div> <p class="text-sm text-gray-500 mt-1">44 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-yellow-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">Amarela</span> <span class="text-2xl font-bold text-yellow-600" data-value="0.3" data-suffix="%">0%</span></div> <div class="highlight-bar bg-yellow-200 w-full"> <div class="highlight-bar bg-yellow-500 animated-bar start" data-width="0.3%" style="width: 0.3%;"></div> </div> <p class="text-sm text-gray-500 mt-1">2 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-red-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">Ind&iacute;gena</span> <span class="text-2xl font-bold text-red-600" data-value="0.0" data-suffix="%">0%</span></div> <div class="highlight-bar bg-red-200 w-full"> <div class="highlight-bar bg-red-500 animated-bar start" data-width="0.0%" style="width: 0.0%;"></div> </div> <p class="text-sm text-gray-500 mt-1">0 entradas</p> </div> </div> </div> </section> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> <section class="bg-white/95 p-8 rounded-2xl infographic-card"> <h2 class="text-2xl font-bold text-gray-800 mb-8 border-b-2 border-purple-200 pb-4"><span class="text-purple-600">3.</span> Distribui&ccedil;&atilde;o por Faixa Et&aacute;ria</h2> <div class="chart-container"><canvas id="ageChart"></canvas></div> <div class="grid grid-cols-3 gap-6 mt-6"> <div class="text-center p-4 bg-purple-50 rounded-lg"> <p class="text-3xl font-bold text-purple-600" data-value="16.1">0</p> <p class="text-base text-gray-600">Idade M&eacute;dia</p> </div> <div class="text-center p-4 bg-indigo-50 rounded-lg"> <p class="text-3xl font-bold text-indigo-600" data-value="17" data-suffix=" Anos">0 Anos</p> <p class="text-base text-gray-600">Idade Predominante</p> </div> <div class="text-center p-4 bg-pink-50 rounded-lg"> <p class="text-3xl font-bold text-pink-600" data-value="82.0" data-suffix="%">0%</p> <p class="text-base text-gray-600">Entre 15-17 Anos</p> </div> </div> </section> <section class="bg-white/95 p-8 rounded-2xl infographic-card"> <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b-2 border-teal-200 pb-3"><span class="text-teal-600">4.</span> N&iacute;vel de Escolaridade (Mais Frequentes)</h2> <div class="space-y-3"> <div class="profile-item"> <div class="w-4 h-4 bg-red-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">8&ordm; ano E.F.</span> <span class="text-2xl font-bold text-red-600" data-value="17.2" data-suffix="%">0%</span></div> <div class="highlight-bar bg-red-200 w-full"> <div class="highlight-bar bg-red-500 animated-bar start" data-width="17.2%" style="width: 17.2%;"></div> </div> <p class="text-sm text-gray-500 mt-1">108 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-orange-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">7&ordm; ano E.F.</span> <span class="text-2xl font-bold text-orange-600" data-value="16.2" data-suffix="%">0%</span></div> <div class="highlight-bar bg-orange-200 w-full"> <div class="highlight-bar bg-orange-500 animated-bar start" data-width="16.2%" style="width: 16.2%;"></div> </div> <p class="text-sm text-gray-500 mt-1">102 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-green-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">6&ordm; ano E.F.</span> <span class="text-2xl font-bold text-green-600" data-value="15.1" data-suffix="%">0%</span></div> <div class="highlight-bar bg-green-200 w-full"> <div class="highlight-bar bg-green-500 animated-bar start" data-width="15.1%" style="width: 15.1%;"></div> </div> <p class="text-sm text-gray-500 mt-1">95 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-blue-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">1&ordf; S&eacute;rie E.M.</span> <span class="text-2xl font-bold text-blue-600" data-value="12.7" data-suffix="%">0%</span></div> <div class="highlight-bar bg-blue-200 w-full"> <div class="highlight-bar bg-blue-500 animated-bar start" data-width="12.7%" style="width: 12.7%;"></div> </div> <p class="text-sm text-gray-500 mt-1">80 entradas</p> </div> </div> <div class="profile-item"> <div class="w-4 h-4 bg-gray-500 rounded-full mr-4"></div> <div class="flex-1"> <div class="flex justify-between items-center"><span class="text-lg font-semibold text-gray-700">N&atilde;o Sabe Informar / Vazio</span> <span class="text-2xl font-bold text-gray-600" data-value="13.7" data-suffix="%">0%</span></div> <div class="highlight-bar bg-gray-200 w-full"> <div class="highlight-bar bg-gray-500 animated-bar start" data-width="13.7%" style="width: 13.7%;"></div> </div> <p class="text-sm text-gray-500 mt-1">86 entradas</p> </div> </div> </div> </section> </div> <section class="bg-white/95 p-8 rounded-2xl infographic-card mb-8"> <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b-2 border-emerald-200 pb-3"><span class="text-emerald-600">5.</span> Evolu&ccedil;&atilde;o Mensal das Decreta&ccedil;&otilde;es de Provis&oacute;ria</h2> <div class="chart-container" style="height: 200px;"><canvas id="monthlyChart"></canvas></div> <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-6"> <div class="text-center p-6 bg-emerald-50 rounded-lg"> <p class="text-2xl font-bold text-emerald-600" data-value="52.4">0</p> <p class="text-sm text-gray-600">M&eacute;dia Mensal</p> </div> <div class="text-center p-6 bg-red-50 rounded-lg"> <p class="text-2xl font-bold text-red-600" data-value="67">0</p> <p class="text-sm text-gray-600">Pico (Novembro)</p> </div> <div class="text-center p-6 bg-blue-50 rounded-lg"> <p class="text-2xl font-bold text-blue-600" data-value="34">0</p> <p class="text-sm text-gray-600">Menor (Dezembro)</p> </div> <div class="text-center p-6 bg-purple-50 rounded-lg"> <p class="text-2xl font-bold text-purple-600" data-value="3" data-suffix=" Meses">0</p> <p class="text-sm text-gray-600">Per&iacute;odo de Alta (+60)</p> </div> </div> </section> <section class="bg-white/95 p-8 rounded-2xl infographic-card mb-8"> <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center"><span class="text-orange-600">👤</span> A Ficha do Perfil Mais Comum - 2024</h2> <div class="max-w-lg mx-auto bg-gradient-to-br from-orange-50 to-red-50 rounded-2xl p-8 border-2 border-orange-200 stat-card"> <div class="text-center mb-6"> <div class="w-20 h-20 bg-orange-500 rounded-full mx-auto mb-4 flex items-center justify-center"><svg class="w-12 h-12 text-white" fill="currentColor" viewbox="0 0 24 24"> <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 7V9C15 9.55 14.55 10 14 10S13 9.55 13 9V7H11V9C11 9.55 10.45 10 10 10S9 9.55 9 9V7H3V9C3 10.1 3.9 11 5 11V20C5 21.1 5.9 22 7 22H17C18.1 22 19 21.1 19 20V11C20.1 11 21 10.1 21 9Z"></path> </svg></div> <h3 class="text-2xl font-bold text-orange-800 mb-2">Perfil T&iacute;pico</h3> <p class="text-sm text-gray-600">Baseado nos dados mais frequentes de 2024</p> </div> <div class="space-y-4"> <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-orange-100"> <div class="flex items-center"> <div class="w-4 h-4 bg-blue-500 rounded-full mr-3"></div> <span class="font-semibold text-gray-700">Sexo*:</span></div> <span class="text-lg font-bold text-blue-600">Masculino</span></div> <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-orange-100"> <div class="flex items-center"> <div class="w-4 h-4 bg-amber-500 rounded-full mr-3"></div> <span class="font-semibold text-gray-700">Cor/Ra&ccedil;a:</span></div> <span class="text-lg font-bold text-amber-600">Parda</span></div> <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-orange-100"> <div class="flex items-center"> <div class="w-4 h-4 bg-purple-500 rounded-full mr-3"></div> <span class="font-semibold text-gray-700">Idade:</span></div> <span class="text-lg font-bold text-purple-600">17 Anos</span></div> <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-orange-100"> <div class="flex items-center"> <div class="w-4 h-4 bg-red-500 rounded-full mr-3"></div> <span class="font-semibold text-gray-700">Escolaridade:</span></div> <span class="text-lg font-bold text-red-600">8&ordm; Ano E.F.</span></div> </div> <div class="mt-6 p-4 bg-orange-100 rounded-lg"> <p class="text-sm text-orange-800 text-center font-medium">Este perfil representa a combina&ccedil;&atilde;o mais frequente encontrada nos dados de 2024 - Sexo Atribu&iacute;do ao Nascer*</p> </div> </div> </section> <section class="bg-white/95 p-8 rounded-2xl infographic-card mb-8"> <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center"><span class="text-indigo-600">📊</span> Principais Insights (Janeiro - Dezembro 2024)</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="text-center p-8 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl stat-card"> <div class="text-4xl mb-4">👥</div> <h3 class="font-bold text-blue-800 mb-4 text-xl">Foco Masculino</h3> <p class="text-base text-gray-600">Quase 95% dos casos s&atilde;o do sexo masculino (596 de 629).</p> </div> <div class="text-center p-8 bg-gradient-to-br from-amber-50 to-amber-100 rounded-xl stat-card"> <div class="text-4xl mb-4">🌍</div> <h3 class="font-bold text-amber-800 mb-4 text-xl">Predomin&acirc;ncia Racial</h3> <p class="text-base text-gray-600">79.7% s&atilde;o Pardos, e 13.0% Pretos, totalizando 92.7%.</p> </div> <div class="text-center p-8 bg-gradient-to-br from-green-50 to-green-100 rounded-xl stat-card"> <div class="text-4xl mb-4">🎓</div> <h3 class="font-bold text-green-800 mb-4 text-xl">Escolaridade em Destaque</h3> <p class="text-base text-gray-600">Os anos mais frequentes s&atilde;o 8&ordm; E.F., 7&ordm; E.F. e 6&ordm; E.F..</p> </div> </div> </section> <footer class="text-center text-gray-500 py-6"> <p class="text-sm">Dados referentes ao per&iacute;odo de Janeiro a Dezembro de 2024 &bull; Total Geral: 629 Entradas &bull; Fonte: Dados Anexados</p> </footer></div> <p> <script> document.addEventListener("DOMContentLoaded", () => { const totalGeral = 629; const chartAnimationConfig = { duration: 1500, easing: 'cubic-bezier(0.23, 1, 0.32, 1)', delay: 200 }; const genderCtx = document.getElementById('genderChart').getContext('2d'); new Chart(genderCtx, { type: 'doughnut', data: { labels: ['Masculino (94.8%)', 'Feminino (5.2%)'], datasets: [{ data: [596, 33], backgroundColor: ['#3B82F6', '#EC4899'], borderWidth: 0, hoverOffset: 10 }] }, options: { responsive: true, maintainAspectRatio: false, animation: chartAnimationConfig, plugins: { legend: { position: 'bottom', labels: { padding: 20, font: { size: 14, weight: 'bold' } } } } } }); const ageCtx = document.getElementById('ageChart').getContext('2d'); new Chart(ageCtx, { type: 'bar', data: { labels: ['12-14 anos', '15-17 anos', '18-21 anos'], datasets: [{ label: 'Número de Entradas', data: [66, 516, 47], backgroundColor: ['#8B5CF6', '#A855F7', '#C084FC'], borderRadius: 8, borderSkipped: false, }] }, options: { responsive: true, maintainAspectRatio: false, animation: chartAnimationConfig, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: '#f3f4f6' }, max: 600 }, x: { grid: { display: false } } } } }); const monthlyCtx = document.getElementById('monthlyChart').getContext('2d'); new Chart(monthlyCtx, { type: 'line', data: { labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'], datasets: [{ label: 'Decretações de Internação Provisória', data: [46, 38, 48, 43, 61, 66, 61, 49, 52, 64, 67, 34], borderColor: '#10B981', backgroundColor: 'rgba(16, 185, 129, 0.1)', borderWidth: 3, fill: true, tension: 0.4, pointBackgroundColor: '#10B981', pointBorderColor: '#ffffff', pointBorderWidth: 3, pointRadius: 6, pointHoverRadius: 8 }] }, options: { responsive: true, maintainAspectRatio: false, animation: chartAnimationConfig, plugins: { legend: { display: false }, tooltip: { titleFont: { size: 16, weight: 'bold' }, bodyFont: { size: 14, weight: 'bold' }, padding: 12, cornerRadius: 8 } }, scales: { y: { beginAtZero: true, grid: { color: '#f3f4f6' }, ticks: { font: { size: 12 } } }, x: { grid: { display: false }, ticks: { font: { size: 12 } } } }, interaction: { intersect: false, mode: 'index' } } }); function animateCountUp(el) { const target = parseFloat(el.dataset.value); const suffix = el.dataset.suffix || ''; const duration = 1500; const startTime = performance.now(); function step(currentTime) { const elapsedTime = currentTime - startTime; const progress = Math.min(elapsedTime / duration, 1); let currentVal = progress * target; if (target % 1 !== 0 || el.dataset.value.includes('.')) { currentVal = currentVal.toFixed(1); } else { currentVal = Math.floor(currentVal); } el.textContent = currentVal + suffix; if (progress < 1) { requestAnimationFrame(step); } else { el.textContent = target.toFixed(target % 1 !== 0 || el.dataset.value.includes('.') ? 1 : 0) + suffix; } } requestAnimationFrame(step); } function animateBar(el) { el.style.width = '0%'; el.classList.add('start'); void el.offsetWidth; el.style.width = el.dataset.width; setTimeout(() => { el.classList.remove('start'); }, 1500); } const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const card = entry.target; card.classList.add('is-visible'); const numbers = card.querySelectorAll('[data-value]'); numbers.forEach(num => { animateCountUp(num); }); const bars = card.querySelectorAll('.animated-bar'); bars.forEach(bar => { animateBar(bar); }); observer.unobserve(card); } }); }, { threshold: 0.1 }); document.querySelectorAll('.infographic-card').forEach(card => { observer.observe(card); }); document.querySelectorAll('.stat-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-4px) scale(1.02)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; }); }); }); </script> </p>Wed, 05 Nov 2025 17:42:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/perfil-das-decretacoes-de-internacao-provisoriahttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/movimentacao<p></p> <!-- Carrega Tailwind CSS para estilização rápida e responsiva --> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <!-- Carrega a biblioteca Chart.js para geração de gráficos --> <p> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </p> <!-- Carrega o plugin Datalabels para exibir os valores nas barras --> <p> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); /* CORREÇÃO DE SCROLLBAR AGRESSIVA */ html { overflow-x: hidden; } * { box-sizing: border-box; } /* 3. Garante box-sizing em todos os elementos e pseudo-elementos */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; max-width: 100vw; /* 1. FORÇA LARGURA MÁXIMA PARA O BODY */ } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; overflow: hidden; /* 2. ESCONDE O OVERFLOW DE CONTEÚDO DENTRO DO CONTAINER */ } .chart-card { background-color: white; border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } @media (min-width: 768px) { .chart-card { padding: 2rem; } } .chart-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .card-routine { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); color: white; } .card-development { background: linear-gradient(135deg, #10b981 0%, #047857 100%); color: white; } .card-complementary { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); color: white; } .card-rights { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; } .kpi-value { font-size: 3rem; font-weight: 800; } @media (min-width: 768px) { .kpi-value { font-size: 3.5rem; } } .section-title { font-size: 1.75rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem; text-align: center; } @media (min-width: 768px) { .section-title { font-size: 2rem; } } /* Animações de entrada */ .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } /* Container de gráficos com altura fixa (para gráfico de barras) */ .chart-container { width: 100%; position: relative; } .chart-wrapper { width: 100%; height: 600px; position: relative; overflow: hidden; /* Esconde o scroll interno dos gráficos */ } .chart-wrapper-sm { width: 100%; height: 350px; position: relative; overflow: hidden; /* Esconde o scroll interno dos gráficos */ } /* Correção para gráficos não esticarem */ .chart-container canvas { width: 100% !important; height: 100% !important; } /* Badge para percentuais (tamanho reajustado em +15%) */ .percentage-badge { background: rgba(255, 255, 255, 0.2); padding: 2px 8px; border-radius: 12px; font-size: 0.86rem; /* Original: 0.75rem. Novo: 0.75 * 1.15 = 0.8625rem */ font-weight: 600; } /* TEXTOS AUMENTADOS (+15% em todos os textos de detalhe/observação/legenda) */ .texto-destaque { font-size: 1.15rem; /* Original: 1rem. Novo: 1 * 1.15 = 1.15rem */ } .texto-card { font-size: 1.04rem; /* Original: 0.9rem. Novo: 0.9 * 1.15 = 1.035rem */ } .texto-legenda { font-size: 1.1rem; /* Original: 0.95rem. Novo: 0.95 * 1.15 = 1.0925rem */ } /* Aplica o aumento nos textos de detalhes dos cards (listas e parágrafos que usam 'text-sm') */ .detail-card ul, .detail-card p { font-size: 1rem; /* Aproximadamente 15% de aumento sobre o 0.875rem (text-sm) */ } /* Cards de detalhes */ .detail-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border-left: 4px solid; } .detail-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Responsividade melhorada - Ajustando tamanhos móveis */ @media (max-width: 768px) { .container { padding: 1rem; } .chart-card { padding: 1rem; } .kpi-value { font-size: 2.5rem; } .section-title { font-size: 1.5rem; } .chart-wrapper { height: 450px; } .chart-wrapper-sm { height: 300px; } /* Ajuste de fonte responsivo mantendo a proporção */ .texto-destaque { font-size: 1.04rem; /* 0.9rem base + 15% */ } .texto-card { font-size: 0.92rem; /* 0.8rem base + 15% */ } .texto-legenda { font-size: 0.98rem; /* 0.85rem base + 15% */ } .detail-card ul, .detail-card p { font-size: 0.98rem; /* 0.85rem base + 15% */ } } @media (max-width: 640px) { .chart-wrapper { height: 400px; } .chart-wrapper-sm { height: 250px; } } </style> <div class="container"><!-- Cabeçalho --><header class="text-center mb-12 fade-in-up"> <h1 class="text-4xl md:text-5xl font-extrabold text-slate-800 tracking-tight">PAINEL DE MOVIMENTA&Ccedil;&Otilde;ES SOCIOEDUCATIVAS</h1> <p class="mt-4 text-lg text-slate-600">1&ordm; Semestre 2025 - Total: <span class="font-bold"><span id="total-registros" data-target-value="1055653">0</span></span> Registros</p> <p class="texto-destaque text-slate-500 mt-2">Dados representam todas as movimenta&ccedil;&otilde;es registradas nas Unidades do Sistema Socioeducativo do Esp&iacute;rito Santo</p> </header><!-- Card de Destaque: Rotina Socioeducativa --> <div class="chart-card card-routine mb-8 fade-in-up"> <div class="flex flex-col md:flex-row justify-between items-center"> <div> <h3 class="text-xl font-bold mb-2 flex items-center"><svg class="w-7 h-7 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> ROTINA SOCIOEDUCATIVA</h3> <p class="kpi-value"><span id="kpi-rotina-value" data-target-value="668004">0</span> <span class="text-xl font-light">registros</span></p> <p class="text-sm font-light italic opacity-90 mt-2">Representa <span class="font-bold"><span id="kpi-rotina-pct" data-target-value="63.3">0</span>%</span> de todas as movimenta&ccedil;&otilde;es - Cuidados essenciais como refei&ccedil;&otilde;es, higiene e tempo de sol</p> </div> <div class="mt-4 md:mt-0 bg-white/20 p-4 rounded-lg"> <p class="font-semibold text-sm">COMPOSI&Ccedil;&Atilde;O PRINCIPAL:</p> <ul class="text-sm space-y-1 mt-2"> <li>&bull; 6 refei&ccedil;&otilde;es di&aacute;rias + ceia</li> <li>&bull; Cuidados pessoais e higiene</li> <li>&bull; Tempo de sol e atividades ao ar livre</li> </ul> </div> </div> </div> <!-- Seção 1: Principais Movimentações --> <section class="mb-12"> <h2 class="section-title fade-in-up">Volume Detalhado por Tipo de Movimenta&ccedil;&atilde;o (20 Categorias)</h2> <div class="chart-card fade-in-up delay-100"> <div class="chart-container"> <div class="chart-wrapper"><canvas id="chartPrincipaisMovimentacoes" role="img" aria-label="Gr&aacute;fico de barras horizontais mostrando o volume de movimenta&ccedil;&otilde;es por categoria"></canvas></div> </div> <div class="mt-6 p-3 bg-indigo-50 border-l-4 border-indigo-500 rounded-md"> <p class="texto-destaque text-gray-700"><span class="font-bold">Destaque:</span> As 5 principais categorias representam <span class="font-bold">90.5%</span> do total de movimenta&ccedil;&otilde;es, demonstrando forte concentra&ccedil;&atilde;o nas atividades essenciais e estruturantes.</p> </div> </div> </section> <!-- Destaque: Cards de Desenvolvimento, Atividades Complementares e Garantia de Direitos --> <section class="mb-12"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8"><!-- Card 1: Foco no Desenvolvimento --> <div class="chart-card card-development fade-in-up delay-100"> <h3 class="text-xl font-bold mb-3 flex items-center"><svg class="w-7 h-7 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> FOCO NO DESENVOLVIMENTO</h3> <ul class="space-y-3 font-medium"> <li class="flex justify-between items-center"> <div><span class="font-semibold">Educa&ccedil;&atilde;o Escolar</span> <p class="texto-card opacity-80">Interna e externa</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"><span id="dev-educacao" data-target-value="55438">0</span></span></li> <li class="flex justify-between items-center"> <div><span class="font-semibold">Atividades Esportivas</span> <p class="texto-card opacity-80">Futebol, futsal, academia, basquete</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"><span id="dev-esportivas" data-target-value="27025">0</span></span></li> <li class="flex justify-between items-center"> <div><span class="font-semibold">Oficinas/Cursos</span> <p class="texto-card opacity-80">Pedag&oacute;gicos e qualifica&ccedil;&atilde;o</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"><span id="dev-oficinas" data-target-value="10638">0</span></span></li> </ul> <div class="mt-4 pt-3 border-t border-white/30"> <p class="texto-card font-light">Total Desenvolvimento: <span class="font-bold"><span id="dev-total" data-target-value="93101">0</span></span> <span class="percentage-badge"><span id="dev-total-pct" data-target-value="8.8">0</span>% do total</span></p> </div> </div> <!-- Card 2: Atividades Complementares --> <div class="chart-card card-complementary fade-in-up delay-200"> <h3 class="text-xl font-bold mb-3 flex items-center"><svg class="w-7 h-7 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path> </svg> ATIVIDADES COMPLEMENTARES</h3> <p class="kpi-value"><span id="comp-eventos" data-target-value="130355">0</span> <span class="percentage-badge"><span id="comp-total-pct" data-target-value="12.3">0</span>%</span></p> <p class="text-sm font-light italic opacity-90 mb-3">Eventos, atividades socioeducativas e encontros</p> <ul class="texto-card space-y-1"> <li>&bull; Eventos/Atividades: <span id="comp-eventos-list" data-target-value="130355">0</span></li> <li>&bull; Encontros (manh&atilde;/tarde/noite): <span id="comp-encontros-list" data-target-value="60998">0</span></li> <li>&bull; Atividades em grupo: <span id="comp-grupo-list" data-target-value="4367">0</span></li> </ul> <div class="mt-4 pt-3 border-t border-white/30"> <p class="texto-card">Total: <span class="font-bold"><span id="comp-total" data-target-value="195720">0</span></span> movimenta&ccedil;&otilde;es complementares</p> </div> </div> <!-- Card 3: Garantia de Direitos --> <div class="chart-card card-rights fade-in-up delay-300"> <h3 class="text-xl font-bold mb-3 flex items-center"><svg class="w-7 h-7 mr-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.164-2.05-.479-3.016z"></path> </svg> GARANTIA DE DIREITOS</h3> <ul class="space-y-3 font-medium"> <li class="flex justify-between items-center"> <div><span class="font-semibold">Sa&uacute;de Integral</span> <p class="texto-card opacity-80">Cuidados m&eacute;dicos, enfermagem, odonto</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"><span id="dir-saude" data-target-value="46486">0</span></span></li> <li class="flex justify-between items-center"> <div><span class="font-semibold">Visitas</span> <p class="texto-card opacity-80">Rotina, assistida e &iacute;ntima</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"><span id="dir-visitas" data-target-value="8373">0</span></span></li> <li class="flex justify-between items-center"> <div><span class="font-semibold">Acesso &agrave; Justi&ccedil;a</span> <p class="texto-card opacity-80">Defensoria, MP, Judici&aacute;rio</p> </div> <span class="font-extrabold text-lg bg-white/20 px-2 py-1 rounded"><span id="dir-justica" data-target-value="2474">0</span></span></li> </ul> <div class="mt-4 pt-3 border-t border-white/30"> <p class="texto-card font-light">Total Direitos: <span class="font-bold"><span id="dir-total" data-target-value="57333">0</span></span> <span class="percentage-badge"><span id="dir-total-pct" data-target-value="5.4">0</span>% do total</span></p> </div> </div> </div> </section> <!-- Seção 2 e 3: Histórico Mensal e Dia da Semana --> <section class="mb-12"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"><!-- Histórico Mensal --> <div class="chart-card fade-in-up delay-100"> <h2 class="text-xl font-bold text-slate-800 mb-4 border-b pb-2">Hist&oacute;rico Mensal (Varia&ccedil;&atilde;o Jan-Jun)</h2> <div class="chart-container"> <div class="chart-wrapper-sm"><canvas id="chartHistoricoMensal" role="img" aria-label="Gr&aacute;fico de linha mostrando a varia&ccedil;&atilde;o mensal das movimenta&ccedil;&otilde;es de janeiro a junho"></canvas></div> </div> <div class="mt-4 p-3 bg-blue-50 rounded-md"> <p class="texto-legenda text-gray-600 text-center"><span class="font-bold">Pico em Mar&ccedil;o:</span> 188.586 movimenta&ccedil;&otilde;es (in&iacute;cio intensivo das rotinas)<br /><span class="font-bold">Menor volume em Junho:</span> 167.142 (per&iacute;odo pr&eacute;-recesso)</p> </div> </div> <!-- Movimentações por Dia da Semana --> <div class="chart-card fade-in-up delay-200"> <h2 class="text-xl font-bold text-slate-800 mb-4 text-center border-b pb-2">Distribui&ccedil;&atilde;o por Dia da Semana</h2> <div class="chart-container"> <div class="chart-wrapper-sm"><canvas id="chartDiaSemana" role="img" aria-label="Gr&aacute;fico de rosca mostrando a distribui&ccedil;&atilde;o das movimenta&ccedil;&otilde;es por dia da semana"></canvas></div> </div> <div class="mt-4 p-3 bg-amber-50 rounded-md"> <p class="texto-legenda text-gray-600 text-center"><span class="font-bold">Atendimento cont&iacute;nuo:</span> Alta taxa aos finais de semana comprova a garantia da rotina socioeducativa ininterrupta<br /><span class="font-bold">Quinta-feira:</span> Dia com maior volume (156.238)</p> </div> </div> </div> </section> <!-- Seção 4: Detalhamento das Movimentações --> <section class="mb-12"> <h2 class="section-title fade-in-up">Detalhamento das Movimenta&ccedil;&otilde;es</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"><!-- Card 1: Educação Escolar --> <div class="detail-card fade-in-up delay-100" style="border-left-color: #10b981;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Educa&ccedil;&atilde;o Escolar</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Educa&ccedil;&atilde;o Escolar Interna</li> <li>&bull; Educa&ccedil;&atilde;o Escolar Externa</li> </ul> </div> <!-- Card 2: Visitas --> <div class="detail-card fade-in-up delay-200" style="border-left-color: #3b82f6;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Visitas</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Visita De Rotina</li> <li>&bull; Visita Assistida</li> <li>&bull; Visita &Iacute;ntima</li> </ul> </div> <!-- Card 3: Atendimento Defensoria Pública, MP e Judiciário --> <div class="detail-card fade-in-up delay-300" style="border-left-color: #8b5cf6;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Atendimento Defensoria P&uacute;blica, MP e Judici&aacute;rio</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Atendimento Defensoria</li> <li>&bull; Atendimento MP</li> <li>&bull; Atendimento Judici&aacute;rio</li> </ul> </div> <!-- Card 4: Audiência --> <div class="detail-card fade-in-up delay-100" style="border-left-color: #f59e0b;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Audi&ecirc;ncia</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Audi&ecirc;ncia</li> <li>&bull; Teleaudi&ecirc;ncia</li> </ul> </div> <!-- Card 5: Inspeção Sistemas de Justiça --> <div class="detail-card fade-in-up delay-200" style="border-left-color: #ec4899;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Inspe&ccedil;&atilde;o Sistemas de Justi&ccedil;a</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Inspe&ccedil;&atilde;o Judicial</li> <li>&bull; Inspe&ccedil;&atilde;o Defensoria</li> <li>&bull; Inspe&ccedil;&atilde;o MP</li> </ul> </div> <!-- Card 6: Rotina Socioeducativa --> <div class="detail-card fade-in-up delay-300" style="border-left-color: #8b5cf6;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Rotina Socioeducativa</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Desjejum/Caf&eacute; manh&atilde;</li> <li>&bull; Lanche Matutino</li> <li>&bull; Beleza e Est&eacute;tica</li> <li>&bull; Cuidados Pessoais</li> <li>&bull; Almo&ccedil;o</li> <li>&bull; Lanche Vespertino</li> <li>&bull; Jantar</li> <li>&bull; Ceia</li> <li>&bull; Tempo de Sol</li> <li>&bull; Degusta&ccedil;&atilde;o</li> <li>&bull; Outros</li> </ul> </div> <!-- Card 7: Atividades Esportivas --> <div class="detail-card fade-in-up delay-100" style="border-left-color: #10b981;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Atividades Esportivas</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Futebol</li> <li>&bull; Futsal</li> <li>&bull; Academia</li> <li>&bull; Basquete</li> <li>&bull; Outras modalidades</li> </ul> </div> <!-- Card 8: Cuidados em Saúde --> <div class="detail-card fade-in-up delay-200" style="border-left-color: #3b82f6;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Cuidados em Sa&uacute;de</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Atendimento de Enfermagem</li> <li>&bull; Cuidado em Sa&uacute;de</li> <li>&bull; Atendimento M&eacute;dico</li> <li>&bull; Atendimento Odontol&oacute;gico</li> <li>&bull; Exames</li> <li>&bull; Atendimento em Outras &Aacute;reas da Sa&uacute;de</li> <li>&bull; Imuniza&ccedil;&atilde;o</li> </ul> </div> <!-- Card 9: Atividade De Espiritualidade --> <div class="detail-card fade-in-up delay-300" style="border-left-color: #f59e0b;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Atividade De Espiritualidade</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Atividades de Assist&ecirc;ncia Religiosa</li> <li>&bull; Atividades em Valores Humanos</li> </ul> </div> <!-- Card 10: Avaliação --> <div class="detail-card fade-in-up delay-100" style="border-left-color: #ec4899;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Avalia&ccedil;&atilde;o</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Avalia&ccedil;&atilde;o Semanal</li> <li>&bull; Avalia&ccedil;&atilde;o de Progress&atilde;o de Fase</li> <li>&bull; Avalia&ccedil;&atilde;o Quinzenal</li> <li>&bull; Avalia&ccedil;&atilde;o Mensal</li> </ul> </div> <!-- Card 11: Atividades em Grupo --> <div class="detail-card fade-in-up delay-200" style="border-left-color: #10b981;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Atividades em Grupo</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Grupo Pedag&oacute;gico</li> <li>&bull; Grupo Reflexivo</li> <li>&bull; Enfoque Restaurativo</li> <li>&bull; Grupo Tem&aacute;tico</li> <li>&bull; Grupo Terap&ecirc;utico</li> </ul> </div> <!-- Card 12: Oficinas/Cursos --> <div class="detail-card fade-in-up delay-300" style="border-left-color: #8b5cf6;"> <h3 class="text-lg font-bold text-slate-800 mb-3">Oficinas/Cursos</h3> <p class="text-sm text-slate-600 mb-3">Inclui:</p> <ul class="text-sm text-slate-700 space-y-1"> <li>&bull; Cursos de Qualifica&ccedil;&atilde;o Profissional</li> <li>&bull; Oficinas/cursos Pedag&oacute;gicos</li> <li>&bull; Curso Inicia&ccedil;&atilde;o Profissional</li> <li>&bull; Oficinas de Inicia&ccedil;&atilde;o Profissional</li> </ul> </div> </div> </section> </div> <p> <script> // Registra o plugin Datalabels globalmente Chart.register(ChartDataLabels); // Função utilitária para verificar se um valor é 1 ou uma potência de 10. function isPowerOfTen(value) { if (value === 1) return true; return Math.log10(value) % 1 === 0 && value >= 10; } /** * Função para animar a contagem de um valor numérico em um elemento HTML. * @param {string} id O ID do elemento HTML a ser animado. * @param {number} start O valor inicial (geralmente 0). * @param {number} duration A duração da animação em milissegundos. * @param {boolean} isPercentage Indica se o valor é uma porcentagem (para formatação de decimais). */ function animateValue(id, start = 0, duration = 1500, isPercentage = false) { const obj = document.getElementById(id); if (!obj) return; // Obtém o valor final do atributo de dados const end = parseFloat(obj.getAttribute('data-target-value') || 0); // Ajusta a duração para valores pequenos (como percentuais) para animação mais rápida const finalDuration = end < 100 ? 1000 : duration; let startTime; function step(timestamp) { if (!startTime) startTime = timestamp; const progress = timestamp - startTime; const progressRatio = Math.min(progress / finalDuration, 1); let currentValue = start + (end - start) * progressRatio; let formattedValue; if (isPercentage) { // Formata porcentagens com uma casa decimal formattedValue = currentValue.toFixed(1); } else { // Formata números grandes (sem casas decimais) com separador de milhares formattedValue = Math.floor(currentValue).toLocaleString('pt-BR'); } obj.textContent = formattedValue; if (progress < finalDuration) { window.requestAnimationFrame(step); } else { // Garante que o valor final exato seja exibido if (isPercentage) { obj.textContent = end.toFixed(1); } else { obj.textContent = end.toLocaleString('pt-BR'); } } } window.requestAnimationFrame(step); } // Função para inicializar todos os contadores de números function initializeCounters() { // Cabeçalho animateValue('total-registros'); // Rotina Socioeducativa animateValue('kpi-rotina-value'); animateValue('kpi-rotina-pct', 0, 1000, true); // Desenvolvimento animateValue('dev-educacao'); animateValue('dev-esportivas'); animateValue('dev-oficinas'); animateValue('dev-total'); animateValue('dev-total-pct', 0, 1000, true); // COMPLEMENTARES (KPI Principal e lista) - CORRIGIDO animateValue('comp-eventos'); // <--- ADICIONADO: Anima o valor principal do card (130.355) animateValue('comp-total-pct', 0, 1000, true); animateValue('comp-total'); // Lista de Complementares (para animação dos detalhes) animateValue('comp-eventos-list'); animateValue('comp-encontros-list'); animateValue('comp-grupo-list'); // Garantia de Direitos animateValue('dir-saude'); animateValue('dir-visitas'); animateValue('dir-justica'); animateValue('dir-total'); animateValue('dir-total-pct', 0, 1000, true); } // Configurações gerais dos gráficos Chart.defaults.font.family = 'Inter'; Chart.defaults.responsive = true; Chart.defaults.maintainAspectRatio = false; Chart.defaults.plugins.legend.position = 'bottom'; // AUMENTO DE 15% NOS FONTES DOS TOOLTIPS Chart.defaults.plugins.tooltip.titleFont = { size: 16, weight: 'bold' }; Chart.defaults.plugins.tooltip.bodyFont = { size: 14 }; Chart.defaults.plugins.tooltip.boxPadding = 4; Chart.defaults.animation.duration = 1500; // Define a duração da animação dos gráficos Chart.defaults.animation.easing = 'easeOutExpo'; // Dados extraídos da análise const totalGeral = 1055653; const dadosPrincipais = { rotulos: [ "Rotina Socioeducativa", "Evento/Atividade Socioeducativa", "Encontro", "Educação Escolar", "Cuidado Em Saúde", "Atividades Esportivas", "Atendimento Técnico", "Oficinas/Cursos", "Movimentações Diversas", "Visitas", "Avaliação", "Atividade De Espiritualidade", "Atividades em Grupo", "Ligação Assistida", "Audiência e/ou Teleaudiência", "Movimentações entre Unidades", "Atendimento Defensoria Pública, MP e Judiciário", "Atividade De Desenvolvimento", "Inspeção Sistemas de Justiça", "Emissão De Documentação Civil" ], valores: [ 668004, 130355, 60998, 55438, 46486, 27025, 16728, 10638, 9189, 8373, 6816, 5553, 4367, 1750, 1583, 1150, 891, 129, 106, 74 ], cores: Array(20).fill(0).map((_, i) => { if (i === 0) return '#8b5cf6'; if (i === 1) return '#f59e0b'; if (i === 2) return '#f59e0b'; if (i === 3) return '#10b981'; if (i === 4) return '#3b82f6'; if (i === 5) return '#10b981'; if (i < 10) return '#60a5fa'; return '#9ca3af'; }) }; const dadosMensais = { rotulos: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho"], valores: [179176, 171712, 188586, 175117, 173920, 167142] }; const dadosDiaSemana = { rotulos: ["Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"], valores: [154293, 151467, 155782, 156238, 150100, 134717, 153056], // NOVA PALETA: Sábado e Domingo com cor de destaque (#1e3a8a), demais em tons de azul/claro/cinza cores: ['#d8e6fd', '#b1cefb', '#8ab5fa', '#639cf8', '#3b82f6', '#0b60ea', '#0848b0'] }; // Função para gerar o gráfico de barras horizontais (Principais Movimentações) function gerarChartPrincipaisMovimentacoes() { const ctx = document.getElementById('chartPrincipaisMovimentacoes').getContext('2d'); new Chart(ctx, { type: 'bar', data: { labels: dadosPrincipais.rotulos, datasets: [{ label: 'Total de Movimentações', data: dadosPrincipais.valores, backgroundColor: dadosPrincipais.cores, borderRadius: 6, barPercentage: 0.8, categoryPercentage: 0.7 }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(context) { let label = context.label || ''; if (label) { label += ': '; } if (context.parsed.x !== null) { const percentage = ((context.parsed.x / totalGeral) * 100).toFixed(1); label += context.parsed.x.toLocaleString('pt-BR') + ' registros (' + percentage + '%)'; } return label; } } }, datalabels: { display: false } }, scales: { x: { type: 'logarithmic', min: 1, title: { display: false, }, ticks: { maxRotation: 0, minRotation: 0, callback: function(value, index, ticks) { if (isPowerOfTen(value)) { return value.toLocaleString('pt-BR'); } return null; }, font: { size: 14 } } }, y: { grid: { display: false }, ticks: { autoSkip: false, maxRotation: 0, minRotation: 0, font: { size: 14 } } } }, layout: { padding: { left: 10, right: 10, top: 10, bottom: 10 } } } }); } // Função para gerar o gráfico de linha (Histórico Mensal) function gerarChartHistoricoMensal() { const ctx = document.getElementById('chartHistoricoMensal').getContext('2d'); new Chart(ctx, { type: 'line', data: { labels: dadosMensais.rotulos, datasets: [{ label: 'Movimentações', data: dadosMensais.valores, borderColor: '#1d4ed8', backgroundColor: 'rgba(29, 78, 216, 0.2)', fill: true, tension: 0.4, pointRadius: 5, pointBackgroundColor: '#1d4ed8', pointHoverRadius: 7 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; if (label) { label += ': '; } if (context.parsed.y !== null) { label += context.parsed.y.toLocaleString('pt-BR'); } return label; } } } }, scales: { y: { title: { display: true, text: 'Volume', font: { size: 16, weight: 'bold' } }, ticks: { callback: function(value) { return value.toLocaleString('pt-BR'); }, font: { size: 14 } } }, x: { ticks: { font: { size: 14 } } } } } }); } // Função para gerar o gráfico de rosquinha (Dia da Semana) function gerarChartDiaSemana() { const ctx = document.getElementById('chartDiaSemana').getContext('2d'); new Chart(ctx, { type: 'doughnut', data: { labels: dadosDiaSemana.rotulos, datasets: [{ label: 'Total de Movimentações', data: dadosDiaSemana.valores, backgroundColor: dadosDiaSemana.cores, hoverOffset: 8, borderWidth: 2 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 14 } } }, tooltip: { callbacks: { label: function(context) { const label = context.label || ''; const value = context.parsed || 0; const total = context.dataset.data.reduce((a, b) => a + b, 0); const percentage = ((value / total) * 100).toFixed(1) + '%'; return `${label}: ${value.toLocaleString('pt-BR')} (${percentage})`; } } } } } }); } // Função principal de inicialização window.onload = function() { initializeCounters(); // Gráficos (irão animar automaticamente com as configurações do Chart.js) gerarChartPrincipaisMovimentacoes(); gerarChartHistoricoMensal(); gerarChartDiaSemana(); }; </script> </p>Thu, 30 Oct 2025 19:40:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/movimentacaohttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/atendimentos-tecnicos-2024-estatisticas-gerais<p></p> <p> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f1f5f9 0%, #e6edf5 100%); color: #475569; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; font-size: 1.2em; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; } @media (max-width: 768px) { .container { padding: 1rem; } } .grid { gap: 1rem; } .chart-container, .kpi-card { background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); border-radius: 1rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); padding: 1.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #e2e8f0; position: relative; overflow: hidden; } .chart-container::after, .kpi-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3); } .chart-container:hover::after, .kpi-card:hover::after { opacity: 1; } .chart-container:hover, .kpi-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); } h1, h2 { color: #1e293b; } h1 { font-size: 2.4rem; font-weight: 800; } h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem !important; } .insight-text { color: #475569; font-size: 1.2rem; line-height: 1.6; } .kpi-card p.text-sm { font-size: 1.104rem; font-weight: 600; } .kpi-card p.text-2xl { font-size: 2.208rem; } .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; } .delay-700 { animation-delay: 0.7s; } .delay-800 { animation-delay: 0.8s; } .chart-height { height: 320px !important; } canvas { display: block; max-width: 100%; height: auto !important; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)); } .counting { transition: all 0.5s ease-out; } .loading-complete::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #0ea5e9, #f59e0b); animation: loadingBar 1.5s ease-out; } @keyframes loadingBar { 0% { width: 0; opacity: 1; } 100% { width: 100%; opacity: 0; } } .export-btn { margin-top: 1rem; padding: 0.5rem 1rem; background-color: #0ea5e9; color: white; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.3s; border: none; cursor: pointer; } .export-btn:hover { background-color: #0284c7; transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .peak-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background-color: #fef3c7; color: #92400e; margin-left: 0.5rem; } @media (prefers-color-scheme: dark) { body { background: linear-gradient(135deg, #0f172a 0%, #1a2538 100%); color: #cbd5e1; } .chart-container, .kpi-card { background: linear-gradient(135deg, #1e293b 0%, #263445 100%); border-color: #334155; } h1, h2 { color: #f1f5f9; } .insight-text { color: #94a3b8; } .kpi-card .text-sm, .kpi-card .text-2xl { color: #e2e8f0; } } </style> <div class="container"><header class="text-center mb-8 fade-in-up"> <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight">Dashboard de Atendimentos T&eacute;cnicos</h1> <p class="mt-1 text-lg insight-text">IASES - An&aacute;lise Consolidada de 2024</p> <div class="flex justify-center mt-4"><button class="export-btn" id="exportBtn"> <svg fill="none" stroke="currentColor" viewbox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path> </svg> Exportar PDF </button></div> </header> <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="kpi-card flex items-center p-3 fade-in-up delay-100"> <div class="bg-sky-100 text-sky-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg></div> <div> <p class="text-sm font-medium">Total de Atendimentos</p> <p id="totalAtendimentos" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-200"> <div class="bg-amber-100 text-amber-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <div> <p class="text-sm font-medium">Total de Horas</p> <p id="totalHoras" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-300"> <div class="bg-green-100 text-green-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg></div> <div> <p class="text-sm font-medium">M&eacute;dia Mensal</p> <p id="mediaMensal" class="text-2xl font-bold counting">0</p> </div> </div> <div class="kpi-card flex items-center p-3 fade-in-up delay-400"> <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></div> <div> <p class="text-sm font-medium">M&ecirc;s de Pico</p> <p id="mesPico" class="text-2xl font-bold">-</p> </div> </div> </div> <div class="space-y-6"> <div class="chart-container fade-in-up delay-500"> <h2 class="text-2xl font-semibold mb-4 text-center">Evolu&ccedil;&atilde;o Mensal de Atendimentos e Horas</h2> <p class="text-base text-center mb-6 insight-text">Julho registrou o pico de atendimentos (4.309), enquanto Dezembro teve o maior volume de horas (8.276).</p> <canvas id="mensalChart" class="chart-height"></canvas></div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div class="chart-container fade-in-up delay-600"> <h2 class="text-2xl font-semibold mb-4 text-center">P&uacute;blico-Alvo do Atendimento</h2> <p class="text-base text-center mb-6 insight-text">O atendimento focado exclusivamente no adolescente corresponde a quase 80% dos casos.</p> <canvas id="publicoAlvoChart" class="chart-height"></canvas></div> <div class="chart-container fade-in-up delay-700"> <h2 class="text-2xl font-semibold mb-4 text-center">Principais Tipos de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">"Acompanhamentos" &eacute; 3 vezes mais frequente que a segunda principal categoria.</p> <canvas id="tipoAtendimentoChart" class="chart-height"></canvas></div> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> <div class="chart-container fade-in-up delay-800"> <h2 class="text-2xl font-semibold mb-4 text-center">Forma de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">A grande maioria dos atendimentos (84%) foi realizada de forma presencial.</p> <canvas id="formaAtendimentoChart" class="chart-height"></canvas></div> <div class="chart-container fade-in-up delay-900"> <h2 class="text-2xl font-semibold mb-4 text-center">Tipo de Atendimento</h2> <p class="text-base text-center mb-6 insight-text">Atendimentos individuais representam 92% do total.</p> <canvas id="tipoAtendimentoGeralChart" class="chart-height"></canvas></div> </div> </div> </div> <p> <script> // --- DADOS --- const dataAtendimentosMensal = [3492, 2758, 2751, 3226, 2914, 3413, 4309, 3971, 3809, 3886, 3487, 3320]; const dataHorasMensal = [7388, 5605, 4970, 5174, 4119, 6050, 7217, 6108, 6681, 4900, 5738, 8276]; const labelsMeses = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']; const dataPublicoAlvo = [33013, 4056, 2695, 603, 465, 396, 106]; const labelsPublicoAlvo = ['Adolescente', 'Adolescente e Família', 'Família', 'Público Externo', 'Adol. e P. Externo', 'Adol., Família e P. Ext.', 'Família e P. Externo']; const dataTipoAtendimento = [24513, 7321, 2815, 2055, 1800, 831, 739]; const labelsTipoAtendimento = ['Acompanhamentos', 'Acomp. P/ Avaliações', 'Ações de Acolhimento', 'Acomp. P/ Ligação Assistida', 'Instrumentos Técnicos', 'Acomp. Em Visitas', 'Ações em Grupos']; const dataFormaAtendimento = [34742, 6593]; const dataTipoAtendimentoGeral = [38125, 3211]; // --- ANIMAÇÕES --- function animateNumber(element, finalValue, duration = 2000) { const startTime = performance.now(); function update(currentTime) { const elapsed = currentTime - startTime; const progress = Math.min(elapsed / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); const current = finalValue * eased; element.textContent = Math.floor(current).toLocaleString('pt-BR'); if (progress < 1) requestAnimationFrame(update); } requestAnimationFrame(update); } function animateChart(chart) { const originalData = chart.data.datasets[0].data; chart.data.datasets[0].data = originalData.map(() => 0); chart.update(); let startTime = null; function animate(timestamp) { if (!startTime) startTime = timestamp; const progress = Math.min((timestamp - startTime) / 1000, 1); const eased = 1 - Math.pow(1 - progress, 3); chart.data.datasets[0].data = originalData.map(v => v * eased); chart.update(); if (progress < 1) requestAnimationFrame(animate); } requestAnimationFrame(animate); } // --- INICIALIZAÇÃO KPIs --- const totalAtendimentos = dataAtendimentosMensal.reduce((a, b) => a + b, 0); const totalHoras = dataHorasMensal.reduce((a, b) => a + b, 0); const mediaMensal = Math.round(totalAtendimentos / 12); const mesPicoIndex = dataAtendimentosMensal.indexOf(Math.max(...dataAtendimentosMensal)); setTimeout(() => { animateNumber(document.getElementById('totalAtendimentos'), totalAtendimentos); animateNumber(document.getElementById('totalHoras'), totalHoras); animateNumber(document.getElementById('mediaMensal'), mediaMensal); document.getElementById('mesPico').textContent = labelsMeses[mesPicoIndex]; }, 500); // --- GRÁFICOS --- Chart.defaults.plugins.legend.position = 'bottom'; Chart.defaults.font.size = 14; const mensalChart = new Chart(document.getElementById('mensalChart'), { type: 'bar', data: { labels: labelsMeses, datasets: [ { type: 'bar', label: 'Atendimentos', data: dataAtendimentosMensal, backgroundColor: '#0ea5e9', yAxisID: 'y' }, { type: 'line', label: 'Horas', data: dataHorasMensal, borderColor: '#f59e0b', tension: 0.3, fill: false, yAxisID: 'y1' } ] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { position: 'left' }, y1: { position: 'right', grid: { drawOnChartArea: false } } } } }); const publicoAlvoChart = new Chart(document.getElementById('publicoAlvoChart'), { type: 'bar', plugins: [ChartDataLabels], data: { labels: labelsPublicoAlvo, datasets: [{ data: dataPublicoAlvo, backgroundColor: '#14b8a6' }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { anchor: 'end', align: 'end', formatter: (v) => v.toLocaleString('pt-BR') } }, scales: { x: { display: false }, y: { grid: { display: false } } } } }); const tipoAtendimentoChart = new Chart(document.getElementById('tipoAtendimentoChart'), { type: 'bar', plugins: [ChartDataLabels], data: { labels: labelsTipoAtendimento, datasets: [{ data: dataTipoAtendimento, backgroundColor: '#3b82f6' }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: { anchor: 'end', align: 'end', formatter: (v) => v.toLocaleString('pt-BR') } }, scales: { x: { display: false }, y: { grid: { display: false } } } } }); const formaAtendimentoChart = new Chart(document.getElementById('formaAtendimentoChart'), { type: 'pie', data: { labels: ['Presencial', 'Não Presencial'], datasets: [{ data: dataFormaAtendimento, backgroundColor: ['#10b981', '#3b82f6'] }] }, options: { responsive: true, maintainAspectRatio: false } }); const tipoAtendimentoGeralChart = new Chart(document.getElementById('tipoAtendimentoGeralChart'), { type: 'doughnut', data: { labels: ['Individual', 'Grupo'], datasets: [{ data: dataTipoAtendimentoGeral, backgroundColor: ['#8b5cf6', '#f59e0b'] }] }, options: { responsive: true, maintainAspectRatio: false, cutout: '60%' } }); setTimeout(() => { [mensalChart, publicoAlvoChart, tipoAtendimentoChart, formaAtendimentoChart, tipoAtendimentoGeralChart].forEach(animateChart); document.getElementById('exportBtn').addEventListener('click', () => window.print()); document.querySelectorAll('.chart-container, .kpi-card').forEach(el => el.classList.add('loading-complete')); }, 1500); </script> </p>Wed, 22 Oct 2025 16:33:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/atendimentos-tecnicos-2024-estatisticas-geraishttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/a-cor-da-socioeducacao-no-espirito-santo<p></p> <p> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script> </p> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; width: 100%; } .chart-card { background-color: white; border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } @media (min-width: 768px) { .chart-card { padding: 2rem; } } .chart-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .kpi-card { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white; } .kpi-card-alt { background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%); color: white; } .main-kpi-card { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: white; } .comparison-card { background: linear-gradient(135deg, #334155 0%, #52525b 100%); color: white; } .kpi-value { font-size: 3rem; font-weight: 800; } @media (min-width: 768px) { .kpi-value { font-size: 3.5rem; } } .section-title { font-size: 1.75rem; font-weight: 700; color: #1e293b; margin-bottom: 1.5rem; text-align: center; } @media (min-width: 768px) { .section-title { font-size: 2rem; } } /* Animações de entrada */ .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } /* Garantir que os gráficos não estiquem */ canvas { display: block; max-width: 100%; height: auto !important; } /* Responsividade melhorada */ @media (max-width: 768px) { .container { padding: 1rem; } .chart-card { padding: 1rem; } .kpi-value { font-size: 2.5rem; } .section-title { font-size: 1.5rem; } } </style> <div class="container"><!-- Cabeçalho --><header class="text-center mb-12 fade-in-up"> <h1 class="text-4xl md:text-5xl font-extrabold text-slate-800 tracking-tight">A Cor da Socioeduca&ccedil;&atilde;o no Esp&iacute;rito Santo</h1> <p class="mt-4 text-lg text-slate-600">An&aacute;lise das disparidades raciais no sistema socioeducativo (IASES) de 2014 a 2023</p> </header><!-- SEÇÃO DE CARDS ADICIONADA --> <section class="mb-12"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8"> <div class="chart-card main-kpi-card text-center fade-in-up delay-100"> <h4 class="text-xl font-semibold mb-2 text-slate-300">Total de Entradas</h4> <p class="kpi-value animate-number" data-target="17348">0</p> <p class="opacity-80">no sistema (2014-2023)</p> </div> <div class="chart-card main-kpi-card text-center fade-in-up delay-200"> <h4 class="text-xl font-semibold mb-2 text-slate-300">Entradas de Pardos no Sistema</h4> <p class="kpi-value animate-number" data-target="14816">0</p> <p class="opacity-80">representando 85,4% do total</p> </div> <div class="chart-card main-kpi-card text-center fade-in-up delay-300"> <h4 class="text-xl font-semibold mb-2 text-slate-300">Pardos na Popula&ccedil;&atilde;o Jovem</h4> <p class="kpi-value animate-number" data-target="55" data-suffix="%">0%</p> <p class="opacity-80">na faixa de 12 a 21 anos no ES</p> </div> </div> </section> <!-- Seção Principal: A Grande Disparidade --> <section class="mb-12"> <h2 class="section-title fade-in-up">A Disparidade Racial em N&uacute;meros</h2> <div class="chart-card fade-in-up delay-100"> <h3 class="text-xl font-bold text-center mb-6">Comparativo: Popula&ccedil;&atilde;o Jovem (ES) vs. Entradas no IASES (%)</h3> <div class="h-96 w-full"><canvas id="disparityChart"></canvas></div> <p class="text-center mt-4 text-gray-600">Os dados mostram uma sobrerrepresenta&ccedil;&atilde;o massiva de jovens pardos e uma sub-representa&ccedil;&atilde;o acentuada de jovens brancos no sistema socioeducativo em rela&ccedil;&atilde;o &agrave; sua propor&ccedil;&atilde;o na popula&ccedil;&atilde;o geral do Esp&iacute;rito Santo.</p> </div> </section> <!-- Seção 2: ISocio --> <section class="mb-12"> <h2 class="section-title fade-in-up">&Iacute;ndice de Incid&ecirc;ncia Socioeducativa (ISocio)</h2> <p class="text-center text-slate-600 mb-8 max-w-3xl mx-auto fade-in-up">O &iacute;ndice mede quantas vezes mais um jovem de determinada cor/ra&ccedil;a tem chance de entrar no sistema em compara&ccedil;&atilde;o com um jovem branco.</p> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"> <div class="chart-card kpi-card text-center fade-in-up delay-100"> <h4 class="text-xl font-semibold mb-2">Pardos</h4> <p class="kpi-value animate-number" data-target="11.8" data-decimals="1" data-suffix="x">0.0x</p> <p class="opacity-80">mais chances de entrar no IASES</p> </div> <div class="chart-card kpi-card-alt text-center fade-in-up delay-200"> <h4 class="text-xl font-semibold mb-2">Amarelos</h4> <p class="kpi-value animate-number" data-target="10.4" data-decimals="1" data-suffix="x">0.0x</p> <p class="opacity-80">mais chances de entrar no IASES</p> </div> <div class="chart-card kpi-card text-center fade-in-up delay-300"> <h4 class="text-xl font-semibold mb-2">Pretos</h4> <p class="kpi-value animate-number" data-target="6.8" data-decimals="1" data-suffix="x">0.0x</p> <p class="opacity-80">mais chances de entrar no IASES</p> </div> <div class="chart-card kpi-card-alt text-center fade-in-up delay-400"> <h4 class="text-xl font-semibold mb-2">Ind&iacute;genas</h4> <p class="kpi-value animate-number" data-target="1.3" data-decimals="1" data-suffix="x">0.0x</p> <p class="opacity-80">mais chances de entrar no IASES</p> </div> </div> </section> <section class="mb-12"> <h2 class="section-title fade-in-up">Distribui&ccedil;&atilde;o Geogr&aacute;fica e Et&aacute;ria</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div class="chart-card fade-in-up delay-100"> <h3 class="text-xl font-bold text-center mb-6">Concentra&ccedil;&atilde;o de Entradas por Macrorregi&atilde;o</h3> <div class="h-80 w-full flex items-center justify-center"><canvas id="regionChart"></canvas></div> <p class="text-center mt-4 text-gray-600">A Macrorregi&atilde;o Metropolitana concentra 65% de todas as entradas no sistema, sendo o principal foco geogr&aacute;fico do fen&ocirc;meno.</p> </div> <div class="chart-card fade-in-up delay-200"> <h3 class="text-xl font-bold text-center mb-6">Distribui&ccedil;&atilde;o das Entradas por Faixa Et&aacute;ria</h3> <div class="h-80 w-full"><canvas id="ageChart"></canvas></div> <p class="text-center mt-4 text-gray-600">A grande maioria das entradas (74%) ocorre na faixa dos 15 aos 17 anos, um per&iacute;odo cr&iacute;tico para a evas&atilde;o escolar e vulnerabilidade social.</p> </div> </div> </section> <section class="mb-12"> <h2 class="section-title fade-in-up">Vulnerabilidades Interligadas</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"><!-- NOVA SEÇÃO GRÁFICA DE REINCIDÊNCIA --> <div class="chart-card fade-in-up delay-100"> <h3 class="text-xl font-bold text-center mb-6">Taxa de Reentrada (Reincid&ecirc;ncia)</h3> <p class="text-center text-slate-600 mb-8 max-w-2xl mx-auto -mt-4">A reincid&ecirc;ncia &eacute; mais alta entre jovens pretos e ind&iacute;genas, indicando desafios na reintegra&ccedil;&atilde;o social.</p> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"><!-- Card Indígenas --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-md text-slate-700">Ind&iacute;genas</h4> <div class="flex items-center gap-3 mt-2"> <div class="text-4xl font-extrabold text-red-500 animate-number" data-target="80" data-suffix="%">0%</div> <div class="flex flex-wrap gap-1 flex-1" id="indigenous-icons"></div> </div> </div> <!-- Card Pretos --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-md text-slate-700">Pretos</h4> <div class="flex items-center gap-3 mt-2"> <div class="text-4xl font-extrabold text-indigo-500 animate-number" data-target="46" data-suffix="%">0%</div> <div class="flex flex-wrap gap-1 flex-1" id="black-icons"></div> </div> </div> <!-- Card Brancos --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-md text-slate-700">Brancos</h4> <div class="flex items-center gap-3 mt-2"> <div class="text-4xl font-extrabold text-pink-500 animate-number" data-target="41" data-suffix="%">0%</div> <div class="flex flex-wrap gap-1 flex-1" id="white-icons"></div> </div> </div> <!-- Card Pardos --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-md text-slate-700">Pardos</h4> <div class="flex items-center gap-3 mt-2"> <div class="text-4xl font-extrabold text-amber-500 animate-number" data-target="38" data-suffix="%">0%</div> <div class="flex flex-wrap gap-1 flex-1" id="brown-icons"></div> </div> </div> </div> </div> <!-- GRÁFICO DE ESCOLARIDADE --> <div class="chart-card fade-in-up delay-200"> <h3 class="text-xl font-bold text-center mb-6">Atraso Escolar: % que N&atilde;o Chegou ao Ensino M&eacute;dio</h3> <div class="h-80 w-full"><canvas id="educationChart"></canvas></div> <p class="text-center mt-4 text-gray-600">O atraso escolar &eacute; um fator cr&iacute;tico. A grande maioria dos jovens entra no sistema sem ter alcan&ccedil;ado o Ensino M&eacute;dio, com destaque para pretos e pardos.</p> </div> </div> </section> <!-- SEÇÃO AJUSTADA --> <section class="mb-12"> <h2 class="section-title fade-in-up">Evolu&ccedil;&atilde;o e Sexo Atribu&iacute;do ao Nascer</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div class="chart-card fade-in-up delay-100"> <h3 class="text-xl font-bold text-center mb-6">Propor&ccedil;&atilde;o de Entradas de Pardos e Pretos (2014-2023)</h3> <div class="h-96 w-full"><canvas id="evolutionChart"></canvas></div> </div> <!-- CARD VISUAL DE SEXO --> <div class="chart-card flex flex-col fade-in-up delay-200"> <h3 class="text-xl font-bold text-center mb-6">Disparidade de Sexo: % de Jovens Pretos</h3> <p class="text-center text-slate-600 mb-8 max-w-2xl mx-auto -mt-4">Proporcionalmente, a representa&ccedil;&atilde;o de jovens pretas &eacute; o dobro entre as meninas em compara&ccedil;&atilde;o com os meninos.</p> <div class="space-y-6 flex-1 flex flex-col justify-center"><!-- Card Meninas --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-lg text-slate-700">Meninas</h4> <div class="flex items-center gap-4 mt-2"> <div class="text-5xl font-extrabold text-pink-500 animate-number" data-target="20" data-suffix="%">0%</div> <div class="flex flex-wrap gap-2 flex-1 justify-center" id="girls-icons"></div> </div> </div> <!-- Card Meninos --> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200"> <h4 class="font-bold text-lg text-slate-700">Meninos</h4> <div class="flex items-center gap-4 mt-2"> <div class="text-5xl font-extrabold text-blue-500 animate-number" data-target="10" data-suffix="%">0%</div> <div class="flex flex-wrap gap-2 flex-1 justify-center" id="boys-icons"></div> </div> </div> </div> </div> </div> </section> <!-- SEÇÃO DE COMPARAÇÃO NACIONAL --> <section class="mb-12"> <h2 class="section-title fade-in-up">Contexto Nacional: Um Fen&ocirc;meno Brasileiro</h2> <p class="text-center text-slate-600 mb-8 max-w-3xl mx-auto fade-in-up">A sobrerrepresenta&ccedil;&atilde;o de jovens Pretos e pardos n&atilde;o &eacute; uma exclusividade do Esp&iacute;rito Santo, mas um padr&atilde;o que se repete em todo o pa&iacute;s.</p> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="chart-card comparison-card text-center fade-in-up delay-100"> <h4 class="text-2xl font-bold mb-2">Bahia</h4> <p class="text-6xl font-extrabold text-teal-300">&gt;90%</p> <p class="opacity-80 mt-2">dos adolescentes internados s&atilde;o pretos ou pardos.</p> </div> <div class="chart-card comparison-card text-center fade-in-up delay-200"> <h4 class="text-2xl font-bold mb-2">Esp&iacute;rito Santo</h4> <p class="text-6xl font-extrabold text-teal-300">~95%</p> <p class="opacity-80 mt-2">dos adolescentes internados s&atilde;o pretos ou pardos.</p> </div> <div class="chart-card comparison-card text-center fade-in-up delay-300"> <h4 class="text-2xl font-bold mb-2">S&atilde;o Paulo</h4> <p class="text-6xl font-extrabold text-teal-300">~69%</p> <p class="opacity-80 mt-2">dos adolescentes internados s&atilde;o pretos ou pardos.</p> </div> <div class="chart-card comparison-card text-center fade-in-up delay-400"> <h4 class="text-2xl font-bold mb-2">Rio de Janeiro</h4> <p class="text-6xl font-extrabold text-teal-300">~65%</p> <p class="opacity-80 mt-2">dos adolescentes internados s&atilde;o pretos ou pardos.</p> </div> </div> </section> <footer class="text-center py-8 fade-in-up"> <h6 class="text-slate-500">Fonte: Dados compilados do caderno "A Cor da Socioeduca&ccedil;&atilde;o" (IASES, 2024) e resumo anal&iacute;tico.</h6> <p class="text-sm text-slate-500 mt-2">~ (Til): Significa "Aproximadamente" ou "Cerca de" e &gt; (Sinal de Maior): Significa "Mais de" ou "Maior que".</p> </footer></div> <p> <script> document.addEventListener("DOMContentLoaded", () => { // Criar ícones SVG dinamicamente function createIcons(containerId, count, colorClass) { const container = document.getElementById(containerId); if (!container) return; for(let i = 0; i < 10; i++) { const color = i < count ? colorClass : 'text-slate-300'; const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('class', `w-5 h-5 ${color}`); svg.setAttribute('fill', 'currentColor'); svg.setAttribute('viewBox', '0 0 20 20'); const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('fill-rule', 'evenodd'); path.setAttribute('d', 'M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z'); path.setAttribute('clip-rule', 'evenodd'); svg.appendChild(path); container.appendChild(svg); } } // Criar todos os ícones createIcons('indigenous-icons', 8, 'text-red-500'); createIcons('black-icons', 5, 'text-indigo-500'); createIcons('white-icons', 4, 'text-pink-500'); createIcons('brown-icons', 4, 'text-amber-500'); createIcons('girls-icons', 2, 'text-pink-500'); createIcons('boys-icons', 1, 'text-blue-500'); // --- ANIMAÇÃO DOS NÚMEROS --- const animateOnScroll = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const el = entry.target; const target = parseFloat(el.dataset.target); const duration = 1500; const decimals = parseInt(el.dataset.decimals) || 0; const suffix = el.dataset.suffix || ''; let start = 0; const startTime = performance.now(); const animate = (currentTime) => { const elapsedTime = currentTime - startTime; const progress = Math.min(elapsedTime / duration, 1); const current = start + progress * (target - start); const formattedNumber = new Intl.NumberFormat('pt-BR', { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(current); el.textContent = formattedNumber + suffix; if (progress < 1) { requestAnimationFrame(animate); } else { // Garante que o valor final seja exato el.textContent = new Intl.NumberFormat('pt-BR', { minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(target) + suffix; } }; requestAnimationFrame(animate); observer.unobserve(el); } }); }; const observer = new IntersectionObserver(animateOnScroll, { threshold: 0.5 }); document.querySelectorAll('.animate-number').forEach(el => { observer.observe(el); }); // --- CONFIGURAÇÕES GERAIS DOS GRÁFICOS --- Chart.register(ChartDataLabels); Chart.defaults.font.family = 'Inter'; Chart.defaults.responsive = true; Chart.defaults.maintainAspectRatio = false; Chart.defaults.plugins.legend.position = 'bottom'; Chart.defaults.plugins.tooltip.boxPadding = 4; Chart.defaults.plugins.tooltip.titleFont = { size: 14, weight: 'bold' }; Chart.defaults.plugins.tooltip.bodyFont = { size: 12 }; Chart.defaults.animation.duration = 1500; Chart.defaults.animation.easing = 'easeOutExpo'; Chart.defaults.plugins.datalabels.display = false; const colors = { blue: 'rgba(59, 130, 246, 0.8)', red: 'rgba(239, 68, 68, 0.8)', teal: 'rgba(20, 184, 166, 0.8)', indigo: 'rgba(79, 70, 229, 0.8)', pink: 'rgba(219, 39, 119, 0.8)', amber: 'rgba(245, 158, 11, 0.8)', green: 'rgba(16, 185, 129, 0.8)' }; // --- GRÁFICOS --- const disparityCtx = document.getElementById('disparityChart').getContext('2d'); new Chart(disparityCtx, { type: 'bar', data: { labels: ['Pardos', 'Brancos', 'Pretos'], datasets: [{ label: 'População Jovem no ES (%)', data: [55.01, 33.37, 11.18], backgroundColor: colors.blue, }, { label: 'Entradas no IASES (%)', data: [85.4, 4.4, 10.0], backgroundColor: colors.red, }] }, options: { plugins: { datalabels: { display: true, color: 'white', anchor: 'end', align: 'end', font: { weight: 'bold', size: 12 }, offset: -6, formatter: (value) => value.toFixed(1).replace('.', ',') + '%' } }, scales: { y: { beginAtZero: true, max: 100, ticks: { callback: value => value + '%' } } } } }); const regionCtx = document.getElementById('regionChart').getContext('2d'); new Chart(regionCtx, { type: 'doughnut', data: { labels: ['Metropolitana', 'Central', 'Sul', 'Norte'], datasets: [{ label: '% de Entradas', data: [65.1, 15.3, 11.0, 8.6], backgroundColor: [colors.indigo, colors.amber, colors.teal, colors.pink], borderColor: '#fff', borderWidth: 4, }] }, options: { plugins: { legend: { position: 'right' } } } }); const ageCtx = document.getElementById('ageChart').getContext('2d'); new Chart(ageCtx, { type: 'bar', data: { labels: ['12-14 anos', '15-17 anos', '18-20 anos'], datasets: [{ label: 'Número de Entradas', data: [1855, 12816, 2677], backgroundColor: [colors.teal, colors.indigo, colors.amber], }] }, options: { plugins: { legend: { display: false }, datalabels: { display: true, color: 'white', anchor: 'end', align: 'end', font: { weight: 'bold', size: 12 }, offset: -6, formatter: (value) => new Intl.NumberFormat('pt-BR').format(value) } }, scales: { y: { beginAtZero: true } } } }); const educationCtx = document.getElementById('educationChart').getContext('2d'); new Chart(educationCtx, { type: 'bar', data: { labels: ['Pretos', 'Pardos', 'Brancos'], datasets: [{ label: '% que não alcançou o Ensino Médio', data: [91.4, 90.7, 86.1], backgroundColor: [colors.indigo, colors.amber, colors.blue], }] }, options: { plugins: { legend: { display: false }, datalabels: { display: true, color: 'white', anchor: 'end', align: 'end', font: { weight: 'bold', size: 12 }, offset: -6, formatter: (value) => value.toFixed(1).replace('.', ',') + '%' } }, scales: { y: { beginAtZero: true, max: 100, ticks: { callback: value => value + '%' } } } } }); const evolutionCtx = document.getElementById('evolutionChart').getContext('2d'); new Chart(evolutionCtx, { type: 'line', data: { labels: ['2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'], datasets: [{ label: 'Pardos (%)', data: [86.8, 85.8, 84.8, 84.5, 85.8, 90.8, 83.9, 81.5, 84.3, 81.5], borderColor: colors.indigo.replace('0.8','1'), backgroundColor: colors.indigo, fill: true, tension: 0.3 }, { label: 'Pretos (%)', data: [8.8, 9.9, 10.3, 10.4, 9.6, 6.3, 10.9, 13.0, 11.7, 12.5], borderColor: colors.teal.replace('0.8','1'), backgroundColor: colors.teal, fill: true, tension: 0.3 }] }, options: { scales: { y: { beginAtZero: false, ticks: { callback: value => value + '%' } } } } }); }); </script> </p>Sat, 11 Oct 2025 23:44:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/a-cor-da-socioeducacao-no-espirito-santohttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/decretacao-mse-de-internacao-em-2024<p></p> <!-- Chart.js --> <p> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </p> <!-- Font Awesome CORRETO --> <p></p> <style> :root { --primary: #4361ee; --secondary: #3a0ca3; --accent: #f72585; --success: #4cc9f0; --light: #f8f9fa; --dark: #212529; --gray: #6c757d; --card-bg: #ffffff; --male-color: #4361ee; --female-color: #f72585; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: transparent; color: var(--dark); line-height: 1.6; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 25px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } .page-container { width: 100%; max-width: 1300px; } .main-container { width: 100%; background: transparent; border-radius: 20px; padding: 30px; color: var(--dark); } header { text-align: center; margin-bottom: 25px; padding: 25px; background: var(--card-bg); border-radius: 16px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; } header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); } h1 { color: var(--secondary); font-size: 3.2rem !important; margin-bottom: 15px; font-weight: 800; line-height: 1.2; } .subtitle { color: var(--gray); font-size: 1.6rem !important; font-weight: 400; line-height: 1.4; } .stats-highlight { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 25px; } .stat-card { background: var(--card-bg); border-radius: 14px; padding: 22px 15px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); } .stat-value { font-size: 2.8rem !important; font-weight: 800; color: var(--primary); margin: 12px 0; } .stat-label { font-size: 1.3rem !important; color: var(--gray); font-weight: 500; } .dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 25px; margin-bottom: 25px; } .full-width-section { display: flex; flex-direction: column; gap: 25px; margin-bottom: 25px; } .card { background: var(--card-bg); border-radius: 16px; padding: 25px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .full-width-card { width: 100%; } .card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .card-title { font-size: 1.8rem !important; font-weight: 700; color: var(--secondary); } .card-icon { width: 55px; height: 55px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3); font-size: 1.5rem !important; } /* GARANTIR que os ícones apareçam */ .card-icon i, .gender-icon i { font-size: inherit !important; display: block !important; line-height: 1 !important; } .chart-container { position: relative; height: 220px; width: 100%; } .tall-chart-container { height: 280px; } .age-chart-container { height: 200px !important; } .gender-distribution { display: flex; flex-direction: column; align-items: center; gap: 20px; } .gender-cards { display: flex; justify-content: center; gap: 20px; width: 100%; } .gender-card { flex: 1; background: var(--card-bg); border-radius: 16px; padding: 25px 20px; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); transition: all 0.3s ease; position: relative; overflow: hidden; } .gender-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } .gender-card.male::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--male-color); } .gender-card.female::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--female-color); } .gender-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; font-size: 32px !important; color: white; } .male-icon { background: linear-gradient(135deg, var(--male-color), #3a0ca3); box-shadow: 0 4px 12px rgba(67, 97, 238, 0.4); } .female-icon { background: linear-gradient(135deg, var(--female-color), #b5179e); box-shadow: 0 4px 12px rgba(247, 37, 133, 0.4); } .gender-percentage { font-size: 3.2rem !important; font-weight: 800; margin: 12px 0; } .male-percentage { color: var(--male-color) !important; } .female-percentage { color: var(--female-color) !important; } .gender-label { font-size: 1.5rem !important; color: var(--gray); font-weight: 500; margin-bottom: 8px; } .gender-count { font-size: 1.3rem !important; color: var(--dark); font-weight: 600; background: rgba(0, 0, 0, 0.03); padding: 8px 15px; border-radius: 16px; display: inline-block; } .comparison-container { display: flex; justify-content: space-between; margin-top: 15px; } .year-comparison { text-align: center; flex: 1; } .year-label { font-size: 1.4rem !important; font-weight: 600; color: var(--gray); } .year-value { font-size: 2.6rem !important; font-weight: 800; margin: 8px 0; } .year-2023 { color: var(--accent) !important; } .year-2024 { color: var(--success) !important; } .percentage { font-size: 1.2rem !important; color: var(--gray); padding: 5px 12px; border-radius: 16px; background: rgba(0, 0, 0, 0.03); display: inline-block; font-weight: 600; } .observation { margin-top: 18px; padding: 18px; background: rgba(67, 97, 238, 0.05); border-radius: 12px; font-size: 1.2rem !important; color: var(--dark); border-left: 4px solid var(--primary); line-height: 1.5; } .observation strong { color: var(--secondary); font-size: 1.3rem !important; } footer { text-align: center; padding: 20px; color: var(--gray); font-size: 1rem !important; margin-top: 15px; } /* Fallback para caso os ícones não carreguem */ .no-fa .card-icon::before, .no-fa .gender-icon::before { content: "⚡"; font-family: Arial !important; } .no-fa .fa-venus-mars::before { content: "⚧"; } .no-fa .fa-globe-americas::before { content: "🌎"; } .no-fa .fa-chart-line::before { content: "📈"; } .no-fa .fa-user-friends::before { content: "👥"; } .no-fa .fa-mars::before { content: "♂"; } .no-fa .fa-venus::before { content: "♀"; } @media (max-width: 768px) { body { padding: 15px; } .main-container { padding: 20px; } .dashboard { grid-template-columns: 1fr; } .gender-cards { flex-direction: column; } h1 { font-size: 2.4rem !important; } .card-title { font-size: 1.5rem !important; } .subtitle { font-size: 1.3rem !important; } .observation { font-size: 1.1rem !important; } } </style> <div class="page-container"> <div class="main-container"><header> <h1>Decreta&ccedil;&otilde;es de Interna&ccedil;&atilde;o 2024</h1> <p class="subtitle">An&aacute;lise detalhada por sexo, cor/ra&ccedil;a, idade e compara&ccedil;&atilde;o anual</p> </header> <div class="stats-highlight"> <div class="stat-card"> <div class="stat-value" data-target="439" data-format="integer">0</div> <div class="stat-label">Total de Decreta&ccedil;&otilde;es</div> </div> <div class="stat-card"> <div class="stat-value" data-target="95.7" data-format="percentage">0%</div> <div class="stat-label">Sexo Masculino</div> </div> <div class="stat-card"> <div class="stat-value" data-target="92.5" data-format="percentage">0%</div> <div class="stat-label">Pardos e Pretos</div> </div> <div class="stat-card"> <div class="stat-value" data-target="12.3" data-format="percentage">0%</div> <div class="stat-label">Crescimento vs 2023</div> </div> </div> <div class="dashboard"> <div class="card"> <div class="card-header"> <h2 class="card-title">Distribui&ccedil;&atilde;o por Sexo</h2> <div class="card-icon"><i class="fas fa-venus-mars"></i></div> </div> <div class="gender-distribution"> <div class="gender-cards"> <div class="gender-card male"> <div class="gender-icon male-icon"><i class="fas fa-mars"></i></div> <div class="gender-percentage male-percentage" data-target="95.7" data-format="percentage">0%</div> <div class="gender-label">Masculino</div> <div class="gender-count" data-target="420" data-format="integer">0</div> </div> <div class="gender-card female"> <div class="gender-icon female-icon"><i class="fas fa-venus"></i></div> <div class="gender-percentage female-percentage" data-target="4.3" data-format="percentage">0%</div> <div class="gender-label">Feminino</div> <div class="gender-count" data-target="19" data-format="integer">0</div> </div> </div> </div> <div class="observation"><strong>Observa&ccedil;&atilde;o:</strong> Disparidade significativa de g&ecirc;nero, com adolescentes do sexo masculino representando mais de 95% das interna&ccedil;&otilde;es.</div> </div> <div class="card"> <div class="card-header"> <h2 class="card-title">Distribui&ccedil;&atilde;o por Cor/Ra&ccedil;a</h2> <div class="card-icon"><i class="fas fa-globe-americas"></i></div> </div> <div class="chart-container"><canvas id="raceChart"></canvas></div> <div class="observation"><strong>Observa&ccedil;&atilde;o:</strong> Forte sobrerrepresenta&ccedil;&atilde;o de jovens pardos e pretos, que juntos comp&otilde;em 92.5% do total de decreta&ccedil;&otilde;es.</div> </div> </div> <div class="full-width-section"> <div class="card full-width-card"> <div class="card-header"> <h2 class="card-title">Comparativo 2023 vs 2024</h2> <div class="card-icon"><i class="fas fa-chart-line"></i></div> </div> <div class="chart-container tall-chart-container"><canvas id="comparisonChart"></canvas></div> <div class="comparison-container"> <div class="year-comparison"> <div class="year-label">2023</div> <div class="year-value year-2023" data-target="391" data-format="integer">0</div> <div class="percentage">Total</div> </div> <div class="year-comparison"> <div class="year-label">2024</div> <div class="year-value year-2024" data-target="439" data-format="integer">0</div> <div class="percentage">+<span data-target="12.3" data-format="percentage">0</span>%</div> </div> </div> <div class="observation"><strong>Observa&ccedil;&atilde;o:</strong> Aumento de 12.3% no volume total de interna&ccedil;&otilde;es em rela&ccedil;&atilde;o a 2023, com destaque para os meses de Dezembro, Agosto e Julho.</div> </div> <div class="card full-width-card"> <div class="card-header"> <h2 class="card-title">Distribui&ccedil;&atilde;o por Idade</h2> <div class="card-icon"><i class="fas fa-user-friends"></i></div> </div> <div class="chart-container age-chart-container"><canvas id="ageChart"></canvas></div> <div class="observation"><strong>Observa&ccedil;&atilde;o:</strong> Concentra&ccedil;&atilde;o nas idades de 16 e 17 anos (62% dos casos), pr&oacute;ximos da maioridade penal. Apenas 6.4% t&ecirc;m 14 anos ou menos.</div> </div> </div> <footer> <p>Fonte: Dados de Decreta&ccedil;&otilde;es de MSE de Interna&ccedil;&atilde;o em 2024 | An&aacute;lise realizada com base nos dados fornecidos</p> <p>| Sexo Atribu&iacute;do ao Nascer&nbsp;|</p> </footer></div> </div> <p> <script> // Verificar se Font Awesome carregou setTimeout(function() { const icons = document.querySelectorAll('.fa'); if (icons.length === 0 || getComputedStyle(icons[0]).fontFamily.indexOf('Font Awesome') === -1) { document.body.classList.add('no-fa'); console.log('Font Awesome não carregou - usando fallback'); } }, 1000); // Função para animar números - CORRIGIDA para preservar o símbolo % function animateNumber(element, target, duration = 2000) { const start = parseFloat(element.textContent) || 0; const increment = (target - start) / (duration / 16); let current = start; const timer = setInterval(() => { current += increment; if ((increment > 0 && current >= target) || (increment < 0 && current <= target)) { clearInterval(timer); current = target; // Formatar o valor final baseado no data-format const format = element.getAttribute('data-format'); if (format === 'integer') { element.textContent = Math.round(current); } else if (format === 'percentage') { element.textContent = current.toFixed(1) + '%'; } else { element.textContent = Math.round(current); } return; } // Durante a animação const format = element.getAttribute('data-format'); if (format === 'integer') { element.textContent = Math.round(current); } else if (format === 'percentage') { element.textContent = current.toFixed(1) + '%'; } else { element.textContent = Math.round(current); } }, 16); } // Animação para todos os elementos com data-target function startAllAnimations() { const animatedElements = document.querySelectorAll('[data-target]'); animatedElements.forEach(element => { const target = parseFloat(element.getAttribute('data-target')); animateNumber(element, target); }); } // Configuração dos gráficos com animações document.addEventListener('DOMContentLoaded', function() { // Iniciar animações dos números setTimeout(startAllAnimations, 500); // Gráfico de Cor/Raça const raceCtx = document.getElementById('raceChart').getContext('2d'); const raceChart = new Chart(raceCtx, { type: 'bar', data: { labels: ['Parda', 'Preta', 'Branca', 'Amarela', 'Indígena'], datasets: [{ data: [352, 54, 31, 2, 0], backgroundColor: [ 'rgba(67, 97, 238, 0.8)', 'rgba(58, 12, 163, 0.8)', 'rgba(76, 201, 240, 0.8)', 'rgba(247, 37, 133, 0.8)', 'rgba(108, 117, 125, 0.8)' ], borderWidth: 1, borderRadius: 4 }] }, options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y', animation: { duration: 2000, easing: 'easeOutQuart' }, plugins: { legend: { display: false }, tooltip: { enabled: true } }, scales: { x: { beginAtZero: true, ticks: { font: { size: 14, weight: '600' } } }, y: { ticks: { font: { size: 14, weight: '600' } } } } } }); // Adicionar valores nas barras do gráfico de cor/raça - COR ESCURA raceChart.options.animation.onComplete = function() { const ctx = raceChart.ctx; raceChart.data.datasets.forEach((dataset, i) => { const meta = raceChart.getDatasetMeta(i); if (!meta.hidden) { meta.data.forEach((element, index) => { const value = dataset.data[index]; if (value > 0) { ctx.fillStyle = '#1a1d28'; // Cor escura para contraste ctx.font = 'bold 14px Segoe UI'; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; const padding = 10; const position = element.tooltipPosition(); ctx.fillText(value, position.x + padding, position.y); } }); } }); }; // Gráfico de Idade const ageCtx = document.getElementById('ageChart').getContext('2d'); new Chart(ageCtx, { type: 'line', data: { labels: ['12', '13', '14', '15', '16', '17', '18', '19', '20', '21'], datasets: [{ data: [0, 7, 21, 67, 135, 136, 44, 23, 6, 0], backgroundColor: 'rgba(67, 97, 238, 0.1)', borderColor: '#4361ee', borderWidth: 3, tension: 0.4, fill: true, pointBackgroundColor: '#4361ee', pointBorderColor: '#ffffff', pointBorderWidth: 2, pointRadius: 4, pointHoverRadius: 6 }] }, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 2000, easing: 'easeOutQuart' }, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { font: { size: 14, weight: '600' } } }, x: { ticks: { font: { size: 14, weight: '600' } } } } } }); // Gráfico de Comparação const comparisonCtx = document.getElementById('comparisonChart').getContext('2d'); const comparisonChart = new Chart(comparisonCtx, { type: 'bar', data: { labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'], datasets: [ { label: '2023', data: [16, 23, 49, 33, 19, 33, 30, 41, 45, 30, 40, 32], backgroundColor: 'rgba(247, 37, 133, 0.7)', borderRadius: 4 }, { label: '2024', data: [30, 32, 31, 26, 32, 29, 44, 49, 36, 44, 32, 54], backgroundColor: 'rgba(76, 201, 240, 0.7)', borderRadius: 4 } ] }, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 2000, easing: 'easeOutQuart' }, plugins: { legend: { labels: { font: { size: 16, weight: '600' } } } }, scales: { y: { beginAtZero: true, ticks: { font: { size: 14, weight: '600' } } }, x: { ticks: { font: { size: 14, weight: '600' } } } } } }); // Adicionar valores nas barras do gráfico de comparação - COR ESCURA comparisonChart.options.animation.onComplete = function() { const ctx = comparisonChart.ctx; comparisonChart.data.datasets.forEach((dataset, i) => { const meta = comparisonChart.getDatasetMeta(i); if (!meta.hidden) { meta.data.forEach((element, index) => { const value = dataset.data[index]; if (value > 0) { ctx.fillStyle = '#1a1d28'; // Cor escura para contraste ctx.font = 'bold 12px Segoe UI'; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; const position = element.tooltipPosition(); ctx.fillText(value, position.x, position.y - 5); } }); } }); }; }); </script> </p>Fri, 10 Oct 2025 19:17:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/decretacao-mse-de-internacao-em-2024https://observatorio.iases.es.gov.br:443/Not%C3%ADcia/entradas-no-iases-no-ano-de-2024<p></p> <p> <script src="https://cdn.tailwindcss.com"></script> </p> <p></p> <style> body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .card { background-color: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); padding: 24px; height: 100%; display: flex; flex-direction: column; } .bar-grow { width: 0%; transition: width 1.5s ease-out; } .bar-grow-vertical { height: 0%; transition: height 1.5s ease-out; } .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .observation-text { font-size: 1.125rem; line-height: 1.6; } .data-label { font-size: 1rem; } .data-value { font-size: 0.875rem; } .bar-value-label { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; font-weight: 600; color: #1e293b; background: rgba(255, 255, 255, 0.9); padding: 2px 6px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); opacity: 0; transition: opacity 0.3s ease; } .bar-group:hover .bar-value-label { opacity: 1; } </style> <div class="container"><!-- Cabeçalho --><header class="mb-8 text-center fade-in-up"> <h1 class="text-3xl md:text-4xl font-bold text-slate-800">An&aacute;lise das Entradas no Iases no ano de 2024</h1> <p class="text-lg text-slate-600 mt-2">Um Raio-X das Entradas Registradas em 2024</p> </header><!-- Card Principal --> <div class="w-full bg-blue-600 text-white p-8 rounded-2xl shadow-lg mb-8 text-center fade-in-up delay-100"> <h2 class="text-2xl font-semibold uppercase tracking-wider">Total de Entradas em 2024</h2> <p class="text-7xl font-bold mt-2 animate-on-scroll" data-count-to="993">0</p> <p class="text-blue-200 mt-1">no per&iacute;odo de Janeiro a Dezembro de 2024</p> </div> <!-- Grid de Cards Menores --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6"><!-- Card: Gênero --> <div class="card lg:col-span-1 fade-in-up delay-200"> <h3 class="text-xl font-bold text-slate-700 mb-4">Perfil por Sexo Atribu&iacute;do ao Nascer</h3> <div class="flex-grow flex items-center justify-around gap-4"> <div class="text-center"> <div class="bg-blue-100 rounded-full p-4 inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-blue-600" viewbox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path> </svg></div> <p class="text-4xl font-bold text-slate-800 mt-2 animate-on-scroll" data-count-to="93.5" data-format="percent">0%</p> <p class="text-slate-500 data-label">Masculino (929)</p> </div> <div class="text-center"> <div class="bg-pink-100 rounded-full p-4 inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-pink-600" viewbox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path> </svg></div> <p class="text-4xl font-bold text-slate-800 mt-2 animate-on-scroll" data-count-to="6.5" data-format="percent">0%</p> <p class="text-slate-500 data-label">Feminino (64)</p> </div> </div> </div> <!-- Card: Faixa Etária --> <div class="card lg:col-span-1 fade-in-up delay-300"> <h3 class="text-xl font-bold text-slate-700 mb-4">Principais Faixas Et&aacute;rias</h3> <div class="flex-grow space-y-3 flex flex-col justify-center"> <div class="flex items-center"><span class="w-16 data-label font-semibold text-slate-600">17 anos</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-teal-400 to-blue-500 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="29%"><span class="animate-on-scroll" data-count-to="288">0</span></div> </div> </div> <div class="flex items-center"><span class="w-16 data-label font-semibold text-slate-600">16 anos</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-teal-400 to-blue-500 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="22%"><span class="animate-on-scroll" data-count-to="220">0</span></div> </div> </div> <div class="flex items-center"><span class="w-16 data-label font-semibold text-slate-600">18 anos</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-teal-400 to-blue-500 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="16%"><span class="animate-on-scroll" data-count-to="160">0</span></div> </div> </div> <div class="flex items-center"><span class="w-16 data-label font-semibold text-slate-600">Outras</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-slate-400 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="33%"><span class="animate-on-scroll" data-count-to="325">0</span></div> </div> </div> </div> </div> <!-- Card: Motivo da Entrada --> <div class="card lg:col-span-1 fade-in-up delay-400"> <h3 class="text-xl font-bold text-slate-700 mb-4">Motivo da Entrada</h3> <div class="flex-grow space-y-3 flex flex-col justify-center"> <div> <p class="font-semibold text-slate-600 data-label">Mandado de Busca</p> <div class="w-full bg-slate-200 rounded-full h-6 mt-1 overflow-hidden"> <div class="bg-red-500 h-6 rounded-full flex items-center justify-end pr-2 text-white data-value font-bold bar-grow animate-on-scroll" data-final-width="59.5%"><span class="animate-on-scroll" data-count-to="591">0</span></div> </div> </div> <div> <p class="font-semibold text-slate-600 data-label">Flagrante de Ato Infracional</p> <div class="w-full bg-slate-200 rounded-full h-6 mt-1 overflow-hidden"> <div class="bg-orange-500 h-6 rounded-full flex items-center justify-end pr-2 text-white data-value font-bold bar-grow animate-on-scroll" data-final-width="39.7%"><span class="animate-on-scroll" data-count-to="394">0</span></div> </div> </div> <div> <p class="font-semibold text-slate-600 data-label">Descumprimento de MSE</p> <div class="w-full bg-slate-200 rounded-full h-6 mt-1 overflow-hidden"> <div class="bg-yellow-500 h-6 rounded-full flex items-center justify-end pr-2 text-slate-700 data-value font-bold bar-grow animate-on-scroll" data-final-width="0.8%"><span class="animate-on-scroll" data-count-to="8">0</span></div> </div> </div> </div> </div> <!-- Card: Raça/Cor --> <div class="card md:col-span-2 lg:col-span-3 fade-in-up delay-500"> <h3 class="text-xl font-bold text-slate-700 mb-4">Cor/Ra&ccedil;a (Autodeclarada)</h3> <div class="flex-grow flex flex-col justify-center"> <p class="text-center text-slate-600 mb-3 data-label">Pardos e Pretos representam <span class="font-bold text-slate-800">91,6%</span> do total de entradas.</p> <div class="w-full flex rounded-full h-8 overflow-hidden"> <div class="bg-yellow-900/70 flex items-center justify-center text-white data-value font-bold bar-grow animate-on-scroll" data-final-width="76%" title="Parda (755)">76%</div> <div class="bg-stone-800 flex items-center justify-center text-white data-value font-bold bar-grow animate-on-scroll" data-final-width="15.6%" title="Preta (155)">16%</div> <div class="bg-sky-300 flex items-center justify-center text-slate-700 data-value font-bold bar-grow animate-on-scroll" data-final-width="8.2%" title="Branca (81)">8%</div> </div> <div class="flex justify-center gap-6 mt-4 data-label"> <div class="flex items-center"><span class="w-4 h-4 rounded-full bg-yellow-900/70 mr-2"></span>Parda</div> <div class="flex items-center"><span class="w-4 h-4 rounded-full bg-stone-800 mr-2"></span>Preta</div> <div class="flex items-center"><span class="w-4 h-4 rounded-full bg-sky-300 mr-2"></span>Branca</div> </div> </div> </div> </div> <!-- Seção de Gráficos Detalhados --> <div class="space-y-6"><!-- Card: Escolaridade (Layout Aprimorado) --> <div class="card fade-in-up delay-100"> <h3 class="text-xl font-bold text-slate-700 mb-4">N&iacute;vel de Escolaridade (Top 4)</h3> <div class="flex-grow flex flex-col justify-center space-y-4"> <div class="flex items-center"><span class="w-40 data-label font-semibold text-slate-600 shrink-0">8&ordm; Ano do E.F.</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-purple-500 to-indigo-600 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="100%"><span class="animate-on-scroll" data-count-to="178">0</span></div> </div> </div> <div class="flex items-center"><span class="w-40 data-label font-semibold text-slate-600 shrink-0">7&ordm; Ano do E.F.</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-purple-500 to-indigo-600 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="86.5%"><span class="animate-on-scroll" data-count-to="154">0</span></div> </div> </div> <div class="flex items-center"><span class="w-40 data-label font-semibold text-slate-600 shrink-0">1&ordf; S&eacute;rie do E.M.</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-purple-500 to-indigo-600 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="82.5%"><span class="animate-on-scroll" data-count-to="147">0</span></div> </div> </div> <div class="flex items-center"><span class="w-40 data-label font-semibold text-slate-600 shrink-0">6&ordm; Ano do E.F.</span> <div class="w-full bg-slate-200 rounded-full h-7 ml-2 overflow-hidden"> <div class="bg-gradient-to-r from-purple-500 to-indigo-600 h-7 rounded-full text-right pr-2 text-white font-bold data-value flex items-center justify-end bar-grow animate-on-scroll" data-final-width="80.3%"><span class="animate-on-scroll" data-count-to="143">0</span></div> </div> </div> </div> <p class="mt-4 observation-text text-slate-600 italic"><span class="font-bold">Observa&ccedil;&atilde;o:</span> Nota-se uma alta concentra&ccedil;&atilde;o de entradas nos anos finais do Ensino Fundamental, indicando uma janela de vulnerabilidade e poss&iacute;vel evas&atilde;o escolar.</p> </div> <!-- Card: Fluxo Mensal (Gráfico de Barras) --> <div class="card fade-in-up delay-200"> <h3 class="text-xl font-bold text-slate-700 mb-4">Fluxo Mensal de Entradas: 2024 vs 2023</h3> <div class="flex-grow flex flex-col"> <div id="bar-chart" class="flex-grow grid grid-cols-12 gap-2 items-end h-72 pt-6"><!-- Barras serão inseridas aqui pelo JS --></div> <div class="w-full h-px bg-slate-200 mt-2"></div> <div class="grid grid-cols-12 gap-2 text-center data-value text-slate-500 pt-1 font-semibold"><span>Jan</span><span>Fev</span><span>Mar</span><span>Abr</span><span>Mai</span><span>Jun</span> <span>Jul</span><span>Ago</span><span>Set</span><span>Out</span><span>Nov</span><span>Dez</span></div> </div> <div class="flex justify-center gap-6 mt-4 data-label flex-wrap"> <div class="flex items-center"><span class="w-4 h-4 rounded-full bg-blue-600 mr-2"></span>2024</div> <div class="flex items-center"><span class="w-4 h-4 rounded-full bg-orange-500 mr-2"></span>2023</div> </div> <p class="mt-4 observation-text text-slate-600 italic"><span class="font-bold">Observa&ccedil;&atilde;o:</span> O gr&aacute;fico de barras evidencia a sazonalidade diferente entre os anos. Enquanto 2023 (laranja) teve picos no in&iacute;cio e final do ano, 2024 (azul) concentrou seu maior volume de entradas no segundo semestre, especialmente em outubro.</p> </div> </div> <!-- Footer --><footer class="text-center mt-8 text-slate-500 text-sm fade-in-up delay-300"> <p>Fonte: Dados fornecidos sobre as Entradas no IASES em 2024 e 2023.</p> </footer></div> <p> <script> document.addEventListener('DOMContentLoaded', () => { // Função para animar números function animateValue(obj, start, end, duration, format) { let startTimestamp = null; const step = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const progress = Math.min((timestamp - startTimestamp) / duration, 1); let currentValue = progress * (end - start) + start; if (format === 'percent') { obj.innerHTML = currentValue.toFixed(1) + '%'; } else { obj.innerHTML = Math.floor(currentValue); } if (progress < 1) { window.requestAnimationFrame(step); } else { if (format === 'percent') { obj.innerHTML = end.toFixed(1) + '%'; } else { obj.innerHTML = end; } } }; window.requestAnimationFrame(step); } // Intersection Observer para disparar animações const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const target = entry.target; // Animação de contagem if (target.hasAttribute('data-count-to')) { const finalValue = parseFloat(target.getAttribute('data-count-to')); const format = target.getAttribute('data-format'); animateValue(target, 0, finalValue, 1500, format); } // Animação de crescimento de barra horizontal if (target.classList.contains('bar-grow')) { target.style.width = target.getAttribute('data-final-width'); } // Animação de crescimento de barra vertical if (target.classList.contains('bar-grow-vertical')) { setTimeout(() => { // Pequeno delay para efeito escalonado target.style.height = target.getAttribute('data-final-height'); }, 200); } observer.unobserve(target); // Animar apenas uma vez } }); }, { threshold: 0.1 }); // Observar todos os elementos que precisam de animação document.querySelectorAll('.animate-on-scroll').forEach(el => { observer.observe(el); }); // Lógica para o gráfico de barras mensal const data2024 = [75, 54, 89, 65, 88, 94, 93, 76, 83, 105, 100, 71]; const data2023 = [79, 85, 107, 92, 76, 81, 85, 93, 109, 87, 51, 68]; const maxVal = Math.max(...data2024, ...data2023); const chartContainer = document.getElementById('bar-chart'); if(chartContainer) { chartContainer.innerHTML = ''; // Limpa o container data2024.forEach((value2024, index) => { const value2023 = data2023[index]; const height2024 = (value2024 / maxVal) * 100; const height2023 = (value2023 / maxVal) * 100; const monthGroup = document.createElement('div'); monthGroup.className = 'flex justify-center items-end h-full gap-1'; // Bar 2024 const bar2024Group = document.createElement('div'); bar2024Group.className = 'bar-group w-1/2 h-full flex items-end'; const bar2024 = document.createElement('div'); bar2024.className = 'relative w-full bg-blue-600 rounded-t-sm bar-grow-vertical animate-on-scroll'; bar2024.setAttribute('data-final-height', `${height2024}%`); // Rótulo para barra 2024 const barValue2024 = document.createElement('span'); barValue2024.className = 'bar-value-label'; barValue2024.textContent = value2024; const label2024 = document.createElement('span'); label2024.className = 'absolute top-1 left-0 right-0 text-center text-sm font-bold text-white'; label2024.innerText = value2024; bar2024.appendChild(label2024); bar2024Group.appendChild(bar2024); bar2024Group.appendChild(barValue2024); // Bar 2023 const bar2023Group = document.createElement('div'); bar2023Group.className = 'bar-group w-1/2 h-full flex items-end'; const bar2023 = document.createElement('div'); bar2023.className = 'relative w-full bg-orange-500 rounded-t-sm bar-grow-vertical animate-on-scroll'; bar2023.setAttribute('data-final-height', `${height2023}%`); // Rótulo para barra 2023 const barValue2023 = document.createElement('span'); barValue2023.className = 'bar-value-label'; barValue2023.textContent = value2023; const label2023 = document.createElement('span'); label2023.className = 'absolute top-1 left-0 right-0 text-center text-sm font-bold text-white'; label2023.innerText = value2023; bar2023.appendChild(label2023); bar2023Group.appendChild(bar2023); bar2023Group.appendChild(barValue2023); monthGroup.appendChild(bar2024Group); monthGroup.appendChild(bar2023Group); chartContainer.appendChild(monthGroup); }); // Re-observa as barras verticais recém-criadas document.querySelectorAll('.bar-grow-vertical').forEach(el => { observer.observe(el); }); } }); </script> </p>Fri, 10 Oct 2025 12:40:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/entradas-no-iases-no-ano-de-2024https://observatorio.iases.es.gov.br:443/Not%C3%ADcia/panorama-da-internacao-socioeducativa<p></p> <p> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </p> <style> body { font-family: 'Inter', sans-serif; background-color: #ffffff; margin: 0; padding: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 1rem; } /* Ajuste para remover barras de rolagem: altura adaptável */ .chart-container { position: relative; width: 100%; margin-left: auto; margin-right: auto; height: auto; min-height: 350px; } @media (min-width: 768px) { .chart-container { min-height: 400px; } } .kpi-card { background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); transition: transform 0.2s; overflow: visible; /* Alterado de hidden para visible */ } .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .kpi-label { color: #073B4C; font-weight: 600; } .fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; } @media (max-width: 768px) { .container { padding: 0.5rem; } } /* Ajuste específico para o gráfico longo de escolaridade */ #education-box { min-height: 650px; } </style> <div class="container"><header class="bg-[#073B4C] text-white p-6 md:p-8 text-center shadow-lg fade-in-up"> <h1 class="text-3xl md:text-4xl font-bold mb-2">Perfil dos Socioeducandos em Cumprimento de MSE de Interna&ccedil;&atilde;o&nbsp;no dia 1&ordm; de cada M&ecirc;s</h1> <p class="text-lg md:text-xl text-gray-300">An&aacute;lise Consolidada de Janeiro a Dezembro</p> </header><main class="p-4 md:p-8"> <section id="kpis" class="mb-12"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="kpi-card p-6 text-center border-t-4 border-[#118AB2] fade-in-up delay-100"> <p class="text-lg kpi-label mb-2">Pico de Interna&ccedil;&otilde;es</p> <p class="text-5xl font-extrabold text-[#118AB2]">485</p> <p class="text-gray-500">(Fevereiro)</p> </div> <div class="kpi-card p-6 text-center border-t-4 border-[#06D6A0] fade-in-up delay-200"> <p class="text-lg kpi-label mb-2">M&iacute;nimo de Interna&ccedil;&otilde;es</p> <p class="text-5xl font-extrabold text-[#06D6A0]">313</p> <p class="text-gray-500">(Dezembro)</p> </div> <div class="kpi-card p-6 text-center border-t-4 border-[#FFD166] fade-in-up delay-300"> <p class="text-lg kpi-label mb-2">Pardos e Pretos</p> <p class="text-5xl font-extrabold text-[#FFD166]">92.9%</p> <p class="text-gray-500">(Predomin&acirc;ncia Racial)</p> </div> <div class="kpi-card p-6 text-center border-t-4 border-[#FF6B6B] fade-in-up delay-400"> <p class="text-lg kpi-label mb-2">Faixa Et&aacute;ria Cr&iacute;tica</p> <p class="text-5xl font-extrabold text-[#FF6B6B]">74.2%</p> <p class="text-gray-500">(16 a 18 anos)</p> </div> </div> </section> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <div class="bg-white rounded-lg shadow-md p-6 fade-in-up delay-100"> <h2 class="text-2xl font-bold text-center mb-4">Disparidade de Sexo Atribu&iacute;do ao Nascer</h2> <p class="text-center text-gray-600 mb-6">A an&aacute;lise anual confirma a <strong>predomin&acirc;ncia masculina (97%)</strong>, com uma presen&ccedil;a feminina est&aacute;vel por&eacute;m minorit&aacute;ria.</p> <div class="chart-container"><canvas id="genderChart"></canvas></div> </div> <div class="bg-white rounded-lg shadow-md p-6 fade-in-up delay-200"> <h2 class="text-2xl font-bold text-center mb-4">Distribui&ccedil;&atilde;o por Cor/Ra&ccedil;a</h2> <p class="text-center text-gray-600 mb-6">A popula&ccedil;&atilde;o parda comp&otilde;e a grande maioria (3.904), seguida pela popula&ccedil;&atilde;o <strong>preta</strong> (807), evidenciando o recorte racial do sistema.</p> <div class="chart-container"><canvas id="raceChart"></canvas></div> </div> <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6 fade-in-up delay-300"> <h2 class="text-2xl font-bold text-center mb-4">Faixa Et&aacute;ria (Idade)</h2> <p class="text-center text-gray-600 mb-6 max-w-3xl mx-auto">O &aacute;pice das interna&ccedil;&otilde;es ocorre aos <strong>17 anos (1.493)</strong>, indicando que a maior parte dos jovens ingressa ou permanece no sistema no final da adolesc&ecirc;ncia.</p> <div class="chart-container"><canvas id="ageChart"></canvas></div> </div> <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6 fade-in-up delay-400"> <h2 class="text-2xl font-bold text-center mb-4">O Abismo Educacional</h2> <p class="text-center text-gray-600 mb-6 max-w-3xl mx-auto">Os dados revelam um cen&aacute;rio cr&iacute;tico: a maioria esmagadora est&aacute; vinculada ao <strong>EJA Fundamental (2.422)</strong>, sinalizando uma defasagem idade-s&eacute;rie cr&ocirc;nica.</p> <div id="education-box" class="chart-container"><canvas id="educationChart"></canvas></div> </div> <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6 fade-in-up delay-500"> <h2 class="text-2xl font-bold text-center mb-4">Din&acirc;mica Populacional Mensal (Total Geral)</h2> <p class="text-center text-gray-600 mb-6 max-w-3xl mx-auto">Observa-se uma <strong>tend&ecirc;ncia de queda acentuada</strong> no &uacute;ltimo bimestre, saindo de 398 em Outubro para o m&iacute;nimo de 313 em Dezembro.</p> <div class="chart-container"><canvas id="monthlyTrendChart"></canvas></div> </div> </div> </main><footer class="text-center p-6 mt-8 bg-[#073B4C] text-gray-300 text-sm fade-in-up delay-600"> <p>Dados atualizados: Janeiro a Dezembro (Total: 5.070 registros).</p> </footer></div> <p> <script> const energeticPalette = { red: '#FF6B6B', yellow: '#FFD166', green: '#06D6A0', blue: '#118AB2', darkBlue: '#073B4C', gray: '#94A3B8' }; const animationOptions = { duration: 2000, easing: 'easeOutQuart', }; // --- Gráfico de Sexo --- const genderCtx = document.getElementById('genderChart').getContext('2d'); new Chart(genderCtx, { type: 'doughnut', data: { labels: ['Masculino', 'Feminino'], datasets: [{ data: [4916, 154], backgroundColor: [energeticPalette.blue, energeticPalette.yellow], borderColor: '#ffffff', borderWidth: 3 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } } }); // --- Gráfico de Raça --- const raceCtx = document.getElementById('raceChart').getContext('2d'); new Chart(raceCtx, { type: 'bar', data: { labels: ['Parda', 'Preta', 'Branca', 'Amarela', 'Indígena'], datasets: [{ label: 'Quantidade', data: [3904, 807, 350, 9, 0], backgroundColor: [energeticPalette.blue, energeticPalette.darkBlue, energeticPalette.green, energeticPalette.yellow, energeticPalette.gray] }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } } }); // --- Gráfico de Idade --- const ageCtx = document.getElementById('ageChart').getContext('2d'); const ageData = { '12 Anos': 2, '13 Anos': 24, '14 Anos': 146, '15 Anos': 452, '16 Anos': 987, '17 Anos': 1493, '18 Anos': 1282, '19 Anos': 513, '20 Anos': 171 }; new Chart(ageCtx, { type: 'bar', data: { labels: Object.keys(ageData), datasets: [{ label: 'Total por Idade', data: Object.values(ageData), backgroundColor: energeticPalette.green }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } } }); // --- Gráfico de Escolaridade --- const educationCtx = document.getElementById('educationChart').getContext('2d'); const educationData = { 'EJA Fund.': 2422, 'EJA Méd.': 787, '1ª Série E.M': 667, '2ª Série E.M': 350, '6º Ano Fund.': 163, '7º Ano Fund.': 165, '8º Ano Fund.': 139, '9º Ano Fund.': 138, 'Sem Preench.': 101, '3ª Série E.M': 63, '5º Ano Fund.': 48, '3º Ano Fund.': 12, '4º Ano Fund.': 7, 'Ensino Superior': 4, '1º Ano Fund.': 3, '2º Ano Fund.': 1 }; new Chart(educationCtx, { type: 'bar', data: { labels: Object.keys(educationData), datasets: [{ label: 'Alunos', data: Object.values(educationData), backgroundColor: energeticPalette.blue }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } } }); // --- Gráfico de Tendência Mensal --- const monthlyTrendCtx = document.getElementById('monthlyTrendChart').getContext('2d'); new Chart(monthlyTrendCtx, { type: 'line', data: { labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'], datasets: [{ label: 'Total de Socioeducandos', data: [467, 485, 480, 482, 422, 405, 402, 428, 426, 398, 362, 313], borderColor: energeticPalette.red, backgroundColor: 'rgba(255, 107, 107, 0.2)', fill: true, tension: 0.4 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: false } } } }); </script> </p>Wed, 08 Oct 2025 11:57:00 GMThttps://observatorio.iases.es.gov.br:443/Not%C3%ADcia/panorama-da-internacao-socioeducativa