Commit 11417ca2 authored by Henrique Varella Ehrenfried's avatar Henrique Varella Ehrenfried

Merge branch 'development' into 'master'

Development

See merge request !41
parents f845919c e1836456

Too many changes to show.

To preserve performance only 1000 of 1000+ files are displayed.

......@@ -16,6 +16,7 @@ package-lock.json
.env.development.local
.env.test.local
.env.production.local
.vscode
npm-debug.log*
yarn-debug.log*
......
{
"python.pythonPath": "/usr/bin/python3"
}
\ No newline at end of file
......@@ -3,16 +3,19 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"axios": "^0.19.0",
"create-react-app": "^1.3.3",
"documentation": "^9.3.1",
"react": "16.8.4",
"leaflet": "^1.5.1",
"react": "^16.9.0",
"react-cookie": "^2.0.8",
"react-dom": "16.8.4",
"react-dom": "^16.9.0",
"react-leaflet": "^2.4.0",
"react-materialize": "2.3.3",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-scripts": "^1.1.5",
"react-scripts": "^3.1.1",
"react-table": "^6.10.0",
"react-tag-autocomplete": "^5.9.0",
"recharts": "^1.5.0",
"styled-components": "^2.1.1",
......@@ -30,8 +33,18 @@
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"react-styleguidist": "^6.5.3",
"webpack": "^3.12.0"
"react-styleguidist": "^9.1.16"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
......@@ -9,6 +9,8 @@
<link href="./MaterialIcons.css" rel="stylesheet">
<!-- Import materialize.css -->
<link href="./materialize.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<!--
manifest.json provides metadata used when your web app is added to the
......@@ -48,5 +50,6 @@
<!-- And then your bundled js -->
<!--<script src="path/to/your/bundle.js"></script>-->
<script defer="defer" src="//barra.brasil.gov.br/barra_2.0.js" type="text/javascript"></script>
<script src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
</body>
</html>
......@@ -24,6 +24,8 @@ import React from 'react';
import NavigationBar from './Components/NavigationBar'
import { Tabs, Tab, Card, Row, Col} from 'react-materialize'
import { Store } from './Store'
import DocApi from './SubPages/DocApi'
import './Styles/About.css'
/**
......@@ -49,6 +51,16 @@ function Sobre() {
</Card>
</Col>
</Row>
<Row>
<Col s={8} offset={'s2'}>
<Card className='smaller' id={`${contrastString}cardAbout`} title="Acesso aos dados">
<span>
Este portal utiliza uma API para carregar os dados da maior parte dos gráficos. A aba API mostra quais são as rotas
e como acessar cada uma delas, com seus parâmetros e possíveis filtros.
</span>
</Card>
</Col>
</Row>
</React.Fragment>
)
}
......@@ -112,7 +124,7 @@ function Acessibilidade() {
function About() {
const { state, dispatch } = React.useContext(Store);
var states = { "SOBRE": false, "ACESSIBILIDADE": false }
var states = { "SOBRE": false, "ACESSIBILIDADE": false, "API": false }
if (state.page.toUpperCase() in states) {
states[state.page.toUpperCase()] = true
}
......@@ -145,6 +157,9 @@ function About() {
<Tab title="Acessibilidade" active={states["ACESSIBILIDADE"]}>
{ states["ACESSIBILIDADE"] ? <Acessibilidade /> : <div/> }
</Tab>
<Tab title="API" active={states["API"]}>
{ states["API"] ? <DocApi/> : <div/> }
</Tab>
</Tabs>
</div>
</div>
......
......@@ -22,9 +22,7 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
import React from 'react';
import NavigationBar from './Components/NavigationBar';
import AfricanCulture from './SubPages/AfricanCulture';
import AfricanSustainability from './SubPages/AfricanSustainability';
import AfricanRights from './SubPages/AfricanRights';
import AfricanIndicator from './SubPages/AfricanIndicator';
import { Tab, Tabs } from 'react-materialize';
import { Store } from './Store';
......@@ -38,12 +36,12 @@ function AfricanOrigin() {
// Get information about which page was accessed
const { state, dispatch } = React.useContext(Store);
var states = {"DIREITOS": false, "CULTURA": false, "SUSTENTABILIDADE":false}
var states = {"MATRIZ AFRICANA": false}
if (state.page.toUpperCase() in states) {
states[state.page.toUpperCase()] = true
}
else {
states["DIREITOS"] = true
states["MATRIZ AFRICANA"] = true
}
// Hook to set page context
......@@ -67,10 +65,12 @@ function AfricanOrigin() {
<NavigationBar/>
<div id='contentTabsDiv'>
<div id="conteudo" />
<Tabs className={`tab-demo z-depth-1 ${contrastString}mainPageDarkBlueTab`} onChange={whereIAm}>
<Tab title="Direitos" active={states["DIREITOS"]}> {states["DIREITOS"] ? <AfricanRights /> : <div />} </Tab>
<Tab title="Cultura" active={states["CULTURA"]}> {states["CULTURA"] ? <AfricanCulture /> : <div />} </Tab>
<Tab title="Sustentabilidade" active={states["SUSTENTABILIDADE"]}> {states["SUSTENTABILIDADE"] ? <AfricanSustainability /> : <div />} </Tab>
<Tabs
className={`tab-demo z-depth-1 ${contrastString}mainPageDarkBlueTab`} onChange={whereIAm}
>
<Tab title="Matriz Africana" active={states["MATRIZ AFRICANA"]}>
{states["MATRIZ AFRICANA"] ? <AfricanIndicator /> : <div />}
</Tab>
</Tabs>
</div>
</div>
......
......@@ -29,11 +29,12 @@ 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'
import BarraBrasil from './Components/BarraBrasil'
import Ciganos from './Ciganos';
import ParticipantesSinapir from './ParticipantesSinapir'
/**
* Initializer for the application, calls all the other componets and sets the routes for other pages. <br />
......@@ -42,28 +43,29 @@ function App() {
// Hook to set contrast and page context
const { state, dispatch } = React.useContext(Store);
const setContrastAction = (newContrast) => {
return dispatch({
type: 'SET_CONTRAST',
payload: newContrast
})
}
const setPageAction = (newPage) => {
return dispatch({
type: 'SET_PAGE',
payload: newPage
})
}
const setFontSizeAction = (newFontSize) => {
return dispatch({
type: 'SET_FONT_SIZE',
payload: newFontSize
})
}
// Get session information when the component did mount
React.useEffect(() => {
const setContrastAction = (newContrast) => {
return dispatch({
type: 'SET_CONTRAST',
payload: newContrast
})
}
const setPageAction = (newPage) => {
return dispatch({
type: 'SET_PAGE',
payload: newPage
})
}
const setFontSizeAction = (newFontSize) => {
return dispatch({
type: 'SET_FONT_SIZE',
payload: newFontSize
})
}
const contrast = sessionStorage.getItem('contrast');
if (contrast) setContrastAction(contrast);
const page = sessionStorage.getItem('page');
......@@ -73,7 +75,7 @@ function App() {
setFontSizeAction(fontSize);
document.getElementsByTagName("body")[0].style.fontSize = fontSize + "px";
}
}, []);
}, [dispatch]);
var contrastString = state.contrast
......@@ -87,12 +89,13 @@ 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} />
<Route exact={true} path="/mapas" component={Maps} />
<Route exact={true} path="/matrizAfricana" component={AfricanOrigin} />
<Route exact={true} path="/ciganos" component={Ciganos} />
<Route exact={true} path="/participantesSinapir" component={ParticipantesSinapir} />
</div>
</Router>
<div id="rodape"/>
......
......@@ -22,101 +22,144 @@ 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';
import './Styles/BuildStackedBar.css';
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 COLORS = ["#0E3959", "#0B7B6B", "#EA7C27", "#B66526", "#CA3828", "#363B1B",
"#78752E", "#081A24", "#211517", "#763618", "#722417",