adjust disciplines indicator + bug fixes

src/components/Charts/BarChartComponent.js

@@ -233,10 +233,30 @@ function BarChartComponent(props) {
             handleOpenSnackbar();
         }
 
+        if (location.pathname === routes.adequacao_disciplina) {
+            let adequacyPercentages = []
+            adequacyPercentages.push({ name: newSeries[0].name, data: [] })
+            adequacyPercentages.push({ name: newSeries[1].name, data: [] })
+
+            let size = newSeries[0].data.length
+            let total
+            for (let i = 0; i < size; i++) {
+                total = newSeries[0].data[i] + newSeries[1].data[i]
+                adequacyPercentages[0].data[i] = ((newSeries[0].data[i] / total) * 100).toFixed(1)
+                adequacyPercentages[1].data[i] = ((newSeries[1].data[i] / total) * 100).toFixed(1)
+            }
+
+            newOptions.yaxis.max = 100;
+            newOptions.yaxis.labels.formatter = value => value + '%';
+
+            setChartSeries(adequacyPercentages);
+        } else {
             newOptions.yaxis.labels.formatter = value => value.toLocaleString('pt-BR');
+            setChartSeries(newSeries);
+        }
+
         newOptions = defineContrast(newOptions);
         setChartOptions(newOptions);
-        setChartSeries(newSeries);
     }
 
     function preFormatData() {
@@ -245,6 +265,7 @@ function BarChartComponent(props) {
         let size = (data.length) / 2;
         let suitable;
         let notSuitable;
+
         for (let i = 0; i < size; i++) {
             suitable = data[i];
             notSuitable = data[i + size];
@@ -345,12 +366,16 @@ function BarChartComponent(props) {
                         <h4 className='bar-chart-subtitle'>{selectedFilters}</h4> :
                         null
                     }
+                    {
+                        props.data.length === 0 ?
+                        <h3>Sem dados</h3> :
                         <Chart
                             options={chartOptions}
                             series={chartSeries}
                             type="bar"
                             height={setGraphHeight()}
                         />
+                    }
                     <Snackbar
                         open={openSnackbar} 
                         autoHideDuration={6000}

src/components/Charts/PieChartComponent.js

@@ -20,28 +20,40 @@ along with mapfor.  If not, see <https://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from 'react';
 import FadeLoader from 'react-spinners/FadeLoader';
+import { useLocation } from 'react-router-dom';
 import ReactApexChart from 'react-apexcharts';
 import { Grid } from '@material-ui/core';
 
 import '../../css/Charts/PieChartComponent.scss';
+import { routes } from '../../data/routes';
 
 function PieChartComponent(props) {
     const { title, notes, data, dim, location, year, contrastSet,
             filtersLocation, filtersEducation } = props;
 
-    const [labels, setLabels] = useState([]);
+    const [labels, setLabels] = useState(['']);
     const [series, setSeries] = useState([]);
     const [selectedFilters, setSelectedFilters] = useState([]);
 
+    const pathLocation = useLocation();
+
     useEffect(() => {
         if (props.loading === false) {
             let newLabels = [];
             let newSeries = [];
+
             data.forEach((item) => {
                 newLabels.push(item[dim + "_name"]);
                 newSeries.push(item["total"]);
             });
 
+            if (pathLocation.pathname === routes.adequacao_disciplina) {
+                let suitable = newSeries[1]
+                let notSuitable = newSeries[0]
+                newSeries[0] = parseFloat(((notSuitable / (suitable + notSuitable)) * 100).toFixed(1))
+                newSeries[1] = parseFloat(((suitable / (suitable + notSuitable)) * 100).toFixed(1))
+            }
+
             setLabels(newLabels);
             setSeries(newSeries);
         }
@@ -77,7 +89,51 @@ function PieChartComponent(props) {
         setSelectedFilters(formattedFilters)
     }, [filtersEducation])
 
-    const chartOptions = {
+    useEffect(() => {
+        let newOptions = JSON.parse(JSON.stringify(chartOptions))
+
+        newOptions.labels = labels
+        newOptions.plotOptions.pie.donut.labels.total.formatter = (w) => {
+            return w.globals.seriesTotals.reduce((a, b) => a + b, 0).toLocaleString('pt-BR');
+        }
+        newOptions.tooltip.y.formatter = (value, opts) => {
+            const total = opts.globals.seriesTotals.reduce((a, b) => a + b, 0)
+            const percent = ((value / total) * 100).toFixed(1)
+            return value.toLocaleString('pt-BR') + ` (${percent}%)`
+        }
+
+        if (pathLocation.pathname === routes.adequacao_disciplina) {
+            newOptions.tooltip.y.formatter = value => value + '%'
+            newOptions.plotOptions.pie.donut.labels.total.show = false
+            newOptions.plotOptions.pie.donut.size = 0
+        }
+
+        setChartOptions(newOptions)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [labels])
+
+    useEffect(() => {
+        let newOptions = JSON.parse(JSON.stringify(chartOptions))
+
+        if (contrastSet) {
+            newOptions.chart.background = '#000'
+            newOptions.theme.mode = 'dark'
+            newOptions.legend.labels.colors = '#fff'
+            newOptions.plotOptions.pie.donut.labels.total.color = '#fff'
+            newOptions.plotOptions.pie.donut.labels.value.color = '#fff'
+        } else {
+            newOptions.chart.background = '#fff'
+            newOptions.theme.mode = 'light'
+            newOptions.legend.labels.colors = '#3c3c3b'
+            newOptions.plotOptions.pie.donut.labels.total.color = '#3c3c3b'
+            newOptions.plotOptions.pie.donut.labels.value.color = '#3c3c3b'
+        }
+
+        setChartOptions(newOptions)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [contrastSet])
+
+    const [chartOptions, setChartOptions] = useState({
         chart: {
             background: contrastSet ? '#000' : '#fff',
             toolbar: {
@@ -195,7 +251,7 @@ function PieChartComponent(props) {
             },
         },
         colors: ['#D963A1', '#E94548', '#F18325', '#FECB3B', '#8DBF42'],
-    };
+    });
 
     return (
         <Grid className={`pie-chart-content-container ${contrastSet ? "high-contrast-pie-chart" : ""}`}>
@@ -218,6 +274,9 @@ function PieChartComponent(props) {
                             null
                         }
                         <Grid className="pie-chart-container">
+                            {
+                                data.length === 0 ?
+                                <h3>Sem dados</h3> :
                                 <ReactApexChart
                                     options={chartOptions}
                                     series={series}
@@ -225,6 +284,7 @@ function PieChartComponent(props) {
                                     width={300}
                                     height={500}
                                 />
+                            }
                         </Grid>
                     </Grid>
                     <p>{notes}</p>

src/components/Dropdown/DropdownComponent.js

@@ -70,7 +70,7 @@ class dropdownComponent extends Component {
     }
 
     render() {
-        const { loading, contrastSet, filters, type } = this.props;
+        const { loading, contrastSet, filters, type, path } = this.props;
 
         if (!loading) {
             return (
@@ -82,6 +82,7 @@ class dropdownComponent extends Component {
                                 filters={filters}
                                 filtersInfo={getFilterInfo(type).filters}
                                 contrastSet={contrastSet}
+                                path={path}
                             />
                         </FormControl>
                     </form>

src/components/Dropdown/ExpansionFiltersComponent.js

@@ -93,13 +93,21 @@ class expansionFiltersComponent extends Component {
     }
 
     render() {
-        const { contrastSet } = this.props;
+        const { contrastSet, path } = this.props;
 
         const newFilters = Object.entries(this.props.filters).map(([key, value]) => {
             if (key === 'education_level_mod') {
+                if (path[4] === 'adequacao_disciplina') {
+                    // exclude 'Turmas multisseriadas e multietapas' and 'Educação profissional' option
+                    const filteredDisciplinesValues = value.data.filter(item => item.id !== 6 && item.id !== 12)
+                    return [key, { ...value, data: filteredDisciplinesValues }]
+                } else if (path[4] === 'formacao_em_pos_graduacao') {
                     // exclude 'Nao classificada' option
-                const filteredValues = value.data.filter(item => item.id !== 99)
-                return [key, { ...value, data: filteredValues }]
+                    const filteredPosTrainingValues = value.data.filter(item => item.id !== 99)
+                    return [key, { ...value, data: filteredPosTrainingValues }]
+                } else {
+                    return [key, value]
+                }
             } else {
                 return [key, value]
             }

src/components/Dropdown/FiltersGroupComponent.js

@@ -24,7 +24,7 @@ import DropdownComponent from './DropdownComponent';
 import '../../css/Dropdown/FiltersGroupComponent.scss';
 
 function FiltersGroupComponent(props) {
-    const { indicator, filtersLoading, hashFilters, updateFilters, contrastSet } = props;
+    const { indicator, filtersLoading, hashFilters, updateFilters, contrastSet, path } = props;
 
     return (
         <div className={`filters-container ${contrastSet ? "high-contrast-filters" : ""}`}>
@@ -35,6 +35,7 @@ function FiltersGroupComponent(props) {
                 loading={filtersLoading}
                 updateFilters={updateFilters}
                 contrastSet={contrastSet}
+                path={path}
             />
         </div>
     );

src/components/Map/MapComponent.js

@@ -323,7 +323,13 @@ function MapComponent(props) {
         const titleLocation = location
 
         if (path[3] === 'formacao_docente') {
+            if (path[4] === 'adequacao_disciplina') {
+                const total = mapTitleData.reduce((total, item) => total + item.total, 0)
+                const suitable = mapTitleData.find(item => item.suitable === 1)
+                titleValue = suitable ? ((suitable.total / total) * 100).toFixed(1) : 0
+            } else {
                 titleValue = mapTitleData.reduce((total, item) => total + item.total, 0).toLocaleString('pt-BR')
+            }
         } else {
             const maxYearDataObj = mapTitleData.filter(item => item.year === indicador.fixedFilters.max_year.value)
             titleValue = maxYearDataObj.length !== 0 ? maxYearDataObj[0].total.toLocaleString('pt-BR') : '0'
@@ -336,7 +342,7 @@ function MapComponent(props) {
             case 'formacao_em_pos_graduacao':
                 return titleLocation + ' tem ' + titleValue + ' docentes'
             case 'adequacao_disciplina':
-                return titleLocation + ' tem ' + titleValue + ' disciplinas'
+                return titleLocation + ' tem ' + titleValue + '% de docências de professores com formação adequada'
             // oferta_formacao_docente
             case 'cursos_licenciatura':
                 return titleLocation + ' tem oferta de ' + titleValue + ' cursos de licenciatura'

src/components/Pages/PageComponent.js

@@ -310,6 +310,7 @@ function PageComponent(props) {
                             filtersLoading={filtersLoading}
                             updateFilters={updateFilters}
                             contrastSet={contrastSet}
+                            path={path}
                         />
                     </Grid>
                     <Grid className="data-container">

src/components/SideTableComponent.js

@@ -109,6 +109,9 @@ function SideTableComponent(props) {
                             <h4>{selectedFilters}</h4> :
                             null
                         }
+                        {
+                            chartData.length === 0 ?
+                            <h3 className="no-data">Sem dados</h3> :
                             <div className="table-container">
                                 <div className="table-overflow-container">
                                     <table cellSpacing="0" cellPadding="0">
@@ -135,6 +138,7 @@ function SideTableComponent(props) {
                                     </table>
                                 </div>
                             </div>
+                        }
                         <p>{chartInfo.notes}</p>
                     </div>
                 </div>

src/css/Charts/BarChartComponent.scss

@@ -36,6 +36,10 @@
     }
 }
 
+.high-contrast-bar-chart h3 {
+    color: #fff;
+}
+
 @media (max-width: 1400px) {
     .chart-item-container .apexcharts-canvas .apexcharts-legend {
         grid-template-columns: repeat(2, 1fr);

src/css/Charts/PieChartComponent.scss

@@ -39,6 +39,10 @@
                 color: #3c3c3b;
             }
 
+            .pie-chart-container h3{
+                margin-top: 25px;
+            }
+
             // the apexcharts css below is hardcoded for the
             // pie chart responsivity to work properly
             .pie-chart-container .apexcharts-canvas {

src/css/ExpandableGroupComponent.scss

@@ -15,9 +15,12 @@
 
         .box-title {
             font-weight: 600;
+            line-height: 30px;
             color: #3c3c3b;
             margin: 0;
             margin-top: 10px;
+            padding-left: 200px;
+            padding-right: 200px;
         }
 
         .chart-item-container {
@@ -41,3 +44,10 @@
         color: #fff;
     }
 }
+
+@media (max-width: 1700px) {
+    .expandable-container .charts-box .box-title {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
\ No newline at end of file

src/css/Map/MapComponent.scss

@@ -2,6 +2,7 @@
     z-index: 0;
     height: 650px;
     width: 100%;
+    max-width: 930px;
     border-radius: 10px;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
 
@@ -80,7 +81,10 @@
 }
 
 @media (max-width: 1500px) {
-    .map .note-container {
+    .map {
+        max-width: 100%;
+
+        .note-container {
             height: 30px;
             width: 630px;
             margin-top: -42px;
@@ -92,6 +96,7 @@
             }
         }
     }
+}
 
 @media (max-width: 1400px) {
     .map .note-container {

src/css/SideTableComponent.scss

@@ -7,7 +7,9 @@
     width: 340px;
 
     .table-content-container {
+        height: 90%;
         padding: 20px;
+        position: relative;
 
         h3 {
             margin: 0;
@@ -26,6 +28,10 @@
             color: #3c3c3b;
         }
 
+        .no-data {
+            margin-top: 25px;
+        }
+
         .table-container {
             max-height: 440px;
             border-radius: 10px;
@@ -76,9 +82,14 @@
             }
         }
 
+
         p {
+            position: absolute;
+            bottom: 0;
             margin: 30px 0 0 0;
+            padding-right: 20px;
             font-size: 11px;
+            line-height: 14px;
             color: #5a5a5a;
         }
     }
@@ -131,6 +142,8 @@
 
         .table-content-container p {
             text-align: center;
+            position: initial;
+            padding-right: 0;
         }
     }
 }
\ No newline at end of file

src/data/groups.js

@@ -36,7 +36,7 @@ const groups = {
             dims: ['discipline', 'year'],
             tables: [
                 {
-                    title: 'PERCENTUAL DE DISCIPLINAS MINISTRADAS POR PROFESSORES COM FORMAÇÃO ADEQUADA',
+                    title: 'PERCENTUAL DE DOCÊNCIAS DE PROFESSORES COM FORMAÇÃO SUPERIOR ADEQUADA À ÁREA DE CONHECIMENTO QUE LECIONAM, POR DISCIPLINA',
                     route: ['disciplines'],
                     dim: 'discipline',
                     type: 'bar',
@@ -47,7 +47,7 @@ const groups = {
                     extraFilters: { state: { value: 41 } },
                 },
                 {
-                    title: 'NÚMERO DE DISCIPLINAS MINISTRADAS SEGUNDO A ADEQUAÇÃO DA FORMAÇÃO DOCENTE',
+                    title: 'PERCENTUAL DE DOCÊNCIAS DE PROFESSORES COM FORMAÇÃO SUPERIOR ADEQUADA À ÁREA DE CONHECIMENTO QUE LECIONAM',
                     route: 'disciplines',
                     dim: 'discipline',
                     type: 'bar',
@@ -59,7 +59,7 @@ const groups = {
             ],
             charts: [
                 {
-                    title: 'NÚMERO DE DISCIPLINAS MINISTRADAS SEGUNDO A ADEQUAÇÃO DA FORMAÇÃO DOCENTE',
+                    title: 'PERCENTUAL DE DOCÊNCIAS DE PROFESSORES COM FORMAÇÃO SUPERIOR ADEQUADA À ÁREA DE CONHECIMENTO QUE LECIONAM',
                     route: 'disciplines',
                     dim: 'discipline',
                     type: 'bar',