File manager - Edit - /var/www/html/portal/public/pmar/js/dashboard.js
Back
document.addEventListener('DOMContentLoaded', function () { // Gráfico: Ocorrências últimos 7 dias const ctxOcorrencias = document.getElementById('grafico7Dias'); if (ctxOcorrencias && typeof dadosGrafico7Dias !== 'undefined') { const dadosArray7 = Array.isArray(dadosGrafico7Dias) ? dadosGrafico7Dias : Object.values(dadosGrafico7Dias); const labels7 = dadosArray7.map(item => item.data); const valores7 = dadosArray7.map(item => item.total); new Chart(ctxOcorrencias, { type: 'line', data: { labels: labels7, datasets: [{ label: 'Ocorrências', data: valores7, backgroundColor: 'rgba(13, 110, 253, 0.1)', borderColor: 'rgba(13, 110, 253, 1)', borderWidth: 3, tension: 0.3, fill: true, pointBackgroundColor: 'white', pointBorderColor: 'rgba(13, 110, 253, 1)', pointRadius: 5, pointHoverRadius: 8, pointBorderWidth: 2 }] }, options: { maintainAspectRatio: false, responsive: true, plugins: { legend: { display: false }, tooltip: { backgroundColor: 'rgba(0, 0, 0, 0.8)', titleFont: { size: 14, weight: 'bold' }, bodyFont: { size: 13 }, padding: 12, cornerRadius: 6, displayColors: false } }, scales: { y: { beginAtZero: true, grid: { color: 'rgba(0, 0, 0, 0.05)' }, ticks: { stepSize: 1, font: { size: 12, family: "'Segoe UI', Roboto, sans-serif" } }, title: { display: true, text: 'Quantidade de Ocorrências', font: { size: 14, weight: 'bold' }, padding: { bottom: 10 } } }, x: { grid: { display: false }, ticks: { font: { size: 12, family: "'Segoe UI', Roboto, sans-serif" } }, title: { display: true, text: 'Data', font: { size: 14, weight: 'bold' }, padding: { top: 10 } } } } } }); } // Gráfico: Ocorrências mensais const ctxMensal = document.getElementById('graficoMensal'); if (ctxMensal && typeof dadosGraficoMensal !== 'undefined') { const dadosArrayMensal = Array.isArray(dadosGraficoMensal) ? dadosGraficoMensal : Object.values(dadosGraficoMensal); const labelsMensal = dadosArrayMensal.map(item => item.data); const valoresMensal = dadosArrayMensal.map(item => item.total); new Chart(ctxMensal, { type: 'bar', data: { labels: labelsMensal, datasets: [{ label: 'Ocorrências', data: valoresMensal, backgroundColor: 'rgba(32, 107, 196, 0.7)', borderColor: 'rgba(32, 107, 196, 1)', borderWidth: 1, borderRadius: 4, hoverBackgroundColor: 'rgba(32, 107, 196, 0.9)' }] }, options: { maintainAspectRatio: false, responsive: true, plugins: { legend: { display: false }, tooltip: { backgroundColor: 'rgba(0, 0, 0, 0.8)', titleFont: { size: 14, weight: 'bold' }, bodyFont: { size: 13 }, padding: 12, cornerRadius: 6, displayColors: false } }, scales: { y: { beginAtZero: true, grid: { color: 'rgba(0, 0, 0, 0.05)' }, ticks: { stepSize: 1, font: { size: 12, family: "'Segoe UI', Roboto, sans-serif" } }, title: { display: true, text: 'Quantidade de Ocorrências', font: { size: 14, weight: 'bold' }, padding: { bottom: 10 } } }, x: { grid: { display: false }, ticks: { font: { size: 12, family: "'Segoe UI', Roboto, sans-serif" }, maxRotation: 45, minRotation: 45 }, title: { display: true, text: 'Dias do Mês', font: { size: 14, weight: 'bold' }, padding: { top: 20 } } } } } }); } // Gráfico: Ocorrências anuais (por mês nos últimos anos) const ctxAnual = document.getElementById('graficoAnual'); if (ctxAnual && typeof dadosGraficoAnual !== 'undefined' && typeof mesesLabels !== 'undefined') { const cores = [ 'rgba(13, 110, 253, 0.7)', // Azul 'rgba(25, 135, 84, 0.7)', // Verde 'rgba(255, 193, 7, 0.7)', // Amarelo 'rgba(220, 53, 69, 0.7)', // Vermelho 'rgba(108, 117, 125, 0.7)', // Cinza ]; const datasets = dadosGraficoAnual.map((ano, index) => ({ label: ano.label, data: ano.data, backgroundColor: cores[index % cores.length], borderColor: cores[index % cores.length].replace('0.7', '1'), borderWidth: 2, borderRadius: 4, hoverBackgroundColor: cores[index % cores.length].replace('0.7', '0.9') })); new Chart(ctxAnual, { type: 'bar', data: { labels: mesesLabels, datasets: datasets }, options: { maintainAspectRatio: false, responsive: true, plugins: { legend: { display: true, position: 'top', labels: { font: { size: 12, family: "'Segoe UI', Roboto, sans-serif" }, padding: 15, usePointStyle: true } }, tooltip: { backgroundColor: 'rgba(0, 0, 0, 0.8)', titleFont: { size: 14, weight: 'bold' }, bodyFont: { size: 13 }, padding: 12, cornerRadius: 6, displayColors: true, mode: 'index', intersect: false } }, scales: { y: { beginAtZero: true, grid: { color: 'rgba(0, 0, 0, 0.05)' }, ticks: { stepSize: 1, font: { size: 12, family: "'Segoe UI', Roboto, sans-serif" } }, title: { display: true, text: 'Quantidade de Ocorrências', font: { size: 14, weight: 'bold' }, padding: { bottom: 10 } } }, x: { grid: { display: false }, ticks: { font: { size: 11, family: "'Segoe UI', Roboto, sans-serif" }, maxRotation: 45, minRotation: 45 }, title: { display: true, text: 'Meses', font: { size: 14, weight: 'bold' }, padding: { top: 20 } } } } } }); } });
| ver. 1.4 |
Github
|
.
| PHP 8.3.28 | Generation time: 0.01 |
proxy
|
phpinfo
|
Settings