Commit 2b2b349b authored by ns17's avatar ns17

Adding Loading and fixing little bugs

parent 8272be67
......@@ -123,8 +123,8 @@ class BuildStackedBar extends Component {
return this.renameKeys(element, customKeys);
}, this);
}
if(newData !== null && newData !== undefined && newData.length > 0)
if(newData !== null && newData !== undefined && newData.length > 0){
return (
<ResponsiveContainer height={cardHeight}>
<BarChart width={600} height={cardHeight} data={newData}
......@@ -134,6 +134,7 @@ class BuildStackedBar extends Component {
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip content={renderTooltipContent}/>
<Legend />
sleep(10000)
{ Object.keys(newData[0]).map(function(bar, index) {
if(bar !== dataKey) {
if(label === undefined) {
......@@ -151,9 +152,10 @@ class BuildStackedBar extends Component {
return null;
})
}
</BarChart>
</ResponsiveContainer>
);
);}
else
return (<div> </div>);
}
......
......@@ -52,4 +52,4 @@ class Loading extends Component {
}
}
export default Loading;
\ No newline at end of file
export default Loading;
......@@ -61,13 +61,14 @@ function MainPage() {
</Row>
<Row>
<Col m={12} l={10} offset={'l1'}>
<MainCard color='mainPageOrange' title='Participantes do Sistema Nacional de Políticas da Igualdade Racial (SINAPIR)' subpages={subpages6} text={text6} image={'mapas.png'}/>
<MainCard color='mainPageOrange' title='Participantes do Sistema Nacional de Promoção da Igualdade Racial (SINAPIR)' subpages={subpages6} text={text6} image={'mapas.png'}/>
</Col>
</Row>
</div>
);
}
const text1 = <div>
<p/>
<p>Programa Brasil Quilombola (PBQ) reúne ações do Governo Federal para as comunidades quilombolas nas seguintes áreas:</p>
<li>Eixo 1: Acesso à terra</li>
<li>Eixo 2: Infraestrutura e Qualidade de Vida</li>
......@@ -75,6 +76,7 @@ const text1 = <div>
<li>Eixo 4: Direitos e Cidadania</li>
</div>
const text2 = <div>
<p/>
<p>
O Plano Juventude Viva é uma iniciativa do Governo Federal, coordenada pela Secretaria Nacional de Juventude (SNJ)
e pela Secretaria Especial de Políticas de Promoção da Igualdade Racial (SEPPIR). O Plano reúne ações de prevenção
......@@ -92,16 +94,20 @@ const text2 = <div>
<li>Aperfeiçoamento Institucional</li>
</div>
const text3 = <div>
Este módulo contém informações do CadÚnico sobre comunidades de Ciganos.
<p/>
Este módulo contém informações do CadÚnico sobre as comunidades de Ciganos.
</div>
const text4 = <div>
Este módulo contém informações do CadÚnico sobre comunidades de Matriz Africana.
<p/>
Este módulo contém informações do CadÚnico sobre as comunidades de Matriz Africana e Povos de Terreiro.
</div>
const text5 = <div>
Este módulo contém informações dos estudantes que ingressaram na universidade
através da Lei 12.711/2012 (Lei de cotas).
<p/>
Este módulo contém informações dos estudantes do ensino superior que ingressaram na universidade
através da Lei 12.711/2012 (Lei de cotas), da Lei 10.260/2001-FIES ou da Lei Lei 11.096/2005-Prouni.
</div>
const text6 = <div>
<p/>
Este módulo contém informações sobre os estados e municípios participantes do SINAPIR,
informações de contatos dos gestores e os convênios em execução.
</div>
......
......@@ -134,7 +134,7 @@ class AfricanIndicator extends Component {
return (
<div>
<Row>
<Col l={3} m={4} s={5}>
<Col l={3} m={5} s={5}>
<h4 className={`${contrastString}eixoHeaderA`}>Matriz Africana</h4>
</Col>
</Row>
......
......@@ -134,7 +134,7 @@ class CiganosIndicator extends Component {
return (
<div>
<Row>
<Col l={3} m={4} s={5}>
<Col l={3} m={5} s={5}>
<h4 className={`${contrastString}eixoHeaderC`}>Povos Ciganos</h4>
</Col>
</Row>
......
......@@ -141,7 +141,7 @@ class Eixo2 extends Component {
return (
<div>
<Row>
<Col l={7} m={5} s={8}>
<Col l={8} m={8} s={8}>
<h4 className={`${contrastString}eixoHeaderQ`}>Infraestrutura e Qualidade de Vida</h4>
</Col>
</Row>
......
......@@ -117,11 +117,11 @@ class Eixo3 extends Component {
this.state.charts['Extrativismo'],
this.state.charts["Tipo de domicílio"],
];
return (
<div>
<Row>
<Col l={7} m={5} s={8}>
<Col l={7} m={8} s={8}>
<h4 className={`${contrastString}eixoHeaderQ`}>Desenvolvimento Local e Inclusão Produtiva</h4>
</Col>
</Row>
......@@ -228,7 +228,7 @@ class Eixo3 extends Component {
average = 0;
for (var key in obj) {
if (key !== 'Ano') {
count = count + Number(key);
count = count + obj[key];
average = average + obj[key] * Number(key);
} else {
average = Math.trunc(average / count);
......
......@@ -126,7 +126,7 @@ class Eixo4 extends Component {
return (
<div>
<Row>
<Col l={7} m={5} s={8}>
<Col l={7} m={8} s={8}>
<h4 className={`${contrastString}eixoHeaderQ`}>Direitos e Cidadania</h4>
</Col>
</Row>
......
......@@ -19,6 +19,7 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
*/
import React, { Component } from 'react';
import {Row,Col} from 'react-materialize';
import {Card} from 'react-materialize';
import './Styles/QuilombolaAbout.css'
import csv1 from './CSVoriginais/pbq/comunidades_certificadas_por_uf.csv'
......@@ -38,7 +39,11 @@ class QuilombolaAbout extends Component {
var contrastString = this.context.state.contrast;
return (
<div>
<h4 className={`${contrastString}eixoHeaderQ`}>Catálogo de indicadores disponíveis no sistema</h4>
<Row>
<Col l={8} m={8} s={8}>
<h4 className={`${contrastString}eixoHeaderQ`}>Catálogo de Indicadores Disponíveis no Sistema</h4>
</Col>
</Row>
<div className="gridTemplate">
<Card id={`${contrastString}c1`} className={`${contrastString}pannel hoverable`} title="Certificações Emitidas" >
<p>
......
......@@ -34,7 +34,7 @@ import './Styles/YouthEducation.css'
import BuildStackedBar from '../Charts/BuildStackedBar'
import BuildBar from '../Charts/BuildBar'
import './Styles/Pannel.css'
import Loading from '../Components/Loading'
......@@ -116,9 +116,20 @@ class YouthEducation extends Component {
if (!(Object.values(temp).indexOf(true) > -1)){
this.setState({ levelData : temp });
}
})
if (document.getElementById("Ensino")){
document.getElementById("Ensino").style.display = "none"
document.getElementById("idadePP").style.display = "none"
document.getElementById("idadeB").style.display = "none"
document.getElementById("escolaPP").style.display = "none"
document.getElementById("escolaB").style.display = "none"
document.getElementById("estudoPP").style.display = "none"
document.getElementById("estudoB").style.display = "none"
document.getElementById("distorcaoF").style.display = "none"
document.getElementById("distorcaoM").style.display = "none"
}
})
}
componentDidMount() {
this.clearMap()
}
......@@ -153,6 +164,7 @@ class YouthEducation extends Component {
data={this.state.charts['Medio Comp']}
customKeys={medio}
/>
<Loading id={"Ensino"}/>
<CardFooter data={serverURL + 'youth_education?dims=year,cor_raca,max_level,age,uf,concluiu&format=csv'} source="Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
</Card>
......@@ -163,12 +175,14 @@ class YouthEducation extends Component {
data={this.state.charts['Faixa Etaria Negros']}
customKeys={etaria}
/>
<Loading id={"idadePP"}/>
<GrayBar text="Brancos, por UF" />
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Faixa Etaria Brancos']}
customKeys={etaria}
/>
<Loading id={"idadeB"}/>
<p>O Plano Juventude Viva tem o seu foco na população negra na faixa etária entre 15 e 29 anos. Esses jovens têm sido a parcela da população mais vulnerável à violência.</p>
<CardFooter data={serverURL + 'youth_education?dims=year,cor_raca,age,uf&format=csv'} source="Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
</Card>
......@@ -180,6 +194,7 @@ class YouthEducation extends Component {
data={this.state.charts['Freq Negros']}
customKeys={freq}
/>
<Loading id={"escolaPP"}/>
<p>Total de crianças e jovens negros que frequentam escola (ou creche) e proporção deles em relação ao total de crianças e jovens negros da faixa etária de 3 a 20 anos.</p>
<GrayBar text="Brancos entre 3 e 20 anos, por UF" />
<BuildStackedBar
......@@ -187,6 +202,7 @@ class YouthEducation extends Component {
data={this.state.charts['Freq Brancos']}
customKeys={freq}
/>
<Loading id={"escolaB"}/>
<p>Total de crianças e jovens brancos que frequentam escola (ou creche) e proporção deles em relação ao total de crianças e jovens brancos da faixa etária de 3 a 20 anos.</p>
<CardFooter data={serverURL + 'youth_education?dims=year,cor_raca,age,in_escola,uf,&format=csv'} source='Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)' />
</Card>
......@@ -198,12 +214,14 @@ class YouthEducation extends Component {
data={this.state.charts['Maior Nivel N']}
customKeys={Mnivel}
/>
<Loading id={"estudoPP"}/>
<GrayBar text="Brancos de 15 a 29 anos, por UF" />
<BuildStackedBar
dataKey='Ano'
data={this.state.charts['Maior Nivel B']}
customKeys={Mnivel}
/>
<Loading id={"estudoB"}/>
<CardFooter data={serverURL + 'youth_education?dims=year,cor_raca,max_level,age,uf,concluiu&format=csv'} source="Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
</Card>
......@@ -214,12 +232,14 @@ class YouthEducation extends Component {
data={this.state.charts['Distorção N']}
customKeys={disto}
/>
<Loading id={"distorcaoF"}/>
<GrayBar text="Ensino Médio, por UF" />
<BuildBar
dataKey='Ano'
data={this.state.charts['Distorção M']}
customKeys={disto}
/>
<Loading id={"distorcaoM"}/>
<p>O aluno é considerado em situação de distorção ou defasagem idade-série quando a diferença entre a idade do aluno e a idade prevista para a série é de dois anos ou mais.</p>
<CardFooter data={serverURL + 'youth_education?dims=year,cor_raca,age,frequenta,uf,nivel_escola&format=csv'} source="Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
</Card>
......
......@@ -28,7 +28,7 @@ import GrayBar from '../Components/GrayBar';
import { getStateExtendedName } from '../enviroment';
import Map from '../Components/Map';
import Table from '../Components/Table'
import Loading from '../Components/Loading'
import BuildStackedBar from '../Charts/BuildStackedBar'
import { Store } from '../Store'
import axios from 'axios';
......@@ -122,6 +122,15 @@ class YouthJob extends Component {
if (!(Object.values(temp).indexOf(true) > -1)){
this.setState({ earningsData : temp });
}
if (document.getElementById("renda")){
document.getElementById("renda").style.display = "none"
document.getElementById("trabalhouPP").style.display = "none"
document.getElementById("trabalhouB").style.display = "none"
document.getElementById("vinculo").style.display = "none"
document.getElementById("salarioPP").style.display = "none"
document.getElementById("salarioB").style.display = "none"
}
})
this.getMapClick = this.getMapClick.bind(this);
......@@ -159,6 +168,7 @@ class YouthJob extends Component {
</Row>
<UfBar ufname={getStateExtendedName(this.state.clickedInMap).currentState} />
<Table body={this.vetoriza(this.state.charts['Renda Media'])} header={['Renda Média (R$)']} />
<Loading id={"renda"}/>
<CardFooter data={serverURL + earningsData + '&format=csv'} source=" Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
</Card>
......@@ -169,6 +179,7 @@ class YouthJob extends Component {
data={this.state.charts['Trabalhou Referencia Preto Pardo']}
customKeys={TrabPP}
/>
<Loading id={"trabalhouPP"}/>
<p>Número total de jovens negros que trabalharam ou estavam afastados do trabalho na semana de referência da pesquisa com relação aos que não trabalharam nem estavam afastados.</p>
<GrayBar text="Brancos entre 15 e 29 anos" />
<BuildStackedBar
......@@ -176,6 +187,7 @@ class YouthJob extends Component {
data={this.state.charts['Trabalhou Referencia Branco']}
customKeys={TrabPP}
/>
<Loading id={"trabalhouB"}/>
<p>Número total de jovens brancos que trabalharam ou estavam afastados do trabalho na semana de referência da pesquisa com relação aos que não trabalharam nem estavam afastados.</p>
<CardFooter data={serverURL + 'youth_jobs?dims=year,cor_raca,trabalhou,uf&format=csv'} source=" Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
</Card>
......@@ -187,6 +199,7 @@ class YouthJob extends Component {
data={this.state.charts['Trabalhador Vinculo']}
customKeys={TrabVin}
/>
<Loading id={"vinculo"}/>
<p/>
<p>Tipo de contratação do jovem negro no trabalho exercido durante a semana de referência da pesquisa.</p>
<CardFooter data={serverURL + 'youth_jobs?dims=year,cor_raca,vinculo,uf&format=csv'} source=" Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
......@@ -200,6 +213,7 @@ class YouthJob extends Component {
customKeys={FaixaSal}
height={400}
/>
<Loading id={"salarioPP"}/>
<p>SM significa Salário Minimo.</p>
<GrayBar text="Brancos entre 15 e 29 anos" />
<BuildStackedBar
......@@ -208,6 +222,7 @@ class YouthJob extends Component {
customKeys={FaixaSal}
height={400}
/>
<Loading id={"salarioB"}/>
<p>SM significa Salário Minimo.</p>
<CardFooter data={serverURL + 'youth_jobs?dims=year,cor_raca,rendimento_faixa,uf&format=csv'} source=" Pesquisa Nacional por Amostra de Domicílios Continua(PNAD Continua), IBGE (2012-2018)" />
</Card>
......
......@@ -135,7 +135,7 @@ class YouthVulnerabilities extends Component {
</Card>
<Card id="jv1pannel-4" className={`${contrastString}pannel hoverable`} title="Taxa de Homicídios Comparada">
<GrayBar text="por raça/cor"/>
<GrayBar text="Todas as idades, por raça/cor"/>
<div id={"Taxa de Homicídios Comparada"+type}>
<BuildBar data={c[2]} customKeys={{"taxa":"Número de homicídios por 100 mil"}} dataKey="raca_cor"/>
</div>
......@@ -146,7 +146,8 @@ class YouthVulnerabilities extends Component {
<Card id="jv1pannel-6" className={`${contrastString}pannel hoverable`} title="Distribuição de Homicídios">
<GrayBar text="Todas as idades, por raça/cor"/>
{ c[1] ? <BuildPie data={c[1]} dataKey="total" nameKey="def_raca_cor"/> : <div/>}
{ c[1] ? <BuildPie data={c[1]} dataKey="total" nameKey="def_raca_cor"/>: <div/>}
<Loading id={"distribuicao"}/>
<p>Número total de homicídios, de todas as idades, divididos por raça/cor</p>
<CardFooter data={serverURL + queries['Distribuição de Homicídios por Raça/Cor']+'&format=csv'} source="SIM (MS, 2016)"/>
</Card>
......@@ -159,7 +160,7 @@ class YouthVulnerabilities extends Component {
<Card id="jv1pannel-8" className={`${contrastString}pannel hoverable`} title="Municípios que Aderiram ao Plano Juventude Viva">
<Table header={["Nome","UF","Data de adesão"]} body ={this.fixDataP8(data.getvup8()[getStateExtendedName(this.state.clickedInMap).currentState])} classes="striped smallCells" divClasses="scrolltable" height='800'/>
<CardFooter data={csv7} source="Sistema de Informações de Mortalidade (SIM) (MS, 2010) e Censo Demográfico (IBGE, 2010)"/>
<CardFooter data={csv7} source="Sistema de Informações de Mortalidade (SIM) (MS, 2016) e Censo Demográfico (IBGE, 2016)"/>
</Card>
</div>
</div>
......@@ -171,6 +172,8 @@ class YouthVulnerabilities extends Component {
document.getElementById(chart + type).style.display = 'block';
msg.remove()
}
axios.get(`${serverURL}${defaultData}`)
.then(res => {
chart = chart.trim()
......@@ -182,6 +185,7 @@ class YouthVulnerabilities extends Component {
});
this.prevState = null;
deactivateLoadingAnimation(chart, type);
document.getElementById("distribuicao").style.display = "none";
})
.catch(error => {
console.log(error)
......
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