feat(charts): add a marker line between test runs on the client

Creates dummy placeholders in the stats history to space between the marker and the line data. Issue: locustio#1852
obradovichv · Aug 18, 2021 · 3efefdf · 3efefdf
1 parent d8c9019
commit 3efefdf
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/locust/static/locust.js b/locust/static/locust.js
@@ -79,6 +79,20 @@ $('#swarm_form').submit(function(event) {
         function(response) {
             if (response.success) {
                 setHostName(response.host);
+
+                // add run marker to close off the previous run if any
+                if(stats_history["time"].length < 1) {
+                    return;
+                }
+
+                let time = new Date().toLocaleTimeString();
+                stats_history["markers"].push({xAxis: time});
+                stats_history["time"].push(time);
+                stats_history["user_count"].push({"value": null});
+                stats_history["current_rps"].push({"value": null});
+                stats_history["current_fail_per_sec"].push({"value": null});
+                stats_history["response_time_percentile_50"].push({"value": null});
+                stats_history["response_time_percentile_95"].push({"value": null});
             }
         }
     );
@@ -174,30 +188,39 @@ $("#workers .stats_label").click(function(event) {
     renderWorkerTable(window.report);
 });
 
+function createMarkLine() {
+    return {
+        symbol: "none",
+        label: {
+            formatter: params => `Run #${params.dataIndex + 1}`
+        },
+        lineStyle: {color: "#5b6f66"},
+        data: stats_history["markers"],
+    }
+}
+
 function update_stats_charts(){
     if(stats_history["time"].length > 0){
         rpsChart.chart.setOption({
             xAxis: {data: stats_history["time"]},
             series: [
-                {data: stats_history["current_rps"]},
+                {data: stats_history["current_rps"], markLine: createMarkLine()},
                 {data: stats_history["current_fail_per_sec"]},
             ]
         });
 
         responseTimeChart.chart.setOption({
             xAxis: {data: stats_history["time"]},
             series: [
-                {data: stats_history["response_time_percentile_50"]},
+                {data: stats_history["response_time_percentile_50"], markLine: createMarkLine()},
                 {data: stats_history["response_time_percentile_95"]},
             ]
         });
 
         usersChart.chart.setOption({
-            xAxis: {
-                data: stats_history["time"]
-            },
+            xAxis: {data: stats_history["time"]},
             series: [
-                {data: stats_history["user_count"]},
+                {data: stats_history["user_count"], markLine: createMarkLine()},
             ]
         });
     }

diff --git a/locust/templates/stats_data.html b/locust/templates/stats_data.html
@@ -6,4 +6,5 @@
     "current_fail_per_sec": {{ current_fail_per_sec_data | tojson }},
     "response_time_percentile_50": {{ response_time_percentile_50_data | tojson }},
     "response_time_percentile_95": {{ response_time_percentile_95_data | tojson }},
+    "markers": [],
 };