Trivia
-
diff --git a/public/index.js b/public/index.js
index ea53c0e..178bccc 100644
--- a/public/index.js
+++ b/public/index.js
@@ -1,10 +1,14 @@
window.onload = async (e) => {
- const res = await (await fetch("https://www.nporadio2.nl/api/charts/npo-radio-2-top-2000-van-2025-12-25", {})).json();
+ const res = await (await fetch("/ranking", {})).json();
window.ranking = res.positions;
const offset = +window.location.search.slice(1);
window.offset = offset;
+ const canvas = document.querySelector('#graph');
+ canvas.width = 0.35 * window.innerWidth;
+ canvas.height = 0.50 * window.innerHeight;
+
const now = Date.now() - offset * 1000;
const curr = window.ranking.find(it => it.broadcastUnixTime < now);
var current = curr.position.current;
@@ -30,8 +34,7 @@ function update(curr) {
diff.classList = curr.position.type;
document.querySelector("#title").innerText = curr.track.title;
- document.querySelector("#artist").innerText = curr.track.artist;
- document.querySelector("#position").innerText = `Nummer ${curr.position.current}`;
+ document.querySelector("#artist").innerText = `${curr.track.artist} (#${curr.position.current})`;
getGraph(curr.track.artist, curr.track.title);
queue(curr.position.current);
@@ -41,19 +44,68 @@ function update(curr) {
async function getGraph(artist, title) {
const res = await (await fetch(`/graph/${artist.replace("?", "")}/${title}`, {})).json();
- const width = 500;
- const labelSpace = 50;
- const barWidth = (width - labelSpace) / res.length;
- const height = 500;
const cv = document.querySelector("#graph");
const ctx = cv.getContext('2d');
+ const width = cv.width;
+ const labelSpace = 100;
+ const barWidth = (width - labelSpace) / res.length;
+ const height = cv.height;
+ const graphHeight = height - 60;
+
ctx.clearRect(0, 0, width, height);
- for (let i = 0; i <= 2000; i += 200) {
- const fraction = (i / 2000) * height;
+ // Dots
+ let minPos = 2001;
+ let maxPos = -1;
+ let minYear = undefined;
+ let maxYear = undefined;
+ for (let i = 0; i < res.length; i++) {
+ const position = res[i].position;
+ if (position != undefined) {
+ if (position < minPos) {
+ minPos = position;
+ minYear = i;
+ }
+ if (position > maxPos) {
+ maxPos = position;
+ maxYear = i;
+ }
+ }
+
+ const fraction = (position / 2000) * graphHeight;
+ ctx.beginPath();
+ ctx.fillStyle = "white";
+ ctx.arc(labelSpace + barWidth * i + 10, fraction, 2.5, 0, 2*Math.PI);
+ ctx.fill();
+ }
+
+ // Min and Max lines
+ for (let p of [minPos, maxPos]) {
+ const fraction = (p / 2000) * graphHeight;
+
+ ctx.beginPath();
+ ctx.strokeStyle = "#808080";
+ ctx.lineWidth = 1;
+ ctx.moveTo(labelSpace, fraction);
+ ctx.lineTo(width, fraction);
+ ctx.stroke();
+
+ ctx.font = "40px sans-serif";
+ ctx.fillStyle = "#808080";
+ ctx.fillText(p.toString(), 0, fraction);
+ }
+
+ // Y axis
+ for (let i = 200; i <= 2000; i += 200) {
+ const fraction = (i / 2000) * graphHeight;
+
+ const lineDist = 70;
+ if (Math.abs(i-minPos) <= lineDist || Math.abs(i-maxPos) <= lineDist) {
+ continue;
+ }
ctx.beginPath();
ctx.strokeStyle = "#808080";
@@ -62,27 +114,39 @@ async function getGraph(artist, title) {
ctx.lineTo(width, fraction);
ctx.stroke();
- ctx.font = "20px sans-serif";
+ ctx.font = "40px sans-serif";
ctx.fillStyle = "#808080";
ctx.fillText(i.toString(), 0, fraction);
}
- for (let i = 0; i < res.length; i++) {
- const position = res[i].position;
- const fraction = (position / 2000) * height;
+ // X axis
+ const startYear = 1999;
+ const endYear = 2025;
+ const years = endYear-startYear+1;
+ for (let i of [...new Set([res.findIndex(it => it.position != undefined), minYear, maxYear])]) {
+ const fraction = 10 + labelSpace + (i * (width - labelSpace)) / (years);
+ console.log(fraction)
+
+ let year = (100 + i - 1) % 100;
- // ctx.fillRect(barWidth * i, 0, barWidth, position / 10)
ctx.beginPath();
- ctx.fillStyle = "white";
- ctx.arc(labelSpace + barWidth * i + 10, fraction, 2.5, 0, 2*Math.PI);
- ctx.fill();
+ ctx.strokeStyle = "#808080";
+ ctx.lineWidth = 1;
+ ctx.moveTo(fraction, 0);
+ ctx.lineTo(fraction, graphHeight);
+ ctx.stroke();
+
+ ctx.font = "40px sans-serif";
+ ctx.fillStyle = "#808080";
+ ctx.fillText(year.toString(), fraction-3, height-10);
}
+ // Line plot
for (let i = 0; i < res.length-1; i++) {
const curr = res[i].position;
const next = res[i+1].position;
- const currFraction = (curr / 2000) * height;
- const nextFraction = (next / 2000) * height;
+ const currFraction = (curr / 2000) * graphHeight;
+ const nextFraction = (next / 2000) * graphHeight;
// ctx.fillRect(barWidth * i, 0, barWidth, position / 10)
ctx.beginPath();
@@ -102,14 +166,17 @@ function queue(currPos) {
queueEl.innerHTML = "";
for (const song of upcoming.reverse()) {
- const broadcastDT = new Date(song.broadcastUnixTime - offset * 1000);
+ const broadcastDT = new Date(song.broadcastUnixTime + offset * 1000);
queueEl.innerHTML += `
${song.track.title}
${song.track.artist}
-${broadcastDT.getHours().toString().padStart(2, "0")}:${broadcastDT.getMinutes().toString().padStart(2, "0")}
+ + ${song.position.label} + ${broadcastDT.getHours().toString().padStart(2, "0")}:${broadcastDT.getMinutes().toString().padStart(2, "0")} +