Commit 973ead73 authored by Edu Trevisan's avatar Edu Trevisan

Update AfricanOrigin layout

parent e0f6ea7e
......@@ -22,9 +22,7 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
import React from 'react';
import NavigationBar from './Components/NavigationBar';
import AfricanCulture from './SubPages/AfricanCulture';
import AfricanSustainability from './SubPages/AfricanSustainability';
import AfricanRights from './SubPages/AfricanRights';
import AfricanIndicator from './SubPages/AfricanIndicator';
import { Tab, Tabs } from 'react-materialize';
import { Store } from './Store';
......@@ -38,12 +36,12 @@ function AfricanOrigin() {
// Get information about which page was accessed
const { state, dispatch } = React.useContext(Store);
var states = {"DIREITOS": false, "CULTURA": false, "SUSTENTABILIDADE":false}
var states = {"MATRIZ AFRICANA": false}
if (state.page.toUpperCase() in states) {
states[state.page.toUpperCase()] = true
}
else {
states["DIREITOS"] = true
states["MATRIZ AFRICANA"] = true
}
// Hook to set page context
......@@ -67,10 +65,12 @@ function AfricanOrigin() {
<NavigationBar/>
<div id='contentTabsDiv'>
<div id="conteudo" />
<Tabs className={`tab-demo z-depth-1 ${contrastString}mainPageDarkBlueTab`} onChange={whereIAm}>
<Tab title="Direitos" active={states["DIREITOS"]}> {states["DIREITOS"] ? <AfricanRights /> : <div />} </Tab>
<Tab title="Cultura" active={states["CULTURA"]}> {states["CULTURA"] ? <AfricanCulture /> : <div />} </Tab>
<Tab title="Sustentabilidade" active={states["SUSTENTABILIDADE"]}> {states["SUSTENTABILIDADE"] ? <AfricanSustainability /> : <div />} </Tab>
<Tabs
className={`tab-demo z-depth-1 ${contrastString}mainPageDarkBlueTab`} onChange={whereIAm}
>
<Tab title="Matriz Africana" active={states["MATRIZ AFRICANA"]}>
{states["MATRIZ AFRICANA"] ? <AfricanIndicator /> : <div />}
</Tab>
</Tabs>
</div>
</div>
......
......@@ -24,6 +24,7 @@ import MainCard from './Components/MainCard'
import { Col, Row } from 'react-materialize'
import './Styles/MainPage.css'
import { Store } from './Store'
/**
* Main page of the application, contains the cards with information and links for the sub pages. <br />
*/
......@@ -112,7 +113,7 @@ const text6 = <div>
const subpages1 = {'route': '/quilombolas', 'links':['EIXO 1', 'EIXO 2', 'EIXO 3', 'EIXO 4', 'SOBRE']}
const subpages2 = {'route': '/juventude', 'links':['VULNERABILIDADES', 'EDUCAÇÃO', 'TRABALHO']}
const subpages3 = {'route': '/ciganos', 'links':["POVOS CIGANOS"]}
const subpages4 = {'route': '/matrizAfricana', 'links':["DIREITOS", "CULTURA", "SUSTENTABILIDADE"]}
const subpages4 = {'route': '/matrizAfricana', 'links':["MATRIZ AFRICANA"]}
const subpages5 = {'route': '/cotas', 'links':['EVASÃO', 'CONCLUINTES', 'ESCOLARIDADE', 'FIES', 'PROUNI', 'FINANCIAMENTO', 'ATIVIDADE EXTRACURRICULAR', 'INGRESSO', 'APOIO SOCIAL', 'VAGAS OFERTADAS']}
const subpages6 = {route: 'participantesSinapir', 'links':['ESTADOS E MUNICÍPIOS PARTICIPANTES', 'CONVÊNIOS EM EXECUÇÃO']}
......
/*
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, Row, Col, Button } 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 AutocompleteApp from '../Components/AutocompleteApp';
import BuildStackedBar from '../Charts/BuildStackedBar';
import BuildBar from '../Charts/BuildBar';
import Loading from '../Components/Loading';
import {
getStateExtendedName,
getStateRegion,
deactivateLoadingAnimation,
activateLoadingAnimation,
organizeJson,
getServerURL,
createIntervals,
} from '../enviroment';
import axios from 'axios';
import './Styles/AfricanIndicator.css'
const serverURL = getServerURL();
const type = "african";
const queries = {
'Famílias pertencentes a Comunidade de Terreiro': 'african_rights?dims=year',
'Espécie do Domicílio': 'african_culture?dims=year,home_type',
'Renda média per capita': 'african_sustentability?dims=year,per_capita_income',
'Escolaridade': 'african_rights?dims=education_families,year',
'Localização do Domicílio': 'african_culture?dims=year,home_location'
}
const customKey = {
'total': 'Total',
};
const loanTypeKeys = {
'null': 'Indefinido',
'1': 'Particular Permanente',
'2': 'Particular Improvisado',
'3': 'Coletivo'
}
const Education = {
'1': 'Creche',
'2': 'Pré-escola',
'3': 'Pré-escola',
'4': 'Ensino Fundamental',
'5': 'Ensino Fundamental',
'6': 'Ensino Fundamental',
'7': 'Ensino Fundamental',
'8': 'Ensino Médio',
'9': 'Ensino Médio',
'10': 'Ensino Fundamental',
'11': 'Ensino Fundamental',
'12': 'Ensino Médio',
'13': 'Ensino Superior',
'14': 'Ensino Fundamental',
}
/**
* The charts contained here are about rights for African communities. Data provided by CadUnico for the years 2012 through 2017. <br />
* __Families belonging to yard communities__: Bar chart showing number of families living in African communities. <br />
* __Espécie do Domicílio__, which shows the sort of housing possesed by African descendents; <br />
* __Renda média per capita__, which shows the average per capita income of African descendents families. <br />
* __Education level for people from yard communities__: Table showing the number of people per education level in African communities ;<br />
* __Localização do Domicílio__, which displays the number of people from _African culture_ that are part of terreiro comunities by county. <br />
* @name AfricanIndicator
*/
class AfricanIndicator extends Component {
constructor(props) {
super(props);
this.state = {
clickedInMap: null,
charts: {
'Famílias pertencentes a Comunidade de Terreiro': null,
'Espécie do Domicílio': null,
'Renda média per capita': null,
'Escolaridade': 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._mounted = false;
this.getDataFromAutocomplete = this.getDataFromAutocomplete.bind(this);
}
// Important to avoid memory leak
componentDidMount() {
this._mounted = true;
this.clearMap();
}
componentWillUnmount() {
this._mounted = false;
}
render() {
const contrastString = this.context.state.contrast;
const uf = getStateExtendedName(this.state.clickedInMap).currentState;
const c = [
this.state.charts['Famílias pertencentes a Comunidade de Terreiro'],
this.state.charts['Espécie do Domicílio'],
this.state.charts['Renda média per capita'],
this.state.charts['Escolaridade'],
this.state.charts['Localização do Domicílio'],
];
return (
<div>
<Row>
<Col l={3} m={4} s={5}>
<h4 className={`${contrastString}eixoHeaderA`}>Matriz Africana</h4>
</Col>
<Col l={9} m={8} s={12}>
<br />
<p className={`${contrastString}eixoSubHeader`}> Clique sobre qualquer
estado no mapa para apresentar os dados somente daquele estado. Clique
em limpar mapa para voltar aos dados do Brasil. </p>
</Col>
</Row>
<div className="african1pannels">
<Card id="african1pannel-1" className={`${contrastString}pannel hoverable`} title="Mapa">
<Row>
<Map getMapClick={this.getMapClick} />
<Button className="clearmapbtn" onClick={this.clearMap}> Limpar Mapa </Button>
</Row>
<Row>
<UfBar ufname={uf}/>
</Row>
</Card>
<Card id="african1pannel-2" className={`${contrastString}pannel hoverable`} title="Famílias pertencentes a Comunidade de Terreiro">
<div id={'Famílias pertencentes a Comunidade de Terreiro' + type}>
<BuildBar
dataKey='ano_pesquisa'
data={c[0]}
customKeys={customKey}
/>
</div>
<Loading />
<CardFooter
data={serverURL + queries['Famílias pertencentes a Comunidade de Terreiro'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
<Card id="african1pannel-3" className={`${contrastString}pannel hoverable`} title='Espécie do Domicílio'>
<div id={'Espécie do Domicílio' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[1]}
customKeys={loanTypeKeys}
/>
</div>
<Loading />
<CardFooter
data={serverURL + queries['Espécie do Domicílio'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
<Card id="african1pannel-4" className={`${contrastString}pannel hoverable`} title='Renda média per capita'>
<div id={'Renda média per capita' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[2]}
customKeys={customKey}
height={400}
/>
</div>
<Loading />
<CardFooter
data={serverURL + queries['Renda média per capita'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
<Card id="african1pannel-5" className={`${contrastString}pannel hoverable`} title="Escolaridade">
<div id={'Escolaridade' + type}>
<BuildBar
dataKey='Ano'
data={c[3]}
customKeys={Education}
/>
</div>
<Loading />
<CardFooter
data={serverURL + queries['Escolaridade'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
<Card id="african1pannel-6" className={`${contrastString}pannel hoverable`} title="Localização do Domicílio">
<AutocompleteApp
whichAutocomplete={'african_culture'}
mainPage={'african_culture'} chartDiv={'location_homes_african'}
saveData={this.getDataFromAutocomplete}
useMap={false} />
<BuildBar
data={c[4]}
dataKey={'ano_pesquisa'}
customKeys={customKey}
id={'location_homes_african'}
/>
<div id='cad_unico_culture_msg' style={{display:'none'}}>
<p>Não foi encontrado nenhum domicílio no múnicipio: <b>{this.state.tagName}</b></p>
</div>
<CardFooter
data={serverURL + queries['Localização do Domicílio'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
</div>
</div>
);
}
getDataFromServer(defaultData, chart) {
var msg = document.getElementById('no_info' + chart + type);
if (msg) {
document.getElementById(chart + type).style.display = 'block';
msg.remove()
}
axios.get(`${serverURL}${defaultData}`)
.then(res => {
if (this._mounted) {
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);
}
})
.catch(error => {
console.log(error);
if (this._mounted) {
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);
}
});
}
getDataFromAutocomplete(info_to_display) {
let charts = this.state.charts
charts['Localização do Domicílio'] = info_to_display.data
if (this._mounted) this.setState({ charts: charts, tagName: info_to_display.tagName })
if (info_to_display.data.length === 0) {
document.getElementById('cad_unico_culture_msg').style.display = 'block'
}
else {
document.getElementById('cad_unico_culture_msg').style.display = 'none'
if (document.getElementById('location_homes_african'))
document.getElementById('location_homes_african').style.display = 'block'
}
}
organizeData(chart, data) {
switch (chart) {
case 'Espécie do Domicílio':
return (organizeJson(data, 'cod_especie_domic_fam', 'ano_pesquisa'));
case 'Renda média per capita':
return (
organizeJson(
createIntervals(data, 'vlr_renda_media_fam', 200, 'ano_pesquisa'), 'vlr_renda_media_fam',
'ano_pesquisa'
)
);
case 'Escolaridade':
return (organizeJson(data, "cod_curso_frequentou_pessoa_memb", "ano_pesquisa"));
default:
return (data);
}
}
createRoute(header, uf) {
const head = header.trim()
var route = queries[head];
if (uf) {
route = route + "&filter=uf:" + uf;
}
if (header !== 'Localização do Domicílio')
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)
}
}
}
getMapClick(clicked) {
this.setState({ clickedInMap: clicked });
const uf = getStateRegion(clicked).currentState;
this.updateCharts(uf);
}
clearMap() {
this.setState({ clickedInMap: null });
this.updateCharts();
}
}
AfricanIndicator.contextType = Store;
export default AfricanIndicator;
/*
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*/
.eixoHeaderA{
color: #0e3958;
}
.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*/
.african1pannels {
display:grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(6,auto);
grid-gap: 1rem;
padding: 1rem;
grid-template-areas: "p1"
"p2"
"p3"
"p4"
"p5"
"p6";
}
@media only screen and (min-width: 1200px) {
.african1pannels{
display:grid;
grid-template-columns:3fr 3fr 3fr;
grid-template-rows: auto auto auto ;
grid-gap: 1rem;
padding: 1rem;
grid-template-areas:"p1 p2 p3"
"p1 p5 p5"
"p4 p5 p5"
"p4 p6 p6"
"bl p6 p6";
}
}
/*#################*/
/*ELEMENTOS DO GRID*/
#african1pannel-1{
grid-area: p1;
}
#african1pannel-2{
grid-area: p2;
}
#african1pannel-3{
grid-area: p3;
}
#african1pannel-4{
grid-area: p4;
}
#african1pannel-5{
grid-area: p5;
}
#african1pannel-6{
grid-area: p6;
}
#african1pannel-7{
grid-area: p7;
}
.card{
margin: 0;
}
.pannel{
background-color: #FFF;
}
/* Contrast Colors */
.ContrasteixoHeaderQ{
color: white;
}
.ContrasteixoSubHeader{
color: white;
font-style: italic;
}
.Contrastpannel{
color: yellow;
background-color: black;
border: 1px solid white;
}
.Contrastpannel > .card-content > .card-title{
color: yellow !important;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment