Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dashboard SINASC 2018-2023</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| width: 100%; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.5s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .data-table { | |
| width: 100%; | |
| overflow-x: auto; | |
| } | |
| .data-table table { | |
| min-width: 800px; | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 12px; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="mb-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-blue-800">Dashboard SINASC</h1> | |
| <h2 class="text-xl text-gray-600">Sistema de Informações sobre Nascidos Vivos</h2> | |
| <p class="text-gray-500">Período: 2018-2023 | Total de registros: 1,298</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <img src="https://www.pompeia.sp.gov.br/admin/globalarq/logo/1f32e48b156635873b49d2dce584bbd6_reta.png" alt="Pompeia-SP" class="h-16"> | |
| </div> | |
| </div> | |
| <div class="bg-blue-800 text-white p-4 rounded-lg shadow-md"> | |
| <div class="flex flex-wrap justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-lg font-semibold">Resumo Geral</h3> | |
| <div class="flex flex-wrap gap-4 mt-2"> | |
| <div class="bg-blue-700 px-3 py-1 rounded"> | |
| <span class="font-bold">52%</span> Masculino | |
| </div> | |
| <div class="bg-blue-700 px-3 py-1 rounded"> | |
| <span class="font-bold">48%</span> Feminino | |
| </div> | |
| <div class="bg-blue-700 px-3 py-1 rounded"> | |
| <span class="font-bold">72.6%</span> Cesáreas | |
| </div> | |
| <div class="bg-blue-700 px-3 py-1 rounded"> | |
| <span class="font-bold">87.5%</span> Apgar 8-10 (5º min) | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-sm"> | |
| <p>Fonte: MS/SVSA/CGIAE - Sistema de Informações sobre Nascidos Vivos - SINASC</p> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="mb-8"> | |
| <div class="flex overflow-x-auto pb-2 mb-4"> | |
| <button class="tab-btn active px-4 py-2 font-medium text-blue-800 border-b-2 border-blue-800 whitespace-nowrap" data-tab="education">Instrução Materna</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 whitespace-nowrap" data-tab="gestation">Gestação</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 whitespace-nowrap" data-tab="robson">Grupos Robson</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 whitespace-nowrap" data-tab="prenatal">Pré-Natal</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 whitespace-nowrap" data-tab="delivery">Parto</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 whitespace-nowrap" data-tab="demographics">Demografia</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 whitespace-nowrap" data-tab="health">Saúde Neonatal</button> | |
| </div> | |
| <!-- Instrução Materna --> | |
| <div id="education" class="tab-content active bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-4">Instrução da Mãe</h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="chart-container"> | |
| <canvas id="educationChart"></canvas> | |
| </div> | |
| <div class="data-table"> | |
| <table class="w-full text-sm text-left text-gray-500"> | |
| <thead class="text-xs text-gray-700 uppercase bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2">Instrução da mãe</th> | |
| <th class="px-4 py-2">2018</th> | |
| <th class="px-4 py-2">2019</th> | |
| <th class="px-4 py-2">2020</th> | |
| <th class="px-4 py-2">2021</th> | |
| <th class="px-4 py-2">2022</th> | |
| <th class="px-4 py-2">2023</th> | |
| <th class="px-4 py-2">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">1 a 3 anos</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">1</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">1</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">2</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">4 a 7 anos</td> | |
| <td class="px-4 py-2">3</td> | |
| <td class="px-4 py-2">8</td> | |
| <td class="px-4 py-2">4</td> | |
| <td class="px-4 py-2">7</td> | |
| <td class="px-4 py-2">2</td> | |
| <td class="px-4 py-2">2</td> | |
| <td class="px-4 py-2">26</td> | |
| </tr> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">8 a 11 anos</td> | |
| <td class="px-4 py-2">152</td> | |
| <td class="px-4 py-2">150</td> | |
| <td class="px-4 py-2">153</td> | |
| <td class="px-4 py-2">129</td> | |
| <td class="px-4 py-2">136</td> | |
| <td class="px-4 py-2">129</td> | |
| <td class="px-4 py-2">849</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">12 anos e mais</td> | |
| <td class="px-4 py-2">78</td> | |
| <td class="px-4 py-2">66</td> | |
| <td class="px-4 py-2">63</td> | |
| <td class="px-4 py-2">65</td> | |
| <td class="px-4 py-2">73</td> | |
| <td class="px-4 py-2">76</td> | |
| <td class="px-4 py-2">421</td> | |
| </tr> | |
| <tr class="bg-white font-bold"> | |
| <td class="px-4 py-2">Total</td> | |
| <td class="px-4 py-2">233</td> | |
| <td class="px-4 py-2">224</td> | |
| <td class="px-4 py-2">221</td> | |
| <td class="px-4 py-2">201</td> | |
| <td class="px-4 py-2">212</td> | |
| <td class="px-4 py-2">207</td> | |
| <td class="px-4 py-2">1,298</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Duração da Gestação --> | |
| <div id="gestation" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-4">Duração da Gestação</h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="chart-container"> | |
| <canvas id="gestationChart"></canvas> | |
| </div> | |
| <div class="data-table"> | |
| <table class="w-full text-sm text-left text-gray-500"> | |
| <thead class="text-xs text-gray-700 uppercase bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2">Duração gestação</th> | |
| <th class="px-4 py-2">2018</th> | |
| <th class="px-4 py-2">2019</th> | |
| <th class="px-4 py-2">2020</th> | |
| <th class="px-4 py-2">2021</th> | |
| <th class="px-4 py-2">2022</th> | |
| <th class="px-4 py-2">2023</th> | |
| <th class="px-4 py-2">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">De 22 a 27 semanas</td> | |
| <td class="px-4 py-2">2</td> | |
| <td class="px-4 py-2">3</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">1</td> | |
| <td class="px-4 py-2">3</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">9</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">De 28 a 31 semanas</td> | |
| <td class="px-4 py-2">1</td> | |
| <td class="px-4 py-2">3</td> | |
| <td class="px-4 py-2">1</td> | |
| <td class="px-4 py-2">2</td> | |
| <td class="px-4 py-2">3</td> | |
| <td class="px-4 py-2">4</td> | |
| <td class="px-4 py-2">14</td> | |
| </tr> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">De 32 a 36 semanas</td> | |
| <td class="px-4 py-2">15</td> | |
| <td class="px-4 py-2">28</td> | |
| <td class="px-4 py-2">22</td> | |
| <td class="px-4 py-2">20</td> | |
| <td class="px-4 py-2">16</td> | |
| <td class="px-4 py-2">17</td> | |
| <td class="px-4 py-2">118</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">De 37 a 41 semanas</td> | |
| <td class="px-4 py-2">210</td> | |
| <td class="px-4 py-2">188</td> | |
| <td class="px-4 py-2">196</td> | |
| <td class="px-4 py-2">174</td> | |
| <td class="px-4 py-2">186</td> | |
| <td class="px-4 py-2">184</td> | |
| <td class="px-4 py-2">1,138</td> | |
| </tr> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">42 semanas ou mais</td> | |
| <td class="px-4 py-2">5</td> | |
| <td class="px-4 py-2">2</td> | |
| <td class="px-4 py-2">1</td> | |
| <td class="px-4 py-2">4</td> | |
| <td class="px-4 py-2">4</td> | |
| <td class="px-4 py-2">1</td> | |
| <td class="px-4 py-2">17</td> | |
| </tr> | |
| <tr class="bg-gray-50 font-bold"> | |
| <td class="px-4 py-2">Total</td> | |
| <td class="px-4 py-2">233</td> | |
| <td class="px-4 py-2">224</td> | |
| <td class="px-4 py-2">221</td> | |
| <td class="px-4 py-2">201</td> | |
| <td class="px-4 py-2">212</td> | |
| <td class="px-4 py-2">207</td> | |
| <td class="px-4 py-2">1,298</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Grupos de Robson --> | |
| <div id="robson" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-4">Grupos de Robson</h3> | |
| <div class="mb-4"> | |
| <div class="tooltip"> | |
| <i class="fas fa-info-circle text-blue-500"></i> | |
| <span class="tooltiptext">Classificação que categoriza mulheres em grupos mutuamente exclusivos com base em características obstétricas</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="chart-container"> | |
| <canvas id="robsonChart"></canvas> | |
| </div> | |
| <div class="data-table"> | |
| <table class="w-full text-sm text-left text-gray-500"> | |
| <thead class="text-xs text-gray-700 uppercase bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2">Grupos de Robson</th> | |
| <th class="px-4 py-2">Total</th> | |
| <th class="px-4 py-2">%</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">01 Nulípara, gest un, cefál >37sem, tp espontaneo</td> | |
| <td class="px-4 py-2">110</td> | |
| <td class="px-4 py-2">8.5%</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">02 Nulípara, gest un, cefál >37sem c/ind CS préTP</td> | |
| <td class="px-4 py-2">266</td> | |
| <td class="px-4 py-2">20.5%</td> | |
| </tr> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">03 Multípara,(s/ces prev)gest un cef >37sem espon</td> | |
| <td class="px-4 py-2">97</td> | |
| <td class="px-4 py-2">7.5%</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">04 Multíp,(s/ces prev)gest un cef >37s ind/CSpréTP</td> | |
| <td class="px-4 py-2">115</td> | |
| <td class="px-4 py-2">8.9%</td> | |
| </tr> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">05 C/CS ant gestação única, cefálica, > 37 semanas</td> | |
| <td class="px-4 py-2">509</td> | |
| <td class="px-4 py-2">39.2%</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">06 Todos partos pélvicos em nulíparas</td> | |
| <td class="px-4 py-2">20</td> | |
| <td class="px-4 py-2">1.5%</td> | |
| </tr> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">07 Todos partos pélv em multíparas (incl CS prévia</td> | |
| <td class="px-4 py-2">25</td> | |
| <td class="px-4 py-2">1.9%</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">08 Todas gest múltiplas (incluindo CS prévia</td> | |
| <td class="px-4 py-2">37</td> | |
| <td class="px-4 py-2">2.9%</td> | |
| </tr> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">09 Todas apres anormais (incluindo CS prévia</td> | |
| <td class="px-4 py-2">5</td> | |
| <td class="px-4 py-2">0.4%</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">10 Todas gest unic cefal <36sem (incl CS prévia</td> | |
| <td class="px-4 py-2">110</td> | |
| <td class="px-4 py-2">8.5%</td> | |
| </tr> | |
| <tr class="bg-white font-bold"> | |
| <td class="px-4 py-2">Total</td> | |
| <td class="px-4 py-2">1,298</td> | |
| <td class="px-4 py-2">100%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pré-Natal --> | |
| <div id="prenatal" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-4">Pré-Natal</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Adequação do Pré-Natal</h4> | |
| <div class="chart-container"> | |
| <canvas id="prenatalAdequacyChart"></canvas> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-2">Consultas de Pré-Natal</h4> | |
| <div class="chart-container"> | |
| <canvas id="prenatalConsultChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 data-table"> | |
| <table class="w-full text-sm text-left text-gray-500"> | |
| <thead class="text-xs text-gray-700 uppercase bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2">Adeq quant pré-natal</th> | |
| <th class="px-4 py-2">2018</th> | |
| <th class="px-4 py-2">2019</th> | |
| <th class="px-4 py-2">2020</th> | |
| <th class="px-4 py-2">2021</th> | |
| <th class="px-4 py-2">2022</th> | |
| <th class="px-4 py-2">2023</th> | |
| <th class="px-4 py-2">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">Não fez pré-natal</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">1</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">2</td> | |
| <td class="px-4 py-2">3</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">Inadequado</td> | |
| <td class="px-4 py-2">18</td> | |
| <td class="px-4 py-2">33</td> | |
| <td class="px-4 py-2">16</td> | |
| <td class="px-4 py-2">23</td> | |
| <td class="px-4 py-2">19</td> | |
| <td class="px-4 py-2">11</td> | |
| <td class="px-4 py-2">120</td> | |
| </tr> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">Intermediário</td> | |
| <td class="px-4 py-2">6</td> | |
| <td class="px-4 py-2">9</td> | |
| <td class="px-4 py-2">5</td> | |
| <td class="px-4 py-2">2</td> | |
| <td class="px-4 py-2">6</td> | |
| <td class="px-4 py-2">3</td> | |
| <td class="px-4 py-2">31</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">Adequado</td> | |
| <td class="px-4 py-2">6</td> | |
| <td class="px-4 py-2">9</td> | |
| <td class="px-4 py-2">6</td> | |
| <td class="px-4 py-2">3</td> | |
| <td class="px-4 py-2">11</td> | |
| <td class="px-4 py-2">8</td> | |
| <td class="px-4 py-2">43</td> | |
| </tr> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">Mais que adequado</td> | |
| <td class="px-4 py-2">201</td> | |
| <td class="px-4 py-2">172</td> | |
| <td class="px-4 py-2">187</td> | |
| <td class="px-4 py-2">167</td> | |
| <td class="px-4 py-2">172</td> | |
| <td class="px-4 py-2">180</td> | |
| <td class="px-4 py-2">1,079</td> | |
| </tr> | |
| <tr class="bg-gray-50 font-bold"> | |
| <td class="px-4 py-2">Total</td> | |
| <td class="px-4 py-2">233</td> | |
| <td class="px-4 py-2">224</td> | |
| <td class="px-4 py-2">221</td> | |
| <td class="px-4 py-2">201</td> | |
| <td class="px-4 py-2">212</td> | |
| <td class="px-4 py-2">207</td> | |
| <td class="px-4 py-2">1,298</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Parto --> | |
| <div id="delivery" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-4">Tipo de Parto</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Distribuição por Tipo de Parto</h4> | |
| <div class="chart-container"> | |
| <canvas id="deliveryTypeChart"></canvas> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-2">Evolução Anual</h4> | |
| <div class="chart-container"> | |
| <canvas id="deliveryTrendChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 data-table"> | |
| <table class="w-full text-sm text-left text-gray-500"> | |
| <thead class="text-xs text-gray-700 uppercase bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2">Tipo de parto</th> | |
| <th class="px-4 py-2">2018</th> | |
| <th class="px-4 py-2">2019</th> | |
| <th class="px-4 py-2">2020</th> | |
| <th class="px-4 py-2">2021</th> | |
| <th class="px-4 py-2">2022</th> | |
| <th class="px-4 py-2">2023</th> | |
| <th class="px-4 py-2">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">Vaginal</td> | |
| <td class="px-4 py-2">36</td> | |
| <td class="px-4 py-2">82</td> | |
| <td class="px-4 py-2">60</td> | |
| <td class="px-4 py-2">63</td> | |
| <td class="px-4 py-2">67</td> | |
| <td class="px-4 py-2">48</td> | |
| <td class="px-4 py-2">356</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">Cesário</td> | |
| <td class="px-4 py-2">197</td> | |
| <td class="px-4 py-2">142</td> | |
| <td class="px-4 py-2">161</td> | |
| <td class="px-4 py-2">138</td> | |
| <td class="px-4 py-2">145</td> | |
| <td class="px-4 py-2">159</td> | |
| <td class="px-4 py-2">942</td> | |
| </tr> | |
| <tr class="bg-white font-bold"> | |
| <td class="px-4 py-2">Total</td> | |
| <td class="px-4 py-2">233</td> | |
| <td class="px-4 py-2">224</td> | |
| <td class="px-4 py-2">221</td> | |
| <td class="px-4 py-2">201</td> | |
| <td class="px-4 py-2">212</td> | |
| <td class="px-4 py-2">207</td> | |
| <td class="px-4 py-2">1,298</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Demografia --> | |
| <div id="demographics" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-4">Demografia</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Distribuição por Sexo</h4> | |
| <div class="chart-container"> | |
| <canvas id="sexChart"></canvas> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-2">Distribuição por Cor/Raça</h4> | |
| <div class="chart-container"> | |
| <canvas id="raceChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 data-table"> | |
| <table class="w-full text-sm text-left text-gray-500"> | |
| <thead class="text-xs text-gray-700 uppercase bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2">Cor/raça</th> | |
| <th class="px-4 py-2">2018</th> | |
| <th class="px-4 py-2">2019</th> | |
| <th class="px-4 py-2">2020</th> | |
| <th class="px-4 py-2">2021</th> | |
| <th class="px-4 py-2">2022</th> | |
| <th class="px-4 py-2">2023</th> | |
| <th class="px-4 py-2">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">Branca</td> | |
| <td class="px-4 py-2">148</td> | |
| <td class="px-4 py-2">144</td> | |
| <td class="px-4 py-2">148</td> | |
| <td class="px-4 py-2">124</td> | |
| <td class="px-4 py-2">115</td> | |
| <td class="px-4 py-2">127</td> | |
| <td class="px-4 py-2">806</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">Preta</td> | |
| <td class="px-4 py-2">7</td> | |
| <td class="px-4 py-2">10</td> | |
| <td class="px-4 py-2">13</td> | |
| <td class="px-4 py-2">7</td> | |
| <td class="px-4 py-2">10</td> | |
| <td class="px-4 py-2">10</td> | |
| <td class="px-4 py-2">57</td> | |
| </tr> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">Amarela</td> | |
| <td class="px-4 py-2">1</td> | |
| <td class="px-4 py-2">2</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">3</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">2</td> | |
| <td class="px-4 py-2">8</td> | |
| </tr> | |
| <tr class="bg-gray-50 border-b"> | |
| <td class="px-4 py-2">Parda</td> | |
| <td class="px-4 py-2">74</td> | |
| <td class="px-4 py-2">67</td> | |
| <td class="px-4 py-2">60</td> | |
| <td class="px-4 py-2">67</td> | |
| <td class="px-4 py-2">83</td> | |
| <td class="px-4 py-2">68</td> | |
| <td class="px-4 py-2">419</td> | |
| </tr> | |
| <tr class="bg-white border-b"> | |
| <td class="px-4 py-2">Indígena</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">1</td> | |
| <td class="px-4 py-2">-</td> | |
| <td class="px-4 py-2">1</td> | |
| </tr> | |
| <tr class="bg-gray-50 font-bold"> | |
| <td class="px-4 py-2">Total</td> | |
| <td class="px-4 py-2">233</td> | |
| <td class="px-4 py-2">224</td> | |
| <td class="px-4 py-2">221</td> | |
| <td class="px-4 py-2">201</td> | |
| <td class="px-4 py-2">212</td> | |
| <td class="px-4 py-2">207</td> | |
| <td class="px-4 py-2">1,298</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Saúde Neonatal --> | |
| <div id="health" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-4">Saúde Neonatal</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Apgar 1º Minuto</h4> | |
| <div class="chart-container"> | |
| <canvas id="apgar1Chart"></canvas> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-2">Apgar 5º Minuto</h4> | |
| <div class="chart-container"> | |
| <canvas id="apgar5Chart"></canvas> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-2">Peso ao Nascer</h4> | |
| <div class="chart-container"> | |
| <canvas id="weightChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-semibold mb-2">Anomalias Congênitas</h4> | |
| <div class="chart-container"> | |
| <canvas id="anomalyChart"></canvas> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-2">Tipo de Anomalia Congênita</h4> | |
| <div class="chart-container"> | |
| <canvas id="anomalyTypeChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="mt-12 text-center text-gray-500 text-sm"> | |
| <p>Fonte: MS/SVSA/CGIAE - Sistema de Informações sobre Nascidos Vivos - SINASC</p> | |
| <div class="mt-4 md:mt-0"> | |
| <img src="https://static.wixstatic.com/media/22f9cf_23cb820e920f4953865942718942aec9~mv2.png/v1/fill/w_253,h_59,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Ativo_1.png" alt="UniverSaúde" class="h-10"> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Tab functionality | |
| document.querySelectorAll('.tab-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| // Remove active class from all buttons and contents | |
| document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active', 'text-blue-800', 'border-blue-800')); | |
| document.querySelectorAll('.tab-btn').forEach(b => b.classList.add('text-gray-500')); | |
| document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); | |
| // Add active class to clicked button and corresponding content | |
| btn.classList.add('active', 'text-blue-800', 'border-blue-800'); | |
| btn.classList.remove('text-gray-500'); | |
| document.getElementById(btn.dataset.tab).classList.add('active'); | |
| }); | |
| }); | |
| // Charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Education Chart | |
| const educationCtx = document.getElementById('educationChart').getContext('2d'); | |
| const educationChart = new Chart(educationCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['1 a 3 anos', '4 a 7 anos', '8 a 11 anos', '12 anos e mais'], | |
| datasets: [ | |
| { | |
| label: 'Total', | |
| data: [2, 26, 849, 421], | |
| backgroundColor: 'rgba(30, 64, 175, 0.7)', | |
| borderColor: 'rgba(30, 64, 175, 1)', | |
| borderWidth: 1 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.dataset.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Gestation Chart | |
| const gestationCtx = document.getElementById('gestationChart').getContext('2d'); | |
| const gestationChart = new Chart(gestationCtx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['22-27 semanas', '28-31 semanas', '32-36 semanas', '37-41 semanas', '42+ semanas'], | |
| datasets: [{ | |
| data: [9, 14, 118, 1138, 17], | |
| backgroundColor: [ | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(249, 115, 22, 0.7)', | |
| 'rgba(234, 179, 8, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(59, 130, 246, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(249, 115, 22, 1)', | |
| 'rgba(234, 179, 8, 1)', | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(59, 130, 246, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Robson Chart | |
| const robsonCtx = document.getElementById('robsonChart').getContext('2d'); | |
| const robsonChart = new Chart(robsonCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: [ | |
| 'Grupo 1', 'Grupo 2', 'Grupo 3', 'Grupo 4', 'Grupo 5', | |
| 'Grupo 6', 'Grupo 7', 'Grupo 8', 'Grupo 9', 'Grupo 10' | |
| ], | |
| datasets: [{ | |
| data: [110, 266, 97, 115, 509, 20, 25, 37, 5, 110], | |
| backgroundColor: [ | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(249, 115, 22, 0.7)', | |
| 'rgba(234, 179, 8, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(139, 92, 246, 0.7)', | |
| 'rgba(217, 70, 239, 0.7)', | |
| 'rgba(236, 72, 153, 0.7)', | |
| 'rgba(6, 182, 212, 0.7)', | |
| 'rgba(20, 184, 166, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(249, 115, 22, 1)', | |
| 'rgba(234, 179, 8, 1)', | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(139, 92, 246, 1)', | |
| 'rgba(217, 70, 239, 1)', | |
| 'rgba(236, 72, 153, 1)', | |
| 'rgba(6, 182, 212, 1)', | |
| 'rgba(20, 184, 166, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| labels: { | |
| boxWidth: 12 | |
| } | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Prenatal Adequacy Chart | |
| const prenatalAdequacyCtx = document.getElementById('prenatalAdequacyChart').getContext('2d'); | |
| const prenatalAdequacyChart = new Chart(prenatalAdequacyCtx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['Não fez', 'Inadequado', 'Intermediário', 'Adequado', 'Mais que adequado'], | |
| datasets: [{ | |
| data: [3, 120, 31, 43, 1079], | |
| backgroundColor: [ | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(249, 115, 22, 0.7)', | |
| 'rgba(234, 179, 8, 0.7)', | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(249, 115, 22, 1)', | |
| 'rgba(234, 179, 8, 1)', | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(16, 185, 129, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Prenatal Consult Chart | |
| const prenatalConsultCtx = document.getElementById('prenatalConsultChart').getContext('2d'); | |
| const prenatalConsultChart = new Chart(prenatalConsultCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Nenhuma', '1 a 3', '4 a 6', '7 ou mais'], | |
| datasets: [{ | |
| label: 'Consultas', | |
| data: [14, 7, 115, 1159], | |
| backgroundColor: 'rgba(30, 64, 175, 0.7)', | |
| borderColor: 'rgba(30, 64, 175, 1)', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.dataset.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Delivery Type Chart | |
| const deliveryTypeCtx = document.getElementById('deliveryTypeChart').getContext('2d'); | |
| const deliveryTypeChart = new Chart(deliveryTypeCtx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['Vaginal', 'Cesário'], | |
| datasets: [{ | |
| data: [356, 942], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(239, 68, 68, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(239, 68, 68, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Delivery Trend Chart | |
| const deliveryTrendCtx = document.getElementById('deliveryTrendChart').getContext('2d'); | |
| const deliveryTrendChart = new Chart(deliveryTrendCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['2018', '2019', '2020', '2021', '2022', '2023'], | |
| datasets: [ | |
| { | |
| label: 'Vaginal', | |
| data: [36, 82, 60, 63, 67, 48], | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Cesário', | |
| data: [197, 142, 161, 138, 145, 159], | |
| borderColor: 'rgba(239, 68, 68, 1)', | |
| backgroundColor: 'rgba(239, 68, 68, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top' | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Sex Chart | |
| const sexCtx = document.getElementById('sexChart').getContext('2d'); | |
| const sexChart = new Chart(sexCtx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['Masculino', 'Feminino'], | |
| datasets: [{ | |
| data: [652, 646], | |
| backgroundColor: [ | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(236, 72, 153, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(236, 72, 153, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Race Chart | |
| const raceCtx = document.getElementById('raceChart').getContext('2d'); | |
| const raceChart = new Chart(raceCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Branca', 'Preta', 'Amarela', 'Parda', 'Indígena'], | |
| datasets: [{ | |
| data: [806, 57, 8, 419, 1], | |
| backgroundColor: [ | |
| 'rgba(209, 213, 219, 0.7)', | |
| 'rgba(55, 65, 81, 0.7)', | |
| 'rgba(234, 179, 8, 0.7)', | |
| 'rgba(249, 115, 22, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(209, 213, 219, 1)', | |
| 'rgba(55, 65, 81, 1)', | |
| 'rgba(234, 179, 8, 1)', | |
| 'rgba(249, 115, 22, 1)', | |
| 'rgba(16, 185, 129, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Apgar 1 Chart | |
| const apgar1Ctx = document.getElementById('apgar1Chart').getContext('2d'); | |
| const apgar1Chart = new Chart(apgar1Ctx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['0-2', '3-5', '6-7', '8-10', 'Ignorado'], | |
| datasets: [{ | |
| data: [8, 37, 114, 1136, 3], | |
| backgroundColor: [ | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(249, 115, 22, 0.7)', | |
| 'rgba(234, 179, 8, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(156, 163, 175, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(249, 115, 22, 1)', | |
| 'rgba(234, 179, 8, 1)', | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(156, 163, 175, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Apgar 5 Chart | |
| const apgar5Ctx = document.getElementById('apgar5Chart').getContext('2d'); | |
| const apgar5Chart = new Chart(apgar5Ctx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['0-2', '3-5', '6-7', '8-10', 'Ignorado'], | |
| datasets: [{ | |
| data: [4, 5, 17, 1269, 3], | |
| backgroundColor: [ | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(249, 115, 22, 0.7)', | |
| 'rgba(234, 179, 8, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(156, 163, 175, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(249, 115, 22, 1)', | |
| 'rgba(234, 179, 8, 1)', | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(156, 163, 175, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Weight Chart | |
| const weightCtx = document.getElementById('weightChart').getContext('2d'); | |
| const weightChart = new Chart(weightCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['<500g', '500-999g', '1000-1499g', '1500-2499g', '2500-2999g', '3000-3999g', '4000g+'], | |
| datasets: [{ | |
| label: 'Peso ao nascer', | |
| data: [2, 9, 10, 110, 285, 827, 55], | |
| backgroundColor: 'rgba(30, 64, 175, 0.7)', | |
| borderColor: 'rgba(30, 64, 175, 1)', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.dataset.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Anomaly Chart | |
| const anomalyCtx = document.getElementById('anomalyChart').getContext('2d'); | |
| const anomalyChart = new Chart(anomalyCtx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['Com anomalia', 'Sem anomalia', 'Ignorado'], | |
| datasets: [{ | |
| data: [17, 1280, 1], | |
| backgroundColor: [ | |
| 'rgba(239, 68, 68, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(156, 163, 175, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(239, 68, 68, 1)', | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(156, 163, 175, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right' | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) label += ': '; | |
| label += context.raw.toLocaleString(); | |
| label += ' (' + Math.round(context.raw / 1298 * 100) + '%)'; | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Anomaly Type Chart | |
| const anomalyTypeCtx = document.getElementById('anomalyTypeChart').getContext('2d'); | |
| const anomalyTypeChart = new Chart(anomalyTypeCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: [ | |
| 'Espinha bífida', 'Sist. nervoso', 'Ap. circulatório', | |
| 'Fenda labial', 'Ap. digestivo', 'Ap. geniturinário', | |
| 'Deform. pés', 'Ap. osteomusc', 'Outras', 'Hemangioma' | |
| ], | |
| datasets: [{ | |
| label: 'Casos', | |
| data: [1, 1, 1, 1, 1, 3, 2, 4, 2, 1], | |
| backgroundColor: 'rgba(30, 64, 175, 0.7)', | |
| borderColor: 'rgba(30, 64, 175, 1)', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=paulosena/dash-sinasc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |