Commit e0f6ea7e authored by Edu Trevisan's avatar Edu Trevisan

Implement Ciganos autocomplete

parent 35117995
......@@ -23,9 +23,9 @@ 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';
// import CiganosSustainability from './SubPages/CiganosSustainability';
// import CiganosRights from './SubPages/CiganosRights';
// import CiganosCulture from './SubPages/CiganosCulture';
import { Tab, Tabs } from 'react-materialize';
import { Store } from './Store';
......@@ -39,7 +39,7 @@ function Ciganos() {
// Get information about which page was accessed
const { state, dispatch } = React.useContext(Store);
var states = {"POVOS CIGANOS": false, "DIREITOS": false, "CULTURA": false, "SUSTENTABILIDADE":false}
var states = {"POVOS CIGANOS": false,}
if (state.page.toUpperCase() in states) {
states[state.page.toUpperCase()] = true
}
......@@ -70,9 +70,9 @@ function Ciganos() {
<div id="conteudo" />
<Tabs className={`tab-demo z-depth-1 ${contrastString}mainPageOrangeTab`} onChange={whereIAm}>
<Tab title="Povos Ciganos" active={states["POVOS CIGANOS"]}> {states["POVOS CIGANOS"] ? <CiganosIndicator /> : <div />} </Tab>
<Tab title="Direitos" active={states["DIREITOS"]}> {states["DIREITOS"] ? <CiganosRights /> : <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>
<Tab title="Sustentabilidade" active={states["SUSTENTABILIDADE"]}> {states["SUSTENTABILIDADE"] ? <CiganosSustainability /> : <div />} </Tab> */}
</Tabs>
</div>
</div>
......
......@@ -27,7 +27,7 @@ import UfBar from '../Components/UfBar';
// import GrayBar from '../Components/GrayBar';
import Map from '../Components/Map';
import { Store } from '../Store';
import AutocompleteApp from '../Components/AutocompleteApp';
import BuildStackedBar from '../Charts/BuildStackedBar';
import BuildBar from '../Charts/BuildBar';
import Loading from '../Components/Loading';
......@@ -51,6 +51,7 @@ const queries = {
'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',
'Localização do Domicílio': 'ciganos_culture?dims=year,home_location'
}
const customKey = {
......@@ -85,6 +86,8 @@ const Education = {
* __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 />
* __Localização do Domicílio__, which displays the number of people from _ciganos culture_ that are part of terreiro comunities by county. <br />
* @name CiganosIndicator
*/
class CiganosIndicator extends Component {
constructor(props) {
......@@ -104,6 +107,8 @@ class CiganosIndicator extends Component {
this.createRoute = this.createRoute.bind(this);
this.getDataFromServer = this.getDataFromServer.bind(this);
this._mounted = false;
this.getDataFromAutocomplete = this.getDataFromAutocomplete.bind(this);
}
// Important to avoid memory leak
......@@ -123,6 +128,7 @@ class CiganosIndicator extends Component {
this.state.charts['Espécie do Domicílio'],
this.state.charts['Renda média per capita'],
this.state.charts['Escolaridade'],
this.state.charts['Localização do Domicílio'],
];
return (
......@@ -210,6 +216,27 @@ class CiganosIndicator extends Component {
/>
</Card>
<Card id="ciganos1pannel-6" className={`${contrastString}pannel hoverable`} title="Localização do Domicílio">
<AutocompleteApp
whichAutocomplete={'ciganos_culture'}
mainPage={'ciganos_culture'} chartDiv={'location_homes_Ciganos'}
saveData={this.getDataFromAutocomplete}
useMap={false} />
<BuildBar
data={c[4]}
dataKey={'ano_pesquisa'}
customKeys={customKey}
id={'location_homes_Ciganos'}
/>
<div id='cad_unico_culture_msg' style={{display:'none'}}>
<p>Não foi encontrado nenhum domicílio no múnicipio: <b>{this.state.tagName}</b></p>
</div>
<CardFooter
data={serverURL + queries['Escolaridade'] + ',uf&format=csv'}
source=" Cadastro Único para Programas Sociais (CadÚnico)"
/>
</Card>
</div>
</div>
);
......@@ -249,6 +276,20 @@ class CiganosIndicator extends Component {
});
}
getDataFromAutocomplete(info_to_display) {
let charts = this.state.charts
charts['Localização do Domicílio'] = info_to_display.data
if (this._mounted) this.setState({ charts: charts, tagName: info_to_display.tagName })
if (info_to_display.data.length === 0) {
document.getElementById('cad_unico_culture_msg').style.display = 'block'
}
else {
document.getElementById('cad_unico_culture_msg').style.display = 'none'
if (document.getElementById('location_homes_Ciganos'))
document.getElementById('location_homes_Ciganos').style.display = 'block'
}
}
organizeData(chart, data) {
switch (chart) {
case 'Espécie do Domicílio':
......@@ -273,7 +314,8 @@ class CiganosIndicator extends Component {
if (uf) {
route = route + "&filter=uf:" + uf;
}
this.getDataFromServer(route, head);
if (header !== 'Localização do Domicílio')
this.getDataFromServer(route, head);
}
updateCharts(uf) {
......
......@@ -63,21 +63,6 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
"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;
......@@ -88,7 +73,8 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
grid-template-areas:"p1 p2 p3"
"p1 p5 p5"
"p4 p5 p5"
"p4 bl bl";
"p4 p6 p6"
"bl p6 p6";
}
}
......
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