diff --git a/src/clasificacion/clasificacion.css b/src/clasificacion/clasificacion.css index 3b9362d0d37a02ae752b9ea73d17173315075a1a..40b50ee966ae39ea853b19de82f1f70dd2e7ec73 100644 --- a/src/clasificacion/clasificacion.css +++ b/src/clasificacion/clasificacion.css @@ -2,6 +2,7 @@ body { margin: 0; padding: 0; height: 1000px; + width: 100%; display: flex; flex-direction: column; } @@ -32,7 +33,7 @@ body { text-align: center; background-color: #38003C; margin-bottom: 0px; - height: 20%; + width: 100%; } h1 { @@ -47,7 +48,7 @@ h4 { color: #00FF85; font-size: 25px; margin-top: 10px; - padding-bottom: 30px; + } h3 { @@ -100,7 +101,6 @@ h3 { } .table { - width: 100%; height: 100%; border-collapse: collapse; margin-top: 20px; @@ -114,9 +114,10 @@ h3 { display: flex; justify-content: space-between; margin-top: 25px; - margin-left: 200px; - margin-right: 200px; + margin-left: 150px; border-radius: 30px; + height: 15%; + width: 80%; } @@ -128,6 +129,7 @@ h3 { #season { margin-right: 50px; + margin-left: 50px; margin-top: 60px; font-family: "PremierSans", Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 35px; @@ -151,6 +153,7 @@ h3 { align-items: center; height: 100%; margin-top: 20px; + width: 80%; } svg { @@ -171,6 +174,7 @@ svg { display: flex; justify-content: center; align-items: center; + width: 100%; } diff --git a/src/equipo/equipo.css b/src/equipo/equipo.css index 58a1b8f5ae805adf07995fdee6b6d032f02374aa..88659cf15d572e60ef7872a14e1b756c3beffa2c 100644 --- a/src/equipo/equipo.css +++ b/src/equipo/equipo.css @@ -32,7 +32,7 @@ body { text-align: center; background-color: #38003C; margin-bottom: 0px; - height: 20%; + width: 100%; } h1 { @@ -47,7 +47,6 @@ h4 { color: #00FF85; font-size: 25px; margin-top: 10px; - padding-bottom: 30px; } h3 { @@ -241,7 +240,7 @@ option { margin-left: 100px; margin-right: 100px; - + width: 85%; } #teamTitle { @@ -274,6 +273,7 @@ option { justify-content: center; align-items: center; margin: 0 auto; + margin-top: 70px; } @@ -307,3 +307,7 @@ option { font-weight: 500; color: #081F2C; } + +#svg{ + margin-left: 100px; +} \ No newline at end of file diff --git a/src/equipo/equipo.html b/src/equipo/equipo.html index ef3e9e9895ec1ab4cedb31613a0258dd68b80303..c868779e286cb14d28734d66dbe36e08ae210950 100644 --- a/src/equipo/equipo.html +++ b/src/equipo/equipo.html @@ -34,7 +34,8 @@ <h2 id="subHeaderTitle">stats Equipo</h2> <div class="inputs"> <label for="seasonInput">Temporada (Año de fin)</label> - <input type="text" id="seasonInput" name="season" value="2024" oninput="onChangeSeason()"> + <input type="number" id="seasonInput" name="season" value="2024" min="1993" max="2024" oninput="onChangeSeason()"> + <div id="error-message" style="color: red; display: none; margin-top: 100px; position: absolute; font-family: aptos";">La temporada debe ser mayor o igual a 1993.</div> </div> <div class="inputs"> <label for="teamSelect">Equipo</label> diff --git a/src/equipo/equipo.js b/src/equipo/equipo.js index 7ed158ff11e1073799f878acab066f23e5370ed0..401f7fa5923282e0c6fb963f3f794a8253babf66 100644 --- a/src/equipo/equipo.js +++ b/src/equipo/equipo.js @@ -11,6 +11,14 @@ document.addEventListener('DOMContentLoaded', function() { // Actualiza el select de equipos function onChangeSeason() { var selectedSeason = document.getElementById("seasonInput").value; + var errorMessage = document.getElementById("error-message"); + + if (selectedSeason < 1993 || selectedSeason > 2024) { + errorMessage.style.display = "block"; + return; // Salir de la función si hay un error + } else { + errorMessage.style.display = "none"; + } d3.csv("/data/premier-tables.csv").then(function(data) { data.forEach(function(d) { @@ -58,8 +66,8 @@ document.addEventListener('DOMContentLoaded', function() { ]; var config = { - w: 500, - h: 500, + w: 450, + h: 450, maxValue: filteredData[0].maxValue, levels: 4, ExtraWidthX: 200 diff --git a/src/ui/radarChart.js b/src/ui/radarChart.js index 381d0fcb939241f8d6597d57cd57ffa2c64c0322..bb3d0af5e08446a7b5861cd8ea7086d3278e2048 100644 --- a/src/ui/radarChart.js +++ b/src/ui/radarChart.js @@ -41,6 +41,15 @@ var RadarChart = { .append("g") .attr("transform", "translate(" + cfg.TranslateX + "," + cfg.TranslateY + ")"); + g.append("text") + .attr("x", (cfg.w / 2)) + .attr("y", -cfg.TranslateY / 2-30) + .attr("text-anchor", "middle") + .style("font-size", "16px") + .style("font-family", "aptos") + .style("font-weight", "bold") + .text("Rendimiento en temporada"); + var tooltip; //Circular segments