Merge branch 'development' into 'master'

Development

See merge request !41

.gitignore

@@ -16,6 +16,7 @@ package-lock.json
 .env.development.local
 .env.test.local
 .env.production.local
+.vscode
 
 npm-debug.log*
 yarn-debug.log*

.vscode/settings.json

-{
-    "python.pythonPath": "/usr/bin/python3"
-}
\ No newline at end of file

package.json

@@ -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"
+    ]
   }
 }

public/index.html

@@ -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>

src/About.js

@@ -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>

src/AfricanOrigin.js

@@ -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>

src/App.js

@@ -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"/>

src/Charts/BuildBar.js

@@ -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",