aboutsummaryrefslogtreecommitdiff
path: root/assets/js/main.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/js/main.js')
-rwxr-xr-xassets/js/main.js358
1 files changed, 226 insertions, 132 deletions
diff --git a/assets/js/main.js b/assets/js/main.js
index 52b450c..77dc22e 100755
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -10,27 +10,51 @@ 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 cookies() {
+ cookieWrap.style.display = "block";
+ 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 tryDemo() {
+ const request = new XMLHttpRequest();
+ request.onreadystatechange = () => {
+ if (request.readyState === 4 && request.status === 200) {
+ cookieWrap.style.display = "none";
+ loading.style.display = "none";
+ stats.style.display = "block";
+ alert(
+ "Warning! You're using the example.json data. This is only for demonstration purposes and does NOT represent your real data!"
+ );
+ analyze(request.responseText);
+ } else if (request.readyState === 4 && request.status !== 200) {
+ console.log("Couldn't find demo, enabling cookie input");
+ cookies();
+ }
+ };
+ request.open("GET", "example.json", true);
+ request.send();
+}
function analyze(data) {
const filtered = {};
@@ -54,25 +78,12 @@ function analyze(data) {
obj.count++;
});
- setSizes();
drawTotalSpent(filtered);
drawTimeline(filtered);
drawTopTitles(filtered);
+ drawHeatmap(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);
- }
}
function drawTotalSpent(data) {
@@ -80,10 +91,10 @@ function drawTotalSpent(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)}`;
+ ${Math.floor(totalHours / 24)} days or
+ ${Math.floor(totalHours)} hours or
+ ${Math.round(totalHours * 60)} minutes or
+ ${Math.round(totalHours * 60 * 60)} seconds!`;
}
function drawTimeline(data) {
@@ -97,118 +108,201 @@ function drawTimeline(data) {
);
const ctx = document.getElementById("hourChart");
- new Chart(ctx, {
- type: "line",
- data: {
- labels: [...Array(24).keys()],
- datasets: [
- {
- data: occurrence,
- borderColor: "#e50914",
- },
- ],
+ const chart = new ApexCharts(ctx, {
+ chart: {
+ type: "line",
+ foreColor: "#fff",
+ background: "#141414",
},
- options: {
- responsive: false,
- maintainAspectRatio: true,
- legend: {
- display: false,
- },
- scales: {
- xAxes: [
- {
- gridLines: {
- color: "#424242",
- },
- },
- ],
- yAxes: [
- {
- gridLines: {
- color: "#424242",
- },
- },
- ],
+ theme: {
+ mode: "dark",
+ },
+ series: [
+ {
+ name: "Title count at hour",
+ data: occurrence,
},
+ ],
+ stroke: {
+ curve: "smooth",
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ xaxis: {
+ categories: [...Array(24).keys()],
},
});
-
- console.log(occurrence);
+ chart.render();
}
let previous;
-
+let limited = false;
function drawTopTitles(data) {
- // Toggle layout
- toggle.setAttribute(
- "data-current",
- toggle.getAttribute("data-current") === "bar" ? "pie" : "bar"
- );
+ limited = !limited;
+ toggle.innerText = limited ? "View all" : "View less";
+ Array.prototype.limit = function () {
+ if (limited) return this.slice(0, 20);
+ return this;
+ };
+
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),
- borderColor: "#424242",
- backgroundColor: Array.from(
- { length: Object.keys(data).length },
- () =>
- "#" +
- (
- "00000" +
- ((Math.random() * (1 << 24)) | 0).toString(16)
- ).slice(-6)
- ),
- },
- ],
+ previous = new ApexCharts(ctx, {
+ chart: {
+ type: "bar",
+ foreColor: "#fff",
+ background: "#141414",
+ },
+ theme: {
+ mode: "dark",
+ },
+ series: [
+ {
+ name: "Time in hours",
+ data: Object.keys(data)
+ .map((key) => +data[key].duration.toFixed(2))
+ .sort((a, b) => b - a)
+ .limit(),
+ },
+ ],
+ dataLabels: {
+ enabled: false,
+ },
+ xaxis: {
+ categories: Object.keys(data)
+ .sort((a, b) => data[b].duration - data[a].duration)
+ .limit(),
},
- options: {
- responsive: false,
- maintainAspectRatio: true,
- animation: {
- animateScale: true,
- animateRotate: true,
+ plotOptions: {
+ bar: {
+ horizontal: false,
},
- legend: {
- display: false,
+ donut: {
+ customScale: 0.4,
},
- scales: {
- xAxes: [
- {
- gridLines: {
- display:
- toggle.getAttribute("data-current") === "bar",
- color: "#424242",
+ },
+ });
+ previous.render();
+}
+
+// TODO: There may be a bug in the first week in January
+function drawHeatmap(data) {
+ Date.prototype.getWeek = function () {
+ var d = new Date(
+ Date.UTC(this.getFullYear(), this.getMonth(), this.getDate())
+ );
+ d.setUTCDate(d.getUTCDate() - d.getUTCDay());
+ var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+ return Math.ceil(((d - yearStart) / 86400000 + 1) / 7);
+ };
+
+ const currentYear = new Date().getFullYear();
+ const currentWeek = new Date().getWeek();
+
+ const days = [[], [], [], [], [], [], []];
+ Object.keys(data).forEach((elem) => {
+ data[elem].dates.forEach((date) => {
+ if (date.getFullYear() != currentYear) return;
+
+ const day = date.getDay();
+ const week = date.getWeek();
+
+ if (week > currentWeek) return;
+
+ if (!days[day][week]) days[day][week] = 0;
+ days[day][week]++;
+ });
+ });
+
+ for (let i = 0; i < days.length; i++) {
+ for (let j = 0; j < days[i].length; j++) {
+ if (!days[i][j]) days[i][j] = 0;
+ }
+ }
+
+ const ctx = document.getElementById("heatMap");
+ const chart = new ApexCharts(ctx, {
+ chart: {
+ type: "heatmap",
+ foreColor: "#fff",
+ background: "#141414",
+ },
+ theme: {
+ mode: "dark",
+ },
+ series: [
+ {
+ name: "Saturday",
+ data: days[6],
+ },
+ {
+ name: "Friday",
+ data: days[5],
+ },
+ {
+ name: "Thursday",
+ data: days[4],
+ },
+ {
+ name: "Wednesday",
+ data: days[3],
+ },
+ {
+ name: "Tuesday",
+ data: days[2],
+ },
+ {
+ name: "Monday",
+ data: days[1],
+ },
+ {
+ name: "Sunday",
+ data: days[0],
+ },
+ ],
+ plotOptions: {
+ heatmap: {
+ colorScale: {
+ ranges: [
+ {
+ from: 0,
+ to: 5,
+ color: "#00a100",
+ name: "low",
},
- ticks: {
- display:
- toggle.getAttribute("data-current") === "bar",
+ {
+ from: 6,
+ to: 10,
+ color: "#128fd9",
+ name: "medium",
},
- },
- ],
- yAxes: [
- {
- gridLines: {
- display:
- toggle.getAttribute("data-current") === "bar",
- color: "#424242",
+ {
+ from: 10,
+ to: 20,
+ color: "#ffb200",
+ name: "high",
},
- ticks: {
- display:
- toggle.getAttribute("data-current") === "bar",
+ {
+ from: 21,
+ to: 100,
+ color: "#ff5100",
+ name: "very high",
},
- },
- ],
+ {
+ from: 101,
+ to: 1000,
+ color: "#e50914",
+ name: "wtf",
+ },
+ ],
+ },
},
},
});
+ chart.render();
}
+
+Apex.colors = ["#e50914"];
+tryDemo();