diff options
| -rw-r--r-- | assets/css/main.css | 6 | ||||
| -rwxr-xr-x | assets/js/main.js | 72 | ||||
| -rwxr-xr-x | assets/php/getData.php | 2 | ||||
| -rwxr-xr-x | index.html | 8 |
4 files changed, 81 insertions, 7 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index a022802..360f254 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -6,6 +6,8 @@ html, body { padding: 8px; + color: #ffffff; + background-color: #141414; font-family: "Varela Round", sans-serif !important; text-rendering: optimizeLegibility !important; } @@ -26,7 +28,7 @@ canvas { .stats > div { padding: 8px; margin-top: 8px; - border: 1px solid black; + border: 1px solid white; } .heatMap { @@ -36,5 +38,5 @@ canvas { .heatMap td { width: 2vw; height: 2vw; - border: 1px solid black; + border: 1px solid white; } diff --git a/assets/js/main.js b/assets/js/main.js index 8a9dcf3..bef3677 100755 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -49,6 +49,8 @@ function analyze(data) { }); setSizes(); + drawTotalSpent(filtered); + drawTimeline(filtered); drawTopTitles(filtered); toggle.onclick = () => drawTopTitles(filtered); @@ -64,6 +66,55 @@ function setSizes() { } } +function drawTotalSpent(data) { + const totalHours = Object.keys(data).map(key => data[key].duration).reduce((a, b) => a + b); + document.querySelector("#totalSpent").innerHTML = ` + Days: ${Math.floor(totalHours / 24)}; + Hours: ${Math.floor(totalHours)}; + Minutes: ${Math.round(totalHours * 60)}; + Seconds: ${Math.round(totalHours * 60 * 60)}` +} + +function drawTimeline(data) { + const hours = Object.keys(data).map(key => data[key].dates.map(date => date.getHours())).flat(1); + const occurrence = new Array(24).fill(0); + + hours.forEach(hour => occurrence[hour] ? occurrence[hour]++ : occurrence[hour] = 1); + + const ctx = document.getElementById("hourChart"); + new Chart(ctx, { + type: "line", + data: { + labels: [...Array(24).keys()], + datasets: [{ + data: occurrence, + borderColor: "#e50914" + }] + }, + options: { + responsive: false, + maintainAspectRatio: true, + legend: { + display: false + }, + scales: { + xAxes: [{ + gridLines: { + color: "#424242" + } + }], + yAxes: [{ + gridLines: { + color: "#424242" + } + }] + } + } + }); + + console.log(occurrence); +} + let previous; function drawTopTitles(data) { @@ -79,6 +130,7 @@ function drawTopTitles(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), + borderColor: "#424242", backgroundColor: Array.from({length: Object.keys(data).length}, () => "#" + ((1 << 24) * Math.random() | 0).toString(16)) }] }, @@ -91,6 +143,26 @@ function drawTopTitles(data) { }, legend: { display: false + }, + scales: { + xAxes: [{ + gridLines: { + display: toggle.getAttribute("data-current") === "bar", + color: "#424242" + }, + ticks: { + display: toggle.getAttribute("data-current") === "bar", + } + }], + yAxes: [{ + gridLines: { + display: toggle.getAttribute("data-current") === "bar", + color: "#424242" + }, + ticks: { + display: toggle.getAttribute("data-current") === "bar", + } + }] } } }) diff --git a/assets/php/getData.php b/assets/php/getData.php index 9849752..4ae2580 100755 --- a/assets/php/getData.php +++ b/assets/php/getData.php @@ -5,7 +5,7 @@ * @copyright Marvin Borner 2018 */ -$debug = true; +$debug = false; $cookie = $_POST['cookie']; if ($debug) { @@ -28,15 +28,15 @@ <div class="stats" id="stats"> <h2>Netflix Statistics</h2> <div>Total watch time: <span id="totalSpent"></span></div> - <div class="statWrap"> + <div> <canvas id="hourChart"></canvas> </div> - <div class="statWrap"> + <div> <p>Most watched titles: </p> <button data-current="bar" id="toggle">Toggle</button> - <canvas height="500" id="topChart" width="1500"></canvas> + <canvas id="topChart"></canvas> </div> - <div class="statWrap"> + <div> <p>Overview of the year:</p> <div id="information"></div> <table class="heatMap" id="heatMap"></table> |