Commit eaaa9cf6 authored by ns17's avatar ns17

Fixing the problem in the subtitles and graphs

parent 2b2b349b
......@@ -93,6 +93,8 @@ class BuildStackedBar extends Component {
super(props);
this.state = {
data: null,
height: 380,
width: 400,
};
this.filterArrayByPercent = this.filterArrayByPercent.bind(this);
}
......@@ -105,6 +107,10 @@ class BuildStackedBar extends Component {
this.setState({data: data})
}
prevProps = null;
if (this.props.height && this.state.height !== this.props.height) {
this.setState({height: this.props.height})
}
}
render () {
var newData = this.state.data;
......@@ -113,9 +119,8 @@ class BuildStackedBar extends Component {
const customKeys = this.props.customKeys;
// Change chart height if it was specified
var cardHeight = this.props.height;
var interval = this.props.interval;
if (!cardHeight) cardHeight = 300;
if (!interval) interval = 0;
if(newData && newData.length > 0 && customKeys !== undefined) {
......@@ -126,33 +131,33 @@ class BuildStackedBar extends Component {
if(newData !== null && newData !== undefined && newData.length > 0){
return (
<ResponsiveContainer height={cardHeight}>
<BarChart width={600} height={cardHeight} data={newData}
margin={{top: 20, right: 0, left: 0, bottom: 5}}>
<XAxis dataKey={dataKey} interval={interval}/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip content={renderTooltipContent}/>
<Legend />
sleep(10000)
{ Object.keys(newData[0]).map(function(bar, index) {
if(bar !== dataKey) {
if(label === undefined) {
return <Bar isAnimationActive={false} key={Math.random()} dataKey={bar} stackId="a" fill={COLORS[index]} />
}
else if(bar !== label) {
return (
<Bar isAnimationActive={false} key={Math.random()} dataKey={bar} stackId="a" fill={COLORS[index]}>
{index === Object.keys(newData[0]).length - 1?
<LabelList dataKey={label} position="top" /> : null}
</Bar>
)
}
}
return null;
})
}
<ResponsiveContainer height={this.state.height} width='100%'>
<BarChart
data={newData}
margin={{top: 20, right: 0, left: 20, bottom: 5}}
>
<XAxis dataKey={dataKey} interval={interval}/>
<YAxis/>
<Tooltip content={renderTooltipContent}/>
<Legend/>
<CartesianGrid strokeDasharray="3 3"/>
{ Object.keys(newData[0]).map(function(bar, index) {
if(bar !== dataKey) {
if(label === undefined) {
return <Bar isAnimationActive={false} key={Math.random()} dataKey={bar} stackId="a" fill={COLORS[index]} />
}
else if(bar !== label) {
return (
<Bar isAnimationActive={false} key={Math.random()} dataKey={bar} stackId="a" fill={COLORS[index]}>
{index === Object.keys(newData[0]).length - 1?
<LabelList dataKey={label} position="top" /> : null}
</Bar>
)
}
}
return null;
})
}
</BarChart>
</ResponsiveContainer>
);}
......
......@@ -21,7 +21,7 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
import React, { Component } from 'react';
import { Row, Col, Card, Button, Icon } from 'react-materialize'
import { Row, Col, Card } from 'react-materialize'
import DropdownControl from './DropdownControl'
import Map from './Map';
import '../Styles/MapPanel.css';
......@@ -101,4 +101,4 @@ export default class MapPanel extends Component {
this.props.getData(e);
}
}
MapPanel.contextType = Store;
\ No newline at end of file
MapPanel.contextType = Store;
......@@ -138,13 +138,12 @@ class AfricanIndicator extends Component {
<h4 className={`${contrastString}eixoHeaderA`}>Matriz Africana</h4>
</Col>
</Row>
<div className="african1pannels">
<Card id="african1pannel-1" className={`${contrastString}pannel hoverable`} title="Mapa">
<Row>
<Row>
<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>
dados somente daquele estado. Clique em limpar mapa para voltar aos dados do Brasil. </p>
</Row>
<Map getMapClick={this.getMapClick} />
<Button className="clearmapbtn" onClick={this.clearMap}> Limpar Mapa </Button>
......@@ -153,14 +152,12 @@ class AfricanIndicator extends Component {
</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 />
<BuildBar
dataKey='ano_pesquisa'
data={c[0]}
customKeys={customKey}
/>
<Loading id={'familias'}/>
<CardFooter
data={serverURL + queries['Famílias pertencentes a Comunidade de Terreiro'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -169,14 +166,12 @@ class AfricanIndicator extends Component {
<Card id="african1pannel-3" className={`${contrastString}pannel hoverable`} title='Espécie do Domicílio'>
<GrayBar text="Espécie do domicílio das famílias pertencentes a comunidade de terreiro do CadÚnico" />
<div id={'Espécie do Domicílio' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[1]}
customKeys={loanTypeKeys}
/>
</div>
<Loading />
<BuildStackedBar
dataKey='Ano'
data={c[1]}
customKeys={loanTypeKeys}
/>
<Loading id={'domicilio'}/>
<CardFooter
data={serverURL + queries['Espécie do Domicílio'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -185,15 +180,13 @@ class AfricanIndicator extends Component {
<Card id="african1pannel-4" className={`${contrastString}pannel hoverable`} title='Renda Média'>
<GrayBar text="Renda média(R$) das famílias pertencentes a comunidade de terreiro do CadÚnico" />
<div id={'Renda média per capita' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[2]}
customKeys={customKey}
height={400}
/>
</div>
<Loading />
<BuildStackedBar
dataKey='Ano'
data={c[2]}
customKeys={customKey}
height={400}
/>
<Loading id={'renda'}/>
<CardFooter
data={serverURL + queries['Renda média per capita'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -202,14 +195,12 @@ class AfricanIndicator extends Component {
<Card id="african1pannel-5" className={`${contrastString}pannel hoverable`} title="Escolaridade">
<GrayBar text="Grau de escolaridade da população pertencente a comunidade de terreiro do CadÚnico" />
<div id={'Escolaridade' + type}>
<BuildBar
dataKey='Ano'
data={c[3]}
customKeys={Education}
/>
</div>
<Loading />
<BuildBar
dataKey='Ano'
data={c[3]}
customKeys={Education}
/>
<Loading id={'escolaridade'}/>
<CardFooter
data={serverURL + queries['Escolaridade'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -236,18 +227,12 @@ class AfricanIndicator extends Component {
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) {
......@@ -261,6 +246,13 @@ class AfricanIndicator extends Component {
this.prevState = null;
deactivateLoadingAnimation(chart, type);
}
if (document.getElementById("familias")) {
document.getElementById("familias").style.display = "none"
document.getElementById("domicilio").style.display = "none"
document.getElementById("renda").style.display = "none"
document.getElementById("escolaridade").style.display = "none"
}
})
.catch(error => {
console.log(error);
......
......@@ -138,13 +138,12 @@ class CiganosIndicator extends Component {
<h4 className={`${contrastString}eixoHeaderC`}>Povos Ciganos</h4>
</Col>
</Row>
<div className="ciganos1pannels">
<Card id="ciganos1pannel-1" className={`${contrastString}pannel hoverable`} title="Mapa">
<Row>
<Row>
<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>
dados somente daquele estado. Clique em limpar mapa para voltar aos dados do Brasil. </p>
</Row>
<Map getMapClick={this.getMapClick} />
<Button className="clearmapbtn" onClick={this.clearMap}> Limpar Mapa </Button>
......@@ -153,14 +152,12 @@ class CiganosIndicator extends Component {
</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 />
<BuildBar
dataKey='ano_pesquisa'
data={c[0]}
customKeys={customKey}
/>
<Loading id={'familias'}/>
<CardFooter
data={serverURL + queries['Famílias pertencentes a Comunidade de Ciganos'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -168,15 +165,13 @@ class CiganosIndicator extends Component {
</Card>
<Card id="ciganos1pannel-3" className={`${contrastString}pannel hoverable`} title='Espécie do Domicílio'>
<div id={'Espécie do Domicílio' + type}>
<GrayBar text="Espécie do domicílio das famílias ciganas do CadÚnico" />
<BuildStackedBar
dataKey='Ano'
data={c[1]}
customKeys={loanTypeKeys}
/>
</div>
<Loading />
<BuildStackedBar
dataKey='Ano'
data={c[1]}
customKeys={loanTypeKeys}
/>
<Loading id={'domicilio'}/>
<CardFooter
data={serverURL + queries['Espécie do Domicílio'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -185,14 +180,12 @@ class CiganosIndicator extends Component {
<Card id="ciganos1pannel-4" className={`${contrastString}pannel hoverable`} title='Renda Média'>
<GrayBar text="Renda média(R$) das famílias ciganas do CadÚnico" />
<div id={'Renda média per capita' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[2]}
customKeys={customKey}
/>
</div>
<Loading />
<BuildStackedBar
dataKey='Ano'
data={c[2]}
customKeys={customKey}
/>
<Loading id={'renda'}/>
<CardFooter
data={serverURL + queries['Renda média per capita'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -200,15 +193,13 @@ class CiganosIndicator extends Component {
</Card>
<Card id="ciganos1pannel-5" className={`${contrastString}pannel hoverable`} title="Escolaridade">
<div id={'Escolaridade' + type}>
<GrayBar text="Grau de escolaridade da população cigana do CadÚnico" />
<BuildBar
dataKey='Ano'
data={c[3]}
customKeys={Education}
/>
</div>
<Loading />
<BuildBar
dataKey='Ano'
data={c[3]}
customKeys={Education}
/>
<Loading id={'escolaridade'}/>
<CardFooter
data={serverURL + queries['Escolaridade'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -235,18 +226,12 @@ class CiganosIndicator extends Component {
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) {
......@@ -260,6 +245,13 @@ class CiganosIndicator extends Component {
this.prevState = null;
deactivateLoadingAnimation(chart, type);
}
if (document.getElementById("familias")) {
document.getElementById("familias").style.display = "none"
document.getElementById("domicilio").style.display = "none"
document.getElementById("renda").style.display = "none"
document.getElementById("escolaridade").style.display = "none"
}
})
.catch(error => {
console.log(error);
......
......@@ -151,7 +151,7 @@ class Eixo2 extends Component {
<GrayBar text="por UF" />
<Row>
<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>
dados somente daquele estado. Clique em limpar mapa para voltar aos dados do Brasil. </p>
</Row>
<Map getMapClick={this.getMapClick}/>
<Button className="clearmapbtn" onClick={this.clearMap}> Limpar Mapa </Button>
......@@ -169,16 +169,14 @@ class Eixo2 extends Component {
<Card id="e2pannel-2" className={`${contrastString}pannel hoverable`} title="Abastecimento e Escoamento Sanitário nos Domicílios Cadastrados">
<Row>
<GrayBar text="Forma de abastecimento de água nos domicílios quilombolas" />
<div id={'Forma de abastecimento de água' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[1]}
customKeys={watterSuply}
height={400}
/>
</div>
<Loading />
<GrayBar text="Forma de abastecimento de água nos domicílios quilombolas" />
<BuildStackedBar
dataKey='Ano'
data={c[1]}
customKeys={watterSuply}
height={400}
/>
<Loading id={'abastecimento'}/>
<CardFooter
data={serverURL + queries['Forma de abastecimento de água'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -186,15 +184,13 @@ class Eixo2 extends Component {
</Row>
<Row>
<GrayBar text="Tipos de escoamento sanitário nos domicílios quilombolas" />
<div id={'Tipos de escoamento sanitário' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[2]}
customKeys={sanitaryDump}
height={400}
/>
</div>
<Loading />
<BuildStackedBar
dataKey='Ano'
data={c[2]}
customKeys={sanitaryDump}
height={400}
/>
<Loading id={'escoamento'}/>
<CardFooter
data={serverURL + queries['Tipos de escoamento sanitário'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -205,15 +201,13 @@ class Eixo2 extends Component {
<Card id="e2pannel-3" className={`${contrastString}pannel hoverable`} title="Serviços Presentes nos Domicílios Cadastrados">
<Row>
<GrayBar text="Forma de iluminação nos domicílios quilombolas" />
<div id={'Forma de iluminação - Famílias'+type}>
<BuildStackedBar
dataKey='Ano'
data={c[3]}
customKeys={homeLighting}
height={400}
/>
</div>
<Loading />
<BuildStackedBar
dataKey='Ano'
data={c[3]}
customKeys={homeLighting}
height={400}
/>
<Loading id={'iluminacao'}/>
<CardFooter
data={serverURL + queries['Forma de iluminação - Famílias'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -221,33 +215,25 @@ class Eixo2 extends Component {
</Row>
<Row>
<GrayBar text="Destino do lixo nos domicílios quilombolas" />
<div id={'Destino do lixo' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[4]}
customKeys={trashDestiny}
height={400}
/>
</div>
<Loading />
<BuildStackedBar
dataKey='Ano'
data={c[4]}
customKeys={trashDestiny}
height={400}
/>
<Loading id={'lixo'}/>
<CardFooter
data={serverURL + queries['Destino do lixo'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Row>
</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 => {
chart = chart.trim()
......@@ -259,6 +245,13 @@ class Eixo2 extends Component {
});
this.prevState = null;
deactivateLoadingAnimation(chart, type);
if (document.getElementById("abastecimento")) {
document.getElementById("abastecimento").style.display = "none"
document.getElementById("escoamento").style.display = "none"
document.getElementById("iluminacao").style.display = "none"
document.getElementById("lixo").style.display = "none"
}
})
.catch(error => {
console.log(error)
......
......@@ -125,16 +125,15 @@ class Eixo3 extends Component {
<h4 className={`${contrastString}eixoHeaderQ`}>Desenvolvimento Local e Inclusão Produtiva</h4>
</Col>
</Row>
<div className="e3pannels">
<Card id="e3pannel-1" className={`${contrastString}pannel hoverable`} title="Renda Média das Famílias Quilombolas">
<Row>
<GrayBar text="por UF" />
<GrayBar text="por UF"/>
<Row>
<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>
dados somente daquele estado. Clique em limpar mapa para voltar aos dados do Brasil. </p>
</Row>
<Map getMapClick={this.getMapClick} />
<Map getMapClick={this.getMapClick}/>
<Button className="clearmapbtn" onClick={this.clearMap}> Limpar Mapa </Button>
</Row>
{c[0] ? (
......@@ -149,14 +148,12 @@ class Eixo3 extends Component {
</Card>
<Card id="e3pannel-2" className={`${contrastString}pannel hoverable`} title="Renda Média das Famílias Quilombolas">
<div id={'Renda média per capita' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[0]}
customKeys={totalrenda}
/>
</div>
<Loading />
<BuildStackedBar
dataKey='Ano'
data={c[0]}
customKeys={totalrenda}
/>
<Loading id={'renda'}/>
<CardFooter
data={serverURL + queries['Renda média per capita'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -165,14 +162,12 @@ class Eixo3 extends Component {
<Card id="e3pannel-3" className={`${contrastString}pannel hoverable`} title="Bolsa Família">
<GrayBar text="Número total de famílias quilombolas que recebem Bolsa Família" />
<div id={'Bolsa Família' + type}>
<BuildBar
dataKey='Ano'
data={c[1]}
customKeys={pbf}
/>
</div>
<Loading/>
<BuildBar
dataKey='Ano'
data={c[1]}
customKeys={pbf}
/>
<Loading id={'bolsa'}/>
<CardFooter
data={serverURL + queries['Bolsa Família'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -181,14 +176,12 @@ class Eixo3 extends Component {
<Card id="e3pannel-5" className={`${contrastString}pannel hoverable`} title="Extrativismo">
<GrayBar text="Número total de famílias quilombolas que sobrevivem do extrativismo" />
<div id={'Extrativismo' + type}>
<BuildBar
dataKey='Ano'
data={c[2]}
customKeys={extrativismo}
/>
</div>
<Loading/>
<BuildBar
dataKey='Ano'
data={c[2]}
customKeys={extrativismo}
/>
<Loading id={'extrativismo'}/>
<CardFooter
data={serverURL + queries['Extrativismo'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -197,14 +190,12 @@ class Eixo3 extends Component {
<Card id="e3pannel-6" className={`${contrastString}pannel hoverable`} title="Área Rural">
<GrayBar text="Número total de Domicílios Quilombolas Rurais e Urbanos" />
<div id={'Tipo de domicílio' + type}>
<BuildBar
dataKey='Ano'
data={c[3]}
customKeys={homeTypelocation}
/>
</div>
<Loading />
<Loading id={'rural'}/>
<CardFooter
data={serverURL + queries['Tipo de domicílio'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -242,11 +233,6 @@ class Eixo3 extends Component {
}
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 => {
chart = chart.trim()
......@@ -258,6 +244,13 @@ class Eixo3 extends Component {
});
this.prevState = null;
deactivateLoadingAnimation(chart, type);
if (document.getElementById("renda")) {
document.getElementById("renda").style.display = "none"
document.getElementById("bolsa").style.display = "none"
document.getElementById("extrativismo").style.display = "none"
document.getElementById("rural").style.display = "none"
}
})
.catch(error => {
console.log(error)
......
......@@ -154,15 +154,12 @@ class Eixo4 extends Component {
<Card id="e4pannel-2" className={`${contrastString}pannel hoverable`} title="Escolaridade">
<GrayBar text="Grau de escolaridade da população quilombola do CadÚnico" />
<div id={'Escolaridade Segundo CadÚnico' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[1]}
customKeys={Education}
//height={400}
/>
</div>
<Loading />
<BuildStackedBar
dataKey='Ano'
data={c[1]}
customKeys={Education}
/>
<Loading id={'escolaridade'}/>
<CardFooter
data={serverURL + queries['Escolaridade Segundo CadÚnico'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -170,14 +167,12 @@ class Eixo4 extends Component {
</Card>
<Card id="e4pannel-3" className={`${contrastString}pannel hoverable`} title="População Quilombola no CadÚnico por Gênero">
<div id={'População no CadÚnico por Sexo' + type}>
<BuildBar
dataKey='Ano'
data={c[2]}
customKeys={Gender}
/>
</div>
<Loading />
<BuildBar
dataKey='Ano'
data={c[2]}
customKeys={Gender}
/>
<Loading id={'genero'}/>
<CardFooter
data={serverURL + queries['População no CadÚnico por Sexo'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -185,13 +180,11 @@ class Eixo4 extends Component {
</Card>
<Card id="e4pannel-4" className={`${contrastString}pannel hoverable`} title="População Quilombola no CadÚnico por Faixa Etária">
<div id={'População no CadÚnico por Faixa Etária' + type}>
<BuildStackedBar
dataKey='Ano'
data={c[3]}
/>
</div>
<Loading />
<BuildStackedBar
dataKey='Ano'
data={c[3]}
/>
<Loading id={'etaria'}/>
<CardFooter
data={serverURL + queries['População no CadÚnico por Faixa Etária'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
......@@ -203,11 +196,6 @@ class Eixo4 extends Component {
}