Commit 1b92839e authored by Edu Trevisan's avatar Edu Trevisan

Merge branch 'update_info' into 'development'

Update info

See merge request !34
parents 1e05a6a7 25d7e348
......@@ -16,6 +16,7 @@ package-lock.json
.env.development.local
.env.test.local
.env.production.local
.vscode
npm-debug.log*
yarn-debug.log*
......
......@@ -29,7 +29,6 @@ import Quilombolas from './Quilombolas'
import Youth from './Youth'
import Maps from './Maps'
import AfricanOrigin from './AfricanOrigin'
import Quilombola from './Quilombola'
import { Store } from './Store';
import AppFooter from './Components/AppFooter'
import ContrastBar from './Components/ContrastBar'
......@@ -89,7 +88,6 @@ function App() {
<div>
<Route exact={true} path="/" component={MainPage} />
<Route exact={true} path="/cotas" component={RacialQuotas} />
<Route exact={true} path="/quilombola" component={Quilombola} />
<Route exact={true} path="/sobre" component={About} />
<Route exact={true} path="/quilombolas" component={Quilombolas} />
<Route exact={true} path="/juventude" component={Youth} />
......
......@@ -22,30 +22,40 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
import React, { Component } from 'react';
import { ResponsiveContainer, Bar, BarChart,
XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
XAxis, YAxis, CartesianGrid, Tooltip, Legend, LabelList
} from 'recharts';
const getPercent = (value, total) => {
const ratio = total > 0 ? value / total : 0;
return toPercent(ratio, 2);
};
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 renderTooltipContent = (o) => {
const { payload, label } = o;
const total = payload.reduce((result, entry) => (result + entry.value), 0);
return (
<div className={"z-depth-3"} style={{backgroundColor: "white"}}>
<div className="customized-tooltip-content" style={{margin: 25}}>
<div className="total">
<div className={"tooltipCenter"}><b>{`${label}`}</b></div>
</div>
<div className={"z-depth-3"} style={{ backgroundColor: "white" }}>
<div className="customized-tooltip-content" style={{ margin: 25 }}>
<div className="total">
<div className={"tooltipCenter"}><b>{`${label}`}</b></div>
</div>
<ul className="list">
{
payload.map((entry, index) => (
<li key={`item-${index}`} style={{color: entry.color}}>
{`${entry.name}: ${entry.value}`}
</li>
))
payload.reverse().map((entry, index) => (
<li key={`item-${index}`} style={{ color: entry.color }}>
{`${entry.name}: ${entry.value} (${getPercent(entry.value, total)})`}
</li>
))
}
<li id={"totalText"}><b>Total: </b>{total}</li>
</ul>
<div style={{paddingBottom:15}}></div>
</div>
</div>
</div>
);
};
......@@ -59,64 +69,94 @@ const renderTooltipContent = (o) => {
* __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);
}
constructor(props) {
super(props);
this.state = {
data: []
};
this.renameKeys = this.renameKeys.bind(this);
this.filterArrayByPercent = this.filterArrayByPercent.bind(this);
}
componentDidUpdate(prevProps) {
var data = this.props.data;
if (this.props.percent !== undefined)
data = this.filterArrayByPercent(data, this.props.percent);
if (this.props !== prevProps) {
this.setState({ data: data })
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() {
if(this.state.data && this.state.data.length > 0) {
var newData = this.state.data;
newData = newData.map(function(element) {
return this.renameKeys(element, this.props.customKeys);
var newData = this.state.data;
const dataKey = this.props.dataKey;
const label = this.props.label;
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) {
newData = newData.map(function (element) {
return this.renameKeys(element, customKeys);
}, this);
var dataKey = this.props.dataKey;
}
if (newData !== null && newData !== undefined && newData.length > 0)
return (
<ResponsiveContainer minHeight={360} minWidth={100} id={this.props.id}>
<BarChart width={600} height={300} data={newData}
minHeight={360} minWidth={100}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey={dataKey}/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip content={renderTooltipContent}/>
<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 />
{
Object.values(this.props.customKeys).map(function(bar, index) {
if(bar !== dataKey)
return <Bar key={Math.random()} isAnimationActive={false} dataKey={bar} fill={COLORS[index]} />
return null;
})
{Object.keys(newData[0]).map(function (bar, index) {
if (bar !== dataKey && bar !== 'Sem informações') {
if (label === undefined) {
return <Bar isAnimationActive={false} key={Math.random()} dataKey={bar} fill={COLORS[index]} />
}
else if (bar !== label) {
return (
<Bar isAnimationActive={false} key={Math.random()} dataKey={bar} fill={COLORS[index]}>
{index === Object.keys(newData[0]).length - 1 ?
<LabelList dataKey={label} position="top" /> : null}
</Bar>
)
}
}
return null;
})
}
</BarChart>
</ResponsiveContainer>
);}
);
else
return (<div> </div>);
}
renameKeys(obj, newKeys) {
const keyValues = Object.keys(obj).map(key => {
const newKey = newKeys[key] || key;
return { [newKey]: obj[key] };
});
return Object.assign({}, ...keyValues);
var recurrentKeys = [];
var returnObj = {};
var newKey;
for (let key in obj) {
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;
}
filterArrayByPercent(data, percent) {
......
......@@ -84,6 +84,7 @@ const renderTooltipContent = (o) => {
this.setState({visited: false})
}
}
prevProps = null;
}
render() {
if(this.state.data !== null && this.state.data.length > 0 && this.state.visited) {
......
......@@ -58,26 +58,29 @@ const renderTooltipContent = (o) => {
* __dataKey2__: Key to parse data in relation to the second inforamtion to be ploted. <br />
*/
class BuildBiaxialBars extends Component {
constructor(props) {
constructor(props) {
super(props);
this.state = {
data: null
};
}
static getDerivedStateFromProps(nextProps,prevState) {
if(nextProps.data !== prevState.data) {
return {data: nextProps.data};
static getDerivedStateFromProps(nextProps,prevState) {
if (nextProps.data !== prevState.data) {
prevState = null;
return { data: nextProps.data };
}
else {
prevState = null;
return null;
}
else
return null
}
render() {
if(this.state.data && this.state.data.length > 0) {
return (
<div id={this.props.nameKey}>
<ResponsiveContainer minHeight={450}>
<ResponsiveContainer height={450}>
<BarChart width={800} height={600} data={this.state.data} >
<XAxis dataKey={this.props.year}/>
<YAxis yAxisId="left" orientation="left" stroke="#363b1b"/>
......
......@@ -79,6 +79,7 @@ const renderTooltipContent = (o) => {
this.setState({visited: false})
}
}
prevProps = null;
}
render() {
if(this.state.data && this.state.data.length > 0 && this.state.visited) {
......
......@@ -77,6 +77,7 @@ const renderTooltipContent = (o) => {
this.setState({visited: false})
}
}
prevProps = null;
}
render() {
......
......@@ -99,6 +99,7 @@ class BuildMixedBar extends Component {
data = this.filterArrayByPercent(data, this.props.percent);
this.setState({ data: data })
}
prevProps = null;
}
render() {
......
......@@ -53,6 +53,7 @@ class BuildPie extends Component {
}
this.setState({sum:sum});
}
prevProps = null;
}
......
......@@ -90,30 +90,32 @@ class BuildStackedBar extends Component {
data = this.filterArrayByPercent(data, this.props.percent);
this.setState({data: data})
}
prevProps = null;
}
render () {
var newData = this.state.data;
const dataKey = this.props.dataKey;
const label = this.props.label;
const customKeys = this.props.customKeys;
// Change chart height if it was specified
var cardHeight = 300;
var interval = 0;
if (this.props.height !== undefined) cardHeight = this.props.height;
if (this.props.interval !== undefined) interval = this.props.interval;
var cardHeight = this.props.height;
var interval = this.props.interval;
if (!cardHeight) cardHeight = 300;
if (!interval) interval = 0;
if(this.state.data && this.state.data.length > 0 && this.props.customKeys !== undefined) {
if(newData && newData.length > 0 && customKeys !== undefined) {
newData = newData.map(function(element) {
return this.renameKeys(element, this.props.customKeys);
return this.renameKeys(element, customKeys);
}, this);
}
var dataKey = this.props.dataKey
var label = this.props.label
if(this.state.data !== null && this.state.data !== undefined && this.state.data.length > 0)
if(newData !== null && newData !== undefined && newData.length > 0)
return (
<ResponsiveContainer minHeight={cardHeight}>
<ResponsiveContainer height={cardHeight}>
<BarChart width={600} height={cardHeight} data={newData}
margin={{top: 20, right: 0, left: 0, bottom: 5}}>
<XAxis dataKey={this.props.dataKey} interval={interval}/>
<XAxis dataKey={dataKey} interval={interval}/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip content={renderTooltipContent}/>
......@@ -135,8 +137,8 @@ class BuildStackedBar extends Component {
return null;
})
}
</BarChart>
</ResponsiveContainer>
</BarChart>
</ResponsiveContainer>
);
else
return (<div> </div>);
......@@ -150,13 +152,21 @@ class BuildStackedBar extends Component {
return arrayFiltered;
}
renameKeys(obj, newKeys) {
const keyValues = Object.keys(obj).map(key => {
const newKey = newKeys[key] || key;
return { [newKey]: obj[key] };
});
return Object.assign({}, ...keyValues);
}
renameKeys(obj, newKeys) {
var recurrentKeys = [];
var returnObj = {};
var newKey;
for (let key in obj) {
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;
}
}
......
......@@ -35,10 +35,8 @@ function AppFooter() {
const { state } = React.useContext(Store);
var dynamicClassName = 'smppir-blue';
var dynamicBackgroundColor = 'white';
if (state.contrast === 'Contrast'){
dynamicClassName = 'smppir-white';
dynamicBackgroundColor = 'black'
}
return (
......@@ -51,8 +49,8 @@ function AppFooter() {
</div>
}
>
<h4 className={dynamicClassName}>PARCEIROS</h4>
<Partner />
<Partner />
</Footer>
</div>
......
......@@ -52,6 +52,7 @@ class Autocomplete extends Component {
this.setState({suggestions: this.props.data});
}
}
prevProps = null;
}
render() {
......@@ -79,6 +80,7 @@ class Autocomplete extends Component {
document.getElementById(this.props.dropdown).style.display = 'none';
}
this.setState({ tags })
this.props.tagID(-1)
}
handleAddition (tag) {
......
......@@ -54,7 +54,6 @@ class AutocompleteApp extends Component {
ibge:[],
content:[]
};
this.getDataFromServer(this.props.whichAutocomplete)
this.getDataFromServer = this.getDataFromServer.bind(this);
this.organizeData = this.organizeData.bind(this);
this.queryDb = this.queryDb.bind(this);
......@@ -63,8 +62,17 @@ class AutocompleteApp extends Component {
this.createMessage = this.createMessage.bind(this);
this.getQueryInfo = this.getQueryInfo.bind(this);
this.buildCadUnicoData = this.buildCadUnicoData.bind(this);
this._mounted = false;
}
componentDidMount() {
this._mounted = true;
this.getDataFromServer(this.props.whichAutocomplete);
}
componentWillUnmount() {
this._mounted = false;
}
render() {
return (
......@@ -200,28 +208,39 @@ class AutocompleteApp extends Component {
route = 'institutionstudent_loans';
}
// Execute query and store it
axios.get(`${serverURL}${route}`)
.then(res => {
if (this.props.mainPage === 'quilombolas') {
newData = [];
// If it is a cad_unico page
if (cad_unico_pages.indexOf(this.props.mainPage) > -1){
newData = res.data.result
this.setState({ data : newData });
// getting the cities names
axios.get(`${serverURL}ibge_code?dims=city_name,state,city_code`)
.then(res1 => {
let ibge = res1.data.result
this.setState({ ibge: ibge });
this.buildCadUnicoData()
})
}
else{
newData = this.organizeData(res.data)
this.setState({ data : newData});
}
});
for (var i = 0; i < this.props.data.length; i++) {
newData.push({ id: this.props.data[i][0], name: this.props.data[i][1]});
}
if (this._mounted) this.setState({ data: newData });
} else {
// Execute query and store it
axios.get(`${serverURL}${route}`)
.then(res => {
// If it is a cad_unico page
if (cad_unico_pages.indexOf(this.props.mainPage) > -1){
newData = res.data.result
if (this._mounted) this.setState({ data : newData });
// getting the cities names
axios.get(`${serverURL}ibge_code?dims=city_name,state,city_code`)
.then(res1 => {
let ibge = res1.data.result
if (this._mounted) this.setState({ ibge: ibge });
this.buildCadUnicoData()
})
}
else{
newData = this.organizeData(res.data)
if (this._mounted) this.setState({ data : newData});
}
});
}
}
buildCadUnicoData(){
let ibge_code = this.state.ibge
......@@ -239,7 +258,7 @@ class AutocompleteApp extends Component {
if(aux.length > 0)
final_data.push({id: i,data:aux});
}
this.setState({data:autocomplete,content:final_data})
if (this._mounted) this.setState({data:autocomplete,content:final_data})
}
downloadDataFromServer(route) {
......@@ -307,7 +326,7 @@ class AutocompleteApp extends Component {
}else if(this.props.mainPage === 'vacancy' && this.props.whichAutocomplete === 'institution'){
finalArray = this.sumData(finalArray, keyVac).concat(finalArray);
}
this.setState({ chartData : finalArray });
if (this._mounted) this.setState({ chartData : finalArray });
document.getElementById(this.props.whichAutocomplete + 'Preloader').style.display = 'none'
if (document.getElementById(this.props.dropdown)) {
document.getElementById(this.props.dropdown).style.display = 'block';
......@@ -316,7 +335,7 @@ class AutocompleteApp extends Component {
if (chart !== null ) {
chart.style.display = 'block'
}
this.props.saveData({option:this.props.whichAutocomplete, data: finalArray})
if (this._mounted) this.props.saveData({option:this.props.whichAutocomplete, data: finalArray})
if(data.length <= 0){
document.getElementById(this.props.whichAutocomplete + 'Preloader').style.display = 'none'
document.getElementById(this.props.whichAutocomplete + 'Message').style.display = 'block'
......@@ -415,33 +434,40 @@ class AutocompleteApp extends Component {
return results
}
queryDb() {
if (this.state.tagName.length > 0) {
var chart = document.getElementById(this.props.chartDiv);
var message = document.getElementById(this.props.whichAutocomplete + 'Text');
if( this.props.useMap ){
var state = document.getElementById("estado"+this.props.mainPage).value
var region = document.getElementById("regiao"+this.props.mainPage).value
}
if (this.props.mainPage !== 'cad_unico' && this.props.mainPage !== 'african_culture' && this.props.mainPage !== 'ciganos_culture'){
var campiFilter = this.createMessage(chart, message, state, region)
var queryInfo = this.getQueryInfo()
var loadRoute = this.props.mainPage + `?dims=${queryInfo["name"]}${queryInfo["extraname"]}${campiFilter}&filter=${queryInfo["name"]}:"${queryInfo["value"]}"`
var parameters;
if ((( state === 'TD' ) && ( region === 'Todas as regiões' )) || ( !this.props.useMap )) {
parameters = ''
}
else {
parameters = state !== 'TD' ? `,uf:${state}` : `,region:${region}`
if (this.state.tagName) {
if (this.props.mainPage === "quilombolas") {
return;
} else {
var chart = document.getElementById(this.props.chartDiv);
var message = document.getElementById(this.props.whichAutocomplete + 'Text');
if( this.props.useMap ){
var state = document.getElementById("estado"+this.props.mainPage).value
var region = document.getElementById("regiao"+this.props.mainPage).value
}
this.downloadDataFromServer(loadRoute + parameters);
}
else{
let finalArray = searchHash(this.state.tagId-1, this.state.content,'id')
if(finalArray.length > 0){
this.props.saveData({data: finalArray[0].data})
if (this.props.mainPage !== 'cad_unico' && this.props.mainPage !== 'african_culture' && this.props.mainPage !== 'ciganos_culture'){
var campiFilter = this.createMessage(chart, message, state, region)
var queryInfo = this.getQueryInfo()
var loadRoute = this.props.mainPage + `?dims=${queryInfo["name"]}${queryInfo["extraname"]}${campiFilter}&filter=${queryInfo["name"]}:"${queryInfo["value"]}"`
var parameters;
if ((( state === 'TD' ) && ( region === 'Todas as regiões' )) || ( !this.props.useMap )) {
parameters = ''
}
else {
parameters = state !== 'TD' ? `,uf:${state}` : `,region:${region}`
}
this.downloadDataFromServer(loadRoute + parameters);
}
else{
this.props.saveData({data: finalArray, tagName:this.state.tagName})
let finalArray = searchHash(this.state.tagId-1, this.state.content,'id')
if(finalArray.length > 0){
this.props.saveData({data: finalArray[0].data})
}
else{
this.props.saveData({data: finalArray, tagName:this.state.tagName})
}
}
}
}
......@@ -500,7 +526,7 @@ class AutocompleteApp extends Component {
}
getTagId(tag){
this.setState({tagId:tag.id, tagName:tag.name})
if (this._mounted) this.setState({tagId:tag.id, tagName:tag.name})
if(this.props.getTags){
this.props.getTags(tag.id,tag.name)
}
......
......@@ -22,6 +22,7 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
import React, { Component } from 'react';
import { Icon, Row, Col } from 'react-materialize'
import { Store } from '../Store';
import '../Styles/CardFooter.css'
......@@ -33,6 +34,7 @@ import '../Styles/CardFooter.css'
*/
class CardFooter extends Component {
render() {
var contrastString = this.context.state.contrast;
return (
<div className="footer">
<Row className="z-depth-1">
......@@ -41,11 +43,11 @@ class CardFooter extends Component {
</Col>
{this.props.data ?
<Col s={3} className="center dataSource">
<a href={this.props.data}>
<Icon>assessment</Icon>
<p>Acesso aos Dados</p>
</a>
<Col s={3} className={`${contrastString}dataSource center`}>
<a href={this.props.data}>
<Icon>assessment</Icon>
<p>Acesso aos Dados</p>
</a>
</Col>
: null
}
......@@ -54,5 +56,6 @@ class CardFooter extends Component {
);
}
}
CardFooter.contextType = Store;
export default CardFooter;
......@@ -59,14 +59,14 @@ export default class CollapsibleContainer extends React.Component {
}
handleSelect (key) {
const { onSelect } = this.props;
// const { onSelect } = this.props;
if (onSelect) { onSelect(key); }
// if (onSelect) { onSelect(key); }
if (this.state.activeKey === key) { key = null; }
// if (this.state.activeKey === key) { key = null; }
if (this.props.accordion) {
this.setState({ activeKey: key });
}
// if (this.props.accordion) {