table = { const padding = 10; const tileSize = 300; const container = d3.select(html`

`); const fichas = container .style("display", "flex") .style("flex-wrap", "wrap") .style("align-items", "center"); const partidos = fichas .selectAll("div") .data(filtered) .join("div") .style("width", `${tileSize}px`) .style("display", "block") .style("font-family", "sans-serif") .style("background-color", "#FAFAFA") .style("border", "thin solid black") .style("border-radius", "10px") .style("margin-right", "auto") .style("margin-left", "auto") .style("margin-bottom", "1rem") .style( "padding", `${padding * 2}px ${padding}px ${padding}px ${padding}px` ); const partido = partidos .append("h4") .style("font-size", "1.05em") .style("text-align", "center") .style("padding-bottom", ".3rem") .html((d) => d.partido); partidos .append("p") .style("font-size", ".8em") .style("text-align", "center") .style("color", "#808080") .style("padding-bottom", ".5rem") .style("line-height", 1.2) .html((d) => `🗓 ${d.fecha}`); const prob = partidos .append("p") .style("font-size", ".8em") .style("color", "#232323") .style("padding-bottom", ".5rem") .style("line-height", 1.2) .html( (d) => `Victoria del ${d.local}: ${d.gLocal} ` ); prob.append("p").html( (d) => `Empate: ${d.empate} ` ); prob.append("p").html( (d) => `Victoria del ${d.visitante}: ${d.gVis} ` ); const resultado = partidos .append("p") .style("font-size", ".8em") .style("color", "#808080") .style("margin-bottom", 0) .style("line-height", 1.2) .style("white-space", "pre-wrap") .style("text-align", "center") .style("font-weight", "bold") .html((d) => `

Resultado: ${d.resultado}

`) .filter(function (d) { return d.resultado === "-"; }) .html((d) => `

⏰ Quedan: ${formatInterval(interval(d.date, now))}

`) .filter(function (d) { return formatInterval(interval(d.date, now)).length < 1; }) .html((d) => `

Día de partido 🏟

`) .style("font-weight", "normal"); return container.node(); }