[Fix]: Position labels on bars center in timeline charts

robotframework_dashboard/js/graph_creation/config_helpers.js

@@ -80,6 +80,7 @@ function build_most_failed_config(graphKey, dataType, dataLabel, filteredData, i
     } else if (graphType == "timeline") {
         config = get_graph_config("timeline", graphData, `Top ${limit}`, "Run", dataLabel);
         _apply_timeline_defaults(config, callbackData, pointMeta, dataType);
+        config.options.scales.x.type = "timelineScale";
     }
     update_height(`${graphKey}Vertical`, config.data.labels.length, graphType);
     return config;
@@ -101,6 +102,7 @@ function build_most_flaky_config(graphKey, dataType, filteredData, ignoreSkipsVa
     } else if (graphType == "timeline") {
         config = get_graph_config("timeline", graphData, `Top ${limit}`, "Run", "Test");
         _apply_timeline_defaults(config, callbackData, pointMeta, dataType);
+        config.options.scales.x.type = "timelineScale";
     }
     update_height(`${graphKey}Vertical`, config.data.labels.length, graphType);
     return config;
@@ -176,6 +178,7 @@ function build_most_time_consuming_config(graphKey, dataType, dataLabel, filtere
                 display: settings.show.axisTitles,
                 text: "Run",
             },
+            type: "timelineScale",
         };
         config.options.onClick = (event, chartElement) => {
             if (chartElement.length) {

robotframework_dashboard/js/graph_creation/test.js

@@ -61,6 +61,7 @@ function _build_test_statistics_timeline_config() {
             display: settings.show.axisTitles,
             text: "Run",
         },
+        type: "timelineScale",
     };
     config.options.onClick = (event, chartElement) => {
         if (chartElement.length) {
@@ -268,6 +269,7 @@ function _build_test_messages_config() {
                 display: settings.show.axisTitles,
                 text: "Run",
             },
+            type: "timelineScale",
         };
         config.options.onClick = (event, chartElement) => {
             if (chartElement.length) {

robotframework_dashboard/js/main.js

@@ -24,4 +24,40 @@ function main() {
 }
 
 Chart.register(ChartDataLabels);
+
+class TimelineScale extends Chart.LinearScale {
+    shiftPixels = false;
+    getPixelForTick(index) {
+        if (!this.shiftPixels) {
+            return super.getPixelForTick(index);
+        }
+        const ticks = this.ticks;
+        if (index < 0 || index > ticks.length - 1) {
+            return null;
+        }
+        // Get the pixel and value for the current tick.
+        var px = super.getPixelForTick(index);
+        var value = ticks[index].value;
+        // Get the next value's pixel value.
+        var nextPx = this.right;
+        if (index < ticks.length - 1) {
+            nextPx = super.getPixelForValue(value + 1);
+        }
+        // Skip tick if it is on the very right side
+        if (px == nextPx) {
+            return null;
+        }
+        // Align the labels in the middle of the current and next value.
+        return px + (nextPx - px) / 2;
+    }
+    _computeLabelItems(chartArea) {
+        this.shiftPixels = true;
+        var items =  super._computeLabelItems(chartArea);
+        this.shiftPixels = false;
+        return items;
+    }
+}
+TimelineScale.id = 'timelineScale';
+Chart.register(TimelineScale);
+
 main() // trigger on first load