diff --git a/script.js b/script.js
index 13115d8068deded83f104fe243c7e76a120d9582..3341fdab0362510ff6b855308b720ba94ffc977e 100644
--- a/script.js
+++ b/script.js
@@ -243,7 +243,7 @@ function cargarJugadoresDesdeArchivo() {
"#FF9333" // Naranja pastel
];
-
+
// Asignar un color único a cada jugador
data.forEach((d, i) => {
@@ -366,24 +366,180 @@ function animatePoints(selector, finalValue, duration) {
requestAnimationFrame((timestamp) => step(timestamp, timestamp));
}
+
+function resaltarBotonActivo(selector) {
+ d3.selectAll("#div-superior, #div-inferior").style("background-color", "#B3E5FC").style("color", "#333");
+ d3.select(selector).style("background-color", "#0288D1").style("color", "#FFF").style("font-weight", "bold");
+}
+
+function agregarGraficoAnillo(containerSelector, porcentaje, colores, textoInterno) {
+ const container = d3.select(containerSelector);
+
+ // Asegurarse de que existe un subcontenedor exclusivo para el gráfico
+ let graficoContainer = container.select(".grafico-anillo");
+ if (graficoContainer.empty()) {
+ graficoContainer = container.append("div").attr("class", "grafico-anillo");
+ }
+
+ graficoContainer.selectAll("*").remove(); // Limpiar solo el gráfico, no otros elementos
+
+ const width = 350; // Tamaño reducido para adaptarse al layout
+ const height = 350;
+ const radius = Math.min(width, height) / 2;
+
+ const svg = graficoContainer
+ .append("svg")
+ .attr("width", width)
+ .attr("height", height)
+ .append("g")
+ .attr("transform", `translate(${width / 2}, ${height / 2})`);
+
+ // Configuración del arco
+ const arc = d3.arc()
+ .innerRadius(radius * 0.7) // Radio interno para crear el "anillo"
+ .outerRadius(radius) // Radio externo del anillo
+ .startAngle(0)
+ .endAngle((2 * Math.PI) * (porcentaje / 100)); // Proporcional al porcentaje
+
+ // Dibuja la sección "rellena"
+ svg.append("path")
+ .attr("d", arc)
+ .style("fill", colores[0]); // Color principal
+
+ // Dibuja la sección "restante"
+ svg.append("path")
+ .attr("d", d3.arc()
+ .innerRadius(radius * 0.7)
+ .outerRadius(radius)
+ .startAngle((2 * Math.PI) * (porcentaje / 100))
+ .endAngle(2 * Math.PI))
+ .style("fill", colores[1]); // Color secundario
+
+ // Agregar texto en el centro
+ svg.append("text")
+ .attr("text-anchor", "middle")
+ .attr("dy", ".35em")
+ .style("font-size", "0.8em") // Texto más pequeño para adaptarse
+ .style("font-weight", "bold")
+ .text(textoInterno);
+}
+
+
+
+function cargarGraficosTemporada() {
+ 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 victorias = parseInt(data[0]["Partidos ganados"], 10);
+ const derrotas = parseInt(data[0]["Partidos perdidos"], 10);
+ const porcentajeTiroDos = parseFloat(data[0]["% de tiros de dos"]);
+ const porcentajeTiroTres = parseFloat(data[0]["% de tiros de tres"]);
+ const porcentajeTiroLibres = parseFloat(data[0]["% de tiros libres"]);
+
+ const totalPartidos = victorias + derrotas;
+ const porcentajeVictorias = (victorias / totalPartidos) * 100;
+
+ // Actualizar sector "Victorias/Derrotas" con gráfico de anillo
+ const sectorVictorias = d3.select("#resto-pantalla .sector:nth-child(1) .sector-content");
+ agregarGraficoAnillo(
+ sectorVictorias.node(),
+ porcentajeVictorias,
+ ["#0288D1", "#B3E5FC"], // Colores
+ `${porcentajeVictorias.toFixed(1)}%`
+ );
+
+ // Añadir texto informativo al lado del gráfico
+ sectorVictorias.selectAll(".texto-informativo").remove();
+ sectorVictorias.append("div")
+ .attr("class", "texto-informativo")
+ .style("margin", "40px")
+ .style("text-align", "left")
+ .style("font-size", "0.6em")
+ .html(`
+ - Partidos jugados: ${totalPartidos} <br><br>
+ - Partidos ganados: ${victorias} <br><br>
+ - Partidos perdidos: ${derrotas}
+ `);
+
+ // Actualizar sector "Porcentaje de tiro" con gráfico de anillo y checkboxes
+ const sectorPorcentajeTiro = d3.select("#resto-pantalla .sector:nth-child(4) .sector-content");
+
+ // Contenedor para el gráfico inicial
+ agregarGraficoAnillo(
+ sectorPorcentajeTiro.node(),
+ porcentajeTiroDos,
+ ["#0288D1", "#B3E5FC"],
+ `${porcentajeTiroDos.toFixed(1)}%`
+ );
+
+ // Contenedor para checkboxes
+ let checkboxesContainer = sectorPorcentajeTiro.select(".checkboxes-tiro");
+ if (checkboxesContainer.empty()) {
+ checkboxesContainer = sectorPorcentajeTiro.append("div")
+ .attr("class", "checkboxes-tiro")
+ .style("margin", "40px")
+ .style("display", "flex")
+ .style("flex-direction", "column")
+ .style("align-items", "flex-start")
+ .style("font-size", "0.6em");
+ }
+
+ checkboxesContainer.selectAll("*").remove(); // Limpiar checkboxes previos
+
+ ["% de tiros de dos", "% de tiros de tres", "% de tiros libres"].forEach((label, index) => {
+ const checkbox = checkboxesContainer.append("label")
+ .style("display", "flex")
+ .style("align-items", "center")
+ .style("margin-bottom", "10px");
+
+ const input = checkbox.append("input")
+ .attr("type", "radio")
+ .attr("name", "tipo-tiro")
+ .attr("value", index === 0 ? porcentajeTiroDos : index === 1 ? porcentajeTiroTres : porcentajeTiroLibres)
+ .style("margin-right", "10px")
+ .on("change", function () {
+ const selectedValue = parseFloat(this.value);
+ agregarGraficoAnillo(
+ sectorPorcentajeTiro.node(),
+ selectedValue,
+ ["#0288D1", "#B3E5FC"],
+ `${selectedValue.toFixed(1)}%`
+ );
+ });
+
+ // Marcar el checkbox de "% de tiros de dos" como seleccionado por defecto
+ if (index === 0) {
+ input.attr("checked", true);
+ }
+
+ checkbox.append("span").text(label);
+ });
+ }).catch((error) => {
+ console.error("Error cargando el archivo CSV:", error);
+ });
+}
+
+
+
// Ejecutar automáticamente la función de datos de temporada al cargar la página
document.addEventListener("DOMContentLoaded", () => {
restaurarFormaOriginal();
datosTemporada();
cargarDatosTemporada();
+ cargarGraficosTemporada();
resaltarBotonActivo("#div-superior");
});
-function resaltarBotonActivo(selector) {
- d3.selectAll("#div-superior, #div-inferior").style("background-color", "#B3E5FC").style("color", "#333");
- d3.select(selector).style("background-color", "#0288D1").style("color", "#FFF").style("font-weight", "bold");
-}
-
// Eventos de clic en los botones de datos
d3.select("#div-superior").on("click", () => {
restaurarFormaOriginal();
datosTemporada();
cargarDatosTemporada();
+ cargarGraficosTemporada();
resaltarBotonActivo("#div-superior");
});
diff --git a/styles.css b/styles.css
index 0f40d62d0ce1b02134680a3d560adc5c408d1227..4211d5e62dfb2eeefd01d689197b9224513bd6fd 100644
--- a/styles.css
+++ b/styles.css
@@ -173,12 +173,6 @@ body {
text-align: center;
display: flex;
align-items: center;
- justify-content: center;
- transition: background-color 0.3s, color 0.3s;
+ justify-content: center;
}
-/* Efecto hover */
-#div-superior:hover, #div-inferior:hover {
- background-color: #B3E5FC;
- color: #0288D1;
-}
\ No newline at end of file