Commit aa34d1f3 authored by ns17's avatar ns17
Browse files

create quilombolas schools page

parent 2d9f8c37
......@@ -33,7 +33,7 @@ function Table (props) {
const { state } = React.useContext(Store);
const [ prevData, setPrevData ] = useState('')
var contrastString = state.contrast;
var { data ,columns, columnsWidth, pageSize, defaultSorted, onClick, getCsv, NoData, mouseCursor, sortMethod, filterable} = props;
var { data ,columns, columnsWidth, pageSize, defaultSorted, onClick, getCsv, NoData, mouseCursor, sortMethod, filterable, header} = props;
var style = {}
// eslint-disable-next-line
useEffect(() => {
......@@ -94,7 +94,7 @@ function Table (props) {
case 'coleta_lixo_periodica':
return "Coleta de Lixo Periódica"
case "total":
return "Total de Escolas Indígenas"
return "Total de Escolas " + header
default:
return col
}
......
......@@ -105,7 +105,7 @@ const text8 = <div>
// Subpages is an Array of arrays that in the first position expects the title and in the second position the route
const subpages1 = {'route': '/quilombolas', 'links':['PRESENÇA TERRITORIAL', 'INFRAESTRUTURA E QUALIDADE DE VIDA', 'DESENVOLVIMENTO LOCAL E INCLUSÃO PRODUTIVA', 'DIREITOS E CIDADANIA']}
const subpages1 = {'route': '/quilombolas', 'links':['PRESENÇA TERRITORIAL', 'INFRAESTRUTURA E QUALIDADE DE VIDA', 'DESENVOLVIMENTO LOCAL E INCLUSÃO PRODUTIVA', 'DIREITOS E CIDADANIA', 'ESCOLAS QUILOMBOLAS']}
const subpages2 = {'route': '/juventude', 'links':['VULNERABILIDADES', 'TRABALHO', 'EDUCAÇÃO', 'FIES', 'PROUNI']}
// const subpages3 = {'route': '/ciganos', 'links':["POVOS CIGANOS"]}
// const subpages4 = {'route': '/matrizAfricana', 'links':["MATRIZ AFRICANA"]}
......
......@@ -26,6 +26,7 @@ import Eixo1 from './SubPages/Eixo1'
import Eixo2 from './SubPages/Eixo2'
import Eixo3 from './SubPages/Eixo3'
import Eixo4 from './SubPages/Eixo4'
import QuilombolasSchools from './SubPages/QuilombolaSchools'
import QuilombolaPresentation from './SubPages/QuilombolaPresentation'
// import QuilombolaAbout from './SubPages/QuilombolaAbout'
import { Tab, Tabs } from 'react-materialize';
......@@ -39,7 +40,7 @@ function Quilombolas() {
// Get information about which page was accessed
const { state, dispatch } = React.useContext(Store);
let states = { "APRESENTAÇÃO": false, "PRESENÇA TERRITORIAL": false, "INFRAESTRUTURA E QUALIDADE DE VIDA": false, "DESENVOLVIMENTO LOCAL E INCLUSÃO PRODUTIVA": false, "DIREITOS E CIDADANIA": false }
let states = { "APRESENTAÇÃO": false, "PRESENÇA TERRITORIAL": false, "INFRAESTRUTURA E QUALIDADE DE VIDA": false, "DESENVOLVIMENTO LOCAL E INCLUSÃO PRODUTIVA": false, "DIREITOS E CIDADANIA": false, "ESCOLAS QUILOMBOLAS": false}
if (state.page.toUpperCase() in states) {
states[state.page.toUpperCase()] = true
}
......@@ -74,6 +75,7 @@ function Quilombolas() {
<Tab title="Infraestrutura e Qualidade de Vida" active={states["INFRAESTRUTURA E QUALIDADE DE VIDA"]}> {states["INFRAESTRUTURA E QUALIDADE DE VIDA"] ? <Eixo2 /> :<div/>} </Tab>
<Tab title="Desenvolvimento Local e Inclusão Produtiva" active={states["DESENVOLVIMENTO LOCAL E INCLUSÃO PRODUTIVA"]}> {states["DESENVOLVIMENTO LOCAL E INCLUSÃO PRODUTIVA"] ? <Eixo3 /> :<div/>} </Tab>
<Tab title="Direitos e Cidadania" active={states["DIREITOS E CIDADANIA"]}> {states["DIREITOS E CIDADANIA"] ? <Eixo4 /> :<div/>} </Tab>
<Tab title="Escolas Quilombolas" active={states["ESCOLAS QUILOMBOLAS"]}> {states["ESCOLAS QUILOMBOLAS"] ? <QuilombolasSchools /> :<div/>} </Tab>
{/* <Tab title="GLOSSÁRIO DE INDICADORES E CONCEITOS" active={states["GLOSSÁRIO DE INDICADORES E CONCEITOS"]}> {states["GLOSSÁRIO DE INDICADORES E CONCEITOS"] ? <QuilombolaAbout /> :<div/>} </Tab> */}
</Tabs>
</div>
......
......@@ -63,9 +63,9 @@ const Education = {
}
const Locations = {
'0': 'Não estão em localização diferenciada',
'1': 'Área remanescente de quilombos',
'1': 'Área de assentamento',
'2': 'Terra indígena',
'3': 'Área de assentamento',
'3': 'Área remanescente de quilombos',
'4': 'Não estão em localização diferenciada',
'5': 'Terra indígena',
'6': 'Área remanescente de quilombos',
......@@ -246,6 +246,7 @@ class IndigenasSchools extends Component {
pageSize={c[1] && c[1].length<16 ? c[1].length : '16'}
defaultSorted={[{ id: "ano_censo", desc: true }]}
sortMethod={this.communitiesSort}
header={'Indígenas'}
/>
<Loading id={'predial'}/>
<CardFooter
......
......@@ -352,29 +352,30 @@ class IndigenasTerritorial extends Component {
createRoute(header, uf) {
const head = header.trim()
var state = []
var region = []
var route
switch (header) {
case 'Distribuição por Região':
if (this.equalOrDiff('region', 'equal') === true){
var region = ['Centro-Oeste', 'Nordeste', 'Norte', 'Sudeste', 'Sul']
region = ['Centro-Oeste', 'Nordeste', 'Norte', 'Sudeste', 'Sul']
for (let i = 0; i < 5; i++){
console.log('region[i]',region[i])
var route = 'indigenas_territorial?filter=process_stage:["Declarada","Regularizada","Encaminhada RI","Delimitada","Homologada"],region:' + region[i]
console.log('route',route)
route = 'indigenas_territorial?filter=process_stage:["Declarada","Regularizada","Encaminhada RI","Delimitada","Homologada"],region:' + region[i]
this.getDataFromServer(route, 'Distribuição por Região - ' + region[i]);
}
}
break;
case 'Distribuição por Estado':
if (this.equalOrDiff('uf', 'equal') === true){
var uf = ['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO']
state = ['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO']
for (let i = 0; i < 27; i++){
var route = 'indigenas_territorial?filter=process_stage:["Declarada","Regularizada","Encaminhada RI","Delimitada","Homologada"],uf:' + uf[i]
this.getDataFromServer(route, 'Distribuição por Estado - ' + uf[i]);
route = 'indigenas_territorial?filter=process_stage:["Declarada","Regularizada","Encaminhada RI","Delimitada","Homologada"],uf:' + uf[i]
this.getDataFromServer(route, 'Distribuição por Estado - ' + state[i]);
}
}
break;
default:
var route = queries[head];
route = queries[head];
if (uf) {
route = route + "&filter=uf:" + uf;
}
......@@ -428,9 +429,11 @@ class IndigenasTerritorial extends Component {
}
equalOrDiff(type, eqordiff){
var uf = []
var region = []
if (eqordiff === 'equal'){
if (type === 'uf'){
var uf = ['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO']
uf = ['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO']
for (let i = 0; i < 27; i++){
if (this.state.charts['Distribuição por Estado - ' + uf[i]] !== null)
return (false)
......@@ -438,7 +441,7 @@ class IndigenasTerritorial extends Component {
return(true)
}
if (type === 'region'){
var region = ['Centro-Oeste', 'Nordeste', 'Norte', 'Sudeste', 'Sul']
region = ['Centro-Oeste', 'Nordeste', 'Norte', 'Sudeste', 'Sul']
for (let i = 0; i < 5; i++){
if (this.state.charts['Distribuição por Região - ' + region[i]] !== null)
return (false)
......@@ -448,7 +451,7 @@ class IndigenasTerritorial extends Component {
}
else if (eqordiff === 'diff'){
if (type === 'uf'){
var uf = ['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO']
uf = ['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO']
for (let i = 0; i < 27; i++){
if (this.state.charts['Distribuição por Estado - ' + uf[i]] === null)
return (false)
......@@ -456,7 +459,7 @@ class IndigenasTerritorial extends Component {
return(true)
}
if (type === 'region'){
var region = ['Centro-Oeste', 'Nordeste', 'Norte', 'Sudeste', 'Sul']
region = ['Centro-Oeste', 'Nordeste', 'Norte', 'Sudeste', 'Sul']
for (let i = 0; i < 5; i++){
if (this.state.charts['Distribuição por Região - ' + region[i]] === null)
return (false)
......
/*
Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana - C3SL/UFPR
This file is part of Portal-SMPPIR-React.
Portal-SMPPIR-React is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Portal-SMPPIR-React is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { Component } from 'react';
import {Card,CardTitle,Row,Col,Button,Icon,Input} from 'react-materialize';
import CardFooter from '../Components/CardFooter';
import UfBar from '../Components/UfBar';
import GrayBar from '../Components/GrayBar';
import Map from '../Components/Map';
import { Store } from '../Store';
import BuildStackedBar from '../Charts/BuildStackedBar';
import Loading from '../Components/Loading';
import PageTable from '../Components/PageTable'
import axios from 'axios';
import MapMarker from './icons/map-marker.png';
import './Styles/QuilombolaSchools.css'
import './Styles/Pannel.css'
import {
getStateExtendedName,
getStateRegion,
deactivateLoadingAnimation,
activateLoadingAnimation,
organizeJson,
getServerURL,
} from '../enviroment';
const serverURL = getServerURL();
const type = "quilombola_schools";
const queries = {
'Numero de Estabelecimentos': 'quilombola_schools?dims=localizacao_diferenciada,year',
'Situacao Predial': 'quilombola_schools?dims=agua,energia,esgoto,lixo,year',
'Numero de Matriculas': 'quilombola_enrollment?dims=etapa_ensino,year',
}
const Education = {
'Curso Técnico': 'Curso Técnico',
'Curso Técnico Integrado': 'Curso Técnico',
'EJA (Curso Técnico Integrado)': 'Educação de Jovens e Adultos',
'EJA (Ensino Fundamental)': 'Educação de Jovens e Adultos',
'EJA (Ensino Médio)': 'Educação de Jovens e Adultos',
'Educação Infantil': 'Educação Infantil',
'Ensino Fundamental de 8 anos': 'Ensino Fundamental',
'Ensino Fundamental de 9 anos': 'Ensino Fundamental',
'Ensino Médio': 'Ensino Médio',
'NULL NO BANCO': 'Sem Informação',
}
const Locations = {
'3': 'Escola em área remanescente de quilombos'
}
const tableHeader = [
'ano_censo',
'abastecimento_agua_rede_publica',
'abastecimento_energia_rede_publica',
'esgotamento_snaitario_rede_publica',
'coleta_lixo_periodica', 'total'
];
const nullInfo = [{
"tipo": "Sem informação",
"valor": null
}]
/**
* Contains the charts related to quilombolas schools: <br />
* __Número de Estabelecimentos__: Number of quilombolas schools in 2019; <br />
* __Número de Estabelecimentos__: Number of quilombolas schools; <br />
* __Número de Matrículas__: Number of enrollments in quilombolas schools;<br />
* __Situação Predial__: Building situation of quilombolas schools; <br />
* @name QuilombolaSchools
*/
class QuilombolaSchools extends Component {
constructor(props) {
super(props);
this.state = {
clickedInMap: null,
ano: '2019',
charts: {
'Numero de Estabelecimentos': null,
'Situacao Predial': null,
'Numero de Matriculas': null,
},
};
this.getMapClick = this.getMapClick.bind(this);
this.clearMap = this.clearMap.bind(this);
this.updateCharts = this.updateCharts.bind(this);
this.createRoute = this.createRoute.bind(this);
this.getDataFromServer = this.getDataFromServer.bind(this);
this.communitiesSort = this.communitiesSort.bind(this);
this.removeBoolean = this.removeBoolean.bind(this);
this.selectYear = this.selectYear.bind(this);
this.updateTable = this.updateTable.bind(this);
this.changeData = this.changeData.bind(this);
}
communitiesSort(a, b) {
// force null and undefined to the bottom
a = a === null || a === undefined || a === '' ? 'zz' : a
b = b === null || b === undefined || b === '' ? 'zz' : b
// force any string values to lowercase
a = typeof a === 'string' ? a.toLowerCase() : a
b = typeof b === 'string' ? b.toLowerCase() : b
// Taking out special characters
a = typeof a === 'string' ? a.normalize("NFD") : a
b = typeof b === 'string' ? b.normalize("NFD") : b
// Remove unnecessary spaces
a = typeof a === 'string' ? a.trim() : a;
b = typeof b === 'string' ? b.trim() : b;
// Return either 1 or -1 to indicate a sort priority
if (a > b)
return 1
if (a < b)
return -1
return 0
}
componentDidMount() {
this.clearMap()
}
render() {
const contrastString = this.context.state.contrast;
const uf = getStateExtendedName(this.state.clickedInMap).currentState;
const c = [
this.state.charts['Numero de Estabelecimentos'],
this.state.charts['Situacao Predial'],
this.state.charts['Numero de Matriculas'],
];
const check = <Icon className="icon-green"> done </Icon>
const noCheck = <Icon className="icon-red"> clear </Icon>
return (
<div>
<Row>
<Col xl={7} l={7} m={8} s={8}>
<h4 className={`${contrastString}eixoHeaderQ`}>Escolas Quilombolas</h4>
</Col>
</Row>
<div className="ispannels">
<Card id="ispannel-1" className={`${contrastString}pannel hoverable`} title="Número de Estabelecimentos">
<Row>
<GrayBar text="por UF" />
<Row>
<p className={`${contrastString}eixoSubHeader`}> Clique sobre qualquer Estado no mapa para apresentar, nas tabelas e gráficos desta página, apenas os dados daquele Estado. Clique em Limpar Mapa para retornar aos dados do Brasil.</p>
</Row>
<Map getMapClick={this.getMapClick} />
<Button className="clearmapbtn" onClick={this.clearMap}> Limpar Mapa </Button>
</Row>
{c[0] ? (
<UfBar img={MapMarker} ufname={uf} val={ c[0][c[0].length - 1][0] +
c[0][c[0].length - 1][1] +
c[0][c[0].length - 1][2] +
c[0][c[0].length - 1][3] +
c[0][c[0].length - 1][4] +
c[0][c[0].length - 1][5] +
c[0][c[0].length - 1][6] +
" escolas"
} />
) : (
<UfBar img={MapMarker} ufname={uf} val="Sem informação" />
)}
<CardFooter
data={serverURL + queries['Numero de Estabelecimentos'] + ',uf&format=csv'}
source=" INEP (Março/2020)"
/>
</Card>
<Card id="ispannel-2" className={`${contrastString}pannel hoverable`} title={"Número de Estabelecimentos - "+getStateExtendedName(this.state.clickedInMap).currentState}>
<GrayBar text="Número total de escolas quilombolas" />
<div id={'Numero de Estabelecimentos' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[0] !== null ? this.changeData(c[0]) : null}
customKeys={Locations}
height={300}
/>
</div>
<Loading id={'localizacao'}/>
<CardFooter
data={serverURL + queries['Numero de Estabelecimentos'] + ',uf&format=csv'}
source=" INEP (Março/2020)"
/>
</Card>
<Card id="ispannel-4" className={`${contrastString}pannel hoverable`} title={"Número de Matrículas - "+getStateExtendedName(this.state.clickedInMap).currentState}>
<GrayBar text="Número total de matrículas nas escolas quilombolas, por etapa de ensino" />
<BuildStackedBar
dataKey='Ano'
data={c[2]}
height={300}
customKeys={Education}
/>
<Loading id={'etapa'}/>
<CardFooter
data={serverURL + queries['Numero de Matriculas'] + ',uf&format=csv'}
source=" INEP (Março/2020)"
/>
</Card>
<Card id="ispannel-5" className={`${contrastString}pannel hoverable`} title={"Situação Predial - "+getStateExtendedName(this.state.clickedInMap).currentState} header={<CardTitle reveal waves='light'/>}>
<GrayBar text={
<div>
Apresenta-se o número total de escolas quilombolas de acordo com sua situação predial. Por exemplo, se em uma linha está marcado {check} somente nas colunas "Coleta de Lixo" e "Esgotamento Sanitário (Rede Publica)", quer dizer que o "Total de Escolas Quilombolas" apresenta o número de escolas, no respectivo ano, que possuem esses dois parâmetros exclusivamente, no caso elas NÃO POSSUEM os outros dois parâmetros marcados com {noCheck} na linha.
</div>}
/>
<Row>
<Input s={12} className={`${contrastString}inputAno`} id="ano" type='select' label="Ano"
value={this.state.ano !== null ? this.state.ano : '2019'}
onChange={(event) => { this.selectYear(event.target.value) }}
>
{['2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012', 'Todos os Anos'].map((ano) =>
<option key={ano} value={ano}>
{ano}
</option>
)}
</Input>
</Row>
<i> Utilize as colunas "Ano" e "Total de Escolas Quilombolas" para organizar os dados de forma diferente. </i>
<PageTable
columns={tableHeader}
data={c[1] ? c[1] : nullInfo}
pageSize={c[1] && c[1].length<16 ? c[1].length : '16'}
defaultSorted={[{ id: "ano_censo", desc: true }]}
sortMethod={this.communitiesSort}
header={'Quilombolas'}
/>
<Loading id={'predial'}/>
<CardFooter
data={serverURL + queries['Situacao Predial'] + ',uf&format=csv'}
source=" INEP (Março/2020)"
/>
</Card>
</div>
</div>
);
}
getDataFromServer(defaultData, chart) {
axios.get(`${serverURL}${defaultData}`)
.then(res => {
chart = chart.trim()
const requestData = this.organizeData(chart, res.data.result);
this.setState(prevState => {
let prev = { ...prevState.charts };
prev[chart] = requestData;
return { charts: prev };
});
this.prevState = null;
deactivateLoadingAnimation(chart, type);
if (document.getElementById("localizacao")) {
document.getElementById("localizacao").style.display = "none"
document.getElementById("predial").style.display = "none"
document.getElementById("etapa").style.display = "none"
}
})
.catch(error => {
console.log(error)
var node = document.createElement("P");
var textnode = document.createTextNode(
`Sem informação para ${chart} na unidade federativa: ${this.state.clickedInMap}`
);
node.appendChild(textnode);
node.id = 'no_info' + chart + type
deactivateLoadingAnimation(chart, type);
});
}
organizeData(chart, data) {
switch (chart) {
case 'Numero de Estabelecimentos':
return (organizeJson(data, "cod_localizacao_diferenciada", "ano_censo"));
case 'Situacao Predial':
return (this.removeBoolean(data));
case 'Numero de Matriculas':
return (organizeJson(data, "etapa_ensino", "ano_censo"));
default:
return (data);
}
}
removeBoolean(data){
const keys = ['abastecimento_agua_rede_publica', 'abastecimento_energia_rede_publica', 'esgotamento_snaitario_rede_publica', 'coleta_lixo_periodica']
for (let i=0; i<data.length; i++){
for (let j=0; j<keys.length; j++)
if (data[i][keys[j]] === true)
data[i][keys[j]] = <Icon className="icon-green"> done </Icon>
else
data[i][keys[j]] = <Icon className="icon-red"> clear </Icon>
}
return(data)
}
createRoute(header, uf) {
const head = header.trim()
var route = queries[head];
if (uf) {
route = route + "&filter=uf:" + uf;
if (header === 'Situacao Predial' && this.state.ano !== 'Todos os Anos')
route = route + ',year:' + this.state.ano;
}
else {
if (header === 'Situacao Predial' && this.state.ano !== 'Todos os Anos')
route = route + "&filter=year:" + this.state.ano;
}
this.getDataFromServer(route, head);
}
updateCharts(uf) {
var openCharts = Object.keys(queries);
if (openCharts) {
for (var i = 0; i < openCharts.length; i++) {
activateLoadingAnimation(openCharts[i].trim() + type);
this.createRoute(openCharts[i], uf)
}
}
}
updateTable(uf) {
var openCharts = Object.keys(queries);
if (openCharts) {
activateLoadingAnimation(openCharts[1].trim() + type);
this.createRoute(openCharts[1], uf)
}
}
selectYear(ano) {
this.setState({ ano: ano });
if (this.state.clickedInMap === null)
this.updateTable();
else {
const uf = getStateRegion(this.state.clickedInMap).currentState;
this.updateTable(uf);
}
}
getMapClick(clicked) {
this.setState({ clickedInMap: clicked });
const uf = getStateRegion(clicked).currentState;
this.updateCharts(uf);
}
clearMap() {
this.setState({ clickedInMap: null });
this.updateCharts();
}
changeData(data){
var resul = []
for (let i=0; i<8; i++)
resul[i] = {'Ano': data[i].Ano, '3': data[i][3]}
return (resul)
}
}
QuilombolaSchools.contextType = Store;
export default QuilombolaSchools;
\ No newline at end of file
/*
Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana - C3SL/UFPR
This file is part of Portal-SMPPIR-React.
Portal-SMPPIR-React is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Portal-SMPPIR-React is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
*/
/*###################*/
/*ELEMENTOS DA PAGINA*/
.eixoHeaderQ{
color: #ca3829;
}
.eixoSubHeader{
color: black;
font-style: italic;
}
.clearmapbtn{
background-color: #ca3829;
}
.clearmapbtn:hover{
background-color: #710000;
}
.clearmapbtn:active{
background-color: #710000;
}
.clearmapbtn:focus{
background-color: #710000;
}
.clearmapbtn:visited{
background-color: #710000;
}
/*#################*/
/*GRID DOS PAINÉIS*/