Alterando dashboard e alterando lógican para url da api.

rodrigoborgesmachado · Apr 4, 2024 · 697c685 · 697c685
1 parent 9280b1d
commit 697c685
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 12 deletions.
diff --git a/src/components/GraficoBarra/graficoBarra.js b/src/components/GraficoBarra/graficoBarra.js
@@ -1,15 +1,31 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
 
-export default function BasicBars({nomes, dados}) {
+export function BasicBars({nomes, dados}) {
   return (
     <div className='grafico'>
-    <BarChart
-            xAxis={[{ scaleType: 'band', data: nomes }]}
-            series={[{data: dados}]}
-            width={1000}
-            height={700}
-        />
+      <BarChart
+        xAxis={[{ scaleType: 'band', data: nomes }]}
+        series={[{data: dados}]}
+        width={1000}
+        height={700}
+      />
+    </div>
+  );
+}
+
+export function StackedBarChart({nomes, pData, uData, pLabel, uvLabel}) {
+  return (
+    <div className='grafico'>
+      <BarChart
+        width={1000}
+        height={700}
+        series={[
+          { data: pData, label: pLabel, id: 'pvId', stack: 'total' },
+          { data: uData, label: uvLabel, id: 'uvId', stack: 'total' },
+        ]}
+        xAxis={[{ data: nomes, scaleType: 'band' }]}
+      />
     </div>
   );
 }
diff --git a/src/pages/Admin/DashBoard/DashBoard.js b/src/pages/Admin/DashBoard/DashBoard.js
@@ -10,16 +10,18 @@ import VisibilityIcon from '@mui/icons-material/Visibility';
 import Pagination from '@mui/material/Pagination';
 import Stack from '@mui/material/Stack';
 import { customStyles } from '../../../services/functions.js';
-import {abreQuestao} from './../../../services/functions.js';
+import { abreQuestao } from './../../../services/functions.js';
 import BasicPie from './../../../components/GraficoPie/graficoPie.js';
-import BasicBars from '../../../components/GraficoBarra/graficoBarra.js';
+import { BasicBars, StackedBarChart } from '../../../components/GraficoBarra/graficoBarra.js';
 
 function DashBoard(){
     const styles = customStyles();
     const navigate = useNavigate();
     const [dados, setDados] = useState({});
     const [questoesPorUsuarios, setQuestoesPorUsuarios] = useState({});
     const [questoesValidadasPorUsuarios, setQuestoesValidadasPorUsuarios] = useState({});
+    const [respostasPorProva, setRespostasPorProva] = useState({});
+    const [respostasPorMateria, setRespostasPorMateria] = useState({});
     const [loadding, setLoadding] = useState(true);
     const [questoes, setQuestoes] = useState([])
     const [provas, setProvas] = useState([])
@@ -89,6 +91,34 @@ function DashBoard(){
             .then((response) => {
                 setQuestoesValidadasPorUsuarios(response.data.object);
                 setLoadding(false);
+                buscaQuantidadeRespostasPorProva();
+            }).catch(() => {
+                toast.error('Erro ao buscar os dados');
+                navigate('/', { replace: true });
+                return;
+            });
+    }
+
+    async function buscaQuantidadeRespostasPorProva(){
+        setLoadding(true);
+        await api.get('/Admin/getquantidaderespostasporprova')
+            .then((response) => {
+                setRespostasPorProva(response.data.object);
+                setLoadding(false);
+                buscaQuantidadeRespostasPorMateria();
+            }).catch(() => {
+                toast.error('Erro ao buscar os dados');
+                navigate('/', { replace: true });
+                return;
+            });
+    }
+
+    async function buscaQuantidadeRespostasPorMateria(){
+        setLoadding(true);
+        await api.get('/Admin/getquantidaderespostaspormateria')
+            .then((response) => {
+                setRespostasPorMateria(response.data.object);
+                setLoadding(false);
             }).catch(() => {
                 toast.error('Erro ao buscar os dados');
                 navigate('/', { replace: true });
@@ -259,6 +289,66 @@ function DashBoard(){
         return itens;
     }
 
+    function criaInformacoesNomesRespostasPorProva(){
+        var itens = new Array();
+
+        respostasPorProva.forEach(element => {
+            itens.push(element.descricao + ' | Total: ' + (element.certas + element.erradas));
+        });
+
+        return itens;
+    }
+
+    function criaInformacoesValoresRespostasCertasPorProva(){
+        var itens = new Array();
+
+        respostasPorProva.forEach(element => {
+            itens.push(element.certas);
+        });
+
+        return itens;
+    }
+
+    function criaInformacoesValoresRespostasErradasPorProva(){
+        var itens = new Array();
+
+        respostasPorProva.forEach(element => {
+            itens.push(element.erradas);
+        });
+
+        return itens;
+    }
+
+    function criaInformacoesNomesRespostasPorMateria(){
+        var itens = new Array();
+
+        respostasPorMateria.forEach(element => {
+            itens.push(element.descricao + ' | Total: ' + (element.certas + element.erradas));
+        });
+
+        return itens;
+    }
+
+    function criaInformacoesValoresRespostasCertasPorMateria(){
+        var itens = new Array();
+
+        respostasPorMateria.forEach(element => {
+            itens.push(element.certas);
+        });
+
+        return itens;
+    }
+
+    function criaInformacoesValoresRespostasErradasPorMateria(){
+        var itens = new Array();
+
+        respostasPorMateria.forEach(element => {
+            itens.push(element.erradas);
+        });
+
+        return itens;
+    }
+
     if (loadding) {
         return (
             <div className='loaddingDiv'>
@@ -468,13 +558,26 @@ function DashBoard(){
                     </div>
                 </div>
                 <br/>
+                <h2>Quantidade de respostas por prova</h2>
+                <br/>
+                <div className='dados global-infoPanel'>
+                    <StackedBarChart nomes={criaInformacoesNomesRespostasPorProva()} pData={criaInformacoesValoresRespostasCertasPorProva()} uData={criaInformacoesValoresRespostasErradasPorProva()} pLabel={'Corretas'} uvLabel = {'Erradas'}/>
+                </div>
+                <br/>
+                <h2>Quantidade de respostas por matéria</h2>
+                <br/>
+                <div className='dados global-infoPanel'>
+                    <StackedBarChart nomes={criaInformacoesNomesRespostasPorMateria()} pData={criaInformacoesValoresRespostasCertasPorMateria()} uData={criaInformacoesValoresRespostasErradasPorMateria()} pLabel={'Corretas'} uvLabel = {'Erradas'}/>
+                </div>
+                <br/>
                 <h2>Quantidade de questões cadastradas por usuários</h2>
                 <br/>
                 <div className='dados global-infoPanel'>
                     <BasicBars nomes={criaInformacoesNomesQuestõesCadastradasPorUsuarios()} dados={criaInformacoesValoresQuestõesCadastradasPorUsuarios()}/>
                 </div>
                 <br/>
                 <h2>Quantidade de questões validadas por usuários</h2>
+                <br/>
                 <div className='dados global-infoPanel'>
                     <BasicBars nomes={criaInformacoesNomesQuestõesValidadas()} dados={criaInformacoesValoresQuestõesValidadas()}/>
                 </div>

diff --git a/src/services/api.js b/src/services/api.js
@@ -1,10 +1,10 @@
 import axios from "axios";
 import Config from './../config.json';
-import { toast } from 'react-toastify';
+
+var apiUrl = window.location.href.includes("localhost") ? 'https://localhost:7119/api' : 'https://apisunsale.azurewebsites.net/api';
 
 const api = axios.create({
-    //baseURL: 'https://localhost:7119/api',
-    baseURL: 'https://apisunsale.azurewebsites.net/api',
+    baseURL: apiUrl,
     headers: {
         'Content-Type': 'application/json',
     },