Skip to content

Commit

Permalink
Merge pull request #97 from IrvingYHM/prueba
Browse files Browse the repository at this point in the history
cambios
  • Loading branch information
jul1oCesar0 authored Nov 23, 2024
2 parents 5c63f09 + a1b074a commit c8ed6af
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 63 deletions.
2 changes: 1 addition & 1 deletion dev-dist/sw.js
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ define(['./workbox-fde070c5'], (function (workbox) { 'use strict';
*/
workbox.precacheAndRoute([{
"url": "/offline.html",
"revision": "0.tp82avot2f"
"revision": "0.qs3c8mesmbo"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/offline.html"), {
Expand Down
Binary file added src/img/3d.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
110 changes: 48 additions & 62 deletions src/views/Admin/reportes.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { useState, useEffect } from "react";
import { Bar } from "react-chartjs-2"; // Importamos el componente de gráfico de barras
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';
import { Pie } from "react-chartjs-2"; // Importamos el componente de gráfico de pastel
import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale } from 'chart.js';

// Registramos los componentes necesarios de Chart.js para el gráfico de barras
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
// Registramos los componentes necesarios de Chart.js para el gráfico de pastel
ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale);

function ResultadosEncuestas() {
const [resultados, setResultados] = useState([]);
Expand Down Expand Up @@ -48,39 +48,40 @@ function ResultadosEncuestas() {

// Procesar las respuestas para construir los datos de la gráfica
const procesarDatos = () => {
const respuestasPorCalificacion = { "1": 0, "2": 0, "3": 0, "4": 0, "5": 0 };
const respuestasPorPregunta = {};

// Contamos las respuestas por calificación
// Contamos las respuestas por pregunta
resultados.forEach((encuesta) => {
const { respuestas } = encuesta;
const { pregunta, respuestas } = encuesta;

// Contamos las respuestas de cada calificación
// 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]) => {
respuestasPorCalificacion[calificacion] += cantidad; // Incrementamos el contador
respuestasPorPregunta[pregunta][calificacion] += cantidad; // Incrementamos el contador
});
});

// Asignamos colores diferentes a cada calificación
const colores = ["#FF6F61", "#FF9F40", "#FFCD44", "#4BC0C0", "#36A2EB"]; // Colores para las barras
// Creamos los datos para el gráfico de pastel
const labels = Object.keys(respuestasPorPregunta); // Las preguntas
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
};
});

// Creamos los datos para el gráfico de barras
return {
labels: ["1", "2", "3", "4", "5"], // Las respuestas posibles
datasets: [
{
label: "Distribución de Respuestas",
data: Object.values(respuestasPorCalificacion), // Datos de cada calificación
backgroundColor: colores, // Asignamos los colores diferentes a cada barra
borderColor: '#D66F58', // Color de los bordes de las barras
borderWidth: 1,
},
],
labels: ['1', '2', '3', '4', '5'], // Respuestas posibles
datasets,
};
};

// Contamos el total de encuestas
const totalEncuestas = resultados.reduce((total, encuesta) => total + Object.values(encuesta.respuestas).reduce((sum, cantidad) => sum + cantidad, 0), 0);

const data = procesarDatos();

return (
Expand All @@ -89,44 +90,29 @@ function ResultadosEncuestas() {
{resultados.length === 0 ? (
<p>No se han completado encuestas aún.</p>
) : (
<div>
{/* Mostrar el total de encuestas */}
<p className="text-xl mb-4">Total de Encuestas Completadas: {totalEncuestas}</p>

<Bar
data={data}
options={{
responsive: true,
plugins: {
title: {
display: true,
text: "Distribución Total de Respuestas de sitio web", // Título del gráfico
},
tooltip: {
callbacks: {
label: function (context) {
const label = context.dataset.label || '';
return `${label}: ${context.raw}`; // Mostrar valor de cada barra en el tooltip
<div className="flex flex-wrap gap-4 justify-center">
{data.datasets.map((dataset, index) => (
<div key={index} className="flex-1 max-w-sm p-6 bg-white rounded-lg shadow">
<h3 className="text-xl font-semibold mb-2">{`Pregunta: ${dataset.label}`}</h3>
<div className="w-full h-[400px]"> {/* Altura ajustada */}
<Pie
data={{
labels: data.labels, // Respuestas posibles
datasets: [dataset],
}}
options={{
responsive: true,
plugins: {
title: {
display: true,
text: "Distribución de Respuestas",
},
},
},
},
},
scales: {
x: {
title: {
display: true,
text: 'Calificación', // Título de la escala X
},
},
y: {
title: {
display: true,
text: 'Cantidad de Respuestas', // Título de la escala Y
},
},
},
}}
/>
}}
/>
</div>
</div>
))}
</div>
)}
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/views/Lente/DetalleProducto.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { useNavigate } from "react-router-dom"; // Importa useHistory para manejar la redirección
import Barra from "../../components/Navegacion/barra";
import lente from "../../img/3d.jpg"


function parseJwt(token) {
Expand Down Expand Up @@ -409,8 +410,14 @@ const DetalleProducto = () => {
</button>
</div>
</div>


</div>
<div className="flex justify-center items-center h-screen bg-gray-100">
<img src={lente} alt="Código QR" className="w-96 h-96 object-contain shadow-lg rounded-md" />
</div>
</div>

)}


Expand Down
6 changes: 6 additions & 0 deletions src/views/inicio.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import imagen from "../img/Venta.png";
import imagen2 from "../img/lentes2.png";
import Scrool from '../components/scroll';
import Barra from "../components/Navegacion/barra";
import lente from "../img/3d.jpg";



function App() {
Expand Down Expand Up @@ -203,8 +205,12 @@ function App() {
</button>
</div>
</div>

</div>
<br />
<div>
<img className="flex justify-center" src={lente} alt="" />
</div>
</div>

</div>
Expand Down

0 comments on commit c8ed6af

Please sign in to comment.