Add a page to display my keystrokes reporting

1 files changed, 107 insertions, 0 deletions

diff --git a/site/projects/keyr/stats.html b/site/projects/keyr/stats.html
new file mode 100644
index 0000000..8559108
--- /dev/null
+++ b/site/projects/keyr/stats.html
@@ -0,0 +1,107 @@
+<h1>Keystrokes Reporting</h1>
+
+<p>
+  We have counted <span id="global_count">0</span> on <strong>lthms</strong>’
+  computers since <span id="start_date">today</span>, thanks to
+  <a href="https://sr.ht/~lthms/keyr"><strong>keyr</strong></a>.
+</p>
+
+<p>
+  <strong>Beware:</strong> Contrary to the rest of this blog, you need to enable
+  JavaScript for this webpage to work.
+</p>
+
+<h2>during the past 10 days</h2>
+
+<div id="heatmap-weeks"></div>
+
+<h2>during the past 6 months</h2>
+
+<div id="heatmap-year"></div>
+
+<script src="https://soap.coffee/+vendors/d3.js/d3.v3.min.js"></script>
+<script src="https://soap.coffee/+vendors/cal-heatmap/cal-heatmap.3.3.10.min.js"></script>
+
+<style>
+  #heatmap-weeks,
+  #heatmap-year {
+      overflow-x : scroll;
+  }
+</style>
+
+<script type="text/javascript">
+  // First, we load the necessary CSS
+  document.getElementById('asyncloading')
+    .insertAdjacentHTML(
+      'beforebegin',
+      '<link rel="stylesheet" href="https://soap.coffee/+vendors/cal-heatmap/cal-heatmap.3.3.10.css" />'
+  );
+
+  let gcount = document.getElementById("global_count");
+  let start_date = document.getElementById("start_date");
+
+  let min_date = new Date();
+
+  const months = {
+      0: 'January',
+      1: 'February',
+      2: 'March',
+      3: 'April',
+      4: 'May',
+      5: 'June',
+      6: 'July',
+      7: 'August',
+      8: 'September',
+      9: 'October',
+      10: 'November',
+      11: 'December'
+  }
+
+fetch('https://keyrhub.soap.coffee/view/lthms')
+  .then((response) =>
+    response.json()
+      .then((raw_datas) => {
+
+        var global_count = 0;
+        var min_date = new Date() / 1000;
+
+        for (var prop in raw_datas) {
+	  global_count += raw_datas[prop];
+          min_date = Math.min(min_date, prop);
+        }
+
+        min_date = new Date(min_date * 1000);
+
+        start_date.innerText =
+          `${months[min_date.getMonth()]} ${min_date.getDate()}, ${min_date.getFullYear()}`;
+        gcount.innerText = global_count.toLocaleString();
+
+        var calweeks = new CalHeatMap();
+
+        calweeks.init({
+          itemSelector: "#heatmap-weeks",
+          itemName: "keystroke",
+          data: raw_datas,
+          start: new Date(new Date() - 9 * 24 * 60 * 60 * 1000),
+          domain: "day",
+          subDomain: "hour",
+          domainGutter: 0,
+          range: 10,
+          legend: [500, 3000, 5000, 7000]
+        });
+
+        var calyear = new CalHeatMap();
+
+        calyear.init({
+          itemSelector: "#heatmap-year",
+          itemName: "keystroke",
+          data: raw_datas,
+          domain: "month",
+          subDomain: "day",
+          domainGutter: 10,
+          start: new Date(new Date() - 5 * 30 * 24 * 60 * 60 * 1000),
+          range: 6,
+          legend: [1000, 15000, 30000, 45000]
+        });
+      }));
+</script>