Styling of charts + only show charts for total stats + clean up & refactoring of charts JS code

locust/static/chart.js

@@ -0,0 +1,102 @@
+(function() {
+    class LocustLineChart {
+        /**
+         * lines should be an array of line names
+         */
+        constructor(container, title, lines, unit) {
+            this.container = $(container);
+            this.title = title;
+            this.lines = lines;
+
+            this.element = $('<div class="chart"></div>').css("width", "100%").appendTo(container);
+            this.data = [];
+            this.dates = [];
+
+            var seriesData = [];
+            for (var i=0; i<lines.length; i++) {
+                seriesData.push({
+                    name: lines[i],
+                    type: 'line',
+                    showSymbol: true,
+                    hoverAnimation: false,
+                    data: [],
+                });
+                this.data.push([]);
+            }
+
+            this.chart = echarts.init(this.element[0], 'vintage');
+            this.chart.setOption({
+                title: {
+                    text: this.title,
+                    x: 10,
+                    y: 10,
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    formatter: function (params) {
+                        if (!!params && params.length > 0 && !!params[0].value) {
+                            var str = params[0].name;
+                            for (var i=0; i<params.length; i++) {
+                                var param = params[i];
+                                str += '<br><span style="color:' + param.color + ';">' + param.seriesName + ': ' + param.data + '</span>';
+                            }
+                            return str;
+                        } else {
+                            return "No data";
+                        }
+                    },
+                    axisPointer: {
+                        animation: true
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    splitLine: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#5b6f66',
+                        },
+                    },
+                    data: this.dates,
+                },
+                yAxis: {
+                    type: 'value',
+                    boundaryGap: [0, '100%'],
+                    splitLine: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#5b6f66',
+                        },
+                    },
+                },
+                series: seriesData,
+                grid: {x:60, y:70, x2:40, y2:40},
+            })
+        }
+
+        addValue(values) {
+            this.dates.push(new Date().toLocaleTimeString());
+            var seriesData = [];
+            for (var i=0; i<values.length; i++) {
+                var value = Math.round(values[i] * 100) / 100;
+                this.data[i].push(value);
+                seriesData.push({data: this.data[i]});
+            }
+            this.chart.setOption({
+                xAxis: {
+                    data: this.dates,
+                },
+                series: seriesData
+            });
+        }
+
+        resize() {
+            this.chart.resize();
+        }
+    }
+    window.LocustLineChart = LocustLineChart;
+})();

locust/static/locust.js

@@ -38,7 +38,14 @@ $(".close_link").click(function(event) {
 
 var alternate = false;
 
-$("ul.tabs").tabs("div.panes > div");
+$("ul.tabs").tabs("div.panes > div").on("onClick", function(event) {
+    if (event.target == $(".chart-tab-link")[0]) {
+        // trigger resizing of charts
+        rpsChart.resize();
+        responseTimeChart.resize();
+        usersChart.resize();
+    }
+});
 
 var stats_tpl = $('#stats-template');
 var errors_tpl = $('#errors-template');
@@ -108,162 +115,10 @@ $(".stats_label").click(function(event) {
     $('#errors tbody').jqoteapp(errors_tpl, (report.errors).sort(sortBy(sortAttribute, desc)));
 });
 
-
-var charts = {}
-
-function initChart(stat) {
-    // FIXME: hardcoded width and height
-    var rps_element = $('<div class="stats" style="float:left; width: 500px; height: 300px;"></div>');
-    var avt_element = $('<div class="stats" style="float:left; width: 500px; height: 300px;"></div>');
-    rps_element.appendTo("#charts");
-    avt_element.appendTo("#charts");
-
-    var date = [];
-    var rps_data = [];
-    var avt_data = [];
-
-    now = new Date().toLocaleTimeString();
-    date.push(now);
-    rps_data.push({
-        "name": now,
-        "value": Math.round(stat.current_rps*100)/100
-    });
-
-    avt_data.push({
-        "name": now,
-        "value": Math.round(stat.avg_response_time)
-    });
-
-    var rps_chart = echarts.init(rps_element.get(0), 'vintage');
-    rps_chart.setOption({
-        title: {
-            text: stat.name + ': RPS'
-        },
-        tooltip: {
-            trigger: 'axis',
-            formatter: function (params) {
-                param = params[0];
-                return param.name + ': RPS ' + param.value;
-            },
-            axisPointer: {
-                animation: true
-            }
-        },
-        xAxis: {
-            type: 'category',
-            splitLine: {
-                show: false
-            },
-            data: date
-        },
-        yAxis: {
-            type: 'value',
-            boundaryGap: [0, '100%'],
-            splitLine: {
-                show: false
-            }
-        },
-        series: [{
-            name: 'RPS',
-            type: 'line',
-            showSymbol: false,
-            hoverAnimation: false,
-            data: rps_data
-        }]
-    });
-
-    var avt_chart = echarts.init(avt_element.get(0), 'vintage');
-    avt_chart.setOption({
-        title: {
-            text: stat.name + ': average response time(ms)'
-        },
-        tooltip: {
-            trigger: 'axis',
-            formatter: function (params) {
-                param = params[0];
-                return param.name + ':' + param.value + 'ms';
-            },
-            axisPointer: {
-                animation: true
-            }
-        },
-        xAxis: {
-            type: 'category',
-            splitLine: {
-                show: false
-            },
-            data: date
-        },
-        yAxis: {
-            type: 'value',
-            boundaryGap: [0, '100%'],
-            splitLine: {
-                show: false
-            }
-        },
-        series: [{
-            name: 'AVT',
-            type: 'line',
-            showSymbol: false,
-            hoverAnimation: false,
-            data: avt_data
-        }]
-    });
-
-    charts[stat.name] = {};
-    charts[stat.name]["date"] = date;
-    charts[stat.name]["rps_chart"] = rps_chart;
-    charts[stat.name]["rps_data"] = rps_data;
-    charts[stat.name]["avt_chart"] = avt_chart;
-    charts[stat.name]["avt_data"] = avt_data;
-
-}
-
-function updateCharts(stats) {
-
-    $.each(stats, function(index, stat){
-        if (stat.name in charts) {
-            now = new Date().toLocaleTimeString();
-            date = charts[stat.name]["date"];
-            date.push(now);
-
-            rps_chart = charts[stat.name]["rps_chart"];
-            rps_data = charts[stat.name]["rps_data"];
-            rps_data.push({
-                "name": now,
-                "value": Math.round(stat.current_rps*100)/100
-            });
-            rps_chart.setOption({
-                xAxis: {
-                    data: date
-                },
-                series: [{
-                    data: rps_data
-                }]
-            });
-
-            avt_chart = charts[stat.name]["avt_chart"];
-            avt_data = charts[stat.name]["avt_data"];
-            avt_data.push({
-                "name": now,
-                "value": Math.round(stat.avg_response_time)
-            });
-
-            avt_chart.setOption({
-                xAxis: {
-                    data: date
-                },
-                series: [{
-                    data: avt_data
-                }]
-            });
-        } else {
-            initChart(stat);
-        }
-    });
-
-}
-
+// init charts
+var rpsChart = new LocustLineChart($(".charts-container"), "Total Requests per Second", ["RPS"], "reqs/s");
+var responseTimeChart = new LocustLineChart($(".charts-container"), "Average Response Time", ["Average Response Time"], "ms");
+var usersChart = new LocustLineChart($(".charts-container"), "Number of Users", ["Users"], "users");
 
 function updateStats() {
     $.get('/stats/requests', function (data) {
@@ -290,7 +145,12 @@ function updateStats() {
         $('#errors tbody').jqoteapp(errors_tpl, (report.errors).sort(sortBy(sortAttribute, desc)));
 
         if (report.state !== "stopped"){
-            updateCharts(sortedStats);
+            // get total stats row
+            var total = report.stats[report.stats.length-1];
+            // update charts
+            rpsChart.addValue([total.current_rps]);
+            responseTimeChart.addValue([total.avg_response_time]);
+            usersChart.addValue([report.user_count]);
         }
 
         setTimeout(updateStats, 2000);

locust/static/style.css

@@ -322,6 +322,25 @@ a:hover {
     white-space: pre;
 }
 
+#charts {
+    width: 100%;
+}
+#charts .chart {
+    height: 350px;
+    margin-bottom: 30px;
+    box-sizing: border-box;
+    border: 1px solid #11271e;
+    border-radius: 3px;
+}
+#charts .note {
+    color: #b3c3bc;
+    margin-bottom: 30px;
+    border-radius: 3px;
+    background: #132b21;
+    padding: 10px;
+    display: inline-block;
+}
+
 em {
     width: 100%;
     color: white;

locust/static/vintage.js

@@ -19,12 +19,17 @@
         log('ECharts is not Loaded');
         return;
     }
-    var colorPalette = ['#d87c7c','#919e8b', '#d7ab82',  '#6e7074','#61a0a8','#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];
+    var colorPalette = ['#00ca5a','#919e8b', '#d7ab82',  '#6e7074','#61a0a8','#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];
     echarts.registerTheme('vintage', {
         color: colorPalette,
-        backgroundColor: '#fef8ef',
+        backgroundColor: '#132b21',
+        xAxis: {lineColor: "#f00"},
         graph: {
-            color: colorPalette
-        }
+            color: colorPalette,
+        },
+        textStyle: {color:"#b3c3bc"},
+        title: {
+            textStyle:{color:"#b3c3bc"}
+        },
     });
 }));

locust/templates/index.html

@@ -82,7 +82,7 @@ <h2>Change the locust count</h2>
             <nav class="menu">
                 <ul class="tabs container">
                     <li><a href="#">Statistics</a></li>
-                    <li><a href="#">Charts</a></li>
+                    <li><a href="#" class="chart-tab-link">Charts</a></li>
                     <li><a href="#">Failures</a></li>
                     <li><a href="#">Exceptions</a></li>
                     <li><a href="#">Download Data</a></li>
@@ -110,7 +110,8 @@ <h2>Change the locust count</h2>
                     </table>
                 </div>
                 <div id="charts" style="display:none;">
-                    <p>There is no persistence of these charts, if you refresh this page, new charts will be created.</p>
+                    <div class="charts-container"></div>
+                    <p class="note">Note: There is no persistence of these charts, if you refresh this page, new charts will be created.</p>
                 </div>
                 <div style="display:none;">
                     <table id="errors" class="stats">
@@ -184,7 +185,7 @@ <h1>Version</h1>
     </nav>
 
 
-    <script type="text/javascript" src="/static/jquery-1.4.min.js"></script>
+    <script type="text/javascript" src="/static/jquery-1.11.3.min.js"></script>
     <script type="text/javascript" src="/static/jquery.jqote2.min.js"></script>
     <script type="text/javascript" src="/static/jquery.tools.min.js"></script>
     <!-- echarts from https://github.com/ecomfe/echarts -->
@@ -229,6 +230,7 @@ <h1>Version</h1>
         <% alternate = !alternate; %>
         ]]>
     </script>
+    <script type="text/javascript" src="/static/chart.js?v={{ version }}"></script>
     <script type="text/javascript" src="/static/locust.js?v={{ version }}"></script>
 </body>
 </html>