From 15c1ba0cc8c3fa772422d94ccbe7ce18ee1e905f Mon Sep 17 00:00:00 2001
From: Pablo Martin <pablo.martin.benito@estudiantes.uva.es>
Date: Tue, 10 Dec 2024 19:26:51 +0100
Subject: [PATCH] port -> cambios de apariencia
---
src/clasificacion/clasificacion.css | 5 +---
src/clasificacion/clasificacion.js | 18 +++++++++++--
src/equipo/equipo.js | 3 +--
src/ui/radarChart.js | 40 +++++++++++++++++++++++------
4 files changed, 50 insertions(+), 16 deletions(-)
diff --git a/src/clasificacion/clasificacion.css b/src/clasificacion/clasificacion.css
index 00eb79d..e1b5097 100644
--- a/src/clasificacion/clasificacion.css
+++ b/src/clasificacion/clasificacion.css
@@ -152,12 +152,9 @@ svg {
-.bar {
- fill: #00FF85;
-}
.bar:hover {
- fill: red;
+ opacity: 0.6;
}
diff --git a/src/clasificacion/clasificacion.js b/src/clasificacion/clasificacion.js
index 845aa0d..c95fc92 100644
--- a/src/clasificacion/clasificacion.js
+++ b/src/clasificacion/clasificacion.js
@@ -82,11 +82,25 @@ document.addEventListener('DOMContentLoaded', function() {
.attr("y", function(d) {return y(d.team); })
.attr("width", function(d) { return x(d.points); })
.attr("height", y.bandwidth())
+ .attr("fill", function(d){
+ if (d.notes.includes("Champions")){
+ return "#3562A6";
+ } else if (d.notes == "Relegated"){
+ return "red";
+ } else if(d.notes.includes("Europa Conference")){
+ return "#00be14";
+ }
+ else if(d.notes.includes("Europa League")){
+ return "#fd7000";
+ } else {
+ return "#00FF85";
+ }
+ })
.on("mouseover", function(event, d) {
tooltip.transition()
.duration(200)
- .style("opacity", .9);
- tooltip.html(d.team + "<br/>" + d.points + " puntos")
+ .style("opacity", 1);
+ tooltip.html(d.team + "<br/>" + d.points + " puntos" + "<br/><b>" + d.notes + "</b>")
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
diff --git a/src/equipo/equipo.js b/src/equipo/equipo.js
index 2563ec0..7e434b0 100644
--- a/src/equipo/equipo.js
+++ b/src/equipo/equipo.js
@@ -53,7 +53,6 @@ document.addEventListener('DOMContentLoaded', function() {
{"area": "drawn", "value": filteredData[0].drawn},
{"area": "gf", "value": filteredData[0].gf},
{"area": "ga", "value": filteredData[0].ga},
- {"area": "gf", "value": filteredData[0].gf},
{"area": "points", "value": filteredData[0].points}
]
];
@@ -62,7 +61,7 @@ document.addEventListener('DOMContentLoaded', function() {
w: 500,
h: 500,
maxValue: filteredData[0].maxValue,
- levels: 5,
+ levels: 4,
ExtraWidthX: 200
}
diff --git a/src/ui/radarChart.js b/src/ui/radarChart.js
index 2c5cc0d..381d0fc 100644
--- a/src/ui/radarChart.js
+++ b/src/ui/radarChart.js
@@ -26,7 +26,8 @@ var RadarChart = {
}
}
- cfg.maxValue = 110;
+ // Función para obtener los maximos en todas las columnas que serán ejes
+ calculateMaxValue().then(function(maxValue) {
var allAxis = (d[0].map(function(i, j){return i.area}));
var total = allAxis.length;
@@ -111,8 +112,8 @@ var RadarChart = {
g.selectAll(".nodes")
.data(y, function(j, i){
dataValues.push([
- cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)),
- cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total))
+ cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/maxValue[i])*cfg.factor*Math.sin(i*cfg.radians/total)),
+ cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/maxValue[i])*cfg.factor*Math.cos(i*cfg.radians/total))
]);
});
dataValues.push(dataValues[0]);
@@ -161,13 +162,13 @@ var RadarChart = {
.attr("alt", function(j){return Math.max(j.value, 0)})
.attr("cx", function(j, i){
dataValues.push([
- cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total)),
- cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total))
+ cfg.w/2*(1-(parseFloat(Math.max(j.value, 0))/maxValue[i])*cfg.factor*Math.sin(i*cfg.radians/total)),
+ cfg.h/2*(1-(parseFloat(Math.max(j.value, 0))/maxValue[i])*cfg.factor*Math.cos(i*cfg.radians/total))
]);
- return cfg.w/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.sin(i*cfg.radians/total));
+ return cfg.w/2*(1-(Math.max(j.value, 0)/maxValue[i])*cfg.factor*Math.sin(i*cfg.radians/total));
})
.attr("cy", function(j, i){
- return cfg.h/2*(1-(Math.max(j.value, 0)/cfg.maxValue)*cfg.factor*Math.cos(i*cfg.radians/total));
+ return cfg.h/2*(1-(Math.max(j.value, 0)/maxValue[i])*cfg.factor*Math.cos(i*cfg.radians/total));
})
.attr("data-id", function(j){return j.area})
.style("fill", "#fff")
@@ -187,5 +188,28 @@ var RadarChart = {
series++;
});
+ });
}
- };
\ No newline at end of file
+ };
+
+ function calculateMaxValue() {
+ return d3.csv("/data/premier-tables.csv").then(function(data) {
+ var maxValues = {
+ won: 0,
+ drawn: 0,
+ gf: 0,
+ ga: 0,
+ points: 0
+ };
+
+ data.forEach(function(row) {
+ maxValues.won = Math.max(maxValues.won, +row.won);
+ maxValues.drawn = Math.max(maxValues.drawn, +row.drawn);
+ maxValues.gf = Math.max(maxValues.gf, +row.gf);
+ maxValues.ga = Math.max(maxValues.ga, +row.ga);
+ maxValues.points = Math.max(maxValues.points, +row.points);
+ });
+
+ return [maxValues.won, maxValues.drawn, maxValues.gf, maxValues.ga, maxValues.points];
+ });
+}
\ No newline at end of file
--
GitLab