improvement(graphs): use proper unit for duration graphs

When using duration graphs y axis was formatted to numeric value causing confusion and bad UX. Improvement by reformatting axis/tooltip to be in HH:MM:SS format. closes: scylladb#544
k0machi · Dec 18, 2024 · 00074a8 · 00074a8
1 parent 0b8b77d
commit 00074a8
Showing 1 changed file with 25 additions and 3 deletions.
diff --git a/frontend/TestRun/ResultsGraph.svelte b/frontend/TestRun/ResultsGraph.svelte
@@ -86,6 +86,13 @@
         return tickValues;
     }
 
+    function formatSecondsToHHMMSS(seconds) {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+    }
+
     onMount(() => {
         Chart.register(...registerables);
 
@@ -122,12 +129,18 @@
             },
             callbacks: {
                 label: function (tooltipItem) {
-                    const y = tooltipItem.parsed.y.toFixed(2);
+                    const yValue = tooltipItem.parsed.y;
+                    const limitValue = tooltipItem.raw.limit;
+                    const isHHMMSS = graph.options.scales.y.title?.text?.includes("[HH:MM:SS]");
+                    const formattedY = isHHMMSS ? formatSecondsToHHMMSS(yValue) : yValue.toFixed(2);
+                    const formattedLimit = isHHMMSS && limitValue !== undefined
+                        ? formatSecondsToHHMMSS(limitValue)
+                        : limitValue?.toFixed(2) || "N/A";
+
                     const x = new Date(tooltipItem.parsed.x).toLocaleDateString("sv-SE");
                     const ori = tooltipItem.raw.ori;
-                    const limit = tooltipItem.raw.limit;
                     const changes = tooltipItem.raw.changes;
-                    return [`${x}: ${ori ? ori : y} (error threshold: ${limit?.toFixed(2) || "N/A"})`, ...changes];
+                    return [`${x}: ${ori ? ori : formattedY} (error threshold: ${formattedLimit})`, ...changes];
                 },
             }
         };
@@ -141,6 +154,15 @@
                 }
             }
         };
+        graph.options.scales.y.title = graph.options.scales.y.title || {};
+        graph.options.scales.y.ticks = {
+            callback: function (value) {
+                if (graph.options.scales.y.title?.text?.includes("[HH:MM:SS]")) {
+                    return formatSecondsToHHMMSS(value);
+                }
+                return value;
+            },
+        };
 
         graph.data.datasets.forEach((dataset) => {
             const pointBackgroundColors = dataset.data.map((point) =>