From cc61473cb8ee86070bb7ddd67c3c3c4640f759ff Mon Sep 17 00:00:00 2001
From: rodpena <rodrigo.pena22@estudiantes.uva.es>
Date: Sun, 1 Dec 2024 00:01:45 +0100
Subject: [PATCH] numero total de puntos y posicion final

---
 assets/estadisticasDatosTemporada.csv |  2 ++
 index.html                            |  2 +-
 script.js                             | 49 +++++++++++++++++++++++++++
 styles.css                            | 12 +++++--
 4 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 assets/estadisticasDatosTemporada.csv

diff --git a/assets/estadisticasDatosTemporada.csv b/assets/estadisticasDatosTemporada.csv
new file mode 100644
index 0000000..1b0d333
--- /dev/null
+++ b/assets/estadisticasDatosTemporada.csv
@@ -0,0 +1,2 @@
+Partidos jugados,Partidos ganados,Partidos perdidos,Clasificación,Número total de puntos,Tiros de dos encestados,Tiros de dos intentados,% de tiros de dos,Tiros de tres encestados,Tiros de tres intentados,% de tiros de tres,Tiros libres encestados,Tiros libres intentados,% de tiros libres
+24,15,9,5,1266,439,1081,41,68,292,23,170,390,44
diff --git a/index.html b/index.html
index 78a7126..7d26686 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
     <div id="contenedor-principal">
         <div id="resto-pantalla"></div>
         <div id="vertical-derecha">
-            <div id="div-superior" onclick="mostrarVisualizacion()">Datos Temporada</div>
+            <div id="div-superior">Datos Temporada</div>
             <div id="div-inferior">Rendimiento Jugadores</div>
         </div>
     </div>
diff --git a/script.js b/script.js
index 5c7f0fa..2c7cab2 100644
--- a/script.js
+++ b/script.js
@@ -318,10 +318,59 @@ function gestionarCheckboxes(data, maximos) {
     crearGraficoRadar("#lado-derecho", jugadoresSeleccionados, maximos);
 }
 
+function cargarDatosTemporada() {
+    const csvPath = "assets/estadisticasDatosTemporada.csv";
+
+    // Leer el archivo CSV
+    d3.csv(csvPath).then((data) => {
+        console.log("Datos cargados del CSV:", data);
+
+        // Ajustar las claves según las columnas del CSV
+        const numeroTotalPuntos = parseInt(data[0]["Número total de puntos"], 10);
+        const posicionFinal = data[0]["Clasificación"];
+
+        // Animar el sector "Número total de puntos"
+        d3.select("#resto-pantalla")
+            .selectAll(".sector")
+            .filter((d) => d.title === "Número total de puntos")
+            .select(".sector-content")
+            .html(`<div class="animated-points" style="font-size: 4em; font-weight: bold;">0</div>`);
+
+        animatePoints(".animated-points", numeroTotalPuntos, 2000); // Animar puntos en 1 segundo
+
+        // Actualizar el sector "Posición Final"
+        d3.select("#resto-pantalla")
+            .selectAll(".sector")
+            .filter((d) => d.title === "Posición Final")
+            .select(".sector-content")
+            .html(`<div style="text-align: center; font-size: 3em; font-weight: bold;">${posicionFinal}º</div>`);
+    }).catch((error) => {
+        console.error("Error cargando el archivo CSV:", error);
+    });
+}
+
+// Función para animar los puntos
+function animatePoints(selector, finalValue, duration) {
+    const element = document.querySelector(selector);
+    let startValue = 0;
+    const step = (timestamp, startTimestamp) => {
+        const elapsed = timestamp - startTimestamp;
+        const progress = Math.min(elapsed / duration, 1); // Progresar de 0 a 1
+        const currentValue = Math.floor(progress * finalValue);
+        element.textContent = currentValue;
+        if (progress < 1) {
+            requestAnimationFrame((newTimestamp) => step(newTimestamp, startTimestamp));
+        }
+    };
+    requestAnimationFrame((timestamp) => step(timestamp, timestamp));
+}
+
+
 // Eventos de clic en los botones de datos
 d3.select("#div-superior").on("click", () => {
     restaurarFormaOriginal();
     datosTemporada();
+    cargarDatosTemporada();
 });
 
 d3.select("#div-inferior").on("click", () => {
diff --git a/styles.css b/styles.css
index 4c4a32a..1899aad 100644
--- a/styles.css
+++ b/styles.css
@@ -103,9 +103,15 @@ body {
     }
     
     .sector-content {
-        font-size: 1em;
-        color: black;
-        margin-top: 10px; /* Espacio entre título y contenido */
+        font-size: 1.5em; /* Aumentar tamaño del contenido */
+        color: black; /* Color del texto */
+        display: flex; /* Activar Flexbox */
+        align-items: center; /* Centrar contenido verticalmente */
+        justify-content: center; /* Centrar contenido horizontalmente */
+        text-align: left; /* Centrar texto dentro del contenedor */
+        margin: 0; /* Eliminar márgenes que podrían desalinear */
+        height: 100%; /* Asegura que ocupe toda la altura del contenedor */
+        width: 100%; /* Asegura que ocupe todo el ancho del contenedor */
     }
     
 }
-- 
GitLab