mod_admin_stats: add line chart for geometric mean of duration values.

Also draw smaller charts to reduce the amount of screen space needed.
Drop old values to cap the js memory usage. (it made the browser quite unresponsive after 30 minutues).

modules/mod_admin_stats/lib/js/charts/line-chart.js

@@ -47,7 +47,7 @@ function line_chart() {
                     //d3.max(data[0], function(d){ return d.x })])
                 .range([0, client_width]);
             props.y
-                .domain([0, d3.max(data, function(s) {
+                .domain([0, 1.01 * d3.max(data, function(s) {
                     return d3.max(s, function(d){
                         return d.y })})])
                 .range([client_height, 0]);
@@ -155,3 +155,22 @@ function line_chart() {
 
     return chart;
 }
+
+// data -> { init: {x, y}, x: now, y: [values], max_length, series: [list]}
+line_chart.append_value = function(data) {
+    var d = data.datum;
+
+    if (!d)
+        d = data.datum = data.series.map(
+            function() { return []; }
+        );
+
+    d.forEach(
+        function(s, i) {
+            if (data.max_length < s.push({x: data.x, y: data.y[this[i]]}))
+                s.shift();
+        },
+        data.series);
+
+    return data;
+}

modules/mod_admin_stats/lib/js/charts/metric-histogram.js

@@ -3,7 +3,7 @@ function metric_histogram() {
     function histogram(selection) {
         function update_ticks(axis, input) {
             var ticks = [], i, p, x, r;
-            r = (input[input.length - 1].x - input[0].x) / 10;
+            r = (input[input.length - 1].x - input[0].x) / 5;
             p = -r;
             for( i = 0; i < input.length; i++)
             {
@@ -16,14 +16,29 @@ function metric_histogram() {
             axis.tickValues(ticks);
         }
 
-        this.call(
-            histogram_duration_chart().call(function() {
+        selection.classed("pull-left", true);
+        return histogram_duration_chart().call(
+            function() {
                 this.format().x = d3.format(",.1f");
                 this.ticks().x = update_ticks;
-            }));
+                this
+                    .width(300)
+                    .height(100)
+                    .axis().y.ticks(3);
+            })(selection);
     }
 
     function factory_data(d) {
+        var now = Date.now();
+        var data = line_chart.append_value({
+            init: { x: now - 2000, y: 0 },
+            x: now,
+            y: d.mean,
+            max_length: 150,
+            series: ["geometric"],
+            datum: this.length > 0 && d3.select(this[this.length - 1]).datum()
+        });
+
         return [
             { factory: "text",
               datum: {
@@ -32,11 +47,13 @@ function metric_histogram() {
                       { label: "Min", value: d.min },
                       { label: "Max", value: d.max },
                       { label: "Mean (geometric)",
-                        value: d.mean.geometric },
+                        value: d.mean.geometric,
+                        class: "serie-0" },
                       { label: "Sample count", value: d.count }
                   ]}
             },
-            { factory: histogram, datum: d.histogram }
+            { factory: histogram, datum: d.histogram },
+            { factory: "line", datum: data.datum }
         ];
     }
 

modules/mod_admin_stats/lib/js/charts/metric-meter.js

@@ -1,30 +1,22 @@
 function metric_meter() {
 
     function factory_data(d) {
-        var series = ["one", "five", "fifteen", "day"];
         var now = Date.now();
-
-        // for the line chart, we append each new value to a list
-        var data = this.length > 0 && d3.select(this[this.length - 1]).datum();
-
-        // if we don't have a list yet, initialize a new one
-        if (!data)
-            data = series.map(function(){
-                return [{x: now - 1000, y: 0}] });
-
-        // for each line series, append the new value
-        data.forEach(
-            function(s, i) {
-                s.push({x: now, y: d[this[i]]})
-            },
-            series);
+        var data = line_chart.append_value({
+            init: { x: now - 2000, y: 0 },
+            x: now,
+            y: d,
+            max_length: 150,
+            series: ["one", "five", "fifteen", "day"],
+            datum: this.length > 0 && d3.select(this[this.length - 1]).datum()
+        });
 
         // return our updated values
         return [
             { factory: "text",
               datum: {
                   format: d3.format(".2s"),
-                  data: series.map(
+                  data: data.series.map(
                       function(serie, i) {
                           return {
                               class: "serie-" + i,
@@ -38,7 +30,7 @@ function metric_meter() {
             },
             // the index of this line chart is used above
             // when declaring the `var data =`; keep in sync!
-            { factory: "line", datum: data }
+            { factory: "line", datum: data.datum }
         ];
     }
 

modules/mod_admin_stats/lib/js/charts/z_charts.js

@@ -86,7 +86,14 @@ var z_charts = {};
 
     // creates a line chart
    $.factories.line = function(selection) {
-        return selection.call(line_chart());
+       return line_chart().call(
+           function() {
+               this
+                   .width(300)
+                   .height(100);
+               this.axis().x.ticks(5);
+               this.axis().y.ticks(3);
+           })(selection);
     };
 
     // Creates a dynamic "label value" text element