|
Server : Apache System : Linux cloud.heroica.com.br 4.18.0-553.36.1.el8_10.x86_64 #1 SMP Wed Jan 22 03:07:54 EST 2025 x86_64 User : farolpborg ( 1053) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/farolpborg/public_html/_assets/js/farol-bussola/ |
Upload File : |
const periodoSelect = $('#periodoSelect');
if (periodoSelect) {
const getIndicadoresChaveData = (value) => {
const indicadoresWrapper = document.getElementById('indicadoresWrapper');
const xhr = new XMLHttpRequest();
const form = new FormData();
indicadoresWrapper.innerHTML = '';
xhr.open("POST", "/api/get-indicadores-chave-data");
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 201) {
const response = JSON.parse(xhr.responseText);
if (Array.isArray(response)) {
response.map(({ nome_indicador, valor_jpa, valor_pb, descricao }) => {
const nome = nome_indicador.toLowerCase();
if (nome === 'população estimada') {
const col = makeCol(nome);
indicadoresWrapper.append(col);
const { chartCard, chartContainer, descriptionContainer } = createPopulationChartSection({ valor_jpa, valor_pb, descricao });
col.append(chartCard);
col.append(descriptionContainer);
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(() => drawPopulationChart({ element: chartContainer, valor_jpa, valor_pb }));
} else if (nome === 'pib nominal') {
const col = makeCol(nome);
indicadoresWrapper.append(col);
const { chartCard, chartContainer, descriptionContainer } = createPIBSection({ valor_jpa, valor_pb, descricao });
col.append(chartCard);
col.append(descriptionContainer);
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(() => drawPIBChart({ element: chartContainer, valor_jpa, valor_pb }));
} else if (nome === 'nº de estudantes no ensino superior') {
const col = makeCol(nome);
indicadoresWrapper.append(col);
const { chartCard, chartContainer, descriptionContainer } = createStudentsSection({ valor_jpa, valor_pb, descricao });
col.append(chartCard);
col.append(descriptionContainer);
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(() => drawStudentsChart({ element: chartContainer, valor_jpa, valor_pb }));
} else if (nome === 'frota de veículos') {
const col = makeCol(nome);
indicadoresWrapper.append(col);
const { chartCard, chartContainer, descriptionContainer } = createVehiclesElement({ valor_jpa, valor_pb, descricao });
col.append(chartCard);
col.append(descriptionContainer);
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(() => drawVehiclesChart({ element: chartContainer, valor_jpa, valor_pb }));
} else if (nome === 'nº de leitos hospitalares') {
const col = makeCol(nome);
indicadoresWrapper.append(col);
const { chartCard, chartContainer, descriptionContainer } = createHospitalElement({ valor_jpa, valor_pb, descricao });
col.append(chartCard);
col.append(descriptionContainer);
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(() => drawHospitalBedsChart({ element: chartContainer, valor_jpa, valor_pb }));
} else if (nome === 'nº de leitos em mhs') {
const col = makeCol(nome);
indicadoresWrapper.append(col);
const { chartCard, chartContainer, descriptionContainer } = createMHBedsElement({ valor_jpa, valor_pb, descricao });
col.append(chartCard);
col.append(descriptionContainer);
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(() => drawMHBedsChart({ element: chartContainer, valor_jpa, valor_pb }));
} else if (nome === 'nº de pobres') {
const col = makeCol(nome);
indicadoresWrapper.append(col);
const { chartCard, chartContainer, descriptionContainer } = createPovertyElement({ valor_jpa, valor_pb, descricao });
col.append(chartCard);
col.append(descriptionContainer);
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(() => drawPovertyChart({ element: chartContainer, valor_jpa, valor_pb }));
} else if (nome === 'nº de desempregados') {
const col = makeCol(nome);
indicadoresWrapper.append(col);
const { chartCard, chartContainer, descriptionContainer } = createUnemploymentElement({ valor_jpa, valor_pb, descricao });
col.append(chartCard);
col.append(descriptionContainer);
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(() => drawUnemploymentChart({ element: chartContainer, valor_jpa, valor_pb }));
} else if (nome === 'nº de empresas') {
const col = makeCol(nome);
indicadoresWrapper.append(col);
const { chartCard, chartContainer, descriptionContainer } = createCompanyElement({ valor_jpa, valor_pb, descricao });
col.append(chartCard);
col.append(descriptionContainer);
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(() => drawCompaniesChart({ element: chartContainer, valor_jpa, valor_pb }));
} else if (nome === 'nº de domicílios') {
const col = makeCol(nome);
indicadoresWrapper.append(col);
const { chartCard, chartContainer, descriptionContainer } = createHouseholdsElement({ valor_jpa, valor_pb, descricao });
col.append(chartCard);
col.append(descriptionContainer);
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(() => drawHouseholdsChart({ element: chartContainer, valor_jpa, valor_pb }));
}
});
}
} else {
console.error("Error fetching data: " + xhr.status);
}
}
}
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
form.append("periodo", value);
xhr.send(form);
};
if (periodoSelect.val()) {
const selectedValue = periodoSelect.val();
getIndicadoresChaveData(selectedValue);
}
$('#periodoSelect').on('change', function () {
const selectedValue = $(this).val();
getIndicadoresChaveData(selectedValue);
});
}
function makeCol(nome) {
const col = document.createElement('div');
col.classList.add('col-md-3', 'px-0');
let style = '';
if (nome === 'população estimada') {
style = `
<style>
.chart-card {
background-color: #67D7C7 !important;
}
.chart-container {
width: 100%;
height: 200px;
position: relative;
}
.chart-legend {
margin-top: 15px;
font-size: 13px;
font-weight: 800 !important;
color: #555 !important;
}
.chart-legend span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
border-radius: 50%;
}
.jp-color {
background: #3D7F75;
}
.pb-color {
background: #f0f0f0;
}
.pt-45 {
padding-top: 2rem !important;
}
</style>
`;
} else if (nome === 'pib nominal') {
style = `
<style>
.chart-card2 {
background-color: #FF625F !important;
}
.jp-color2 {
background: #484743;
}
</style>
`;
} else if (nome === 'nº de estudantes no ensino superior') {
style = `
<style>
.chart-card3 {
background-color: #FFC857 !important;
}
.jp-color3 {
background-color: #484743 !important;
}
</style>
`;
} else if (nome === 'frota de veículos') {
style = `
<style>
.chart-card4 {
background-color: #DAD4BC !important;
}
.jp-color4 {
background-color: #FF625F !important;
}
</style>
`;
} else if (nome === 'nº de leitos hospitalares') {
style = `
<style>
.chart-card5 {
background-color: #814F77 !important;
}
.jp-color5 {
background-color: #67D7C7 !important;
}
</style>
`;
} else if (nome === 'nº de leitos em mhs') {
style = `
<style>
.chart-card6 {
background-color: #67D7C7 !important;
}
.jp-color6 {
background: #3D7F75;
}
</style>
`;
} else if (nome === 'nº de pobres') {
style = `
<style>
.chart-card7 {
background-color: #FF625F !important;
}
.chart-container {
width: 100%;
height: 200px;
position: relative;
}
.chart-legend {
margin-top: 15px;
font-size: 13px;
}
.chart-legend span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
}
.jp-color7 {
background: #484743;
}
.pb-color {
background: #f0f0f0;
}
.text-light {
color: #fff !important;
}
</style>
`
} else if (nome === 'nº de desempregados') {
style = `
<style>
.chart-card8 {
background-color: #FFC857 !important;
}
.jp-color8 {
background: #484743;
}
</style>
`
} else if (nome === 'nº de empresas') {
style = `
<style>
.chart-card9 {
background-color: #DAD4BC !important;
}
.jp-color9 {
background: #FF625F;
}
</style>
`
} else if (nome === 'nº de domicílios') {
style = `
<style>
.chart-card10 {
background-color: #814F77 !important;
}
.jp-color10 {
background: #67D7C7;
}
</style>
`
}
col.innerHTML = style;
return col;
}
function drawPopulationChart({ element, valor_jpa, valor_pb }) {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', valor_jpa, `João Pessoa: ${valor_jpa} hab.`],
['Paraíba', valor_pb, `Paraíba: ${valor_pb} hab.`]
]);
var options = {
backgroundColor: 'transparent',
title: 'POPULAÇÃO ESTIMADA',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: {
color: '#3D7F75'
},
1: {
color: '#f0f0f0'
}
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
}
};
var chart = new google.visualization.PieChart(element);
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#3D7F75';
centerText.textContent = (valor_jpa / (valor_pb) * 100).toFixed(1) + '%';
element.style.position = 'relative';
element.append(centerText);
}
function createPopulationChartSection({ valor_jpa, valor_pb, descricao }) {
const chartCard = document.createElement('div');
chartCard.classList.add('chart-card', 'px-5', 'py-4', 'pt-45');
const chartContainer = document.createElement('div');
chartContainer.classList.add('chart-container');
chartContainer.id = 'populacao_chart';
chartCard.append(chartContainer);
const chartLegend = document.createElement('div');
chartLegend.classList.add('chart-legend');
const jpLegend = document.createElement('p');
const jpSpan = document.createElement('span');
jpSpan.classList.add('jp-color');
jpLegend.append(jpSpan);
jpLegend.innerHTML += ` JPA: ${valor_jpa} hab.`;
chartLegend.append(jpLegend);
const pbLegend = document.createElement('p');
const pbSpan = document.createElement('span');
pbSpan.classList.add('pb-color');
pbLegend.append(pbSpan);
pbLegend.innerHTML += ` PB: ${valor_pb} hab.`;
chartLegend.append(pbLegend);
chartCard.append(chartLegend);
const description = document.createElement('p');
description.classList.add('p-4', 'ps-0');
description.textContent = descricao;
const descriptionContainer = document.createElement('div');
descriptionContainer.append(description);
return {
chartCard,
chartContainer,
descriptionContainer
};
}
function drawPIBChart({ element, valor_jpa, valor_pb }) {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', valor_jpa, `João Pessoa: R$ ${valor_jpa} bilhões`],
['Paraíba', valor_pb, `Paraíba: R$ ${valor_pb} bilhões`]
]);
var options = {
backgroundColor: 'transparent',
title: 'PIB NOMINAL',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: {
color: '#484743'
},
1: {
color: '#f0f0f0'
}
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
}
};
var chart = new google.visualization.PieChart(element);
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#f0f0f0';
centerText.textContent = (valor_jpa / (valor_pb) * 100).toFixed(1) + '%';
element.style.position = 'relative';
element.appendChild(centerText);
}
function createPIBSection({ valor_jpa, valor_pb, descricao }) {
const chartCard = document.createElement('div');
chartCard.classList.add('chart-card2', 'px-5', 'py-4', 'pt-45');
const chartContainer = document.createElement('div');
chartContainer.classList.add('chart-container');
chartContainer.id = 'pib_chart';
chartCard.append(chartContainer);
const chartLegend = document.createElement('div');
chartLegend.classList.add('chart-legend');
const jpLegend = document.createElement('p');
jpLegend.classList.add('text-light');
const jpSpan = document.createElement('span');
jpSpan.classList.add('jp-color2');
jpLegend.append(jpSpan);
jpLegend.innerHTML += ` JPA: ${valor_jpa} bilhões`;
chartLegend.append(jpLegend);
const pbLegend = document.createElement('p');
pbLegend.classList.add('text-light');
const pbSpan = document.createElement('span');
pbSpan.classList.add('pb-color');
pbLegend.append(pbSpan);
pbLegend.innerHTML += ` PB: ${valor_pb} bilhões`;
chartLegend.append(pbLegend);
chartCard.append(chartLegend);
const description = document.createElement('p');
description.classList.add('p-4', 'ps-0');
description.textContent = descricao;
const descriptionContainer = document.createElement('div');
descriptionContainer.append(description);
return {
chartCard,
chartContainer,
descriptionContainer
};
}
function drawStudentsChart({ element, valor_jpa, valor_pb }) {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', valor_jpa, `João Pessoa: ${valor_jpa} estudantes`],
['Paraíba', valor_pb, `Paraíba: ${valor_pb} estudantes`]
]);
var options = {
backgroundColor: 'transparent',
title: 'ESTUDANTES NO ENSINO SUPERIOR',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: {
color: '#484743'
},
1: {
color: '#f0f0f0'
}
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
}
};
var chart = new google.visualization.PieChart(element);
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#484743';
centerText.textContent = (valor_jpa / (valor_pb) * 100).toFixed(1) + '%';
element.style.position = 'relative';
element.appendChild(centerText);
}
function createStudentsSection({ valor_jpa, valor_pb, descricao }) {
const chartCard = document.createElement('div');
chartCard.classList.add('chart-card3', 'px-5', 'py-4', 'pt-45');
const chartContainer = document.createElement('div');
chartContainer.classList.add('chart-container');
chartContainer.id = 'students_chart';
chartCard.append(chartContainer);
const chartLegend = document.createElement('div');
chartLegend.classList.add('chart-legend');
const jpLegend = document.createElement('p');
const jpSpan = document.createElement('span');
jpSpan.classList.add('jp-color3');
jpLegend.append(jpSpan);
jpLegend.innerHTML += ` JPA: ${valor_jpa} alunos`;
chartLegend.append(jpLegend);
const pbLegend = document.createElement('p');
const pbSpan = document.createElement('span');
pbSpan.classList.add('pb-color');
pbLegend.append(pbSpan);
pbLegend.innerHTML += ` PB: ${valor_pb} alunos`;
chartLegend.append(pbLegend);
chartCard.append(chartLegend);
const description = document.createElement('p');
description.classList.add('p-4', 'ps-0');
description.textContent = descricao;
const descriptionContainer = document.createElement('div');
descriptionContainer.append(description);
return {
chartCard,
chartContainer,
descriptionContainer
};
}
function drawVehiclesChart({ element, valor_jpa, valor_pb }) {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', valor_jpa, `João Pessoa: ${valor_jpa} veículos`],
['Paraíba', valor_pb, `Paraíba: ${valor_pb} veículos`]
]);
var options = {
backgroundColor: 'transparent',
title: 'FROTA DE VEÍCULOS',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: {
color: '#FF625F'
},
1: {
color: '#f0f0f0'
}
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(element);
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
// centerText.style.fontWeight = 'bold';
// centerText.style.color = '#5D4037';
centerText.textContent = (valor_jpa / (valor_pb) * 100).toFixed(1) + '%';
element.style.position = 'relative';
element.appendChild(centerText);
}
function createVehiclesElement({ valor_jpa, valor_pb, descricao }) {
const chartCard = document.createElement('div');
chartCard.classList.add('chart-card4', 'px-5', 'py-4', 'pt-45');
const chartContainer = document.createElement('div');
chartContainer.classList.add('chart-container');
chartContainer.id = 'vehicles_chart';
chartCard.append(chartContainer);
const chartLegend = document.createElement('div');
chartLegend.classList.add('chart-legend');
const jpLegend = document.createElement('p');
const jpSpan = document.createElement('span');
jpSpan.classList.add('jp-color4');
jpLegend.append(jpSpan);
jpLegend.innerHTML += ` JPA: ${valor_jpa} veículos`;
chartLegend.append(jpLegend);
const pbLegend = document.createElement('p');
const pbSpan = document.createElement('span');
pbSpan.classList.add('pb-color');
pbLegend.append(pbSpan);
pbLegend.innerHTML += ` PB: ${valor_pb} veículos`;
chartLegend.append(pbLegend);
chartCard.append(chartLegend);
const description = document.createElement('p');
description.classList.add('p-4', 'ps-0');
description.textContent = descricao;
const descriptionContainer = document.createElement('div');
descriptionContainer.append(description);
return {
chartCard,
chartContainer,
descriptionContainer
};
}
function drawHospitalBedsChart({ element, valor_jpa, valor_pb }) {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', valor_jpa, `João Pessoa: ${valor_jpa} leitos`],
['Paraíba', valor_pb, `Paraíba: ${valor_pb} leitos`]
]);
var options = {
backgroundColor: 'transparent',
title: 'LEITOS HOSPITALARES',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: {
color: '#67D7C7'
}, // Cor verde-água para os leitos
1: {
color: '#f0f0f0'
}
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(element);
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#f0f0f0';
centerText.textContent = (valor_jpa / (valor_pb) * 100).toFixed(1) + '%';
element.style.position = 'relative';
element.appendChild(centerText);
}
function createHospitalElement({ valor_jpa, valor_pb, descricao }) {
const chartCard = document.createElement('div');
chartCard.classList.add('chart-card5', 'px-5', 'py-4', 'pt-45');
const chartContainer = document.createElement('div');
chartContainer.classList.add('chart-container');
chartContainer.id = 'hospital_beds_chart';
chartCard.append(chartContainer);
const chartLegend = document.createElement('div');
chartLegend.classList.add('chart-legend');
const jpLegend = document.createElement('p');
jpLegend.classList.add('text-light');
const jpSpan = document.createElement('span');
jpSpan.classList.add('jp-color5');
jpLegend.append(jpSpan);
jpLegend.innerHTML += ` JPA: ${valor_jpa} leitos`;
chartLegend.append(jpLegend);
const pbLegend = document.createElement('p');
pbLegend.classList.add('text-light');
const pbSpan = document.createElement('span');
pbSpan.classList.add('pb-color');
pbLegend.append(pbSpan);
pbLegend.innerHTML += ` PB: ${valor_pb} leitos`;
chartLegend.append(pbLegend);
chartCard.append(chartLegend);
const description = document.createElement('p');
description.classList.add('p-4', 'ps-0');
description.textContent = descricao;
const descriptionContainer = document.createElement('div');
descriptionContainer.append(description);
return {
chartCard,
chartContainer,
descriptionContainer
};
}
function drawMHBedsChart({ element, valor_jpa, valor_pb }) {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', valor_jpa, `João Pessoa: ${valor_jpa} leitos`],
['Paraíba', valor_pb, `Paraíba: ${valor_pb} leitos`]
]);
var options = {
backgroundColor: 'transparent',
title: 'LEITOS EM MEIOS DE HOSPEDAGEM',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: {
color: '#3D7F75'
}, // Cor verde para os leitos
1: {
color: '#f0f0f0'
}
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(element);
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#3D7F75';
centerText.textContent = (valor_jpa / (valor_pb) * 100).toFixed(1) + '%';
element.style.position = 'relative';
element.appendChild(centerText);
}
function createMHBedsElement({ valor_jpa, valor_pb, descricao }) {
const chartCard = document.createElement('div');
chartCard.classList.add('chart-card6', 'px-5', 'py-4', 'pt-45');
const chartContainer = document.createElement('div');
chartContainer.classList.add('chart-container');
chartContainer.id = 'mh_beds_chart';
chartCard.append(chartContainer);
const chartLegend = document.createElement('div');
chartLegend.classList.add('chart-legend');
const jpLegend = document.createElement('p');
const jpSpan = document.createElement('span');
jpSpan.classList.add('jp-color6');
jpLegend.append(jpSpan);
jpLegend.innerHTML += ` JPA: ${valor_jpa} leitos`;
chartLegend.append(jpLegend);
const pbLegend = document.createElement('p');
const pbSpan = document.createElement('span');
pbSpan.classList.add('pb-color');
pbLegend.append(pbSpan);
pbLegend.innerHTML += ` PB: ${valor_pb} leitos`;
chartLegend.append(pbLegend);
chartCard.append(chartLegend);
const description = document.createElement('p');
description.classList.add('p-4', 'ps-0');
description.textContent = descricao;
const descriptionContainer = document.createElement('div');
descriptionContainer.append(description);
return {
chartCard,
chartContainer,
descriptionContainer
};
}
function drawPovertyChart({ element, valor_jpa, valor_pb }) {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', valor_jpa, `João Pessoa: ${valor_jpa} pessoas`],
['Paraíba', valor_pb, `Paraíba: ${valor_pb} pessoas`]
]);
var options = {
backgroundColor: 'transparent',
title: 'POBREZA ABSOLUTA',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75, // Aumento do buraco central
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: {
color: '#484743'
}, // Cor cinza escuro
1: {
color: '#f0f0f0'
}
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(element);
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px'; // Fonte aumentada
centerText.style.color = '#484743'; // Removido o bold
centerText.textContent = (valor_jpa / (valor_pb) * 100).toFixed(1) + '%';
element.style.position = 'relative';
element.appendChild(centerText);
}
function createPovertyElement({ valor_jpa, valor_pb, descricao }) {
const chartCard = document.createElement('div');
chartCard.classList.add('chart-card7', 'px-5', 'py-4', 'pt-45');
const chartContainer = document.createElement('div');
chartContainer.classList.add('chart-container');
chartContainer.id = 'poverty_chart';
chartCard.append(chartContainer);
const chartLegend = document.createElement('div');
chartLegend.classList.add('chart-legend');
const jpLegend = document.createElement('p');
jpLegend.classList.add('text-light');
const jpSpan = document.createElement('span');
jpSpan.classList.add('jp-color7');
jpLegend.append(jpSpan);
jpLegend.innerHTML += ` JPA: ${valor_jpa} pessoas`;
chartLegend.append(jpLegend);
const pbLegend = document.createElement('p');
pbLegend.classList.add('text-light');
const pbSpan = document.createElement('span');
pbSpan.classList.add('pb-color');
pbLegend.append(pbSpan);
pbLegend.innerHTML += ` PB: ${valor_pb} pessoas`;
chartLegend.append(pbLegend);
chartCard.append(chartLegend);
const description = document.createElement('p');
description.classList.add('p-4', 'ps-0');
description.textContent = descricao;
const descriptionContainer = document.createElement('div');
descriptionContainer.append(description);
return {
chartCard,
chartContainer,
descriptionContainer
};
}
function drawUnemploymentChart({ element, valor_jpa, valor_pb }) {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', valor_jpa, `João Pessoa: ${valor_jpa} desempregados`],
['Paraíba', valor_pb, `Paraíba: ${valor_pb} desempregados`]
]);
var options = {
backgroundColor: 'transparent',
title: 'DESEMPREGO',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75, // Buraco central aumentado
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: {
color: '#484743'
}, // Cor cinza escuro
1: {
color: '#f0f0f0'
}
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(element);
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px'; // Fonte aumentada
centerText.style.color = '#484743'; // Sem bold
centerText.textContent = (valor_jpa / (valor_pb) * 100).toFixed(1) + '%';
element.style.position = 'relative';
element.appendChild(centerText);
}
function createUnemploymentElement({ valor_jpa, valor_pb, descricao }) {
const chartCard = document.createElement('div');
chartCard.classList.add('chart-card8', 'px-5', 'py-4', 'pt-45');
const chartContainer = document.createElement('div');
chartContainer.classList.add('chart-container');
chartContainer.id = 'unemployment_chart';
chartCard.append(chartContainer);
const chartLegend = document.createElement('div');
chartLegend.classList.add('chart-legend');
const jpLegend = document.createElement('p');
const jpSpan = document.createElement('span');
jpSpan.classList.add('jp-color8');
jpLegend.append(jpSpan);
jpLegend.innerHTML += ` JPA: ${valor_jpa} desempregados`;
jpLegend.style.whiteSpace = 'nowrap';
chartLegend.append(jpLegend);
const pbLegend = document.createElement('p');
const pbSpan = document.createElement('span');
pbSpan.classList.add('pb-color');
pbLegend.append(pbSpan);
pbLegend.innerHTML += ` PB: ${valor_pb} desempregados`;
pbLegend.style.whiteSpace = 'nowrap';
chartLegend.append(pbLegend);
chartCard.append(chartLegend);
const description = document.createElement('p');
description.classList.add('p-4', 'ps-0');
description.textContent = descricao;
const descriptionContainer = document.createElement('div');
descriptionContainer.append(description);
return {
chartCard,
chartContainer,
descriptionContainer
};
}
function drawCompaniesChart({ element, valor_jpa, valor_pb }) {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', valor_jpa, `João Pessoa: ${valor_jpa} empresas`],
['Paraíba', valor_pb, `Paraíba: ${valor_pb} empresas`]
]);
var options = {
backgroundColor: 'transparent',
title: 'EMPRESAS',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: {
color: '#FF625F'
},
1: {
color: '#f0f0f0'
}
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(element);
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#FF625F';
centerText.textContent = (valor_jpa / (valor_pb) * 100).toFixed(1) + '%';
element.appendChild(centerText);
}
function createCompanyElement({ valor_jpa, valor_pb, descricao }) {
const chartCard = document.createElement('div');
chartCard.classList.add('chart-card9', 'px-5', 'py-4', 'pt-45');
const chartContainer = document.createElement('div');
chartContainer.classList.add('chart-container');
chartContainer.id = 'company_chart';
chartCard.append(chartContainer);
const chartLegend = document.createElement('div');
chartLegend.classList.add('chart-legend');
const jpLegend = document.createElement('p');
const jpSpan = document.createElement('span');
jpSpan.classList.add('jp-color9');
jpLegend.append(jpSpan);
jpLegend.innerHTML += ` JPA: ${valor_jpa} empresas`;
chartLegend.append(jpLegend);
const pbLegend = document.createElement('p');
const pbSpan = document.createElement('span');
pbSpan.classList.add('pb-color');
pbLegend.append(pbSpan);
pbLegend.innerHTML += ` PB: ${valor_pb} empresas`;
chartLegend.append(pbLegend);
chartCard.append(chartLegend);
const description = document.createElement('p');
description.classList.add('p-4', 'ps-0');
description.textContent = descricao;
const descriptionContainer = document.createElement('div');
descriptionContainer.append(description);
return {
chartCard,
chartContainer,
descriptionContainer
};
}
function drawHouseholdsChart({ element, valor_jpa, valor_pb }) {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', valor_jpa, `João Pessoa: ${valor_jpa} domicílios`],
['Paraíba', valor_pb, `Paraíba: ${valor_pb} domicílios`]
]);
var options = {
backgroundColor: 'transparent',
title: 'DOMICÍLIOS',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: {
color: '#67D7C7'
},
1: {
color: '#f0f0f0'
}
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(element);
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#67D7C7';
centerText.textContent = '27,8%';
centerText.textContent = (valor_jpa / (valor_pb) * 100).toFixed(1) + '%';
element.appendChild(centerText);
}
function createHouseholdsElement({ valor_jpa, valor_pb, descricao }) {
const chartCard = document.createElement('div');
chartCard.classList.add('chart-card10', 'px-5', 'py-4', 'pt-45');
const chartContainer = document.createElement('div');
chartContainer.classList.add('chart-container');
chartContainer.id = 'households_chart';
chartCard.append(chartContainer);
const chartLegend = document.createElement('div');
chartLegend.classList.add('chart-legend');
const jpLegend = document.createElement('p');
jpLegend.classList.add('text-light');
const jpSpan = document.createElement('span');
jpSpan.classList.add('jp-color10');
jpLegend.append(jpSpan);
jpLegend.innerHTML += ` JPA: ${valor_jpa} domicílios`;
chartLegend.append(jpLegend);
const pbLegend = document.createElement('p');
pbLegend.classList.add('text-light');
const pbSpan = document.createElement('span');
pbSpan.classList.add('pb-color');
pbLegend.append(pbSpan);
pbLegend.innerHTML += ` PB: ${valor_pb} domicílios`;
chartLegend.append(pbLegend);
chartCard.append(chartLegend);
const description = document.createElement('p');
description.classList.add('p-4', 'ps-0');
description.textContent = descricao;
const descriptionContainer = document.createElement('div');
descriptionContainer.append(description);
return {
chartCard,
chartContainer,
descriptionContainer
};
}