From 11291b0d6c27e4212cc25cab35adab4e3714b4c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ferdinand=20M=C3=BCtsch?= <ferdinand@muetsch.io>
Date: Sun, 29 Aug 2021 10:32:23 +0200
Subject: [PATCH] fix: properly format x axis for durations (see #232)

---
 static/assets/app.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/static/assets/app.js b/static/assets/app.js
index 20324e4..b4fc715 100644
--- a/static/assets/app.js
+++ b/static/assets/app.js
@@ -34,10 +34,10 @@ Chart.defaults.global.defaultFontColor = "#E2E8F0"
 Chart.defaults.global.defaultColor = "#E2E8F0"
 
 String.prototype.toHHMMSS = function () {
-    var sec_num = parseInt(this, 10)
-    var hours = Math.floor(sec_num / 3600)
-    var minutes = Math.floor((sec_num - (hours * 3600)) / 60)
-    var seconds = sec_num - (hours * 3600) - (minutes * 60)
+    const sec_num = parseInt(this, 10)
+    let hours = Math.floor(sec_num / 3600)
+    let minutes = Math.floor((sec_num - (hours * 3600)) / 60)
+    let seconds = sec_num - (hours * 3600) - (minutes * 60)
 
     if (hours < 10) {
         hours = '0' + hours
@@ -48,14 +48,14 @@ String.prototype.toHHMMSS = function () {
     if (seconds < 10) {
         seconds = '0' + seconds
     }
-    return hours + ':' + minutes + ':' + seconds
+    return `${hours}:${minutes}:${seconds}`
 }
 
 String.prototype.toHHMM = function () {
     const sec_num = parseInt(this, 10)
     const hours = Math.floor(sec_num / 3600)
     const minutes = Math.floor((sec_num - (hours * 3600)) / 60)
-    return hours + ':' + minutes
+    return `${hours}:${minutes}`
 }
 
 function draw(subselection) {
@@ -114,7 +114,10 @@ function draw(subselection) {
                     xAxes: [{
                         scaleLabel: {
                             display: true,
-                            labelString: 'Seconds'
+                            labelString: 'Duration (hh:mm:ss)'
+                        },
+                        ticks: {
+                            callback: (label) => label.toString().toHHMMSS()
                         }
                     }]
                 },