Cargando resultados...
;
+ }
+
+ const procesarDatos = () => {
+ const respuestasPorPregunta = {};
+
+ resultados.forEach((encuesta) => {
+ const { pregunta, respuestas } = encuesta;
+
+ if (!respuestasPorPregunta[pregunta]) {
+ respuestasPorPregunta[pregunta] = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
+ }
+
+ Object.entries(respuestas).forEach(([calificacion, cantidad]) => {
+ respuestasPorPregunta[pregunta][calificacion] += cantidad;
+ });
+ });
+
+ const labels = Object.keys(respuestasPorPregunta);
+ const datasets = labels.map((pregunta) => {
+ return {
+ label: pregunta,
+ data: Object.values(respuestasPorPregunta[pregunta]),
+ backgroundColor: [
+ "#FF6F61",
+ "#6B5B95",
+ "#88B04B",
+ "#F7CAC9",
+ "#92A8D1",
+ ],
+ };
+ });
+
+ return {
+ labels: ["1", "2", "3", "4", "5"], // Mantenemos las etiquetas originales (números)
+ datasets,
+ };
+ };
+
+ const estrellas = ["⭐", "⭐⭐", "⭐⭐⭐", "⭐⭐⭐⭐", "⭐⭐⭐⭐⭐"]; // Representación de estrellas
+
+ const data = procesarDatos();
+
+ return (
+
+
Resultados de Encuesta Movil
+ {resultados.length === 0 ? (
+
No se han completado encuestas aún.
+ ) : (
+
+ {data.datasets.map((dataset, index) => (
+
+
{`${dataset.label}`}
+
+
{
+ const calificacion =
+ estrellas[tooltipItem.dataIndex]; // Convertir índice a estrellas
+ const value = dataset.data[tooltipItem.dataIndex];
+ return `${calificacion}: Personas que han respondido: ${value}`;
+ },
+ },
+ },
+ title: {
+ display: true,
+ text: `Respuestas por calificación`,
+ },
+ },
+ }}
+ />
+
+
+ ))}
+
+ )}
+
Cargando resultados...
;
}
- // Procesar las respuestas para construir los datos de la gráfica
const procesarDatos = () => {
const respuestasPorPregunta = {};
- // Contamos las respuestas por pregunta
resultados.forEach((encuesta) => {
const { pregunta, respuestas } = encuesta;
- // Si la pregunta no existe en el objeto, la inicializamos
if (!respuestasPorPregunta[pregunta]) {
respuestasPorPregunta[pregunta] = { "1": 0, "2": 0, "3": 0, "4": 0, "5": 0 };
}
- // Contamos las respuestas de la calificación para cada pregunta
Object.entries(respuestas).forEach(([calificacion, cantidad]) => {
- respuestasPorPregunta[pregunta][calificacion] += cantidad; // Incrementamos el contador
+ respuestasPorPregunta[pregunta][calificacion] += cantidad;
});
});
- // Creamos los datos para el gráfico de pastel
- const labels = Object.keys(respuestasPorPregunta); // Las preguntas
+ const labels = Object.keys(respuestasPorPregunta);
const datasets = labels.map((pregunta) => {
- const totalRespuestas = Object.values(respuestasPorPregunta[pregunta]).reduce((a, b) => a + b, 0); // Total de respuestas por pregunta
return {
label: pregunta,
- data: Object.values(respuestasPorPregunta[pregunta]), // Los valores de cada calificación
- backgroundColor: ['#FF6F61', '#6B5B95', '#88B04B', '#F7CAC9', '#92A8D1'], // Colores para el gráfico
+ data: Object.values(respuestasPorPregunta[pregunta]),
+ backgroundColor: ["#FF6F61", "#6B5B95", "#88B04B", "#F7CAC9", "#92A8D1"],
};
});
return {
- labels: ['1', '2', '3', '4', '5'], // Respuestas posibles
+ labels: ["1", "2", "3", "4", "5"], // Mantenemos las etiquetas originales (números)
datasets,
};
};
+ const estrellas = ["⭐", "⭐⭐", "⭐⭐⭐", "⭐⭐⭐⭐", "⭐⭐⭐⭐⭐"]; // Representación de estrellas
+
const data = procesarDatos();
return (
-
Resultados de Encuestas
+
Resultados de Encuestas Web
{resultados.length === 0 ? (
No se han completado encuestas aún.
) : (
{data.datasets.map((dataset, index) => (
-
{`Pregunta: ${dataset.label}`}
-
{/* Altura ajustada */}
+
{`${dataset.label}`}
+
{
+ const calificacion = estrellas[tooltipItem.dataIndex]; // Convertir índice a estrellas
+ const value = dataset.data[tooltipItem.dataIndex];
+ return `${calificacion}: Personas que han respondido: ${value}`;
+ },
+ },
+ },
title: {
display: true,
- text: "Distribución de Respuestas",
+ text: `Respuestas por calificación`,
},
},
}}
diff --git a/src/views/feedback/encuesta.jsx b/src/views/feedback/encuesta.jsx
index 9b712b6..8821b85 100644
--- a/src/views/feedback/encuesta.jsx
+++ b/src/views/feedback/encuesta.jsx
@@ -52,32 +52,36 @@ function EncuestaCitas() {
e.preventDefault();
if (Object.keys(respuestas).length !== preguntas.length) {
- alert("Por favor responde todas las preguntas antes de enviar.");
- return;
+ alert("Por favor responde todas las preguntas antes de enviar.");
+ return;
}
try {
- const response = await fetch("https://backopt-production.up.railway.app/Encuesta", {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ idUsuario: 1, respuestas }), // Ajusta idUsuario
- });
-
- if (response.ok) {
- setEnviada(true);
-
- // Redirigir al inicio después de 3 segundos
- setTimeout(() => {
- navigate("/ver-cita");
- }, 3000); // Retrasar la redirección 3 segundos
- } else {
- alert("Hubo un error al enviar tu feedback. Intenta nuevamente.");
- }
+ const response = await fetch("https://backopt-production.up.railway.app/Encuesta", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ idUsuario: 1, // Ajusta el ID del usuario
+ respuestas,
+ preguntas // Envía las preguntas al backend
+ }),
+ });
+
+ if (response.ok) {
+ setEnviada(true);
+
+ // Redirigir al inicio después de 3 segundos
+ setTimeout(() => {
+ navigate("/ver-cita");
+ }, 3000);
+ } else {
+ alert("Hubo un error al enviar tu feedback. Intenta nuevamente.");
+ }
} catch (error) {
- console.error("Error:", error);
- alert("Hubo un error al enviar tu feedback. Intenta nuevamente.");
+ console.error("Error:", error);
+ alert("Hubo un error al enviar tu feedback. Intenta nuevamente.");
}
- };
+};
if (cargando) {
return (