Permalink
Browse files

mod_admin_stats: add a few more labels, with series color.

  • Loading branch information...
1 parent a33d640 commit 70f7c26031131a500f79c0e931a21daf76e26b12 @kaos kaos committed Mar 15, 2013
Showing with 32 additions and 9 deletions.
  1. +11 −1 modules/mod_admin_stats/lib/css/charts.css
  2. +21 −8 modules/mod_admin_stats/lib/js/charts/stats_charts.js
@@ -41,24 +41,34 @@ path.line:hover {
.serie-0 {
stroke: rgb(6, 156, 209);
+ background-color: rgba(6, 156, 209, 0.2);
}
.serie-1 {
stroke: #ff7f0e;
+ background-color: rgba(255, 127, 14, 0.2);
}
.serie-2 {
stroke: #2ca02c;
+ background-color: rgba(44, 160, 44, 0.2);
}
.serie-3 {
stroke: #d62728;
+ background-color: rgba(214, 39, 40, 0.2);
}
.serie-4 {
stroke: #9467bd;
+ background-color: rgba(148, 103, 189, 0.2);
}
.chart-label:after {
content: ": ";
-}
+}
+
+.chart-text {
+ border-radius: 5px;
+ padding: 0px 5px;
+}
@@ -34,7 +34,7 @@ function stats_chart_factory() {
// creates a dynamic "label value" text element
function text() {
this.append("span")
- .attr("class", "chart-text")
+ .attr("class", function(d){ return "chart-text " + d.class })
.call(function() {
this.append("span")
.attr("class", "chart-label")
@@ -74,23 +74,36 @@ function stats_chart_factory() {
function meter_data(d) {
var series = ["one", "five", "fifteen", "day"];
var now = Date.now();
- var data = this.length > 0 && d3.select(this[1]).datum();
+
+ // 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);
- return [
- { factory: text, datum:
- { label: "Total count", value: d.count }
- },
- { factory: line, datum: data }
- ];
+ // return our updated values
+ return series.map(
+ function(serie, i){
+ return { factory: text, datum:
+ { label: serie, value: d[serie], class: "serie-" + i }
+ }
+ }).concat([
+ { factory: text, datum:
+ { label: "Total count", value: d.count }
+ },
+ // the index of this line chart is used above
+ // when declaring the `var data =`; keep in sync!
+ { factory: line, datum: data }
+ ]);
}
// chart data middle man

9 comments on commit 70f7c26

Owner

kaos replied Mar 15, 2013

I like snapshots :p
snapshot10

And @arjan, we should go through the various charts. I think the one you see now as "db duration" isn't the live value of durations as they happen, and as such doesn't represent your expectations of it. I do know of the zynamo stats charts, and we can have those too, but the duration charts we have right now are not live values, they're histograms. If you approximate a curve following the bars, you'll get the normal distribution curve for the duration of all requests in the population.

Owner

mmzeeman replied Mar 15, 2013

Owner

kaos replied Mar 15, 2013

I'd actually like it if that was configurable. We have a given set of stat collection points, which triggers a call to z_stats, which in turn can trigger updates to various counters, meters and what not that is monitoring that event to calculate various statistical values for the event.

Owner

mmzeeman replied Mar 16, 2013

We can change the duration histograms in favour of the line graph found in the zynamo stats chart. The histogram values are used internally by folsom to calculate different means, medians and what not. If those values are plotted you get the same sort of graph as found in the zynamo stats.

1> folsom_metrics:get_histogram_statistics({zotonic,webzmachine,duration}).
[{min,65556},
 {max,430146},
 {arithmetic_mean,87745.56026058632},
 {geometric_mean,86763.95864784214},
 {harmonic_mean,86276.52475002389},
 {median,85349},
 {variance,453393413.6262586},
 {standard_deviation,21293.03674035854},
 {skewness,13.815163690013701},
 {kurtosis,215.6150315066514},
 {percentile,[{50,85349},
              {75,87089},
              {90,89624},
              {95,96899},
              {99,140429},
              {999,430146}]},
 {histogram,[{77556,4},
             {88556,258},
             {105556,36},
             {115556,3},
             {125556,2},
...
Owner

mmzeeman replied Mar 16, 2013

This is an example of the different duration means on a slide histogram with a window of 60 seconds.

duration-means

blue is arithmetic, orange geometric and green the harmonic mean. On the y-bar the duration in ms.

Owner

kaos replied Mar 18, 2013

Very nice! 👍

I'm currently re-factoring the charting code to make it slightly less spaghetti...

Owner

mmzeeman replied Mar 18, 2013

What I also wanted to do is make an overview page for the zotonic status site where you see what is happening on the virtual hosts in one glance... Here is an experiment with fake numbers.

overview-stats

Or maybe one line per site with the duration of the http requests and the meter with the number of requests. This can be mixed in with the overview page I think.

Here is some nice info on this approach. http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR

Owner

mworrell replied Mar 18, 2013

👍 great for quick overviews what is happening!

I would love such a control panel available on my phone, maybe we should make an app for that :p

Owner

kaos replied Mar 18, 2013

Now we're getting somewhere! :D

I've fleshed out the re-factoring, just going to clean it up and apply it to the charts I already have. Then it will be much easier to add new variants and what not.

Please sign in to comment.