Commit 374b4be7 authored by Edu Trevisan's avatar Edu Trevisan

Change ciganos pages to card layout

parent c24de69d
......@@ -22,6 +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 CiganosIndicator from './SubPages/CiganosIndicator';
import CiganosSustainability from './SubPages/CiganosSustainability';
import CiganosRights from './SubPages/CiganosRights';
import CiganosCulture from './SubPages/CiganosCulture';
......@@ -38,12 +39,12 @@ function Ciganos() {
// Get information about which page was accessed
const { state, dispatch } = React.useContext(Store);
var states = {"DIREITOS": false, "CULTURA": false, "SUSTENTABILIDADE":false}
var states = {"CIGANOS": false, "DIREITOS": false, "CULTURA": false, "SUSTENTABILIDADE":false}
if (state.page.toUpperCase() in states) {
states[state.page.toUpperCase()] = true
}
else {
states["DIREITOS"] = true
states["CIGANOS"] = true
}
// Hook to set page context
......@@ -68,6 +69,7 @@ function Ciganos() {
<div id='contentTabsDiv'>
<div id="conteudo" />
<Tabs className={`tab-demo z-depth-1 ${contrastString}mainPageOrangeTab`} onChange={whereIAm}>
<Tab title="Povos Ciganos" active={states["CIGANOS"]}> {states["CIGANOS"] ? <CiganosIndicator /> : <div />} </Tab>
<Tab title="Direitos" active={states["DIREITOS"]}> {states["DIREITOS"] ? <CiganosRights /> : <div />} </Tab>
<Tab title="Cultura" active={states["CULTURA"]}> {states["CULTURA"] ? <CiganosCulture /> : <div />} </Tab>
<Tab title="Sustentabilidade" active={states["SUSTENTABILIDADE"]}> {states["SUSTENTABILIDADE"] ? <CiganosSustainability /> : <div />} </Tab>
......
......@@ -21,8 +21,7 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
import React, { Component } from 'react';
import { Icon, Row, Col, Button } from 'react-materialize'
import { Store } from '../Store';
import { Row, Col, Button } from 'react-materialize'
import '../Styles/CardFooter.css'
......@@ -34,7 +33,6 @@ import '../Styles/CardFooter.css'
*/
class CardFooter extends Component {
render() {
var contrastString = this.context.state.contrast;
return (
<Row className="z-depth-1 valign-wrapper footer">
<Col>
......@@ -50,7 +48,7 @@ class CardFooter extends Component {
floating
icon="assessment"
tooltip="Acesso aos Dados"
tooltipOptions={{ position: 'top' }}
// tooltipOptions={{ position: 'top' }}
style={{ margin:'3px'}}
>
</Button>
......@@ -62,6 +60,5 @@ class CardFooter extends Component {
);
}
}
CardFooter.contextType = Store;
export default CardFooter;
/*
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 BuildStackedBar from '../Charts/BuildStackedBar';
import BuildBar from '../Charts/BuildBar';
import Loading from '../Components/Loading';
import {
getStateExtendedName,
getStateRegion,
deactivateLoadingAnimation,
activateLoadingAnimation,
organizeJson,
getServerURL,
} from '../enviroment';
import axios from 'axios';
import './Styles/CiganosIndicator.css'
const serverURL = getServerURL();
const type = "ciganos";
const queries = {
'Famílias pertencentes a Comunidade de Ciganos': 'ciganos_rights?dims=year',
}
const customKey = {
'total': 'Total',
};
/**
* The charts contained here are about rights for ciganos 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 Ciganos communities. <br />
* __Education level for people from yard communities__: Table showing the number of people per education level in Ciganos communities ;<br />
*/
class CiganosIndicator extends Component {
constructor(props) {
super(props);
this.state = {
clickedInMap: null,
charts: {
'Famílias pertencentes a Comunidade de Ciganos': 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;
}
// 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 Ciganos'],
];
return (
<div>
<Row>
<Col l={3} m={4} s={5}>
<h4 className={`${contrastString}eixoHeaderC`}>Povos Ciganos</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="ciganos1pannels">
<Card id="ciganos1pannel-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="ciganos1pannel-2" className={`${contrastString}pannel hoverable`} title="Famílias pertencentes a Comunidade de Ciganos">
<div id={'Famílias pertencentes a Comunidade de Ciganos' + type}>
<BuildBar
dataKey='ano_pesquisa'
data={c[0]}
customKeys={customKey}
/>
</div>
<Loading />
<CardFooter
data={serverURL + queries['Famílias pertencentes a Comunidade de Ciganos'] + ',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);
}
});
}
organizeData(chart, data) {
switch (chart) {
case 'Extrativismo':
return (organizeJson(data, "cod_agricultura_trab_memb", "ano_pesquisa"));
case 'Bolsa Família':
return (organizeJson(data, "marc_pbf", "ano_pesquisa"));
case 'Renda média per capita':
return (this.getAverage(organizeJson(data, "vlr_renda_media_fam", "ano_pesquisa")));
case 'Tipo de domicílio':
return (organizeJson(data, "cod_local_domic_fam", "ano_pesquisa"));
default:
return (data);
}
}
createRoute(header, uf) {
const head = header.trim()
var route = queries[head];
if (uf) {
route = route + "&filter=uf:" + uf;
}
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();
}
}
CiganosIndicator.contextType = Store;
export default CiganosIndicator;
......@@ -37,7 +37,6 @@ import { Store } from '../Store'
const serverURL = getServerURL();
const type = "student_loans";
const tableClasses = "bordered striped highlight centered";
const turnoK = {
'null' : 'indefinido',
......
......@@ -41,7 +41,6 @@ const type = "vacancy";
const vacancy = "vacancy"
const serverURL = getServerURL();
const tableCustomKey = [];
const tableClasses = "bordered striped centered"
/**
......
/*
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*/
.eixoHeaderC{
color: #ea7c27;
}
.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*/
.ciganos1pannels{
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: 900px) {
.ciganos1pannels{
display:grid;
grid-template-columns:6fr 6fr;
grid-template-rows: auto auto ;
grid-gap: 1rem;
padding: 1rem;
grid-template-areas:"p1 p2"
"p1 p3"
"p5 p3"
"p5 p6"
"blank p6";
}
}
@media only screen and (min-width: 1200px) {
.ciganos1pannels{
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 p6"
"p4 p5 p6";
}
}
/*#################*/
/*ELEMENTOS DO GRID*/
#ciganos1pannel-1{
grid-area: p1;
}
#ciganos1pannel-2{
grid-area: p2;
}
#ciganos1pannel-3{
grid-area: p3;
}
#ciganos1pannel-4{
grid-area: p4;
}
#ciganos1pannel-5{
grid-area: p5;
}
#ciganos1pannel-6{
grid-area: p6;
}
#ciganos1pannel-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