Commit 35117995 authored by Edu Trevisan's avatar Edu Trevisan

Ciganos bar chart fix

parent 4a833715
......@@ -24,6 +24,7 @@ import React, { Component } from 'react';
import { ResponsiveContainer, Bar, BarChart,
XAxis, YAxis, CartesianGrid, Tooltip, Legend, LabelList
} from 'recharts';
import './Styles/BuildStackedBar.css';
const getPercent = (value, total) => {
const ratio = total > 0 ? value / total : 0;
......@@ -34,7 +35,8 @@ const toPercent = (decimal, fixed = 0) => {
return `${(decimal * 100).toFixed(fixed)}%`;
};
const COLORS = ["#0E3959", "#0B7B6B", "#EA7C27", "#B66526", "#CA3828", "#363B1B", "#78752E", "#081A24", "#211517","#763618", "#722417", "#C93829", "#363B1BU"];
const COLORS = ["#0E3959", "#0B7B6B", "#EA7C27", "#B66526", "#CA3828", "#363B1B",
"#78752E", "#081A24", "#211517", "#763618", "#722417", "#C93829"];
const renderTooltipContent = (o) => {
const { payload, label } = o;
......@@ -60,33 +62,32 @@ const renderTooltipContent = (o) => {
);
};
/**
* Creates a bar chart. <br />
* Takes 4 props __customKeys__, __data__, __dataKey__ and __id__: <br />
* __customKeys__: Custom labels for the charts; <br />
* __data__: Raw data; <br />
* __dataKey__: Key to parse the data to be ploted;<br />
* __id__: Html name. <br />
*/
class BuildBar extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
this.renameKeys = this.renameKeys.bind(this);
this.filterArrayByPercent = this.filterArrayByPercent.bind(this);
}
/**
* Creates a bar chart. <br />
* Takes 4 props __customKeys__, __data__, __dataKey__ and __id__: <br />
* __customKeys__: Custom labels for the charts; <br />
* __data__: Raw data; <br />
* __dataKey__: Key to parse the data to be ploted;<br />
* __id__: Html name. <br />
*/
class BuildBar extends Component {
constructor(props) {
super(props);
this.state = {
data: null,
};
this.filterArrayByPercent = this.filterArrayByPercent.bind(this);
}
componentDidUpdate(prevProps) {
if (this.props !== prevProps) {
var data = this.props.data;
if (this.props.percent !== undefined)
data = this.filterArrayByPercent(data, this.props.percent);
this.setState({ data: data })
}
prevProps = null;
componentDidUpdate(prevProps) {
if (this.props !== prevProps) {
var data = this.props.data;
if (this.props.percent !== undefined)
data = this.filterArrayByPercent(data, this.props.percent);
this.setState({ data: data })
}
prevProps = null;
}
render() {
......@@ -109,7 +110,7 @@ const renderTooltipContent = (o) => {
}
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}
......@@ -136,11 +137,9 @@ const renderTooltipContent = (o) => {
return null;
})
}
</BarChart>
</ResponsiveContainer>
);
}
else
return (<div> </div>);
}
......@@ -150,14 +149,15 @@ const renderTooltipContent = (o) => {
var returnObj = {};
var newKey;
for (let key in obj) {
newKey = newKeys[key] || null;
if (newKey)
if (newKeys[key] || key === this.props.dataKey) {
newKey = newKeys[key] || key;
if (recurrentKeys.indexOf(newKey) === -1) {
recurrentKeys.push(newKey);
Object.assign(returnObj, { [newKey]: obj[key] });
} else {
returnObj[newKey] = returnObj[newKey] + obj[key];
}
}
}
return returnObj;
}
......
......@@ -38,6 +38,7 @@ import {
activateLoadingAnimation,
organizeJson,
getServerURL,
createIntervals,
} from '../enviroment';
import axios from 'axios';
import './Styles/CiganosIndicator.css'
......@@ -48,6 +49,8 @@ const type = "ciganos";
const queries = {
'Famílias pertencentes a Comunidade de Ciganos': 'ciganos_rights?dims=year',
'Espécie do Domicílio': 'ciganos_culture?dims=year,home_type',
'Renda média per capita': 'ciganos_sustentability?dims=year,per_capita_income',
'Escolaridade': 'ciganos_rights?dims=education_families,year',
}
const customKey = {
......@@ -59,12 +62,29 @@ const loanTypeKeys = {
'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 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 />
* __Espécie do Domicílio__, which shows the sort of housing possesed by ciganos descendents; <br />
* __Renda média per capita__, which shows the average per capita income of ciganos descendents families. <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) {
......@@ -74,6 +94,8 @@ class CiganosIndicator extends Component {
charts: {
'Famílias pertencentes a Comunidade de Ciganos': null,
'Espécie do Domicílio': null,
'Renda média per capita': null,
'Escolaridade': null,
},
};
this.getMapClick = this.getMapClick.bind(this);
......@@ -99,6 +121,8 @@ class CiganosIndicator extends Component {
const c = [
this.state.charts['Famílias pertencentes a Comunidade de Ciganos'],
this.state.charts['Espécie do Domicílio'],
this.state.charts['Renda média per capita'],
this.state.charts['Escolaridade'],
];
return (
......@@ -128,7 +152,7 @@ class CiganosIndicator extends Component {
<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}>
<BuildStackedBar
<BuildBar
dataKey='ano_pesquisa'
data={c[0]}
customKeys={customKey}
......@@ -156,6 +180,36 @@ class CiganosIndicator extends Component {
/>
</Card>
<Card id="ciganos1pannel-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}
/>
</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>
<Card id="ciganos1pannel-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>
</div>
</div>
);
......@@ -199,6 +253,15 @@ class CiganosIndicator extends Component {
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);
}
......
......@@ -86,8 +86,9 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
grid-gap: 1rem;
padding: 1rem;
grid-template-areas:"p1 p2 p3"
"p1 p5 p6"
"p4 p5 p6";
"p1 p5 p5"
"p4 p5 p5"
"p4 bl bl";
}
}
......
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