diff --git a/src/components/BottomTableComponent.js b/src/components/BottomTableComponent.js index 783c0eedc15622366fdc842d2ebc8cdd1885a074..9b8b840d356cd0f64f8c3416b0775a8ed3d7a1e1 100644 --- a/src/components/BottomTableComponent.js +++ b/src/components/BottomTableComponent.js @@ -331,9 +331,9 @@ function BottomTableComponent(props) { return ( { curso: name, - concluintes: course.finished_total.toLocaleString('pt-BR'), - nao_concluintes: course.not_finished_total.toLocaleString('pt-BR'), - total: total.toLocaleString('pt-BR'), + concluintes: course.finished_total?.toLocaleString('pt-BR'), + nao_concluintes: course.not_finished_total?.toLocaleString('pt-BR'), + total: total?.toLocaleString('pt-BR'), } ) } else if (indicatorName === 'situacao_ingressantes') { @@ -342,11 +342,11 @@ function BottomTableComponent(props) { return ( { curso: name, - cursando: course.cursando.toLocaleString('pt-BR'), - evadido: course.evadido.toLocaleString('pt-BR'), - trancado: course.trancado.toLocaleString('pt-BR'), - concluinte: course.concluinte.toLocaleString('pt-BR'), - taxaEvasao: course.taxa_evasao ? course.taxa_evasao.toLocaleString('pt-BR', localeOptions) : 0, + cursando: course.cursando?.toLocaleString('pt-BR'), + evadido: course.evadido?.toLocaleString('pt-BR'), + trancado: course.trancado?.toLocaleString('pt-BR'), + concluinte: course.concluinte?.toLocaleString('pt-BR'), + taxaEvasao: course.taxa_evasao ? course.taxa_evasao?.toLocaleString('pt-BR', localeOptions) : 0, } ) } else if (indicatorName === 'situacao_matriculas') { @@ -355,10 +355,10 @@ function BottomTableComponent(props) { return ( { curso: name, - cursando: course.cursando.toLocaleString('pt-BR'), - evadido: course.evadido.toLocaleString('pt-BR'), - trancado: course.trancado.toLocaleString('pt-BR'), - concluinte: course.concluinte.toLocaleString('pt-BR'), + cursando: course.cursando?.toLocaleString('pt-BR'), + evadido: course.evadido?.toLocaleString('pt-BR'), + trancado: course.trancado?.toLocaleString('pt-BR'), + concluinte: course.concluinte?.toLocaleString('pt-BR'), } ) } else { @@ -369,11 +369,11 @@ function BottomTableComponent(props) { return ( { curso: name, - inscritos: course.inscritos_total.toLocaleString('pt-BR'), - vagas: course.vagas_totais.toLocaleString('pt-BR'), - ingressantes: course.ingresso_curso.toLocaleString('pt-BR'), - inscritos_por_vagas: aB ? aB.toLocaleString('pt-BR', localeOptions) : 0, - ingresso_por_vagas: cB ? cB.toLocaleString('pt-BR', localeOptions) : 0, + inscritos: course.inscritos_total?.toLocaleString('pt-BR'), + vagas: course.vagas_totais?.toLocaleString('pt-BR'), + ingressantes: course.ingresso_curso?.toLocaleString('pt-BR'), + inscritos_por_vagas: aB ? aB?.toLocaleString('pt-BR', localeOptions) : 0, + ingresso_por_vagas: cB ? cB?.toLocaleString('pt-BR', localeOptions) : 0, } ) } diff --git a/src/components/Charts/BarChartComponent.js b/src/components/Charts/BarChartComponent.js index 3cd292b3d1c8e99be4e0342a093ebd7b99c884c2..1d8e0529d072f1f73b96a6465e99a769ab9068b0 100644 --- a/src/components/Charts/BarChartComponent.js +++ b/src/components/Charts/BarChartComponent.js @@ -35,7 +35,6 @@ function BarChartComponent(props) { // const { title, data, education } = props; const { title, years, chartLocation, dimension_data, dims, loading, filtersLocation, filtersEducation, disciplines, contrastSet, horizontalChart } = props; - // const [yearsString, setYearsString] = useState(""); const [selectedFilters, setSelectedFilters] = useState([]); const [isOpen, setIsOpen] = useState(false); const [noDataComponentToggle, setNoDataComponentToggle] = useState(false); @@ -85,7 +84,7 @@ function BarChartComponent(props) { }, dataLabels: { enabled: true, - formatter: value => value.toLocaleString('pt-BR'), + formatter: value => value?.toLocaleString('pt-BR'), style: { colors: contrastSet ? ['#fff'] : ['#000'], }, @@ -150,7 +149,7 @@ function BarChartComponent(props) { }, xaxis: { labels: { - formatter: value => value.toLocaleString('pt-BR'), + formatter: value => value?.toLocaleString('pt-BR'), minHeight: 80, rotateAlways: true, } @@ -266,7 +265,7 @@ function BarChartComponent(props) { newOptions.xaxis.categories.push(last_year); } - newOptions.yaxis.labels.formatter = value => value.toLocaleString('pt-BR'); + newOptions.yaxis.labels.formatter = value => value?.toLocaleString('pt-BR'); if (location.pathname === routes.adequacao_disciplina) { let adequacyPercentages = [] @@ -310,7 +309,7 @@ function BarChartComponent(props) { newOptions.grid.xaxis.lines.show = true newOptions.xaxis.labels.rotateAlways = true newOptions.xaxis.labels.minHeight = 80 - newOptions.xaxis.labels.formatter = value => value.toLocaleString('pt-BR'); + newOptions.xaxis.labels.formatter = value => value?.toLocaleString('pt-BR'); } setChartSeries(dataArray); @@ -334,7 +333,7 @@ function BarChartComponent(props) { newOptions.grid.xaxis.lines.show = true newOptions.xaxis.labels.rotateAlways = true newOptions.xaxis.labels.minHeight = 80 - newOptions.xaxis.labels.formatter = value => value.toLocaleString('pt-BR'); + newOptions.xaxis.labels.formatter = value => value?.toLocaleString('pt-BR'); } if (location.pathname === routes.situacao_ingressantes) { @@ -396,7 +395,7 @@ function BarChartComponent(props) { newOptions.responsive[0].options.xaxis.labels.formatter = value => value + '%'; newOptions.yaxis.forceNiceScale = false; } else { - newOptions.yaxis.labels.formatter = value => value.toLocaleString('pt-BR'); + newOptions.yaxis.labels.formatter = value => value?.toLocaleString('pt-BR'); newOptions.yaxis.forceNiceScale = true; } @@ -465,7 +464,7 @@ function BarChartComponent(props) { function generateSubtitle() { let data = props.data; let tempString = `${chartLocation} - ` - tempString = tempString.concat(`${data[0].year} a ${data[data.length - 1].year}`) + tempString = tempString.concat(`${data[0]?.year} a ${data[data?.length - 1]?.year}`) return tempString; } diff --git a/src/components/Charts/PieChartComponent.js b/src/components/Charts/PieChartComponent.js index 4bd51b541bef0e5081f6ad5178bf521bba1263a3..338b580c10e83676944c04bf568de1141e63d8a2 100644 --- a/src/components/Charts/PieChartComponent.js +++ b/src/components/Charts/PieChartComponent.js @@ -118,12 +118,12 @@ function PieChartComponent(props) { newOptions.labels = labels newOptions.plotOptions.pie.donut.labels.total.formatter = (w) => { - return w.globals.seriesTotals.reduce((a, b) => a + b, 0).toLocaleString('pt-BR'); + 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}%)` + return value?.toLocaleString('pt-BR') + ` (${percent}%)` } if (pathLocation.pathname === routes.adequacao_disciplina) { @@ -250,7 +250,7 @@ function PieChartComponent(props) { formatter: (w) => { return w.globals.seriesTotals.reduce((a, b) => { return a + b; - }, 0).toLocaleString('pt-BR'); + }, 0)?.toLocaleString('pt-BR'); }, }, value: { @@ -265,7 +265,7 @@ function PieChartComponent(props) { labels: labels, dataLabels: { enabled: true, - formatter: value => value.toLocaleString('pt-BR'), + formatter: value => value?.toLocaleString('pt-BR'), style: { colors: ['#000'], }, @@ -275,7 +275,7 @@ function PieChartComponent(props) { 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}%)` + return value?.toLocaleString('pt-BR') + ` (${percent}%)` }, }, }, diff --git a/src/components/NoDataComponent.js b/src/components/NoDataComponent.js index 96ead1b863d16c5a7c67a5bb7729da1d4da913e4..11899ee0064aa6c12018c6a543783c23635c1799 100644 --- a/src/components/NoDataComponent.js +++ b/src/components/NoDataComponent.js @@ -36,13 +36,13 @@ function NoDataComponent(props) { className={`no-data-modal ${contrastSet ? "high-contrast-no-data-modal" : ""}`} overlayClassName='modal-overlay' isOpen={props.open} - onRequestClose={() => props.closeModal(props.openFunction)} + // onRequestClose={() => props.closeModal(props.openFunction)} > - <div className="modal-header-container"> + {/* <div className="modal-header-container"> <button onClick={() => props.closeModal(props.openFunction)} > <img alt="Fechar" src={iconClose} /> </button> - </div> + </div> */} <img className="attention-icon" alt="Atenção" src={attention} /> <h2> Ops, parece que não possuímos dados desta diff --git a/src/config.js b/src/config.js index 006298e8ed5ece9165073c0c16fa1ac8d3934624..c02403482fe4141851ba491e600bd1a99cc796ea 100644 --- a/src/config.js +++ b/src/config.js @@ -4,9 +4,9 @@ const simcaq_dev = "https://simcaqdev.c3sl.ufpr.br/api/v1/"; const simcaq_hom = "https://simcaqhom.c3sl.ufpr.br/api/v1/"; const simcaq_prod = "https://simcaq.c3sl.ufpr.br/api/v1/"; -const lde_dev = "https://dadoseducacionaisdev.c3sl.ufpr.br/api/v1/"; -const lde_hom = "https://dadoseducacionaishom.c3sl.ufpr.br/api/v1/"; -const lde_prod = "https://dadoseducacionais.c3sl.ufpr.br/api/v1/"; +const lde_dev = "https://simcaqdev.c3sl.ufpr.br/api/v1/"; +const lde_hom = "https://simcaqhom.c3sl.ufpr.br/api/v1/"; +const lde_prod = "https://simcaq.c3sl.ufpr.br/api/v1/"; if (process.env.REACT_APP_STAGE === "homologa") { conf.api = simcaq_hom; diff --git a/src/css/Charts/PieChartComponent.scss b/src/css/Charts/PieChartComponent.scss index f23c0a78bc63bc6e7092c37f67f1b62e84d74137..b751f9ab393e39fee03481696e043ae19e21ea71 100644 --- a/src/css/Charts/PieChartComponent.scss +++ b/src/css/Charts/PieChartComponent.scss @@ -1,184 +1,181 @@ .pie-chart-content-container { - border-radius: 10px; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); + border-radius: 10px; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); + height: 100%; + font-family: "Montserrat"; + background: #fff; + // background-color: blue; + // display: flex; + // justify-content: space-between; + + .spinner-grid-pie { + height: 650px; + width: 340px; + display: flex; + align-items: center; + justify-content: center; + } + + .data-content-container { + padding: 20px; + box-sizing: border-box; height: 100%; - font-family: 'Montserrat'; - background: #fff; - // background-color: blue; - // display: flex; - // justify-content: space-between; - - .spinner-grid-pie { - height: 650px; - width: 340px; - display: flex; - align-items: center; - justify-content: center; - } - - .data-content-container { - padding: 20px; - box-sizing: border-box; - height: 100%; - display: flex; - flex-direction: column; - - .top-pie-container { - font-family: 'Nunito'; - - height: inherit; - display: flex; - flex-direction: column; - justify-content: space-evenly; - - h3 { - margin: 0; - color: #3c3c3b; - text-align: center; - font-weight: 600; - line-height: 30px; + display: flex; + flex-direction: column; + + .top-pie-container { + font-family: "Nunito"; + + height: inherit; + display: flex; + flex-direction: column; + justify-content: space-evenly; + + h3 { + margin: 0; + color: #3c3c3b; + text-align: center; + font-weight: 600; + line-height: 26px; + } + + h4 { + margin: 8px 0 4px 0; + text-align: center; + font-weight: 400; + color: #3c3c3b; + } + + .pie-chart-container { + .no-data-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 50px; + + .attention-icon { + height: 80px; + width: 80px; + } + + h2, + h3 { + text-align: center; + font-size: 16px; + line-height: 24px; + font-family: "Montserrat"; + font-style: normal; + font-weight: 400; + } + + .reload-page { + margin-top: 10px; + padding: 6px 12px 8px 12px; + background-color: #fecb3b; + color: #fff; + font-family: "Nunito"; + font-size: 18px; + font-weight: bold; + border: 0; + border-radius: 10px; + transition: filter 0.2s; + cursor: pointer; + + &:hover { + filter: brightness(0.9); } - h4 { - margin: 8px 0 4px 0; - text-align: center; - font-weight: 400; - color: #3c3c3b; + .reload-icon { + margin-right: 10px; + vertical-align: middle; + padding: 0; } + } + } + } + + p { + font-family: "Montserrat"; + margin: 0; + font-size: 11px; + color: #5a5a5a; + } + + // the apexcharts css below is hardcoded for the + // pie chart responsivity to work properly + .pie-chart-container .apexcharts-canvas { + .apexcharts-legend { + flex-direction: column; + align-items: center; + justify-content: center; + + .apexcharts-legend-series { + width: 100%; + } + } - .pie-chart-container { - .no-data-container { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 50px; - - .attention-icon { - height: 80px; - width: 80px; - } - - h2, h3 { - text-align: center; - font-size: 16px; - line-height: 24px; - font-family: 'Montserrat'; - font-style: normal; - font-weight: 400; - } - - .reload-page { - margin-top: 10px; - padding: 6px 12px 8px 12px; - background-color: #fecb3b; - color: #fff; - font-family: 'Nunito'; - font-size: 18px; - font-weight: bold; - border: 0; - border-radius: 10px; - transition: filter 0.2s; - cursor: pointer; - - &:hover { - filter: brightness(0.9); - } - - .reload-icon { - margin-right: 10px; - vertical-align: middle; - padding: 0; - } - } - } - } + .apexcharts-tooltip { + max-width: 200px; + white-space: unset; - p { - font-family: 'Montserrat'; - margin: 0; - font-size: 11px; - color: #5a5a5a; - } + .apexcharts-active { + padding-bottom: 0; + } - // the apexcharts css below is hardcoded for the - // pie chart responsivity to work properly - .pie-chart-container .apexcharts-canvas { - .apexcharts-legend { - align-items: center; - - .apexcharts-legend-series { - width: 100%; - } - } - - .apexcharts-tooltip { - max-width: 200px; - white-space: unset; - - .apexcharts-active { - padding-bottom: 0; - } - - .apexcharts-tooltip-series-group .apexcharts-tooltip-text { - text-align: center; - } - } - } + .apexcharts-tooltip-series-group .apexcharts-tooltip-text { + text-align: center; + } } + } } + } } .high-contrast-pie-chart { - box-shadow: 0 0 0 2px #fff; - background: #000; + box-shadow: 0 0 0 2px #fff; + background: #000; - .data-content-container .top-pie-container h3, - .data-content-container .top-pie-container h4, - .data-content-container p { - color: #fff; - } + .data-content-container .top-pie-container h3, + .data-content-container .top-pie-container h4, + .data-content-container p { + color: #fff; + } - .data-content-container .pie-chart-container .no-data-container { - color: #fff; - - .attention-icon { - filter: brightness(0) - saturate(100%) - invert(92%) - sepia(36%) - saturate(1268%) - hue-rotate(350deg) - brightness(109%) - contrast(106%); - } + .data-content-container .pie-chart-container .no-data-container { + color: #fff; - .reload-page { - background-color: #ffff00 !important; - color: #000 !important; + .attention-icon { + filter: brightness(0) saturate(100%) invert(92%) sepia(36%) + saturate(1268%) hue-rotate(350deg) brightness(109%) contrast(106%); + } - .reload-icon { - filter: brightness(0); - } - } + .reload-page { + background-color: #ffff00 !important; + color: #000 !important; + + .reload-icon { + filter: brightness(0); + } } + } } @media (max-width: 1500px) { - .pie-chart-content-container .data-content-container { - .top-pie-container { - h3 { - font-size: 18px; - } - - h4 { - font-size: 16px; - margin-top: 5px; - } - } + .pie-chart-content-container .data-content-container { + .top-pie-container { + h3 { + font-size: 18px; + } + + h4 { + font-size: 16px; + margin-top: 5px; + } + } - p { - margin-top: 20px; - text-align: center; - } + p { + margin-top: 20px; + text-align: center; } + } }