Browse files

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).
  • Loading branch information...
1 parent 6369d82 commit 1ea63b8c7e83b4ea18fa17ba8c9db8cbb9350374 @kaos kaos committed Mar 19, 2013
View
21 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;
+}
View
29 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 }
];
}
View
28 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 }
];
}
View
9 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

4 comments on commit 1ea63b8

@kaos
Zotonic member

I see that the duration line chart would fit better to the left, so the min, max and mean labels would be above the line chart instead of the histogram chart. Oh, well...

snapshot11

@kaos
Zotonic member

Btw, this snap is also including the folsom slide change, so the durations are sliding windows of 60 seconds...

@mmzeeman
Zotonic member

This looks really nice Andreas. 👍

@kaos
Zotonic member

:)
Only thing that worries me is that it gulps down a good 30-50 Mb of js memory and some 30% cpu while updating the charts... (i.e. every other second).

Please sign in to comment.