#246: Improve graph - appearance, zoom, tooltip, starting and stoppin…

…g period.
tag1consulting · Nov 18, 2021 · 93fcf3d · 93fcf3d
1 parent 164cb29
commit 93fcf3d
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 28 deletions.
diff --git a/src/metrics.rs b/src/metrics.rs
@@ -2435,7 +2435,11 @@ impl GooseAttack {
                 merge_request.set_status_code(request_metric.status_code);
             }
             if !self.configuration.report_file.is_empty() {
-                merge_request.record_requests_per_second(self.metrics.duration);
+                if let Some(starting) = self.metrics.starting {
+                    merge_request.record_requests_per_second(
+                        (Utc::now().timestamp() - starting.timestamp()) as usize,
+                    );
+                }
             }
             if request_metric.success {
                 merge_request.success_count += 1;
@@ -2973,25 +2977,6 @@ impl GooseAttack {
                 errors_template = "".to_string();
             }
 
-            let graph_rps_template: String;
-            if !self.configuration.report_file.is_empty() {
-                let mut count = 0;
-                for (_path, path_metric) in self.metrics.requests.iter() {
-                    count = max(count, path_metric.requests_per_second.len());
-                }
-
-                let mut rps = vec![0; count];
-                for (_path, path_metric) in self.metrics.requests.iter() {
-                    for (second, count) in path_metric.requests_per_second.iter().enumerate() {
-                        rps[second] += count;
-                    }
-                }
-
-                graph_rps_template = report::graph_rps_template(rps);
-            } else {
-                graph_rps_template = "".to_string();
-            }
-
             // Only build the status_code template if --status-codes is enabled.
             let status_code_template: String;
             if self.configuration.status_codes {
@@ -3045,6 +3030,44 @@ impl GooseAttack {
                 status_code_template = "".to_string();
             }
 
+            let graph_rps_template: String;
+            if Some(starting) == self.metrics.starting
+                && Some(started) == self.metrics.started
+                && Some(stopping) == self.metrics.stopping
+                && Some(stopped) == self.metrics.stopped
+            {
+                let mut count = 0;
+                for (_path, path_metric) in self.metrics.requests.iter() {
+                    count = max(count, path_metric.requests_per_second.len());
+                }
+
+                let mut rps = vec![0; count];
+                for (_path, path_metric) in self.metrics.requests.iter() {
+                    for (second, count) in path_metric.requests_per_second.iter().enumerate() {
+                        rps[second] += count;
+                    }
+                }
+
+                let rps = rps
+                    .iter()
+                    .enumerate()
+                    .map(|(second, &count)| {
+                        (
+                            Local
+                                .timestamp(second as i64 + starting.timestamp(), 0)
+                                .format("%Y-%m-%d %H:%M:%S")
+                                .to_string(),
+                            count,
+                        )
+                    })
+                    .collect::<Vec<_>>();
+
+                graph_rps_template =
+                    report::graph_rps_template(rps, starting, started, stopping, stopped);
+            } else {
+                graph_rps_template = "".to_string();
+            }
+
             // Compile the report template.
             let report = report::build_report(
                 &users,

diff --git a/src/report.rs b/src/report.rs
@@ -5,6 +5,7 @@ use crate::metrics;
 use std::collections::BTreeMap;
 use std::mem;
 
+use chrono::prelude::*;
 use serde::Serialize;
 use serde_json::json;
 
@@ -406,7 +407,13 @@ pub fn error_row(error: &metrics::GooseErrorMetricAggregate) -> String {
     )
 }
 
-pub fn graph_rps_template(rps: Vec<u32>) -> String {
+pub fn graph_rps_template(
+    rps: Vec<(String, u32)>,
+    starting: DateTime<Local>,
+    started: DateTime<Local>,
+    stopping: DateTime<Local>,
+    stopped: DateTime<Local>,
+) -> String {
     format!(
         r#"<div class="graph-rps">
         <h2>Requests per second</h2>
@@ -418,11 +425,31 @@ pub fn graph_rps_template(rps: Vec<u32>) -> String {
                 var myChart = echarts.init(chartDom);
 
                 myChart.setOption({{
+                    tooltip: {{
+                        trigger: 'axis',
+                    }},
+                    toolbox: {{
+                        feature: {{
+                            dataZoom: {{
+                                yAxisIndex: 'none'
+                            }},
+                            restore: {{}},
+                            saveAsImage: {{}}
+                        }}
+                    }},
+                    dataZoom: [
+                        {{
+                            type: 'inside',
+                            start: 0,
+                            end: 100
+                        }},
+                        {{
+                            start: 0,
+                            end: 100
+                        }}
+                    ],
                     xAxis: {{
-                        name: 'Time [s]',
-                        nameLocation: 'center',
-                        nameGap: 25,
-                        type: 'value',
+                        type: 'time',
                     }},
                     yAxis: {{
                         name: 'Requests per second',
@@ -433,15 +460,46 @@ pub fn graph_rps_template(rps: Vec<u32>) -> String {
                     }},
                     series: [
                         {{
-                            data: {values},
                             type: 'line',
-                            symbol: 'none'
+                            symbol: 'none',
+                            sampling: 'lttb',
+                            areaStyle: {{}},
+                            markArea: {{
+                                itemStyle: {{
+                                    color: 'rgba(255, 173, 177, 0.4)'
+                                }},
+                                data: [
+                                    [
+                                        {{
+                                            name: 'Starting',
+                                            xAxis: '{starting}'
+                                        }},
+                                        {{
+                                            xAxis: '{started}'
+                                        }}
+                                    ],
+                                    [
+                                        {{
+                                            name: 'Stopping',
+                                            xAxis: '{stopping}'
+                                        }},
+                                        {{
+                                            xAxis: '{stopped}'
+                                        }}
+                                    ]
+                                ]
+                            }},
+                            data: {values},
                         }}
                     ]
                 }});
             </script>
         </div>"#,
-        values = json!(rps.iter().enumerate().collect::<Vec<_>>())
+        values = json!(rps),
+        starting = starting.format("%Y-%m-%d %H:%M:%S"),
+        started = started.format("%Y-%m-%d %H:%M:%S"),
+        stopping = stopping.format("%Y-%m-%d %H:%M:%S"),
+        stopped = stopped.format("%Y-%m-%d %H:%M:%S"),
     )
 }