Started some kind of rewrite

1 files changed, 41 insertions, 161 deletions

diff --git a/assets/js/main.js b/assets/js/main.js
index 76b9544..8a9dcf3 100755
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -8,16 +8,16 @@ const cookie = document.querySelector("#cookie");
 const cookieWrap = document.querySelector("#cookie_wrap");
 const loading = document.querySelector("#loading");
 const stats = document.querySelector("#stats");
-const heatMap = document.querySelector("#heatMap");
+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) {
-        analyze(request.responseText);
         loading.style.display = "none";
         stats.style.display = "block";
+        analyze(request.responseText);
       } else if (request.readyState === 4 && request.status !== 200)
         alert("Cookie is not valid!")
     };
@@ -30,139 +30,61 @@ cookie.addEventListener("keyup", e => {
 });
 
 function analyze(data) {
+  const filtered = {};
   data = JSON.parse(data).flat(1);
-  let totalWatchedSeconds = 0;
-  const hourObject = Array(24).fill(0);
-  const watchCountObject = {};
-
-  data.forEach(element => {
-    let title;
-    const seriesTitle = element.seriesTitle;
-    const movieTitle = element.title;
-    const watchDate = element.date;
-    const duration = element.duration;
 
-    // Generate watch time array (eg. 12am)
-    hourObject[(new Date(watchDate)).getHours()]++;
-
-    if (seriesTitle !== undefined) title = seriesTitle;
-    else title = movieTitle;
+  // Push all titles with empty fields
+  data.forEach(node => filtered[node["seriesTitle"] ? node["seriesTitle"] : node["videoTitle"]] = {
+    duration: 0,
+    dates: [],
+    count: 0
+  });
 
-    if (watchCountObject[title] !== undefined) {
-      watchCountObject[title].date.push(new Date(watchDate));
-      watchCountObject[title].watchTimeInSeconds += duration;
-      watchCountObject[title].watchTime = secondsToHours(watchCountObject[title].watchTimeInSeconds);
-      watchCountObject[title].count++;
-      totalWatchedSeconds += duration
-    } else {
-      watchCountObject[title] = {
-        date: [new Date(watchDate)],
-        watchTime: secondsToHours(duration),
-        watchTimeInSeconds: duration,
-        count: 1
-      };
-      totalWatchedSeconds += duration;
-    }
+  // 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++;
   });
 
-  renderTotalSpent(totalWatchedSeconds);
-  renderHourChart(hourObject);
-  renderTopChart(watchCountObject);
-  renderHeatMap(watchCountObject);
-  console.log(watchCountObject);
-}
+  setSizes();
+  drawTopTitles(filtered);
 
-function renderTotalSpent(total) {
-  document.querySelector("#totalSpent").innerHTML = `
-  Days: ${Math.floor(total / 60 / 60 / 24)}, 
-  Hours: ${Math.floor(total / 60 / 60)}, 
-  Minutes: ${Math.round(total / 60)}, 
-  Seconds: ${total}`
-}
+  toggle.onclick = () => drawTopTitles(filtered);
 
-function renderHourChart(hourObject) {
-  const element = document
-    .getElementById("hourChart")
-    .getContext("2d");
+  console.log(filtered);
+}
 
-  new Chart(element, {
-    type: "line",
-    data: {
-      labels: [
-        "12am",
-        "1am",
-        "2am",
-        "3am",
-        "4am",
-        "5am",
-        "6am",
-        "7am",
-        "8am",
-        "9am",
-        "10am",
-        "11am",
-        "12pm",
-        "1pm",
-        "2pm",
-        "3pm",
-        "4pm",
-        "5pm",
-        "6pm",
-        "7pm",
-        "8pm",
-        "9pm",
-        "10pm",
-        "11pm"
-      ],
-      datasets: [{
-        label: "Average watch times",
-        borderColor: "rgb(255, 99, 132)",
-        cubicInterpolationMode: "monotone",
-        pointRadius: 0,
-        pointHitRadius: 15,
-        data: hourObject
-      }]
-    },
-    options: {
-      scales: {
-        yAxes: [{
-          ticks: {
-            display: false
-          }
-        }]
-      },
-      legend: {
-        display: false
-      }
-    }
-  });
+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);
+  }
 }
 
-function renderTopChart(object) {
-  const sorted = Object.keys(object).sort((a, b) => {
-    return object[b].watchTimeInSeconds - object[a].watchTimeInSeconds
-  });
-  const data = sorted.map(element => object[element].watchTimeInSeconds);
-  const labels = sorted.map(element => {
-    return element + " (" + Math.floor(object[element].watchTimeInSeconds / 60 / 60) + " hours)"
-  });
-  const colorArray = Array.from({length: data.length}, () =>
-    "#" + ((1 << 24) * Math.random() | 0).toString(16));
+let previous;
 
-  const element = document
-    .getElementById("topChart")
-    .getContext("2d");
+function drawTopTitles(data) {
+  // Toggle layout
+  toggle.setAttribute("data-current", toggle.getAttribute("data-current") === "bar" ? "pie" : "bar");
+  if (previous)
+    previous.destroy();
 
-  new Chart(element, {
-    type: 'doughnut',
+  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: data,
-        backgroundColor: colorArray
-      }],
-      labels: labels,
+        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
@@ -171,47 +93,5 @@ function renderTopChart(object) {
         display: false
       }
     }
-  });
-}
-
-function renderHeatMap(object) {
-  const allDates = Object.keys(object).map(element => object[element].date).flat(10)
-    .map(element => element.setHours(0, 0, 0, 0));
-  const watchedPerWeek = [[], [], [], [], [], [], []];
-
-  for (let i = 0; i < 366; i++) {
-    const date = new Date();
-    date.setDate(date.getDate() - i);
-    date.setHours(0, 0, 0, 0);
-    watchedPerWeek[date.getDay()].push(allDates.map(element => element === date.getTime()).filter(Boolean).length);
-  }
-
-  const maxWatchedPerDay = Math.max.apply(Math, watchedPerWeek.flat(2));
-
-  watchedPerWeek.map((element, i) => {
-    watchedPerWeek[i].push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][i]);
-    return watchedPerWeek[i].reverse();
-  });
-
-  watchedPerWeek.forEach(element => {
-    const tableRow = document.createElement("tr");
-    element.forEach(count => {
-      const tableData = document.createElement("td");
-      tableData.style.backgroundColor = "rgba(255,13,0," + count / maxWatchedPerDay + ")";
-      if (typeof count !== "number") tableData.appendChild(document.createTextNode(count));
-      tableRow.appendChild(tableData);
-
-      tableData.addEventListener("mouseover", () => {
-        document.querySelector("#information").innerText = `You've watched ${count} titles on that day!`;
-      });
-    });
-
-    heatMap.appendChild(tableRow)
   })
 }
-
-function secondsToHours(seconds) {
-  const date = new Date(null);
-  date.setSeconds(seconds);
-  return date.toISOString().substr(11, 8)
-}