Commit f6458be4 authored by Edu Trevisan's avatar Edu Trevisan

On Brasil Quilombola reduce number of calls to organizeJson, increase code...

On Brasil Quilombola reduce number of calls to organizeJson, increase code reusability and add sources to charts
parent 9d85afbd
......@@ -45,7 +45,15 @@ import './Styles/Eixo2.css'
const serverURL = getServerURL();
const type = "eixo_2";
const homeLighting ={
const queries = {
'Número de famílias': 'eixo_2?dims=year',
'Forma de abastecimento de água': 'eixo_2?dims=cod_home_watter_supply,year',
'Forma de iluminação - Famílias': 'eixo_2?dims=cod_home_lighting,year',
'Tipos de escoamento sanitário': 'eixo_2?dims=cod_sanitary_dump,year',
'Destino do lixo': 'eixo_2?dims=cod_home_trash_destiny,year',
}
const homeLighting = {
'1': 'Elétrica com medidor próprio',
'2': 'Elétrica com medidor comunitário',
'3': 'Elétrica sem medidor',
......@@ -124,10 +132,10 @@ class Eixo2 extends Component {
const uf = getStateExtendedName(this.state.clickedInMap).currentState;
const c = [
this.state.charts["Número de famílias"],
organizeJson(this.state.charts["Forma de abastecimento de água"], "cod_abaste_agua_domic_fam", "ano_pesquisa"),
organizeJson(this.state.charts["Tipos de escoamento sanitário"], "cod_escoa_sanitario_domic_fam", "ano_pesquisa"),
organizeJson(this.state.charts["Forma de iluminação - Famílias"], "cod_iluminacao_domic_fam", "ano_pesquisa"),
organizeJson(this.state.charts["Destino do lixo"], "cod_destino_lixo_domic_fam", "ano_pesquisa"),
this.state.charts["Forma de abastecimento de água"],
this.state.charts["Tipos de escoamento sanitário"],
this.state.charts["Forma de iluminação - Famílias"],
this.state.charts["Destino do lixo"],
];
return (
<div>
......@@ -154,7 +162,10 @@ class Eixo2 extends Component {
):(
<UfBar img={family} ufname={uf} val="Sem informação"/>
)}
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['Número de famílias']+',uf&format=csv'}
source = " Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Row>
</Card>
......@@ -170,7 +181,10 @@ class Eixo2 extends Component {
/>
</div>
<Loading />
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['Forma de abastecimento de água'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Row>
<Row>
<GrayBar text="Tipos de escoamento sanitário" />
......@@ -183,7 +197,10 @@ class Eixo2 extends Component {
/>
</div>
<Loading />
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['Tipos de escoamento sanitário'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Row>
</Card>
......@@ -199,7 +216,10 @@ class Eixo2 extends Component {
/>
</div>
<Loading />
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['Forma de iluminação - Famílias'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Row>
<Row>
<GrayBar text="Destino do lixo" />
......@@ -212,7 +232,10 @@ class Eixo2 extends Component {
/>
</div>
<Loading />
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['Destino do lixo'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Row>
</Card>
......@@ -229,8 +252,8 @@ class Eixo2 extends Component {
}
axios.get(`${serverURL}${defaultData}`)
.then(res => {
const requestData = res.data.result
chart = chart.trim()
const requestData = this.organizeData(chart, res.data.result);
this.setState(prevState => {
let prev = { ...prevState.charts };
prev[chart] = requestData;
......@@ -251,28 +274,26 @@ class Eixo2 extends Component {
});
}
createRoute(header, uf) {
var route;
let head = header.trim()
switch (head) {
case 'Forma de iluminação - Famílias':
route = type + "?dims=cod_home_lighting,year"
break;
case 'Destino do lixo':
route = type + "?dims=cod_home_trash_destiny,year"
break;
case 'Forma de abastecimento de água':
route = type + "?dims=cod_home_watter_supply,year"
break;
case 'Tipos de escoamento sanitário':
route = type + "?dims=cod_sanitary_dump,year"
break;
case 'Número de famílias':
route = type + "?dims=year"
break;
organizeData(chart, data) {
switch (chart) {
case "Número de famílias":
return (data);
case "Forma de abastecimento de água":
return (organizeJson(data, "cod_abaste_agua_domic_fam", "ano_pesquisa"));
case "Tipos de escoamento sanitário":
return (organizeJson(data, "cod_escoa_sanitario_domic_fam", "ano_pesquisa"));
case "Forma de iluminação - Famílias":
return (organizeJson(data, "cod_iluminacao_domic_fam", "ano_pesquisa"));
case "Destino do lixo":
return (organizeJson(data, "cod_destino_lixo_domic_fam", "ano_pesquisa"));
default:
console.log("404");
return (data);
}
}
createRoute(header, uf) {
const head = header.trim()
var route = queries[head];
if (uf) {
route = route + "&filter=uf:" + uf;
}
......@@ -280,7 +301,7 @@ class Eixo2 extends Component {
}
updateCharts(uf) {
var openCharts = Object.keys(this.state.charts);
var openCharts = Object.keys(queries);
if (openCharts) {
for (var i = 0; i < openCharts.length; i++) {
activateLoadingAnimation(openCharts[i].trim()+type);
......
......@@ -45,6 +45,15 @@ import './Styles/Eixo3.css'
const serverURL = getServerURL();
const type = "eixo_3";
const queries = {
'Extrativismo': 'eixo_3?dims=year,cod_agriculture_job',
'Bolsa Família': 'eixo_3?dims=year,cod_home_bolsa_familia',
'Renda média per capita': 'eixo_3?dims=year,per_capita_income',
// 'Distribuição de renda': 'eixo_3?dims=year,per_capita_income',
'Tipo de domicílio': 'eixo_2?dims=year,cod_local_home',
}
const extrativismo = {
'1': 'sim',
'2': 'não',
......@@ -103,10 +112,10 @@ class Eixo3 extends Component {
const contrastString = this.context.state.contrast;
const uf = getStateExtendedName(this.state.clickedInMap).currentState;
const c = [
this.getAverage(organizeJson(this.state.charts['Renda média per capita'], "vlr_renda_media_fam", "ano_pesquisa")),
organizeJson(this.state.charts['Bolsa Família'], "marc_pbf", "ano_pesquisa"),
organizeJson(this.state.charts['Extrativismo'], "cod_agricultura_trab_memb", "ano_pesquisa"),
organizeJson(this.state.charts["Tipo de domicílio"], "cod_local_domic_fam", "ano_pesquisa"),
this.state.charts['Renda média per capita'],
this.state.charts['Bolsa Família'],
this.state.charts['Extrativismo'],
this.state.charts["Tipo de domicílio"],
];
return (
......@@ -117,8 +126,9 @@ class Eixo3 extends Component {
</Col>
<Col l={10} m={9} 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>
<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>
......@@ -130,12 +140,15 @@ class Eixo3 extends Component {
<Button className="clearmapbtn" onClick={this.clearMap}> Limpar Mapa </Button>
</Row>
<Row>
{c[0][0] ? (
{c[0] ? (
<UfBar img={coins} ufname={uf} val={"R$ " + c[0][c[0].length-1]['average']} />
) : (
<UfBar img={coins} ufname={uf} val="Sem informação" />
)}
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['Renda média per capita'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Row>
</Card>
......@@ -148,7 +161,10 @@ class Eixo3 extends Component {
/>
</div>
<Loading />
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['Renda média per capita'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
<Card id="e3pannel-3" className={`${contrastString}pannel hoverable`} title="Bolsa Família">
......@@ -161,7 +177,10 @@ class Eixo3 extends Component {
/>
</div>
<Loading/>
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)"/>
<CardFooter
data={serverURL + queries['Bolsa Família'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
<Card id="e3pannel-5" className={`${contrastString}pannel hoverable`} title="Extrativismo">
......@@ -174,7 +193,10 @@ class Eixo3 extends Component {
/>
</div>
<Loading/>
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)"/>
<CardFooter
data={serverURL + queries['Extrativismo'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
<Card id="e3pannel-6" className={`${contrastString}pannel hoverable`} title="Área Rural">
......@@ -187,7 +209,10 @@ class Eixo3 extends Component {
/>
</div>
<Loading />
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['Tipo de domicílio'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
</div>
</div>
......@@ -228,8 +253,8 @@ class Eixo3 extends Component {
}
axios.get(`${serverURL}${defaultData}`)
.then(res => {
const requestData = res.data.result
chart = chart.trim()
const requestData = this.organizeData(chart, res.data.result);
this.setState(prevState => {
let prev = { ...prevState.charts };
prev[chart] = requestData;
......@@ -250,28 +275,24 @@ class Eixo3 extends Component {
});
}
createRoute(header, uf) {
var route;
let head = header.trim()
switch (head) {
organizeData(chart, data) {
switch (chart) {
case 'Extrativismo':
route = type + "?dims=year,cod_agriculture_job"
break;
return (organizeJson(data, "cod_agricultura_trab_memb", "ano_pesquisa"));
case 'Bolsa Família':
route = type + "?dims=year,cod_home_bolsa_familia"
break;
return (organizeJson(data, "marc_pbf", "ano_pesquisa"));
case 'Renda média per capita':
route = type + "?dims=year,per_capita_income";
break;
case 'Distribuição de renda':
route = type + "?dims=year,per_capita_income";
break;
return (this.getAverage(organizeJson(data, "vlr_renda_media_fam", "ano_pesquisa")));
case 'Tipo de domicílio':
route = "eixo_2?dims=year,cod_local_home"
break;
return (organizeJson(data, "cod_local_domic_fam", "ano_pesquisa"));
default:
console.log("404");
return (data);
}
}
createRoute(header, uf) {
const head = header.trim()
var route = queries[head];
if (uf) {
route = route + "&filter=uf:" + uf;
}
......@@ -279,7 +300,7 @@ class Eixo3 extends Component {
}
updateCharts(uf) {
var openCharts = Object.keys(this.state.charts);
var openCharts = Object.keys(queries);
if (openCharts) {
for (var i = 0; i < openCharts.length; i++) {
activateLoadingAnimation(openCharts[i].trim() + type);
......
......@@ -47,6 +47,13 @@ import './Styles/Eixo4.css'
const serverURL = getServerURL();
const type = "eixo_4";
const queries = {
'Número de pessoas': 'eixo_4?dims=year',
'Escolaridade Segundo CadÚnico': 'eixo_4?dims=education_families,year',
'População no CadÚnico por Faixa Etária': 'eixo_4?dims=age,year',
'População no CadÚnico por Sexo': 'eixo_4?dims=gender,year',
}
const Education = {
'1': 'Creche',
'2': 'Pré-escola',
......@@ -89,10 +96,10 @@ class Eixo4 extends Component {
this.state = {
clickedInMap: null,
charts: {
"Número de pessoas": null,
"Escolaridade Segundo CadÚnico": null,
"População no CadÚnico por Faixa Etária": null,
"População no CadÚnico por Sexo": null,
'Número de pessoas': null,
'Escolaridade Segundo CadÚnico': null,
'População no CadÚnico por Faixa Etária': null,
'População no CadÚnico por Sexo': null,
},
};
this.getMapClick = this.getMapClick.bind(this);
......@@ -110,10 +117,10 @@ class Eixo4 extends Component {
const contrastString = this.context.state.contrast;
const uf = getStateExtendedName(this.state.clickedInMap).currentState;
const c = [
this.state.charts["Número de pessoas"],
organizeJson(this.state.charts['Escolaridade Segundo CadÚnico'], "cod_curso_frequentou_pessoa_memb", "ano_pesquisa"),
organizeJson(this.state.charts['População no CadÚnico por Sexo'], "genero", "ano_pesquisa"),
organizeJson(createIntervals(this.state.charts['População no CadÚnico por Faixa Etária'], 'idade', 10, 'ano_pesquisa', 100), "idade", "ano_pesquisa"),
this.state.charts['Número de pessoas'],
this.state.charts['Escolaridade Segundo CadÚnico'],
this.state.charts['População no CadÚnico por Sexo'],
this.state.charts['População no CadÚnico por Faixa Etária'],
];
return (
<div>
......@@ -140,7 +147,10 @@ class Eixo4 extends Component {
) : (
<UfBar img={family} ufname={uf} val="Sem informação" />
)}
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['Número de pessoas'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Row>
</Card>
......@@ -154,7 +164,10 @@ class Eixo4 extends Component {
/>
</div>
<Loading />
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['Escolaridade Segundo CadÚnico'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
<Card id="e4pannel-3" className={`${contrastString}pannel hoverable`} title="População quilombola por Sexo">
......@@ -166,7 +179,10 @@ class Eixo4 extends Component {
/>
</div>
<Loading />
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['População no CadÚnico por Sexo'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
<Card id="e4pannel-4" className={`${contrastString}pannel hoverable`} title="População quilombola por Faixa Etária">
......@@ -177,7 +193,10 @@ class Eixo4 extends Component {
/>
</div>
<Loading />
<CardFooter source=" Cadastro Único para Programas Sociais (CadÚnico)" />
<CardFooter
data={serverURL + queries['População no CadÚnico por Faixa Etária'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
</div>
</div>
......@@ -192,8 +211,8 @@ class Eixo4 extends Component {
}
axios.get(`${serverURL}${defaultData}`)
.then(res => {
const requestData = res.data.result
chart = chart.trim()
const requestData = this.organizeData(chart, res.data.result);
this.setState(prevState => {
let prev = { ...prevState.charts };
prev[chart] = requestData;
......@@ -214,25 +233,24 @@ class Eixo4 extends Component {
});
}
createRoute(header, uf) {
var route;
let head = header.trim()
switch (head) {
organizeData(chart, data) {
switch (chart) {
case 'Número de pessoas':
route = type + "?dims=year"
break;
return (data);
case 'Escolaridade Segundo CadÚnico':
route = type + "?dims=education_families,year"
break;
case 'População no CadÚnico por Faixa Etária':
route = type + "?dims=age,year"
break;
return (organizeJson(data, "cod_curso_frequentou_pessoa_memb", "ano_pesquisa"));
case 'População no CadÚnico por Sexo':
route = type + "?dims=gender,year"
break;
return (organizeJson(data, "genero", "ano_pesquisa"));
case 'População no CadÚnico por Faixa Etária':
return (organizeJson(createIntervals(data, 'idade', 10, 'ano_pesquisa', 100), "idade", "ano_pesquisa"));
default:
console.log("404");
return (data);
}
}
createRoute(header, uf) {
const head = header.trim()
var route = queries[head];
if (uf) {
route = route + "&filter=uf:" + uf;
}
......@@ -240,7 +258,7 @@ class Eixo4 extends Component {
}
updateCharts(uf) {
var openCharts = Object.keys(this.state.charts);
var openCharts = Object.keys(queries);
if (openCharts) {
for (var i = 0; i < openCharts.length; i++) {
activateLoadingAnimation(openCharts[i].trim() + type);
......
......@@ -235,7 +235,7 @@ export function getDDValue(e) {
return {id: e.target.id, value: e.target.value};
}
export function organizeJson(data, uniqueParameter, yearParameter='no_ano_pesquisa') {
export function organizeJson(data, uniqueParameter, yearParameter = 'no_ano_pesquisa') {
var groups = {};
var finalJson = [];
var aux = {}
......
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