Skip to content

Commit

Permalink
Streamlined function code and changed graph output to cuumulative sum.
Browse files Browse the repository at this point in the history
  • Loading branch information
@weakbox
weakbox committed Jul 23, 2024
1 parent 54e9729 commit 10862f2
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 103 deletions.
1 change: 0 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ <h1><strong>Stick & Puck Fantasy Dashboard</strong></h1>
</header>

<button id="select-2024-button" class="year-button">2024</button>
<button id="select-2025-button" class="year-button">2025 (Broken)</button>

<div id="result" class="result-container"></div>
<div class="matchup-container">Please be patient while the data loads. It may take up to <strong>15</strong> seconds. I haven't figured out why this happens yet!</div>
Expand Down
199 changes: 97 additions & 102 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

const result = document.getElementById("result");
const select2024Button = document.getElementById("select-2024-button");
const select2025Button = document.getElementById("select-2025-button");

const scheduleCache = {};

Expand All @@ -17,14 +16,6 @@ select2024Button.addEventListener("click", (event) =>
fetchScheduleData(year);
});

select2025Button.year = 2025;
// select2025Button.addEventListener("click", (event) =>
// {
// const year = event.target.year;
// clearData();
// fetchScheduleData(year);
// });

// Default behavior:

const defaultYear = 2024;
Expand Down Expand Up @@ -80,55 +71,61 @@ function displayScheduleData(data)

function extractMatchupData(matchup, teams)
{
const { matchupPeriodId, winner } = matchup;

const awayTeam = matchup?.away ?? null;
const homeTeam = matchup['home'];
const { away: awayStats = null, home: homeStats, matchupPeriodId, playoffTierType, winner } = matchup;

// Check if match was actually a bye-week.
if (awayTeam == null || homeTeam == null)
// Return if matchup was a bye-week:
if (!awayStats)
{
return;
}

const awayTeamName = teams.find((team) => team['id'] == awayTeam['teamId'])['name'];
const homeTeamName = teams.find((team) => team['id'] == homeTeam['teamId'])['name'];

// TODO: Fix this repetitive code.
const awayTeamLogo = teams.find((team) => team['id'] == awayTeam['teamId'])['logo'];
const homeTeamLogo = teams.find((team) => team['id'] == homeTeam['teamId'])['logo'];
const { teamId: awayTeamId, totalPoints: awayTotalPoints } = awayStats;
const { teamId: homeTeamId, totalPoints: homeTotalPoints } = homeStats;

const awayTotalPoints = awayTeam['totalPoints'];
const homeTotalPoints = homeTeam['totalPoints'];
let { pointsByScoringPeriod: awayPointsByScoringPeriod } = awayStats;
let { pointsByScoringPeriod: homePointsByScoringPeriod } = homeStats;

let string = "";
awayPointsByScoringPeriod = pointsObjectToArray(populateMissingKeysInMatchupObject(awayPointsByScoringPeriod, matchupPeriodId, 2024));
homePointsByScoringPeriod = pointsObjectToArray(populateMissingKeysInMatchupObject(homePointsByScoringPeriod, matchupPeriodId, 2024));

const awayTeam = teams.find((team) => team['id'] === awayTeamId);
const homeTeam = teams.find((team) => team['id'] === homeTeamId);

const { abbrev: awayAbbrev, logo: awayLogo, name: awayName, } = awayTeam;
const { abbrev: homeAbbrev, logo: homeLogo, name: homeName, } = homeTeam;

// console.log("Debug:", awayName, awayPointsByScoringPeriod, winner, matchupPeriodId);

// Data extraction complete:

const matchupBadge = determineMatchupBadge(awayTotalPoints, homeTotalPoints);
const matchupPrefix = determineMatchupPrefix(matchup.playoffTierType);
const matchupPrefix = determineMatchupPrefix(playoffTierType);

let string = "";

switch (winner)
{
case ("AWAY"):
string += `
${matchupPrefix}
${matchupBadge}
<img src=${awayTeamLogo} class="inline-logo" />
<strong>${awayTeamName}</strong> (${awayTotalPoints})
<img src=${awayLogo} class="inline-logo" />
<strong>${awayName}</strong> (${awayTotalPoints})
defeated
<img src=${homeTeamLogo} class="inline-logo" />
<strong>${homeTeamName}</strong> (${homeTotalPoints})
<img src=${homeLogo} class="inline-logo" />
<strong>${homeName}</strong> (${homeTotalPoints})
`;
break;

case ("HOME"):
string += `
${matchupPrefix}
${matchupBadge}
<img src=${homeTeamLogo} class="inline-logo" />
<strong>${homeTeamName}</strong> (${homeTotalPoints})
<img src=${homeLogo} class="inline-logo" />
<strong>${homeName}</strong> (${homeTotalPoints})
defeated
<img src=${awayTeamLogo} class="inline-logo" />
<strong>${awayTeamName}</strong> (${awayTotalPoints})
<img src=${awayLogo} class="inline-logo" />
<strong>${awayName}</strong> (${awayTotalPoints})
`;
break;

Expand All @@ -137,11 +134,11 @@ function extractMatchupData(matchup, teams)
${matchupPrefix}
${matchupBadge}
The matchup between
<img src=${awayTeamLogo} class="inline-logo" />
<strong>${awayTeamName}</strong> (${awayTotalPoints})
<img src=${awayLogo} class="inline-logo" />
<strong>${awayName}</strong> (${awayTotalPoints})
and
<img src=${homeTeamLogo} class="inline-logo" />
<strong>${homeTeamName}</strong> (${homeTotalPoints})
<img src=${homeLogo} class="inline-logo" />
<strong>${homeName}</strong> (${homeTotalPoints})
ended in a tie!
`;
break;
Expand All @@ -150,11 +147,11 @@ function extractMatchupData(matchup, teams)
{
string += `
${matchupPrefix}
<img src=${awayTeamLogo} class="inline-logo" />
<strong>${awayTeamName}</strong> (${awayTotalPoints})
<img src=${awayLogo} class="inline-logo" />
<strong>${awayName}</strong> (${awayTotalPoints})
versus
<img src=${homeTeamLogo} class="inline-logo" />
<strong>${homeTeamName}</strong> (${homeTotalPoints})
<img src=${homeLogo} class="inline-logo" />
<strong>${homeName}</strong> (${homeTotalPoints})
`;
break;
}
Expand All @@ -165,7 +162,7 @@ function extractMatchupData(matchup, teams)

div = document.getElementById(`matchup-period-container-${matchupPeriodId}`);

if (isChampionshipMatch(matchup.playoffTierType))
if (isChampionshipMatch(playoffTierType))
{
div.innerHTML += `<div class="matchup-container championship-match">${string}</div>`;
}
Expand All @@ -174,75 +171,47 @@ function extractMatchupData(matchup, teams)
div.innerHTML += `<div class="matchup-container">${string}</div>`;
}

// **************** Chart test: ********************
// Plot chart:
const canvasID = `chart-${matchupPeriodId}-${awayName}-${homeName}`;

result.innerHTML += `
<div>
<canvas id="chart-${matchupPeriodId}-${awayTeamName}-${homeTeamName}" width="200" height="200"></canvas>
<canvas id="${canvasID}" width="200" height="200"></canvas>
</div>
`;

// TODO: Fix this code block when viewing data from 2025:
const awayPointsArr = awayTeam['pointsByScoringPeriod'];
const homePointsArr = homeTeam['pointsByScoringPeriod'];

populateMissingKeysInMatchupObject(awayPointsArr, matchupPeriodId, 2024);
populateMissingKeysInMatchupObject(homePointsArr, matchupPeriodId, 2024);

// Defer the chart creation to ensure the DOM is updated TODO: Understand this!
setTimeout(() => {
const context = document.getElementById(`chart-${matchupPeriodId}-${awayTeamName}-${homeTeamName}`);

new Chart(context, {
type: 'line',
data: {
datasets: [{
label: `${homeTeamName} Points`,
data: homePointsArr,
borderWidth: 3,
borderColor: getTeamColorById(homeTeam.teamId),
},
{
label: `${awayTeamName} Points`,
data: awayPointsArr,
borderWidth: 3,
borderColor: getTeamColorById(awayTeam.teamId),
}],

},
options: {
scales: {
y: {
// beginAtZero: true
}
}
},
});
}, 0);

}

function createNumberedLabels(length)
{
let labels = [];

for (let i = 0; i < length; i++)
// Chart has to be deffered to allow the DOM to update:
setTimeout(() =>
{
labels.push(i + 1);
}

return labels;
plotCumulativeLineChart(canvasID, awayName, homeName, awayPointsByScoringPeriod, homePointsByScoringPeriod);
}, 0);
}

function cumSum(array)
function plotCumulativeLineChart(canvasId, awayName, homeName, awayPoints, homePoints)
{
let cumSumArray = [array[0]];

for (let i = 1; i < array.length; i++)
{
cumSumArray.push(array[i] + cumSumArray[i - 1]);
}
const context = document.getElementById(`${canvasId}`).getContext('2d');

return cumSumArray;
// Dynamically create chart labels:
let labels = [];
labels = awayPoints.map((_, index) => labels[index] = `Day ${index + 1}`);

new Chart(context, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: `${awayName} Points`,
data: cumSum(awayPoints),
borderWidth: 3,
},
{
label: `${homeName} Points`,
data: cumSum(homePoints),
borderWidth: 3,
}],
},
options: {},
});
}

function clearData()
Expand Down Expand Up @@ -391,7 +360,7 @@ function populateMissingKeysInMatchupObject(pointsByScoringPeriodObject, matchup
if (!pointsByScoringPeriodObject.hasOwnProperty(i))
{
pointsByScoringPeriodObject[i] = 0;
console.log("Hit:", matchupPeriodId);
// console.log("Hit:", matchupPeriodId);
}
}

Expand All @@ -415,3 +384,29 @@ function getTeamColorById(teamId)
];
return colors[teamId];
}

function pointsObjectToArray(pointsObject)
{
let array = [];

Object.keys(pointsObject).map((key) => array.push(pointsObject[key]));

return array;
}

function cumSum(array)
{
let cumSumArray = [array[0]];

for (let i = 1; i < array.length; i++)
{
cumSumArray.push(array[i] + cumSumArray[i - 1]);
}

return cumSumArray;
}

function pointsArrayToObject()
{

}

0 comments on commit 10862f2

Please sign in to comment.