From c2978f04021468c2c189fc771255db6725a6df7b Mon Sep 17 00:00:00 2001
From: UO289659 <uo289659@uniovi.es>
Date: Mon, 8 Apr 2024 17:10:50 +0200
Subject: [PATCH 01/10] =?UTF-8?q?Arreglado=20bus=20estad=C3=ADsticas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/components/QuizGame.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/webapp/src/components/QuizGame.js b/webapp/src/components/QuizGame.js
index 680c5f72..daa7763f 100644
--- a/webapp/src/components/QuizGame.js
+++ b/webapp/src/components/QuizGame.js
@@ -161,6 +161,17 @@ const QuizGame = () => {
 
     const handleTimeOver = () => {
         setIsFinished(true);
+        const username=localStorage.getItem('username')
+        const rigthAnswers = answeredQuestions.filter(question => question.isCorrect).length;
+        const wrongAnswers=numberOfQuestions+1-rigthAnswers;
+        const completedTime = totalTime - time;
+        const statisticsData = {
+            username:  username,
+            rigthAnswers: rigthAnswers,
+            wrongAnswers:wrongAnswers,
+            time:completedTime
+        };
+        saveStatistics(statisticsData);
         alert('¡Tiempo agotado!');
     };
 

From 89c288b962902cce930fe76a59ea84391a52bce6 Mon Sep 17 00:00:00 2001
From: UO289659 <uo289659@uniovi.es>
Date: Mon, 8 Apr 2024 20:00:17 +0200
Subject: [PATCH 02/10] =?UTF-8?q?Interfaz=20ranking,=20backend=20y=20front?=
 =?UTF-8?q?end=20para=20escoger=20m=C3=A9trica=20por=20la=20que=20se=20qui?=
 =?UTF-8?q?ere=20ordenar.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gatewayservice/gateway-service.js             | 18 ++++++
 .../statisticsservice/statistics-service.js   | 35 +++++++++++
 webapp/src/components/Navbar.js               |  8 +++
 webapp/src/components/Ranking.js              | 62 +++++++++++++++++++
 webapp/src/components/Routes.js               | 13 ++++
 webapp/src/components/package.json            | 11 ++++
 6 files changed, 147 insertions(+)
 create mode 100644 webapp/src/components/Ranking.js
 create mode 100644 webapp/src/components/package.json

diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index 31131742..654472e5 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -110,6 +110,24 @@ app.get('/users', async (req, res) => {
   }
 });
 
+app.get('/ranking/accuracy', async (req, res) => {
+  try {
+    const statResponse = await axios.get(statisticssServiceUrl+'/ranking/accuracy');
+    res.json(statResponse.data);
+  } catch (error) {
+    res.status(error.response.status).json({ error: error.response.data.error });
+  }
+});
+
+app.get('/ranking/correct-answers', async (req, res) => {
+  try {
+    const statResponse = await axios.get(statisticssServiceUrl+'/ranking/correct-answers');
+    res.json(statResponse.data);
+  } catch (error) {
+    res.status(error.response.status).json({ error: error.response.data.error });
+  }
+});
+
 
 // Read the OpenAPI YAML file synchronously
 openapiPath='./openapi.yaml'
diff --git a/statistics/statisticsservice/statistics-service.js b/statistics/statisticsservice/statistics-service.js
index 021ac8e3..a26bccbc 100644
--- a/statistics/statisticsservice/statistics-service.js
+++ b/statistics/statisticsservice/statistics-service.js
@@ -58,6 +58,41 @@ app.post('/addStatistic', async (req, res) => {
    
     });
 
+   
+    app.get('/ranking/accuracy', async (req, res) => {
+      try {
+        const users = await Statistic.find(); // Obtener todos los usuarios
+        const rankedUsers = users.map(user => {
+          const accuracy = user.rigthAnswers / user.gamesPlayed; // Calcular porcentaje de aciertos
+          return { username: user.username, accuracy }; // Crear objeto con nombre de usuario y porcentaje de aciertos
+        });
+        const sortedRanking = rankedUsers.sort((a, b) => b.accuracy - a.accuracy); // Ordenar usuarios por porcentaje de aciertos
+        res.json(sortedRanking); // Devolver ranking ordenado
+      } catch (err) {
+        res.status(500).json({ message: err.message });
+      }
+    });
+
+    app.get('/ranking/correct-answers', async (req, res) => {
+      try {
+        const users = await Statistic.find(); // Obtener todos los usuarios
+        // Mapear los usuarios para devolver solo las propiedades necesarias
+        const rankedUsers = users.map(user => ({
+          username: user.username,
+          correctAnswers: user.rigthAnswers, // Cambiar el nombre de la propiedad si es necesario
+          totalQuestions: user.rigthAnswers + user.wrongAnswers // Calcular total de preguntas acertadas
+        }));
+        // Ordenar usuarios por respuestas correctas
+        const sortedRanking = rankedUsers.sort((a, b) => b.correctAnswers - a.correctAnswers);
+        res.json(sortedRanking); // Devolver ranking ordenado
+      } catch (err) {
+        res.status(500).json({ message: err.message });
+      }
+    });
+    
+
+
+
 
 const server = app.listen(port, () => {
   console.log(`Statistics Service listening at http://localhost:${port}`);
diff --git a/webapp/src/components/Navbar.js b/webapp/src/components/Navbar.js
index b4d9dac1..c0c64d8a 100644
--- a/webapp/src/components/Navbar.js
+++ b/webapp/src/components/Navbar.js
@@ -15,6 +15,14 @@ const Navbar = () => {
          id="nav-menu"
        >
          <ul className="nav-list">
+            <li className="nav-item">
+
+              <NavLink to={process.env.RUTA_RANKING ||"/ranking/"}className="nav__link">
+              Ranking 
+
+              </NavLink>
+            </li>
+
             <li className="nav-item">
 
              <NavLink to={process.env.RUTA_USER ||"/statistics"}className="nav__link">
diff --git a/webapp/src/components/Ranking.js b/webapp/src/components/Ranking.js
new file mode 100644
index 00000000..610b42e7
--- /dev/null
+++ b/webapp/src/components/Ranking.js
@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+
+const Ranking = () => {
+    const gatewayEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+    const [rankingData, setRankingData] = useState(null);
+    const [error, setError] = useState(null);
+    const [selectedMetric, setSelectedMetric] = useState('accuracy');
+
+    useEffect(() => {
+        fetch(`${gatewayEndpoint}/ranking/${selectedMetric}`)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Ha ocurrido un error al obtener el ranking');
+                }
+                return response.json();
+            })
+            .then(data => {
+                setRankingData(data);
+            })
+            .catch(error => {
+                setError(error.message);
+            });
+    }, [gatewayEndpoint, selectedMetric]);
+
+    return (
+        <div>
+            <h1>Ranking</h1>
+            <div>
+                <label htmlFor="metric-select">Seleccionar métrica:</label>
+                <select id="metric-select" value={selectedMetric} onChange={e => setSelectedMetric(e.target.value)}>
+                    <option value="accuracy">Porcentaje de Acierto</option>
+                    <option value="correct-answers">Respuestas Correctas</option>
+                    <option value="games-played">Partidas Jugadas</option>
+                </select>
+            </div>
+            {error ? (
+                <p>Error: {error}</p>
+            ) : rankingData ? (
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Usuario</th>
+                            <th>{selectedMetric === 'accuracy' ? 'Porcentaje de Acierto' : selectedMetric}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {rankingData.map((user, index) => (
+                            <tr key={index}>
+                                <td>{user.username}</td>
+                                <td>{user[selectedMetric]}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            ) : (
+                <p>Cargando ranking...</p>
+            )}
+        </div>
+    );
+}
+
+export default Ranking;
diff --git a/webapp/src/components/Routes.js b/webapp/src/components/Routes.js
index b05f753b..65ef2844 100644
--- a/webapp/src/components/Routes.js
+++ b/webapp/src/components/Routes.js
@@ -6,6 +6,7 @@ import Inicio from './Inicio';
 import Primera from './Primera';
 import Game from './QuizGame';
 import Statistics from './Statistics';
+import Ranking from "./Ranking";
 
 const Routes = () => {
   const { token } = useAuth();
@@ -44,6 +45,18 @@ const Routes = () => {
           path: "/statistics", 
           element: <Statistics />,
         },
+        {
+          path: "/ranking/", 
+          element: <Ranking />,
+        },
+        {
+          path: "/ranking/accuracy", 
+          element: <Ranking />,
+        },
+        {
+          path: "/ranking/correct-answers", 
+          element: <Ranking />,
+        },
       ],
     },
   ];
diff --git a/webapp/src/components/package.json b/webapp/src/components/package.json
new file mode 100644
index 00000000..abf87e92
--- /dev/null
+++ b/webapp/src/components/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "components",
+  "version": "1.0.0",
+  "description": "",
+  "main": "Home.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

From 4a9acc40157169b9bdfb39bc029f1890bbafa079 Mon Sep 17 00:00:00 2001
From: UO289659 <uo289659@uniovi.es>
Date: Mon, 8 Apr 2024 20:51:32 +0200
Subject: [PATCH 03/10] =?UTF-8?q?Corregido=20fallo=20m=C3=A9trica=20pregun?=
 =?UTF-8?q?tas=20acertadas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gatewayservice/gateway-service.js               |  4 ++--
 .../statisticsservice/statistics-service.js     | 16 ++++++++--------
 webapp/src/components/Navbar.js                 |  2 +-
 webapp/src/components/Ranking.js                | 17 +++++++++++++----
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index 654472e5..f5543e0a 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -119,9 +119,9 @@ app.get('/ranking/accuracy', async (req, res) => {
   }
 });
 
-app.get('/ranking/correct-answers', async (req, res) => {
+app.get('/ranking/correctAnswers', async (req, res) => {
   try {
-    const statResponse = await axios.get(statisticssServiceUrl+'/ranking/correct-answers');
+    const statResponse = await axios.get(statisticssServiceUrl+'/ranking/correctAnswers');
     res.json(statResponse.data);
   } catch (error) {
     res.status(error.response.status).json({ error: error.response.data.error });
diff --git a/statistics/statisticsservice/statistics-service.js b/statistics/statisticsservice/statistics-service.js
index a26bccbc..94273532 100644
--- a/statistics/statisticsservice/statistics-service.js
+++ b/statistics/statisticsservice/statistics-service.js
@@ -73,18 +73,18 @@ app.post('/addStatistic', async (req, res) => {
       }
     });
 
-    app.get('/ranking/correct-answers', async (req, res) => {
+    app.get('/ranking/correctAnswers', async (req, res) => {
       try {
         const users = await Statistic.find(); // Obtener todos los usuarios
-        // Mapear los usuarios para devolver solo las propiedades necesarias
-        const rankedUsers = users.map(user => ({
+        // Ordenar usuarios por respuestas correctas
+        const sortedRanking = users.sort((a, b) => b.rigthAnswers - a.rigthAnswers);
+        // Mapear los usuarios para devolver el ranking ordenado junto con el número de respuestas correctas de cada usuario
+        const rankedUsers = sortedRanking.map(user => ({
           username: user.username,
-          correctAnswers: user.rigthAnswers, // Cambiar el nombre de la propiedad si es necesario
-          totalQuestions: user.rigthAnswers + user.wrongAnswers // Calcular total de preguntas acertadas
+          correctAnswers: user.rigthAnswers,
+          // Otras propiedades que desees incluir
         }));
-        // Ordenar usuarios por respuestas correctas
-        const sortedRanking = rankedUsers.sort((a, b) => b.correctAnswers - a.correctAnswers);
-        res.json(sortedRanking); // Devolver ranking ordenado
+        res.json(rankedUsers); // Devolver ranking ordenado con número de respuestas correctas de cada usuario
       } catch (err) {
         res.status(500).json({ message: err.message });
       }
diff --git a/webapp/src/components/Navbar.js b/webapp/src/components/Navbar.js
index c0c64d8a..c4a264fc 100644
--- a/webapp/src/components/Navbar.js
+++ b/webapp/src/components/Navbar.js
@@ -17,7 +17,7 @@ const Navbar = () => {
          <ul className="nav-list">
             <li className="nav-item">
 
-              <NavLink to={process.env.RUTA_RANKING ||"/ranking/"}className="nav__link">
+              <NavLink to={process.env.RUTA_RANKING ||"/ranking"}className="nav__link">
               Ranking 
 
               </NavLink>
diff --git a/webapp/src/components/Ranking.js b/webapp/src/components/Ranking.js
index 610b42e7..6561f02b 100644
--- a/webapp/src/components/Ranking.js
+++ b/webapp/src/components/Ranking.js
@@ -5,6 +5,7 @@ const Ranking = () => {
     const [rankingData, setRankingData] = useState(null);
     const [error, setError] = useState(null);
     const [selectedMetric, setSelectedMetric] = useState('accuracy');
+    const [headerText, setHeaderText] = useState('Porcentaje de Acierto');
 
     useEffect(() => {
         fetch(`${gatewayEndpoint}/ranking/${selectedMetric}`)
@@ -20,6 +21,15 @@ const Ranking = () => {
             .catch(error => {
                 setError(error.message);
             });
+
+        // Cambiar el texto de la cabecera de la tabla según la métrica seleccionada
+        if (selectedMetric === 'accuracy') {
+            setHeaderText('Porcentaje de Acierto');
+        } else if (selectedMetric === 'ccorrectAnswers') {
+            setHeaderText('Respuestas Correctas');
+        } else if (selectedMetric === 'games-played') {
+            setHeaderText('Partidas Jugadas');
+        }
     }, [gatewayEndpoint, selectedMetric]);
 
     return (
@@ -29,7 +39,7 @@ const Ranking = () => {
                 <label htmlFor="metric-select">Seleccionar métrica:</label>
                 <select id="metric-select" value={selectedMetric} onChange={e => setSelectedMetric(e.target.value)}>
                     <option value="accuracy">Porcentaje de Acierto</option>
-                    <option value="correct-answers">Respuestas Correctas</option>
+                    <option value="correctAnswers">Respuestas Correctas</option>
                     <option value="games-played">Partidas Jugadas</option>
                 </select>
             </div>
@@ -40,7 +50,7 @@ const Ranking = () => {
                     <thead>
                         <tr>
                             <th>Usuario</th>
-                            <th>{selectedMetric === 'accuracy' ? 'Porcentaje de Acierto' : selectedMetric}</th>
+                            <th>{headerText}</th> {/* Usamos el estado headerText para mostrar el texto de la cabecera */}
                         </tr>
                     </thead>
                     <tbody>
@@ -58,5 +68,4 @@ const Ranking = () => {
         </div>
     );
 }
-
-export default Ranking;
+export default Ranking;
\ No newline at end of file

From 5f36e527f2344ef987f17ea68586ce06b26af9c5 Mon Sep 17 00:00:00 2001
From: UO289659 <uo289659@uniovi.es>
Date: Mon, 8 Apr 2024 21:06:49 +0200
Subject: [PATCH 04/10] =?UTF-8?q?A=C3=B1adida=20m=C3=A9trica=20partidas=20?=
 =?UTF-8?q?jugadas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gatewayservice/gateway-service.js             |  9 ++++++++
 .../statisticsservice/statistics-service.js   | 21 ++++++++++++++++---
 webapp/src/components/Ranking.js              |  2 +-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index f5543e0a..c6307514 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -128,6 +128,15 @@ app.get('/ranking/correctAnswers', async (req, res) => {
   }
 });
 
+app.get('/ranking/gamesPlayed', async (req, res) => {
+  try {
+    const statResponse = await axios.get(statisticssServiceUrl+'/ranking/gamesPlayed');
+    res.json(statResponse.data);
+  } catch (error) {
+    res.status(error.response.status).json({ error: error.response.data.error });
+  }
+});
+
 
 // Read the OpenAPI YAML file synchronously
 openapiPath='./openapi.yaml'
diff --git a/statistics/statisticsservice/statistics-service.js b/statistics/statisticsservice/statistics-service.js
index 94273532..4ca81178 100644
--- a/statistics/statisticsservice/statistics-service.js
+++ b/statistics/statisticsservice/statistics-service.js
@@ -63,8 +63,9 @@ app.post('/addStatistic', async (req, res) => {
       try {
         const users = await Statistic.find(); // Obtener todos los usuarios
         const rankedUsers = users.map(user => {
-          const accuracy = user.rigthAnswers / user.gamesPlayed; // Calcular porcentaje de aciertos
-          return { username: user.username, accuracy }; // Crear objeto con nombre de usuario y porcentaje de aciertos
+          const accuracy = (user.rigthAnswers / user.gamesPlayed) * 100; // Calcular porcentaje de aciertos
+          const roundedAccuracy = accuracy % 1 === 0 ? accuracy : accuracy.toFixed(2); // Redondear solo si tiene decimales
+          return { username: user.username, accuracy: roundedAccuracy }; // Crear objeto con nombre de usuario y porcentaje de aciertos redondeado si es necesario
         });
         const sortedRanking = rankedUsers.sort((a, b) => b.accuracy - a.accuracy); // Ordenar usuarios por porcentaje de aciertos
         res.json(sortedRanking); // Devolver ranking ordenado
@@ -72,6 +73,8 @@ app.post('/addStatistic', async (req, res) => {
         res.status(500).json({ message: err.message });
       }
     });
+    
+    
 
     app.get('/ranking/correctAnswers', async (req, res) => {
       try {
@@ -82,13 +85,25 @@ app.post('/addStatistic', async (req, res) => {
         const rankedUsers = sortedRanking.map(user => ({
           username: user.username,
           correctAnswers: user.rigthAnswers,
-          // Otras propiedades que desees incluir
         }));
         res.json(rankedUsers); // Devolver ranking ordenado con número de respuestas correctas de cada usuario
       } catch (err) {
         res.status(500).json({ message: err.message });
       }
     });
+    app.get('/ranking/gamesPlayed', async (req, res) => {
+      try {
+        const users = await Statistic.find(); 
+        const sortedRanking = users.sort((a, b) => b.gamesPlayed - a.gamesPlayed);
+        const rankedUsers = sortedRanking.map(user => ({
+          username: user.username,
+          gamesPlayed: user.gamesPlayed,
+        }));
+        res.json(rankedUsers);
+      } catch (err) {
+        res.status(500).json({ message: err.message });
+      }
+    });
     
 
 
diff --git a/webapp/src/components/Ranking.js b/webapp/src/components/Ranking.js
index 6561f02b..79cd6a06 100644
--- a/webapp/src/components/Ranking.js
+++ b/webapp/src/components/Ranking.js
@@ -40,7 +40,7 @@ const Ranking = () => {
                 <select id="metric-select" value={selectedMetric} onChange={e => setSelectedMetric(e.target.value)}>
                     <option value="accuracy">Porcentaje de Acierto</option>
                     <option value="correctAnswers">Respuestas Correctas</option>
-                    <option value="games-played">Partidas Jugadas</option>
+                    <option value="gamesPlayed">Partidas Jugadas</option>
                 </select>
             </div>
             {error ? (

From 1c3f020f2fb063029c625344855009c781beac91 Mon Sep 17 00:00:00 2001
From: UO289659 <uo289659@uniovi.es>
Date: Mon, 8 Apr 2024 21:12:17 +0200
Subject: [PATCH 05/10] Arreglado bug cabeceras tabla.

---
 webapp/src/components/Ranking.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/Ranking.js b/webapp/src/components/Ranking.js
index 79cd6a06..15405bb8 100644
--- a/webapp/src/components/Ranking.js
+++ b/webapp/src/components/Ranking.js
@@ -7,6 +7,17 @@ const Ranking = () => {
     const [selectedMetric, setSelectedMetric] = useState('accuracy');
     const [headerText, setHeaderText] = useState('Porcentaje de Acierto');
 
+    // Actualizar el texto de la cabecera de la tabla cuando cambie la métrica seleccionada
+    useEffect(() => {
+        if (selectedMetric === 'accuracy') {
+            setHeaderText('Porcentaje de Acierto (%)');
+        } else if (selectedMetric === 'correctAnswers') {
+            setHeaderText('Respuestas Correctas');
+        } else if (selectedMetric === 'gamesPlayed') {
+            setHeaderText('Partidas Jugadas');
+        }
+    }, [selectedMetric]);
+
     useEffect(() => {
         fetch(`${gatewayEndpoint}/ranking/${selectedMetric}`)
             .then(response => {
@@ -21,15 +32,6 @@ const Ranking = () => {
             .catch(error => {
                 setError(error.message);
             });
-
-        // Cambiar el texto de la cabecera de la tabla según la métrica seleccionada
-        if (selectedMetric === 'accuracy') {
-            setHeaderText('Porcentaje de Acierto');
-        } else if (selectedMetric === 'ccorrectAnswers') {
-            setHeaderText('Respuestas Correctas');
-        } else if (selectedMetric === 'games-played') {
-            setHeaderText('Partidas Jugadas');
-        }
     }, [gatewayEndpoint, selectedMetric]);
 
     return (
@@ -68,4 +70,5 @@ const Ranking = () => {
         </div>
     );
 }
-export default Ranking;
\ No newline at end of file
+
+export default Ranking;

From 645611bafac25c12fc2fc34f432a04905056924b Mon Sep 17 00:00:00 2001
From: UO289659 <uo289659@uniovi.es>
Date: Tue, 9 Apr 2024 19:52:25 +0200
Subject: [PATCH 06/10] Test frontend Ranking

---
 webapp/src/components/Ranking.test.js | 154 ++++++++++++++++++++++++++
 1 file changed, 154 insertions(+)
 create mode 100644 webapp/src/components/Ranking.test.js

diff --git a/webapp/src/components/Ranking.test.js b/webapp/src/components/Ranking.test.js
new file mode 100644
index 00000000..2e7b5c8f
--- /dev/null
+++ b/webapp/src/components/Ranking.test.js
@@ -0,0 +1,154 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';;
+import Ranking from './Ranking';
+import AuthProvider from './login/AuthProvider';
+import userEvent from '@testing-library/user-event';
+
+describe('Ranking component', () => {
+
+    beforeEach(() => {
+    localStorage.clear();
+    });
+
+    test('ranking título', async () => {
+        render(<Ranking />);
+        expect(screen.getByText('Ranking')).toBeInTheDocument();
+  });
+
+  it('muestra la opción seleccionada por defecto como "Porcentaje de Acierto"', () => {
+    render(<Ranking />);
+    expect(screen.getByDisplayValue('Porcentaje de Acierto')).toBeInTheDocument();
+  });
+
+  it('cambia la métrica seleccionada (respuestas correctas) cuando se cambia el valor del select', async () => {
+    render(<AuthProvider> <Ranking /> </AuthProvider>);
+    const select = screen.getByRole('combobox');
+    userEvent.selectOptions(select, 'correctAnswers');
+    await waitFor(() => {
+      expect(screen.getByText('Respuestas Correctas')).toBeInTheDocument();
+    });
+  });
+
+  it('cambia la métrica seleccionada (partidas jugadas) cuando se cambia el valor del select', async () => {
+    render(<AuthProvider> <Ranking /> </AuthProvider>);
+    const select = screen.getByRole('combobox');
+    userEvent.selectOptions(select, 'gamesPlayed');
+    await waitFor(() => {
+      expect(screen.getByText('Respuestas Correctas')).toBeInTheDocument();
+    });
+  });
+
+  test('obtiene ranking con métrica Porcentaje de Aciertos', async () => {
+    // Mock response data
+    const mockRankingData = [
+      { username: 'user1', accuracy: 80 },
+      { username: 'user2', accuracy: 75 },
+    ];
+
+    const mockResponse = {
+      ok: true,
+      json: jest.fn().mockResolvedValue(mockRankingData),
+    };
+    jest.spyOn(global, 'fetch').mockResolvedValueOnce(mockResponse);
+
+    // Render the component
+    render(<Ranking />);
+
+    // Select option from the dropdown
+    const select = screen.getByRole('combobox');
+    userEvent.selectOptions(select, 'accuracy');
+
+    // Verificamos que se haya hecho la solicitud con la URL correcta
+    expect(global.fetch).toHaveBeenCalledWith('http://localhost:8000/ranking/accuracy');
+    
+     
+    // Check if the fetched data is rendered
+    expect(await screen.findByText('user1')).toBeInTheDocument();
+    expect(screen.getByText('80')).toBeInTheDocument();
+    expect(screen.getByText('user2')).toBeInTheDocument();
+    expect(screen.getByText('75')).toBeInTheDocument();
+  });
+
+  test('obtiene ranking con métrica Respuestas Correctas', async () => {
+    // Mock response data
+    const mockRankingData = [
+      { username: 'user2', correctAnswers: 85 },
+      { username: 'user3', correctAnswers: 90 },
+      // Add more mock data as needed
+    ];
+
+    // Mock fetch function
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockRankingData),
+    });
+
+    // Render the component
+    render(<Ranking />);
+
+    // Select option from the dropdown
+    const select = screen.getByRole('combobox');
+    userEvent.selectOptions(select, 'correctAnswers');
+
+    // Wait for the component to fetch data and update
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith('http://localhost:8000/ranking/correctAnswers');
+    });
+    
+     
+    // Check if the fetched data is rendered
+    expect(await screen.findByText('user2')).toBeInTheDocument();
+    expect(screen.getByText('85')).toBeInTheDocument();
+    expect(screen.getByText('user3')).toBeInTheDocument();
+    expect(screen.getByText('90')).toBeInTheDocument();
+  });
+
+  test('obtiene ranking con métrica Partidas Jugadas', async () => {
+    // Mock response data
+    const mockRankingData = [
+      { username: 'user1', gamesPlayed: 80 },
+      { username: 'user2', gamesPlayed: 75 },
+      // Add more mock data as needed
+    ];
+
+    // Mock fetch function
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve(mockRankingData),
+    });
+
+    // Render the component
+    render(<Ranking />);
+
+    // Select option from the dropdown
+    const select = screen.getByRole('combobox');
+    userEvent.selectOptions(select, 'gamesPlayed');
+
+    // Wait for the component to fetch data and update
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith('http://localhost:8000/ranking/gamesPlayed');
+    });
+    
+     
+    // Check if the fetched data is rendered
+    expect(await screen.findByText('user1')).toBeInTheDocument();
+    expect(screen.getByText('80')).toBeInTheDocument();
+    expect(screen.getByText('user2')).toBeInTheDocument();
+    expect(screen.getByText('75')).toBeInTheDocument();
+  });
+
+  it('muestra un mensaje de error cuando falla la llamada a la API', async () => {
+    global.fetch.mockImplementationOnce(() =>
+      Promise.resolve({
+        ok: false,
+        json: () => Promise.resolve({ message: 'Error: Ha ocurrido un error al obtener el ranking' }),
+      })
+    );
+
+    render(<AuthProvider> <Ranking /> </AuthProvider>);
+    await waitFor(() => {
+      expect(screen.getByText(/Error al obtener el ranking/i)).toBeInTheDocument();
+    });
+  });
+  
+});

From fd9227a11cbf87931654ea098ffd99ad22978691 Mon Sep 17 00:00:00 2001
From: UO289659 <uo289659@uniovi.es>
Date: Tue, 9 Apr 2024 19:56:59 +0200
Subject: [PATCH 07/10] Eliminado beforeEach

---
 webapp/src/components/Ranking.test.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/webapp/src/components/Ranking.test.js b/webapp/src/components/Ranking.test.js
index 2e7b5c8f..9c5aa488 100644
--- a/webapp/src/components/Ranking.test.js
+++ b/webapp/src/components/Ranking.test.js
@@ -6,10 +6,6 @@ import userEvent from '@testing-library/user-event';
 
 describe('Ranking component', () => {
 
-    beforeEach(() => {
-    localStorage.clear();
-    });
-
     test('ranking título', async () => {
         render(<Ranking />);
         expect(screen.getByText('Ranking')).toBeInTheDocument();

From 43d0593e06178a2ee94a5906aeaec864d9660692 Mon Sep 17 00:00:00 2001
From: UO289659 <uo289659@uniovi.es>
Date: Tue, 9 Apr 2024 20:37:20 +0200
Subject: [PATCH 08/10] =?UTF-8?q?A=C3=B1adido=20a=20gateway-service.test?=
 =?UTF-8?q?=20endpoints=20de=20ranking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gatewayservice/gateway-service.test.js | 75 ++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/gatewayservice/gateway-service.test.js b/gatewayservice/gateway-service.test.js
index e8e55c11..2d1e7b24 100644
--- a/gatewayservice/gateway-service.test.js
+++ b/gatewayservice/gateway-service.test.js
@@ -35,6 +35,12 @@ describe('Gateway Service', () => {
       wrongAnswers:'mockedWrongAnswers'  }});
     } else if (url.endsWith('/users')) {
       return Promise.resolve({ data: { users: ['mockedUser1', 'mockedUser2'] } });
+    }else if(url.endsWith('/ranking/accuracy')){
+      return Promise.resolve({ data: { user: 'mockedUser', accuracy:'mockedAccuracy' }});
+    }else if(url.endsWith('/ranking/correctAnswers')){
+      return Promise.resolve({ data: { user: 'mockedUser', accuracy:'mockedCorrectAnswers' }});
+    }else if(url.endsWith('/ranking/gamesPlayed')){
+      return Promise.resolve({ data: { user: 'mockedUser', accuracy:'mockedGamesPlayed' }});
     }
   });
 
@@ -209,4 +215,73 @@ describe('Gateway Service', () => {
     expect(response.body).toEqual(mockErrorResponse);
   });
 
+  // Test /ranking/accuracy endpoint
+  it('should forward get ranking/accuracy request to statistics service', async () => {
+    const response = await request(app)
+      .get('/ranking/accuracy');
+
+    expect(response.statusCode).toBe(200);
+    expect(response.body.user).toBe('mockedUser');
+    expect(response.body.accuracy).toBe('mockedAccuracy');
+    
+  });
+
+  it('debería manejar errores al intentar obtener ranking cion métrica Porcentaje de Aciertos', async () => {
+    const mockErrorResponse = { error: 'Error al obtener ranking' };
+    const mockStatus = 500;
+  
+    axios.get.mockRejectedValueOnce({ response: { status: mockStatus, data: mockErrorResponse } });
+  
+    const response = await request(app).get('/ranking/accuracy');
+  
+    expect(response.status).toBe(mockStatus);
+    expect(response.body).toEqual(mockErrorResponse);
+  });
+
+   // Test /ranking/correctAnswers endpoint
+   it('should forward get ranking/correctAnswers request to statistics service', async () => {
+    const response = await request(app)
+      .get('/ranking/correctAnswers');
+
+    expect(response.statusCode).toBe(200);
+    expect(response.body.user).toBe('mockedUser');
+    expect(response.body.accuracy).toBe('mockedCorrectAnswers');
+    
+  });
+
+  it('debería manejar errores al intentar obtener ranking con métrica Respuestas Correctas', async () => {
+    const mockErrorResponse = { error: 'Error al obtener ranking' };
+    const mockStatus = 500;
+  
+    axios.get.mockRejectedValueOnce({ response: { status: mockStatus, data: mockErrorResponse } });
+  
+    const response = await request(app).get('/ranking/correctAnswers');
+  
+    expect(response.status).toBe(mockStatus);
+    expect(response.body).toEqual(mockErrorResponse);
+  });
+
+  // Test /ranking/gamesPlayed endpoint
+  it('should forward get ranking/gamesPlayed request to statistics service', async () => {
+    const response = await request(app)
+      .get('/ranking/gamesPlayed');
+
+    expect(response.statusCode).toBe(200);
+    expect(response.body.user).toBe('mockedUser');
+    expect(response.body.accuracy).toBe('mockedGamesPlayed');
+    
+  });
+
+  it('debería manejar errores al intentar obtener ranking con métrica Partidas Jugadas', async () => {
+    const mockErrorResponse = { error: 'Error al obtener ranking' };
+    const mockStatus = 500;
+  
+    axios.get.mockRejectedValueOnce({ response: { status: mockStatus, data: mockErrorResponse } });
+  
+    const response = await request(app).get('/ranking/gamesPlayed');
+  
+    expect(response.status).toBe(mockStatus);
+    expect(response.body).toEqual(mockErrorResponse);
+  });
+
 });
\ No newline at end of file

From 95e58975fb453aa67a8b1f8621e3c2dd2ed1ada1 Mon Sep 17 00:00:00 2001
From: UO289659 <uo289659@uniovi.es>
Date: Tue, 9 Apr 2024 22:55:30 +0200
Subject: [PATCH 09/10] Test backend ranking

---
 gatewayservice/gateway-service.test.js        |  2 +-
 .../statisticsservice/package-lock.json       | 16 ++++
 statistics/statisticsservice/package.json     |  1 +
 .../statisticsservice/statistics-service.js   |  2 +-
 .../statistics-service.test.js                | 75 +++++++++++++++++++
 5 files changed, 94 insertions(+), 2 deletions(-)

diff --git a/gatewayservice/gateway-service.test.js b/gatewayservice/gateway-service.test.js
index 2d1e7b24..11c4088b 100644
--- a/gatewayservice/gateway-service.test.js
+++ b/gatewayservice/gateway-service.test.js
@@ -226,7 +226,7 @@ describe('Gateway Service', () => {
     
   });
 
-  it('debería manejar errores al intentar obtener ranking cion métrica Porcentaje de Aciertos', async () => {
+  it('debería manejar errores al intentar obtener ranking con métrica Porcentaje de Aciertos', async () => {
     const mockErrorResponse = { error: 'Error al obtener ranking' };
     const mockStatus = 500;
   
diff --git a/statistics/statisticsservice/package-lock.json b/statistics/statisticsservice/package-lock.json
index 4b052b5c..d13597a3 100644
--- a/statistics/statisticsservice/package-lock.json
+++ b/statistics/statisticsservice/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "axios": "^1.6.8",
         "bcrypt": "^5.1.1",
         "body-parser": "^1.20.2",
         "cors": "^2.8.5",
@@ -1238,6 +1239,16 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/b4a": {
       "version": "1.6.6",
       "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.6.tgz",
@@ -4204,6 +4215,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/statistics/statisticsservice/package.json b/statistics/statisticsservice/package.json
index 821679c7..8fe5169d 100644
--- a/statistics/statisticsservice/package.json
+++ b/statistics/statisticsservice/package.json
@@ -8,6 +8,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "axios": "^1.6.8",
     "bcrypt": "^5.1.1",
     "body-parser": "^1.20.2",
     "cors": "^2.8.5",
diff --git a/statistics/statisticsservice/statistics-service.js b/statistics/statisticsservice/statistics-service.js
index 4ca81178..33387251 100644
--- a/statistics/statisticsservice/statistics-service.js
+++ b/statistics/statisticsservice/statistics-service.js
@@ -63,7 +63,7 @@ app.post('/addStatistic', async (req, res) => {
       try {
         const users = await Statistic.find(); // Obtener todos los usuarios
         const rankedUsers = users.map(user => {
-          const accuracy = (user.rigthAnswers / user.gamesPlayed) * 100; // Calcular porcentaje de aciertos
+          const accuracy = (user.rigthAnswers / (user.gamesPlayed*10)) * 100; // Calcular porcentaje de aciertos
           const roundedAccuracy = accuracy % 1 === 0 ? accuracy : accuracy.toFixed(2); // Redondear solo si tiene decimales
           return { username: user.username, accuracy: roundedAccuracy }; // Crear objeto con nombre de usuario y porcentaje de aciertos redondeado si es necesario
         });
diff --git a/statistics/statisticsservice/statistics-service.test.js b/statistics/statisticsservice/statistics-service.test.js
index f40ed6fb..5b863285 100644
--- a/statistics/statisticsservice/statistics-service.test.js
+++ b/statistics/statisticsservice/statistics-service.test.js
@@ -1,6 +1,7 @@
 const request = require('supertest');
 const { MongoMemoryServer } = require('mongodb-memory-server');
 const Stat = require('./user-model');
+const axios = require('axios')
 
 let mongoServer;
 let app;
@@ -22,6 +23,12 @@ async function addStatistic(stat){
     })
   
     await newstat.save();
+
+    await Stat.create([
+      { username: 'user1', password:"test", rigthAnswers: 8, gamesPlayed: 10 }, 
+      { username: 'user2', password:"test", rigthAnswers: 15, gamesPlayed: 20 }, 
+    ]);
+
 }
 
 beforeAll(async () => {
@@ -91,3 +98,71 @@ describe('Statistics Service', () => {
     });
   });
 });
+
+describe('GET /ranking/accuracy', () => {
+  it('should return ranked users based on accuracy', async () => {
+    
+
+    // Realizar una solicitud GET al endpoint /ranking/accuracy
+    const response = await request(app).get('/ranking/accuracy');
+
+    // Verificar el código de estado de la respuesta
+    expect(response.status).toBe(200);
+
+    // Verificar el cuerpo de la respuesta para testuser
+    expect(response.body[0]).toHaveProperty('username', 'testuser');
+    expect(response.body[0]).toHaveProperty('accuracy', 100); 
+
+    // Verificar el cuerpo de la respuesta para user1
+    expect(response.body[1]).toHaveProperty('username', 'user1');
+    expect(response.body[1]).toHaveProperty('accuracy', 8);
+
+    // Verificar el cuerpo de la respuesta para user2
+    expect(response.body[2]).toHaveProperty('username', 'user2');
+    expect(response.body[2]).toHaveProperty('accuracy', '7.50'); 
+  });
+
+
+  it('should return ranked users based on correct answers', async () => {
+
+    // Realizar una solicitud GET al endpoint /ranking/correctAnswers
+    const response = await request(app).get('/ranking/correctAnswers');
+
+    // Verificar el código de estado de la respuesta
+    expect(response.status).toBe(200);
+
+    // Verificar el cuerpo de la respuesta para user2
+    expect(response.body[0]).toHaveProperty('username', 'user2');
+    expect(response.body[0]).toHaveProperty('correctAnswers', 15); 
+
+    // Verificar el cuerpo de la respuesta para testuser
+    expect(response.body[1]).toHaveProperty('username', 'testuser');
+    expect(response.body[1]).toHaveProperty('correctAnswers', 10);
+
+    // Verificar el cuerpo de la respuesta para user1
+    expect(response.body[2]).toHaveProperty('username', 'user1');
+    expect(response.body[2]).toHaveProperty('correctAnswers', 8);
+  });
+  
+
+  it('should return ranked users based on games played', async () => {
+
+    // Realizar una solicitud GET al endpoint /ranking/gamesPlayed
+    const response = await request(app).get('/ranking/gamesPlayed');
+
+    // Verificar el código de estado de la respuesta
+    expect(response.status).toBe(200);
+
+    // Verificar el cuerpo de la respuesta para user2
+    expect(response.body[0]).toHaveProperty('username', 'user2');
+    expect(response.body[0]).toHaveProperty('gamesPlayed', 20); 
+
+    // Verificar el cuerpo de la respuesta para testuser
+    expect(response.body[2]).toHaveProperty('username', 'testuser');
+    expect(response.body[2]).toHaveProperty('gamesPlayed', 1);
+
+    // Verificar el cuerpo de la respuesta para user1
+    expect(response.body[1]).toHaveProperty('username', 'user1');
+    expect(response.body[1]).toHaveProperty('gamesPlayed', 10);
+  });
+});
\ No newline at end of file

From ca491f8424c3c9ca184050dd73406e4bf1840bf5 Mon Sep 17 00:00:00 2001
From: UO289659 <uo289659@uniovi.es>
Date: Sun, 14 Apr 2024 18:21:22 +0200
Subject: [PATCH 10/10] Css ranking

---
 webapp/src/components/Ranking.css    | 58 ++++++++++++++++++++++++++++
 webapp/src/components/Ranking.js     | 32 +++++++++------
 webapp/src/components/Statistics.css |  8 +++-
 webapp/src/components/Statistics.js  |  9 ++++-
 4 files changed, 92 insertions(+), 15 deletions(-)
 create mode 100644 webapp/src/components/Ranking.css

diff --git a/webapp/src/components/Ranking.css b/webapp/src/components/Ranking.css
new file mode 100644
index 00000000..69d9f207
--- /dev/null
+++ b/webapp/src/components/Ranking.css
@@ -0,0 +1,58 @@
+.container {
+    align-items: center;
+    background-color: #ffffff7a;
+    
+}
+.title{
+    font-size: 2em; /* Tamaño de fuente más grande */
+    font-family: 'Playfair Display', serif;
+}
+
+.centered-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Playfair Display', serif;
+    color: #de0f70; /* Color oscuro para un contraste nítido */
+    text-align: center; /* Centrar el texto */
+    font-weight: 700; /* Fuente en negrita para destacar */
+    
+    font-size: 1.2em;
+}
+
+
+.label-large {
+    font-size: 1.1em;
+    color: #555; /* Color del texto */
+}
+
+.select-large {
+    font-size: 0.9em;
+    
+    border: 1px solid #ccc; /* Borde */
+    border-radius: 4px; /* Bordes redondeados */
+    background-color: #fff; /* Color de fondo */
+    color: #333; /* Color del texto */
+    width: 40vh;
+    margin-bottom: 3vh;
+}
+
+.table{
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid #ddd; /* Borde de la tabla */
+    background-color: rgba(255, 255, 255, 0.8); /* Blanco con una transparencia del 80% */
+    font-size: 1em;
+
+}
+
+.select-large:focus {
+    outline: none; /* Eliminar el contorno al enfocar */
+    border-color: #007bff; /* Color del borde al enfocar */
+}
+
+body {
+    font-family: 'Roboto', sans-serif; /* Utiliza la fuente Roboto */
+   
+}
\ No newline at end of file
diff --git a/webapp/src/components/Ranking.js b/webapp/src/components/Ranking.js
index 15405bb8..26234b87 100644
--- a/webapp/src/components/Ranking.js
+++ b/webapp/src/components/Ranking.js
@@ -1,4 +1,8 @@
 import React, { useState, useEffect } from 'react';
+import './Ranking.css';
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />
+
+
 
 const Ranking = () => {
     const gatewayEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
@@ -35,19 +39,22 @@ const Ranking = () => {
     }, [gatewayEndpoint, selectedMetric]);
 
     return (
-        <div>
-            <h1>Ranking</h1>
-            <div>
-                <label htmlFor="metric-select">Seleccionar métrica:</label>
-                <select id="metric-select" value={selectedMetric} onChange={e => setSelectedMetric(e.target.value)}>
-                    <option value="accuracy">Porcentaje de Acierto</option>
-                    <option value="correctAnswers">Respuestas Correctas</option>
-                    <option value="gamesPlayed">Partidas Jugadas</option>
-                </select>
-            </div>
+        <div className="container">
+        <div className="title">
+        <h1>Ranking</h1>
+        </div>
+        <div className="centered-content">
+            <label htmlFor="metric-select" className="label-large">Seleccionar métrica:</label>
+            <select id="metric-select" value={selectedMetric} onChange={e => setSelectedMetric(e.target.value)} className="select-large">
+                <option value="accuracy">Porcentaje de Acierto</option>
+                <option value="correctAnswers">Respuestas Correctas</option>
+                <option value="gamesPlayed">Partidas Jugadas</option>
+            </select>
+        </div>
             {error ? (
                 <p>Error: {error}</p>
             ) : rankingData ? (
+                <div className='table'> 
                 <table>
                     <thead>
                         <tr>
@@ -64,10 +71,13 @@ const Ranking = () => {
                         ))}
                     </tbody>
                 </table>
+                </div> 
             ) : (
                 <p>Cargando ranking...</p>
             )}
-        </div>
+           
+       
+       </div>
     );
 }
 
diff --git a/webapp/src/components/Statistics.css b/webapp/src/components/Statistics.css
index a6c39065..da2d1216 100644
--- a/webapp/src/components/Statistics.css
+++ b/webapp/src/components/Statistics.css
@@ -35,5 +35,9 @@ table {
     align-items: center;
     display: flex;
     flex-direction: column;
-    background-color: white;
-  }
\ No newline at end of file
+   
+  }
+  .title{
+    font-size: 2em; 
+    font-family: 'Playfair Display', serif;
+}
\ No newline at end of file
diff --git a/webapp/src/components/Statistics.js b/webapp/src/components/Statistics.js
index 80c196e5..46c6cadb 100644
--- a/webapp/src/components/Statistics.js
+++ b/webapp/src/components/Statistics.js
@@ -21,8 +21,10 @@ const Statistics= () => {
 
 
   return (
-    <div>
-      <h1>Estadísticas</h1>
+    <div className='principal'>
+      <div className="title">
+        <h1>Estadísticas</h1>
+        </div>
       {error ? ( // Verificar si hay un error
       <p>Error: {error}</p>
     ) : userData ? (
@@ -44,10 +46,13 @@ const Statistics= () => {
             </tr>
           </tbody>
         </table>
+        
       ) : (
         <p>Cargando estadísticas...</p>
       )}
+      
     </div>
+    
   );
 }