1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
/**
* Client-side Script of the Netflix Stats Generator
* @author Marvin Borner
* @copyright Marvin Borner 2019
*/
const cookie = document.querySelector("#cookie");
const cookieWrap = document.querySelector("#cookie_wrap");
const loading = document.querySelector("#loading");
const stats = document.querySelector("#stats");
const toggle = document.querySelector("#toggle");
cookie.addEventListener("keyup", e => {
if (e.key === "Enter") {
const request = new XMLHttpRequest();
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
loading.style.display = "none";
stats.style.display = "block";
analyze(request.responseText);
} else if (request.readyState === 4 && request.status !== 200)
alert("Cookie is not valid!")
};
request.open("POST", "assets/php/getData.php", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send("cookie=" + cookie.value);
loading.style.display = "block";
cookieWrap.style.display = "none";
}
});
function analyze(data) {
const filtered = {};
data = JSON.parse(data).flat(1);
// Push all titles with empty fields
data.forEach(node => filtered[node["seriesTitle"] ? node["seriesTitle"] : node["videoTitle"]] = {
duration: 0,
dates: [],
count: 0
});
// Push duration, date and count
data.forEach(node => {
const obj = filtered[node["seriesTitle"] ? node["seriesTitle"] : node["videoTitle"]];
obj.duration += node["duration"] / 60 / 60; // hours
obj.dates.push(new Date(node["date"]));
obj.count++;
});
setSizes();
drawTopTitles(filtered);
toggle.onclick = () => drawTopTitles(filtered);
console.log(filtered);
}
function setSizes() {
const elements = document.getElementsByTagName("canvas");
for (const elem of elements) {
elem.setAttribute("width", document.querySelector(".stats div").offsetWidth);
elem.setAttribute("height", window.innerHeight / 2 + 200);
}
}
let previous;
function drawTopTitles(data) {
// Toggle layout
toggle.setAttribute("data-current", toggle.getAttribute("data-current") === "bar" ? "pie" : "bar");
if (previous)
previous.destroy();
const ctx = document.getElementById("topChart");
previous = new Chart(ctx, {
type: toggle.getAttribute("data-current"),
data: {
labels: Object.keys(data).sort((a, b) => data[b].duration - data[a].duration),
datasets: [{
data: Object.keys(data).map(key => +data[key].duration.toFixed(2)).sort((a, b) => b - a),
backgroundColor: Array.from({length: Object.keys(data).length}, () => "#" + ((1 << 24) * Math.random() | 0).toString(16))
}]
},
options: {
responsive: false,
maintainAspectRatio: true,
animation: {
animateScale: true,
animateRotate: true
},
legend: {
display: false
}
}
})
}
|
