seasonLength = 22
function magicNumber(teamA, teamB) {
// return nothing if both arguments are the same team
if (teamA == teamB) {
return "";
}
// calculate possible points remaining and magic number
let pointsRemainingA =
(seasonLength - teamA.wins - teamA.losses - teamA.draws) * 3;
let pointsRemainingB =
(seasonLength - teamB.wins - teamB.losses - teamB.draws) * 3;
let num = teamB.points - teamA.points + pointsRemainingB + 1;
// if number is unachievable, replace with a hyphen
if (num > pointsRemainingA + pointsRemainingB) {
return "-";
}
if (num <= 0) {
return "-";
}
// otherwise, return the number
return num;
}
async function getSeasonsData(urlSeasons) {
try {
const seasonsResponse = await axios.get(urlSeasons);
const seasonsData = await Promise.all(
seasonsResponse.data.items.map(async (season) => {
const seasonData = await axios.get(season.$ref.replace("http://", "https://"));
return seasonData.data;
})
);
return seasonsData;
} catch (error) {
console.error("Error fetching seasons data:", error);
throw error; // Rethrow to allow error handling by the caller
}
}
seasons = await getSeasonsData(urlSeasons)
async function getTeamsData(url, selectedSeason) {
const urlTeams = `${url}${selectedSeason}/teams/`;
try {
const teamsResponse = await axios.get(urlTeams);
const teamsData = await Promise.all(
teamsResponse.data.items.map(async (team) => {
const teamData = await axios.get(
team.$ref.replace("http://", "https://")
);
return teamData.data;
})
);
return teamsData;
} catch (error) {
console.error("Error fetching teams data:", error);
throw error;
}
}
teams = await getTeamsData(urlTeams, selectedSeason)
teamTable = htl.html`
<table>
<tbody>
${teams.map(
(row, i) =>
html`<tr><td><img src='${
row.logos[0].href
}' height=50></td><td style='vertical-align:middle'><a href='${
row.links.find((e) => e.text === "Stats").href
}' target='_blank'>${row.displayName}</a></td></tr>`
)}
</tbody>
</table>`
async function getTeamStatistics(teams) {
try {
const teamsWithStats = await Promise.all(
teams.map(async (team) => {
const statsResponse = await axios.get(
team.statistics.$ref.replace("http://", "https://")
);
const generalStats = statsResponse.data.splits.categories.find(
(cat) => cat.name === "general"
).stats;
team.stats = generalStats;
team.wins = generalStats.find((stat) => stat.name === "wins").value;
team.losses = generalStats.find((stat) => stat.name === "losses").value;
team.draws = generalStats.find((stat) => stat.name === "draws").value;
team.points =
3 * generalStats.find((stat) => stat.name === "wins").value +
generalStats.find((stat) => stat.name === "draws").value;
team.recordString = team.wins + "-" + team.draws + "-" + team.losses;
return team;
})
);
return teamsWithStats.sort((a, b) => b.points - a.points);
} catch (error) {
console.error("Error fetching team statistics:", error);
throw error;
}
}
teamData = await getTeamStatistics(teams)
htmlTable = htl.html`
<table>
<tbody>
<tr>
<th></th><th>Team Name</th><th>Record (W-D-L)</th><th>Points</th>
</tr>
${teamData.map((row, i) => {
return html`<tr><td><img src='${row.logos[0].href}' height=50></td>
<td style='vertical-align:middle'><a href='${row.links[1].href}' target='_blank'>${row.displayName}</a></td>
<td style='vertical-align:middle'>${row.recordString}</td>
<td style='vertical-align:middle'>${row.points}</td>
</tr>`;
})}
</tbody>
</table>`
teamDataFlat = teamData.map((d) => {
let dflat = new Object(d);
dflat.nameLink = d.name.link(d.links[1].href);
return dflat;
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
