picky-statistics 4.0.0pre3 → 4.0.0pre5

data/lib/picky-statistics/application/javascripts/graph.js

@@ -0,0 +1,83 @@
+function Graph(selector, names, palette_offset) {
+  
+  var graph_element  = document.querySelector(selector + ' .graph');
+  var legend_element = document.querySelector(selector + ' .legend');
+  
+  function addOne(ary, thing) {
+    ary.push({ x: Date.now(), y: thing });
+    if (ary.length > 100) {
+      ary.shift();
+    }
+  }
+
+  function add(data, params) {
+    for(var i=0,total=0;i<params.length;total+=params[i++]);
+    if (total > 0) {
+      for (i = 0; i < params.length; i++) {
+        addOne(data[i], params[i]/total);
+      }
+    }
+  }
+  
+  var data = [];
+  var init = [];
+  for (var i = 0; i < names.length; i++) {
+    data.push([]);
+    init.push(1);
+  }
+  
+  // add(data, init);
+
+  var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum2000' } );
+  for (i = 0; i < palette_offset; i++) {
+    palette.color();
+  }
+  
+  var series = [];
+  for (i = 0; i < names.length; i++) {
+    series.push({
+      color: palette.color(),
+      data: data[i],
+      name: names[i]
+    });
+  }
+
+  var graph;
+  
+  var lazyInitializeGraph = function() {
+    if (!graph) {
+      graph = new Rickshaw.Graph( {
+        element: graph_element,
+        width: 900,
+        height: 150,
+        renderer: 'stack',
+        offset: 'expand',
+        series: series
+      });
+
+      var legend = new Rickshaw.Graph.Legend( {
+      	graph: graph,
+      	element: legend_element
+      });
+
+      new Rickshaw.Graph.Behavior.Series.Highlight( {
+      	graph: graph,
+      	legend: legend
+      });
+
+      // new Rickshaw.Graph.HoverDetail( {
+      //  graph: graph
+      // });
+      
+      graph.render();
+    }
+  };
+  
+  var update = function(new_data) {
+    add(data, new_data);
+    lazyInitializeGraph();
+    graph.update();
+  };
+  this.update = update;
+  
+};

data/lib/picky-statistics/application/javascripts/results.js

@@ -0,0 +1,86 @@
+function addOne(ary, thing) {
+  ary.push({ x: Date.now(), y: thing });
+  if (ary.length > 100) {
+    ary.shift();
+  }
+}
+
+function add(data, params) {
+  for(var i=0,total=0;i<params.length;total+=params[i++]);
+  if (total > 0) {
+    for (i = 0; i < params.length; i++) {
+      addOne(data[i], params[i]/total);
+    }
+  }
+}
+
+var data = [ [], [], [], [], [], [], [] ];
+add(data, [1, 1, 1, 1, 1, 1, 1]);
+
+var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum2000' } );
+
+palette.color();
+palette.color();
+palette.color();
+palette.color();
+palette.color();
+palette.color();
+palette.color();
+
+var graph = new Rickshaw.Graph( {
+  element: document.querySelector('#results_graph.stats .graph'),
+  width: 900,
+  height: 150,
+  renderer: 'stack',
+  offset: 'expand',
+  series: [
+    {
+      color: palette.color(),
+      data: data[0],
+      name: '1 result'
+    }, {
+      color: palette.color(),
+      data: data[1],
+      name: '2 results'
+    }, {
+      color: palette.color(),
+      data: data[2],
+      name: '3 results'
+    }, {
+      color: palette.color(),
+      data: data[3],
+      name: '4 or more results'
+    }, {
+      color: palette.color(),
+      data: data[4],
+      name: '100 or more results'
+    }, {
+      color: palette.color(),
+      data: data[5],
+      name: '1000 or more results'
+    }, {
+      color: palette.color(),
+      data: data[6],
+      name: 'no results'
+    }
+  ]
+} );
+
+var legend = new Rickshaw.Graph.Legend( {
+ graph: graph,
+ element: document.querySelector('#results_graph.stats .legend')
+});
+
+new Rickshaw.Graph.Behavior.Series.Highlight( {
+ graph: graph,
+ legend: legend
+});
+
+// new Rickshaw.Graph.HoverDetail( {
+//  graph: graph
+// });
+
+updateNewResults = function(r1, r2, r3, r4, r100, r1000, r0) {
+  add(data, [r1, r2, r3, r4, r100, r1000, r0]);
+  graph.update();
+};

data/lib/picky-statistics/application/javascripts/rickshaw.js

@@ -0,0 +1 @@
+Rickshaw={namespace:function(a,b){var c=a.split(".");parent=Rickshaw;for(var d=1,e=c.length;d<e;d++)currentPart=c[d],parent[currentPart]=parent[currentPart]||{},parent=parent[currentPart];return parent},keys:function(a){var b=[];for(var c in a)b.push(c);return b}},Rickshaw.namespace("Rickshaw.Graph"),Rickshaw.Graph=function(a){this.element=a.element,this.interpolation=a.interpolation||"cardinal",this.series=a.series,this.offset="zero";var b=window.getComputedStyle(this.element,null),c=parseInt(b.getPropertyValue("width")),d=parseInt(b.getPropertyValue("height"));this.width=a.width||c||400,this.height=a.height||d||250,this.window={},this.updateCallbacks=[];var e=this;this.initialize=function(a){this.validateSeries(a.series),this.series.active=function(){return e.series.filter(function(a){return!a.disabled})},this.element.classList.add("rickshaw_graph"),this.vis=d3.select(this.element).append("svg:svg").attr("width",this.width).attr("height",this.height);var b=[Rickshaw.Graph.Renderer.Stack,Rickshaw.Graph.Renderer.Line,Rickshaw.Graph.Renderer.Bar];b.forEach(function(a){if(!a)return;e.registerRenderer(new a({graph:e}))}),this.setRenderer(a.renderer||"stack"),this.discoverRange()},this.validateSeries=function(a){var b=Object.prototype.toString.apply(a);if(b!=="[object Array]"&&!a instanceof Rickshaw.Series)throw"series is not an array: "+b;var c;a.forEach(function(a){if(!a instanceof Object)throw"series element is not an object "+a;if(!a.data)throw"series has no data: "+JSON.stringify(a);c=c||a.data.length;if(c&&a.data.length!=c)throw"series cannot have differing numbers of points: "+c+" vs "+a.data.length+"; see Rickshaw.Series.zeroFill()";var b=typeof a.data[0].x,d=typeof a.data[0].y;if(b!="number"||d!="number")throw"x and y properties of points should be numbers instead of "+b+" and "+d})},this.dataDomain=function(){var a=this.series[0].data;return[a[0].x,a.slice(-1).shift().x]},this.discoverRange=function(){var a=this.renderer.domain();this.x=d3.scale.linear().domain(a.x).range([0,this.width]),this.y=d3.scale.linear().domain(a.y).range([this.height,0]),this.y.magnitude=d3.scale.linear().domain(a.y).range([0,this.height])},this.render=function(){var a=this.stackData();this.discoverRange(),this.renderer.render(),this.updateCallbacks.forEach(function(a){a()})},this.update=this.render,this.stackData=function(){var a=this.series.active().map(function(a){return a.data}).map(function(a){return a.filter(function(a){return this._slice(a)},this)},this);this.stackData.hooks.data.forEach(function(b){a=b.f.apply(e,[a])});var b=d3.layout.stack();b.offset(e.offset);var c=b(a);this.stackData.hooks.after.forEach(function(b){c=b.f.apply(e,[a])});var d=0;return this.series.forEach(function(a){if(a.disabled)return;a.stack=c[d++]}),this.stackedData=c,c},this.stackData.hooks={data:[],after:[]},this._slice=function(a){if(this.window.xMin||this.window.xMax){var b=!0;return this.window.xMin&&a.x<=this.window.xMin&&(b=!1),this.window.xMax&&a.x>=this.window.xMax&&(b=!1),b}return!0},this.onUpdate=function(a){this.updateCallbacks.push(a)},this.registerRenderer=function(a){this._renderers=this._renderers||{},this._renderers[a.name]=a},this.setRenderer=function(a){if(!this._renderers[a])throw"couldn't find renderer "+a;this.renderer=this._renderers[a]},this.initialize(a)},Rickshaw.namespace("Rickshaw.Fixtures.Color"),Rickshaw.Fixtures.Color=function(){this.schemes={},this.schemes.spectrum14=["#ecb796","#dc8f70","#b2a470","#92875a","#716c49","#d2ed82","#bbe468","#a1d05d","#e7cbe6","#d8aad6","#a888c2","#9dc2d3","#649eb9","#387aa3"].reverse(),this.schemes.spectrum2000=["#57306f","#514c76","#646583","#738394","#6b9c7d","#84b665","#a7ca50","#bfe746","#e2f528","#fff726","#ecdd00","#d4b11d","#de8800","#de4800","#c91515","#9a0000","#7b0429","#580839","#31082b"],this.schemes.spectrum2001=["#2f243f","#3c2c55","#4a3768","#565270","#6b6b7c","#72957f","#86ad6e","#a1bc5e","#b8d954","#d3e04e","#ccad2a","#cc8412","#c1521d","#ad3821","#8a1010","#681717","#531e1e","#3d1818","#320a1b"],this.schemes.classic9=["#423d4f","#4a6860","#848f39","#a2b73c","#ddcb53","#c5a32f","#7d5836","#963b20","#7c2626","#491d37","#2f254a"].reverse(),this.schemes.httpStatus={503:"#ea5029",502:"#d23f14",500:"#bf3613",410:"#efacea",409:"#e291dc",403:"#f457e8",408:"#e121d2",401:"#b92dae",405:"#f47ceb",404:"#a82a9f",400:"#b263c6",301:"#6fa024",302:"#87c32b",307:"#a0d84c",304:"#28b55c",200:"#1a4f74",206:"#27839f",201:"#52adc9",202:"#7c979f",203:"#a5b8bd",204:"#c1cdd1"},this.schemes.colorwheel=["#b5b6a9","#858772","#785f43","#96557e","#4682b4","#65b9ac","#73c03a","#cb513a"].reverse(),this.schemes.cool=["#5e9d2f","#73c03a","#4682b4","#7bc3b8","#a9884e","#c1b266","#a47493","#c09fb5"]},Rickshaw.namespace("Rickshaw.Fixtures.RandomData"),Rickshaw.Fixtures.RandomData=function(a){var b;a=a||1;var c=200,d=Math.floor((new Date).getTime()/1e3);this.addData=function(b){var e=Math.random()*100+15+c,f=b[0].length,g=1;b.forEach(function(b){var c=Math.random()*20,h=e/25+g++ +(Math.cos(f*g*11/960)+2)*15+(Math.cos(f/7)+2)*7+(Math.cos(f/17)+2)*1;b.push({x:f*a+d,y:h+c})}),c=e*.85}},Rickshaw.namespace("Rickshaw.Fixtures.Time"),Rickshaw.Fixtures.Time=function(){var a=(new Date).getTimezoneOffset()*60,b=this;this.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],this.units=[{name:"decade",seconds:315576e3,formatter:function(a){return Math.floor(a.getUTCFullYear()/10)*10}},{name:"year",seconds:31557600,formatter:function(a){return a.getUTCFullYear()}},{name:"month",seconds:2635200,formatter:function(a){return b.months[a.getUTCMonth()]}},{name:"week",seconds:604800,formatter:function(a){return b.formatDate(a)}},{name:"day",seconds:86400,formatter:function(a){return a.getUTCDate()}},{name:"6 hour",seconds:21600,formatter:function(a){return b.formatTime(a)}},{name:"hour",seconds:3600,formatter:function(a){return b.formatTime(a)}},{name:"15 minute",seconds:900,formatter:function(a){return b.formatTime(a)}},{name:"minute",seconds:60,formatter:function(a){return a.getUTCMinutes()}},{name:"15 second",seconds:15,formatter:function(a){return a.getUTCSeconds()+"s"}},{name:"second",seconds:1,formatter:function(a){return a.getUTCSeconds()+"s"}}],this.formatDate=function(a){return a.toUTCString().match(/, (\w+ \w+ \w+)/)[1]},this.formatTime=function(a){return a.toUTCString().match(/(\d+:\d+):/)[1]},this.ceil=function(a,b){if(b.name=="month"){var c=new Date((a+b.seconds-1)*1e3),d=[c.getUTCFullYear(),c.getUTCMonth()+1,1].join("-");return(new Date(d)).getTime()/1e3}if(b.name=="year"){var c=new Date((a+b.seconds-1)*1e3),e=[c.getUTCFullYear(),1,1].join("-");return(new Date(e)).getTime()/1e3}return Math.ceil(a/b.seconds)*b.seconds}},Rickshaw.namespace("Rickshaw.Fixtures.Number"),Rickshaw.Fixtures.Number.formatKMBT=function(a){return a>=1e12?a/1e12+"T":a>=1e9?a/1e9+"B":a>=1e6?a/1e6+"M":a>=1e3?a/1e3+"K":a<1&&a>0?a.toFixed(2):a==0?"":a},Rickshaw.namespace("Rickshaw.Color.Palette"),Rickshaw.Color.Palette=function(a){var b=new Rickshaw.Fixtures.Color;a=a||{},this.schemes={},this.scheme=b.schemes[a.scheme]||a.scheme||b.schemes.colorwheel,this.runningIndex=0,this.color=function(a){return this.scheme[a||this.runningIndex++]||"#808080"}},Rickshaw.namespace("Graph.Ajax"),Rickshaw.Graph.Ajax=function(args){var self=this;this.dataURL=args.dataURL,$.ajax({url:this.dataURL,complete:function(response,status){status==="error"&&console.log("error loading dataURL: "+this.dataURL);var data=eval("("+response.responseText+")");if(typeof args.onData=="function"){var processedData=args.onData(data);data=processedData}args.series?args.series.forEach(function(a){var b=a.key||a.name;if(!b)throw"series needs a key or a name";data.forEach(function(c){var d=c.key||c.name;if(!d)throw"data needs a key or a name";if(b==d){var e=["color","name","data"];e.forEach(function(b){a[b]=a[b]||c[b]})}})}):args.series=data,self.graph=new Rickshaw.Graph(args),self.graph.render(),typeof args.onComplete=="function"&&args.onComplete(self)}})},Rickshaw.namespace("Rickshaw.Graph.Annotate"),Rickshaw.Graph.Annotate=function(a){var b=this.graph=a.graph;this.elements={timeline:a.element};var c=this;this.data={},this.elements.timeline.classList.add("rickshaw_annotation_timeline"),this.add=function(a,b){c.data[a]=c.data[a]||{boxes:[]},c.data[a].boxes.push({content:b})},this.update=function(){for(var a in c.data){var b=c.data[a],d=c.graph.x(a);if(d>c.graph.x.range()[1]){b.element&&(b.element.style.display="none");continue}if(!b.element){var e=b.element=document.createElement("div");e.classList.add("annotation"),this.elements.timeline.appendChild(e),e.addEventListener("click",function(a){e.classList.toggle("active"),b.line.classList.toggle("active")},!1)}b.element.style.left=d+"px",b.element.style.display="block",b.boxes.forEach(function(a){var e=a.element;e||(e=a.element=document.createElement("div"),e.classList.add("content"),e.innerHTML=a.content,b.element.appendChild(e),b.line=document.createElement("div"),b.line.classList.add("annotation_line"),c.graph.element.appendChild(b.line)),b.line.style.left=d+"px"})}},this.graph.onUpdate(function(){c.update()})},Rickshaw.namespace("Rickshaw.Graph.Axis.Time"),Rickshaw.Graph.Axis.Time=function(a){var b=this;this.graph=a.graph,this.elements=[],this.ticksTreatment=a.ticksTreatment||"plain";var c=new Rickshaw.Fixtures.Time;this.appropriateTimeUnit=function(){var a,b=c.units,d=this.graph.x.domain(),e=d[1]-d[0];return b.forEach(function(b){Math.floor(e/b.seconds)>=2&&(a=a||b)}),a||c.units[c.units.length-1]},this.tickOffsets=function(){var a=this.graph.x.domain(),b=this.appropriateTimeUnit(),d=Math.ceil((a[1]-a[0])/b.seconds),e=a[0],f=[];for(var g=0;g<d;g++)tickValue=c.ceil(e,b),e=tickValue+b.seconds/2,f.push({value:tickValue,unit:b});return f},this.render=function(){this.elements.forEach(function(a){a.parentNode.removeChild(a)}),this.elements=[];var a=this.tickOffsets();a.forEach(function(a){if(b.graph.x(a.value)>b.graph.x.range()[1])return;var c=document.createElement("div");c.style.left=b.graph.x(a.value)+"px",c.classList.add("x_tick"),c.classList.add(b.ticksTreatment);var d=document.createElement("div");d.classList.add("title"),d.innerHTML=a.unit.formatter(new Date(a.value*1e3)),c.appendChild(d),b.graph.element.appendChild(c),b.elements.push(c)})},this.graph.onUpdate(function(){b.render()})},Rickshaw.namespace("Rickshaw.Graph.Axis.Y"),Rickshaw.Graph.Axis.Y=function(a){var b=this;this.graph=a.graph,this.orientation=a.orientation||"right";var c=75;this.ticks=a.ticks||Math.floor(this.graph.height/c),this.tickSize=a.tickSize||4,this.ticksTreatment=a.ticksTreatment||"plain";if(a.element){var d=.1;if(!a.width||!a.height)var e=window.getComputedStyle(a.element,null),f=parseInt(e.getPropertyValue("width")),g=parseInt(e.getPropertyValue("height"));this.width=a.width||f||graph.width*d,this.height=a.height||g||graph.height,this.vis=d3.select(a.element).append("svg:svg").attr("class","rickshaw_graph y_axis").attr("width",this.width).attr("height",this.height*(1+d)),this.element=this.vis[0][0],this.element.style.position="relative";var h=this.height*d;this.element.style.top=-1*h+"px",this.element.style.paddingTop=h+"px"}else this.vis=this.graph.vis;this.render=function(){var b=d3.svg.axis().scale(this.graph.y).orient(this.orientation);b.tickFormat(a.tickFormat||function(a){return a});if(this.orientation=="left")var c="translate("+this.width+", 0)";this.element&&this.vis.selectAll("*").remove(),this.vis.append("svg:g").attr("class",["y_ticks",this.ticksTreatment].join(" ")).attr("transform",c).call(b.ticks(this.ticks).tickSubdivide(0).tickSize(this.tickSize));var d=(this.orientation=="right"?1:-1)*this.graph.width;this.graph.vis.append("svg:g").attr("class","y_grid").call(b.ticks(this.ticks).tickSubdivide(0).tickSize(d))},this.graph.onUpdate(function(){b.render()})},Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Highlight"),Rickshaw.Graph.Behavior.Series.Highlight=function(a){this.graph=a.graph,this.legend=a.legend;var b=this,c={};this.addHighlightEvents=function(a){a.element.addEventListener("mouseover",function(d){b.legend.lines.forEach(function(b){if(a===b)return;c[b.series.name]=c[b.series.name]||b.series.color,b.series.color=d3.interpolateRgb(b.series.color,d3.rgb("#d8d8d8"))(.8).toString()}),b.graph.update()},!1),a.element.addEventListener("mouseout",function(a){b.legend.lines.forEach(function(a){c[a.series.name]&&(a.series.color=c[a.series.name])}),b.graph.update()},!1)},this.legend&&this.legend.lines.forEach(function(a){b.addHighlightEvents(a)})},Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Order"),Rickshaw.Graph.Behavior.Series.Order=function(a){this.graph=a.graph,this.legend=a.legend;var b=this;$(function(){$(b.legend.list).sortable({containment:"parent",tolerance:"pointer",update:function(a,c){var d=[];$(b.legend.list).find("li").each(function(a,b){if(!b.series)return;d.push(b.series)});for(var e=b.graph.series.length-1;e>=0;e--)b.graph.series[e]=d.shift();b.graph.update()}}),$(b.legend.list).disableSelection()}),this.graph.onUpdate(function(){var a=window.getComputedStyle(b.legend.element).height;b.legend.element.style.height=a})},Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Toggle"),Rickshaw.Graph.Behavior.Series.Toggle=function(a){this.graph=a.graph,this.legend=a.legend;var b=this;this.addAnchor=function(a){var b=document.createElement("a");b.innerHTML="&#10004;",b.classList.add("action"),a.element.insertBefore(b,a.element.firstChild),b.onclick=function(b){a.series.disabled?(a.series.enable(),a.element.classList.remove("disabled")):(a.series.disable(),a.element.classList.add("disabled"))}},this.legend&&this.legend.lines.forEach(function(a){b.addAnchor(a)}),this._addBehavior=function(){this.graph.series.forEach(function(a){a.disable=function(){if(b.graph.series.length<=1)throw"only one series left";a.disabled=!0,b.graph.update()},a.enable=function(){a.disabled=!1,b.graph.update()}})},this._addBehavior(),this.updateBehaviour=function(){this._addBehavior()}},Rickshaw.namespace("Rickshaw.Graph.HoverDetail"),Rickshaw.Graph.HoverDetail=function(a){var b=this.graph=a.graph,c=this.element=document.createElement("div");c.className="detail",this.visible=!0,b.element.appendChild(c);var d=this;this.lastEvent=null,this.update=function(a){a=a||this.lastEvent;if(!a)return;this.lastEvent=a;if(a.target.nodeName!="path"&&a.target.nodeName!="svg")return;var c=a.offsetX||a.layerX,e=a.offsetY||a.layerY,f=b.x.invert(c),g=b.stackedData,h=g.slice(-1).shift(),i=d3.scale.linear().domain([h[0].x,h.slice(-1).shift().x]).range([0,h.length]),j=Math.floor(i(f)),k=j||0;for(var l=j;l<g[0].length-1;){if(g[0][l].x<=f&&g[0][l+1].x>f){k=l;break}g[0][l+1]<f?l++:l--}f=g[0][k].x;var m=b.series.active().map(function(a){return{name:a.name,value:a.stack[k]}});this.visible&&d.render.call(d,f,m,c,e)},this.xFormatter=function(a){return(new Date(a*1e3)).toUTCString()},this.graph.element.addEventListener("mousemove",function(a){d.visible=!0,d.update(a)},!1),this.graph.onUpdate(function(){d.update()}),this.graph.element.addEventListener("mouseout",function(a){a.relatedTarget&&!(a.relatedTarget.compareDocumentPosition(d.graph.element)&Node.DOCUMENT_POSITION_CONTAINS)&&d.hide()},!1),this.hide=function(){this.visible=!1,this.element.classList.add("inactive")},this.show=function(){this.visible=!0,this.element.classList.remove("inactive")},this.render=function(a,c,d,e){this.element.innerHTML="",this.element.style.left=b.x(a)+"px";var f=document.createElement("div");f.className="x_label",f.innerHTML=this.xFormatter(a),this.element.appendChild(f);var g=null,h=function(a,b){return a.value.y0+a.value.y-(b.value.y0+b.value.y)};c.sort(h).forEach(function(a){var c=document.createElement("div");c.className="item",c.innerHTML=a.name+":&nbsp;"+a.value.y.toFixed(2),c.style.top=b.y(a.value.y0+a.value.y)+"px";var d=b.y.magnitude.invert(b.element.offsetHeight-e);this.element.appendChild(c);var f=document.createElement("div");f.className="dot",f.style.top=c.style.top,this.element.appendChild(f),d>a.value.y0&&d<a.value.y0+a.value.y&&!g&&(g=c,c.className="item active",f.className="dot active")},this),this.show()}},Rickshaw.namespace("Rickshaw.Graph.JSONP"),Rickshaw.Graph.JSONP=function(a){var b=this;this.dataURL=a.dataURL,$.ajax({url:this.dataURL,dataType:"jsonp",success:function(c,d,e){d==="error"&&console.log("error loading dataURL: "+this.dataURL);if(typeof a.onData=="function"){var f=a.onData(c);c=f}a.series?a.series.forEach(function(a){var b=a.key||a.name;if(!b)throw"series needs a key or a name";c.forEach(function(c){var d=c.key||c.name;if(!d)throw"data needs a key or a name";if(b==d){var e=["color","name","data"];e.forEach(function(b){a[b]=a[b]||c[b]})}})}):a.series=c,b.graph=new Rickshaw.Graph(a),b.graph.render(),typeof a.onComplete=="function"&&a.onComplete(b)}})},Rickshaw.namespace("Rickshaw.Graph.Legend"),Rickshaw.Graph.Legend=function(a){var b=this.element=a.element,c=this.graph=a.graph,d=this;b.classList.add("rickshaw_legend");var e=this.list=document.createElement("ul");b.appendChild(e);var f=c.series.map(function(a){return a}).reverse();this.lines=[],this.addLine=function(a){var b=document.createElement("li");b.className="line";var c=document.createElement("div");c.className="swatch",c.style.backgroundColor=a.color,b.appendChild(c);var f=document.createElement("span");f.className="label",f.innerHTML=a.name,b.appendChild(f),e.appendChild(b),b.series=a,a.noLegend&&(b.style.display="none");var g={element:b,series:a};d.shelving&&(d.shelving.addAnchor(g),d.shelving.updateBehaviour()),d.highlighter&&d.highlighter.addHighlightEvents(g),d.lines.push(g)},f.forEach(function(a){d.addLine(a)}),c.onUpdate(function(){})},Rickshaw.namespace("Rickshaw.Graph.RangeSlider"),Rickshaw.Graph.RangeSlider=function(a){var b=this.element=a.element,c=this.graph=a.graph;$(function(){$(b).slider({range:!0,min:c.dataDomain()[0],max:c.dataDomain()[1],values:[c.dataDomain()[0],c.dataDomain()[1]],slide:function(a,b){c.window.xMin=b.values[0],c.window.xMax=b.values[1],c.update(),c.dataDomain()[0]==b.values[0]&&(c.window.xMin=undefined),c.dataDomain()[1]==b.values[1]&&(c.window.xMax=undefined)}})}),b[0].style.width=c.width+"px",c.onUpdate(function(){var a=$(b).slider("option","values");$(b).slider("option","min",c.dataDomain()[0]),$(b).slider("option","max",c.dataDomain()[1]),c.window.xMin==undefined&&(a[0]=c.dataDomain()[0]),c.window.xMax==undefined&&(a[1]=c.dataDomain()[1]),$(b).slider("option","values",a)})},Rickshaw.namespace("Rickshaw.Graph.Renderer.Line"),Rickshaw.Graph.Renderer.Line=function(a){var b=this.graph=a.graph,c=this;this.name="line",this.unstack=!0,b.unstacker=b.unstacker||new Rickshaw.Graph.Unstacker({graph:b}),this.seriesPathFactory=function(){return d3.svg.line().x(function(a){return b.x(a.x)}).y(function(a){return b.y(a.y)}).interpolate(this.graph.interpolation).tension(.8)},this.domain=function(){var a=[],c=b.stackedData||b.stackData();c.forEach(function(b){b.forEach(function(b){a.push(b.y)})});var d=c[0][0].x,e=c[0][c[0].length-1].x,f=0,g=d3.max(a);return{x:[d,e],y:[f,g]}},this.render=function(){b.vis.selectAll("*").remove();var a=this.graph.vis.selectAll("path").data(this.graph.stackedData).enter().append("svg:path").attr("d",this.seriesPathFactory()),d=0;b.series.forEach(function(b){if(b.disabled)return;b.path=a[0][d++],c._styleSeries(b)})},this._styleSeries=function(a){a.path.setAttribute("fill","none"),a.path.setAttribute("stroke",a.color),a.path.setAttribute("stroke-width",2)}},Rickshaw.namespace("Rickshaw.Graph.Renderer.Stack"),Rickshaw.Graph.Renderer.Stack=function(a){var b=this.graph=a.graph,c=this;this.name="stack",this.seriesPathFactory=function(){return d3.svg.area().x(function(a){return b.x(a.x)}).y0(function(a){return b.y(a.y0)}).y1(function(a){return b.y(a.y+a.y0)}).interpolate(this.graph.interpolation).tension(.8)},this.domain=function(){var a=b.stackedData||b.stackData(),c=a.slice(-1).shift(),d=a[0][0].x,e=a[0][a[0].length-1].x,f=0,g=d3.max(c,function(a){return a.y+a.y0});return{x:[d,e],y:[f,g]}},this.render=function(){b.vis.selectAll("*").remove();var a=b.vis.selectAll("path").data(b.stackedData).enter().append("svg:path").attr("d",this.seriesPathFactory()),d=0;b.series.forEach(function(b){if(b.disabled)return;b.path=a[0][d++],c._styleSeries(b)})},this._styleSeries=function(a){if(!a.path)return;a.path.setAttribute("fill",a.color),a.path.setAttribute("stroke-width",2),a.path.setAttribute("class",a.className)}},Rickshaw.namespace("Rickshaw.Graph.Renderer.Bar"),Rickshaw.Graph.Renderer.Bar=function(a){var b=this.graph=a.graph,c=this;this.name="bar",this.gapSize=a.gapSize||.05,this.domain=function(){var a=b.stackedData||b.stackData(),c=a.slice(-1).shift(),d=a[0][0].x,e=a[0][a[0].length-1].x,f=0,g=d3.max(c,function(a){return a.y+a.y0});return this._barWidth=null,{x:[d,e],y:[f,g]}},this.barWidth=function(){if(this._barWidth)return this._barWidth;var a=b.stackedData||b.stackData(),c=a.slice(-1).shift(),d={};for(var e=0;e<c.length-1;e++){var f=c[e+1].x-c[e].x;d[f]=d[f]||0,d[f]++}var g={count:0};return d3.keys(d).forEach(function(a){g.count<d[a]&&(g={count:d[a],magnitude:a})}),this._barWidth=this.graph.x(c[0].x+g.magnitude*(1-this.gapSize)),this._barWidth},this.render=function(){b.vis.selectAll("*").remove();var a=this.barWidth();b.series.forEach(function(c){if(c.disabled)return;var d=b.vis.selectAll("path").data(c.stack).enter().append("svg:rect").attr("x",function(a){return b.x(a.x)}).attr("y",function(a){return b.y(a.y0+a.y)}).attr("width",a).attr("height",function(a){return b.y.magnitude(a.y)});Array.prototype.forEach.call(d[0],function(a){a.setAttribute("fill",c.color)})})},this._styleSeries=function(a){if(!a.path)return;a.path.setAttribute("fill",a.color),a.path.setAttribute("stroke-width",2),a.path.setAttribute("class",a.className)}},Rickshaw.namespace("Rickshaw.Graph.Smoother"),Rickshaw.Graph.Smoother=function(a){this.graph=a.graph,this.element=a.element;var b=this;this.aggregationScale=1,this.element&&$(function(){$(b.element).slider({min:1,max:100,slide:function(a,c){b.setScale(c.value),b.graph.update()}})}),b.graph.stackData.hooks.data.push({name:"smoother",orderPosition:50,f:function(a){var c=[];return a.forEach(function(a){var d=[];while(a.length){var e=0,f=0,g=a.splice(0,b.aggregationScale);g.forEach(function(a){e+=a.x/g.length,f+=a.y/g.length}),d.push({x:e,y:f})}c.push(d)}),c}}),this.setScale=function(a){if(a<1)throw"scale out of range: "+a;this.aggregationScale=a,this.graph.update()}},Rickshaw.namespace("Rickshaw.Graph.Unstacker"),Rickshaw.Graph.Unstacker=function(a){this.graph=a.graph;var b=this;this.graph.stackData.hooks.after.push({name:"unstacker",f:function(a){return b.graph.renderer.unstack?(a.forEach(function(a){a.forEach(function(a){a.y0=0})}),a):a}})},Rickshaw.namespace("Rickshaw.Series"),Rickshaw.Series=function(a){var b=this;this.initialize=function(a,c,d){d=d||{},b.palette=new Rickshaw.Color.Palette(c),b.timeBase=typeof d.timeBase=="undefined"?Math.floor((new Date).getTime()/1e3):d.timeBase,a&&typeof a=="object"&&a instanceof Array&&a.forEach(function(a){b.addItem(a)})},this.addItem=function(a){if(typeof a.name=="undefined")throw"addItem() needs a name";a.color=a.color||b.palette.color(),a.data=a.data||[],a.data.length==0&&b.getIndex()>0?b[0].data.forEach(function(b){a.data.push({x:b.x,y:0})}):a.data.push({x:b.timeBase,y:0}),b.push(a),b.legend&&b.legend.addLine(b.itemByName(a.name))},this.addData=function(a){var c=this.getIndex();Rickshaw.keys(a).forEach(function(a){b.itemByName(a)||b.addItem({name:a})}),b.forEach(function(d){d.data.push({x:(c*b.timeInterval||1)+b.timeBase,y:a[d.name]||0})})},this.getIndex=function(){return b[0]&&b[0].data&&b[0].data.length?b[0].data.length:0},this.itemByName=function(a){var c;return b.forEach(function(b){b.name==a&&(c=b)}),c},this.setTimeInterval=function(a){b.timeInterval=parseInt(a/1e3)},this.setTimeBase=function(a){b.timeBase=a},this.dump=function(){var a={timeBase:b.timeBase,timeInterval:b.timeInterval,items:[]};return b.forEach(function(b){var c={color:b.color,name:b.name,data:[]};b.data.forEach(function(a){c.data.push({x:a.x,y:a.y})}),a.items.push(c)}),a},this.load=function(a){a.timeInterval&&(b.timeInterval=a.timeInterval),a.timeBase&&(b.timeBase=a.timeBase),a.items&&a.items.forEach(function(a){b.push(a),b.legend&&b.legend.addLine(b.itemByName(a.name))})},this.initialize(a)},Rickshaw.Series.prototype=new Array,Rickshaw.Series.zeroFill=function(a){var b,c=0,d=a.map(function(a){return a.data});while(c<Math.max.apply(null,d.map(function(a){return a.length})))b=Math.min.apply(null,d.filter(function(a){return a[c]}).map(function(a){return a[c].x})),d.forEach(function(a){(!a[c]||a[c].x!=b)&&a.splice(c,0,{x:b,y:0})}),c++};

data/lib/picky-statistics/application/javascripts/statistics.js

@@ -1,59 +1,25 @@
-// TODO Refactor the file.
-//
-
-var pieOptions = {
-  type: 'pie',
-  width: '100px',
-  height: '100px',
-  offset: -90
-};
+var fullLiveGraph = new Graph('#full_live_graph.stats', ['Full', 'Live'], 4);
+var resultsGraph  = new Graph('#results_graph.stats', ['1 result', '2 results', '3 results', '4 or more results', '100 or more results', '1000 or more results', 'no results'], 7);
+var speedGraph  = new Graph('#speed_graph.stats', ['quick (< 0.001s)', 'normal', 'slow (> 0.1s)', 'very slow (> 1s)'], 10);
+var offsetsGraph  = new Graph('#offset_graph.stats', ['with offset', 'without offset'], 3);
 
 function updateFullLive(data) {
-  var values = [
-    data["full"]["total"],
-    data["live"]["total"]
-  ];
-  pieOptions['sliceColors'] = ['#000000','#999999'];
-  $('#full_live_graph .inlinesparkline').sparkline(values, pieOptions);
-  $('#full_live_graph .legend .full').html(data["full"]["total"]);
-  $('#full_live_graph .legend .live').html(data["live"]["total"]);
-  $('#full_live_graph .legend .total').html(parseInt(data["full"]["total"], 10) + parseInt(data["live"]["total"], 10));
+  fullLiveGraph.update([
+    parseInt(data["full"]["total"], 10),
+    parseInt(data["live"]["total"], 10)
+  ]);
 };
 
 function updateResults(data) {
-  var values = [
-    data["full"]["totals"][1],
-    data["full"]["totals"][2],
-    data["full"]["totals"][3],
-    data["full"]["totals"]['4+'],
-    data["full"]["totals"]['100+'],
-    data["full"]["totals"]['1000+'],
-    data["full"]["totals"][0]
-  ];
-  pieOptions['sliceColors'] = ['#66CC00','#669900','#666600','#996600','#FF9900','#FF9933','#CC0000'];
-  $('#results_graph .inlinesparkline').sparkline(values, pieOptions);
-  $('#results_graph .legend .result1').html(data["full"]["totals"][1]);
-  $('#results_graph .legend .result2').html(data["full"]["totals"][2]);
-  $('#results_graph .legend .result3').html(data["full"]["totals"][3]);
-  $('#results_graph .legend .result4plus').html(data["full"]["totals"]['4+']);
-  $('#results_graph .legend .result100plus').html(data["full"]["totals"]['100+']);
-  $('#results_graph .legend .result1000plus').html(data["full"]["totals"]['1000+']);
-  $('#results_graph .legend .result0').html(data["full"]["totals"][0]);
-};
-
-function updateOffset(data) {
-  var withOffset    = parseInt(data["full"]["offset"], 10);
-  var total         = parseInt(data["full"]["total"], 10);
-  var withoutOffset = total - withOffset;
-  
-  var values = [
-    withOffset,
-    withoutOffset
-  ];
-  pieOptions['sliceColors'] = ['#000000','#999999'];
-  $('#offset_graph .inlinesparkline').sparkline(values, pieOptions);
-  $('#offset_graph .legend .with_offset').html(withOffset);
-  $('#offset_graph .legend .without_offset').html(withoutOffset);
+  resultsGraph.update([
+    parseInt(data["full"]["totals"][1], 10),
+    parseInt(data["full"]["totals"][2], 10),
+    parseInt(data["full"]["totals"][3], 10),
+    parseInt(data["full"]["totals"]['4+'], 10),
+    parseInt(data["full"]["totals"]['100+'], 10),
+    parseInt(data["full"]["totals"]['1000+'], 10),
+    parseInt(data["full"]["totals"][0], 10)
+  ]);
 };
 
 function updateSpeed(data) {
@@ -62,14 +28,23 @@ function updateSpeed(data) {
   var long_running = parseInt(data["full"]["long_running"], 10);
   var very_long_running = parseInt(data["full"]["very_long_running"], 10);
   
-  var values = [
+  speedGraph.update([
     quick,
     (total - quick - long_running - very_long_running),
     long_running,
     very_long_running
-  ];
-  pieOptions['sliceColors'] = ['#66CC00','#669900','#FF9900','#CC0000'];
-  $('#speed_graph .inlinesparkline').sparkline(values, pieOptions);
+  ]);
+};
+
+function updateOffset(data) {
+  var withOffset    = parseInt(data["full"]["offset"], 10);
+  var total         = parseInt(data["full"]["total"], 10);
+  var withoutOffset = total - withOffset;
+  
+  offsetsGraph.update([
+    withOffset,
+    withoutOffset
+  ]);
 };
 
 var intervalUpdating = false;

data/lib/picky-statistics/application/stylesheets/statistics.css

@@ -5,50 +5,106 @@ body {
 
 h1, h2, h3, h4 {
   font-weight: normal;
-  margin: 0.5em 0em 0.5em; 
+  margin: 0.5em 0em 0.5em;
 }
 h1 { font-size: 1.3em; }
 h2 { font-size: 1.2em; }
 h3 { font-size: 1.1em; }
 h4 { font-size: 1.1em; }
 
-.push {
-  overflow: hidden;
+input {
+  margin-left: 10px;
+  margin-right: 5px;
 }
 
 .actions {
   padding: 5px;
+  font-size: 0.8em;
 }
 
 .stats {
-  float: left;
   padding: 10px;
-  width: 200px;
-  height: 270px;
+  clear: both;
+}
+
+.rickshaw_legend {
+  float: left;
 }
 
-.legend {
+.rickshaw_legend ul {
+  padding: 0px;
+  margin: 0px;
+}
+
+.rickshaw_legend .line {
   clear: both;
-  margin-top: 10px;
+  line-height: 140%;
+  padding-right: 15px;
 }
-.legend .color {
-  float: left;
-  width: 0.8em;
-  height: 0.8em;
-  color: green;
-  margin: 3px 0px 1px 3px;
+
+.rickshaw_legend li {
+  padding: 0 0 0 2px;
+  min-width: 80px;
+  white-space: nowrap;
+  list-style-type: none;
+}
+
+.rickshaw_legend .line .swatch {
+  display: inline-block;
+  margin-right: 3px;
+  border-radius: 2px;
 }
-.legend .text {
+
+.rickshaw_legend .swatch {
+  width: 10px;
+  height: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.rickshaw_graph {
   float: left;
-  font-size: 0.8em;
-  margin: 0px 5px;
-}
-.legend .color.green { background-color: #6c0; }
-.legend .color.darkgreen { background-color: #690; }
-.legend .color.browngreen { background-color: #660; }
-.legend .color.brownorange { background-color: #960; }
-.legend .color.orange { background-color: #f90; }
-.legend .color.brownred { background-color: #f93; }
-.legend .color.red { background-color: red; }
-.legend .color.black { background-color: black; }
-.legend .color.grey { background-color: #999; }
+  margin-right: 20px;
+}
+
+.rickshaw_graph .detail {
+  pointer-events: none;
+  position: relative;
+  top: 0;
+  z-index: 2;
+  background: rgba(0, 0, 0, 0.1);
+  bottom: 0;
+  width: 1px;
+  transition: opacity 0.25s linear;
+  -moz-transition: opacity 0.25s linear;
+  -o-transition: opacity 0.25s linear;
+  -webkit-transition: opacity 0.25s linear;
+}
+
+.rickshaw_graph .detail .item {
+  position: absolute;
+  z-index: 2;
+  border-radius: 3px;
+  padding: 0.25em;
+  font-size: 12px;
+  font-family: Arial, sans-serif;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.4);
+  color: white;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  margin-left: 1em;
+  margin-top: -1em;
+  white-space: nowrap;
+}
+
+
+.rickshaw_graph .detail .x_label {
+  font-family: Arial, sans-serif;
+  border-radius: 3px;
+  padding: 6px;
+  opacity: 0.5;
+  border: 1px solid #E0E0E0;
+  font-size: 12px;
+  position: absolute;
+  background: white;
+  white-space: nowrap;
+}

data/lib/picky-statistics/application/views/index.haml

@@ -4,49 +4,39 @@
     %link{ :href => 'stylesheets/statistics.css', :media => 'screen', :rel => 'stylesheet', :type => 'text/css' }/
     %script{ :src => 'javascripts/jquery-1.4.4.min.js', :type => 'text/javascript' }
     %script{ :src => 'javascripts/jquery.sparkline-1.6.min.js', :type => 'text/javascript' }
-    %script{ :src => 'javascripts/statistics.js', :type => 'text/javascript' }
-    
+    %script{ :src => 'javascripts/d3/d3.min.js', :type => 'text/javascript' }
+    %script{ :src => 'javascripts/d3/d3.layout.min.js', :type => 'text/javascript' }
+    %script{ :src => 'javascripts/rickshaw.js', :type => 'text/javascript' }
+    %script{ :src => 'javascripts/graph.js', :type => 'text/javascript' }
+
   %body
     %h1 Clam: Picky Statistics Interface.
     .actions
       %button{ :href => '#', :onclick => 'javascript:updateStatistics();' } Update now
       |
-      %button{ :href => '#', :onclick => 'javascript:stopUpdatingStatistics();' } Stop Updating
-      %button{ :href => '#', :onclick => 'javascript:updateStatisticsPeriodically(5);' } Update every 5 seconds
-      %button{ :href => '#', :onclick => 'javascript:updateStatisticsPeriodically(30);' } Update every 30 seconds
-      %button{ :href => '#', :onclick => 'javascript:updateStatisticsPeriodically(600);' } Update every 5 minutes
-    .overview.push
-      %h2 Overview
-      #full_live_graph.stats
-        %h2 Totals
-        .inlinesparkline
-        = haml :legend, {}, :color => :black, :type => :full, :text => 'full requests'
-        = haml :legend, {}, :color => :grey, :type => :live, :text => 'live requests'
-        = haml :legend, {}, :color => :white, :type => :total, :text => 'total'
-    .full.push
-      %h2 Full Results
-      #results_graph.stats
-        %h3 Counts
-        .inlinesparkline
-        = haml :legend, {}, :color => :green, :type => :result1, :text => 'x 1 result'
-        = haml :legend, {}, :color => :darkgreen, :type => :result2, :text => 'x 2 results'
-        = haml :legend, {}, :color => :browngreen, :type => :result3, :text => 'x 3 results'
-        = haml :legend, {}, :color => :brownorange, :type => :result4plus, :text => 'x 4 or more results'
-        = haml :legend, {}, :color => :orange, :type => :result100plus, :text => 'x 100 or more results'
-        = haml :legend, {}, :color => :brownred, :type => :result1000plus, :text => 'x 1000 or more results'
-        = haml :legend, {}, :color => :red, :type => :result0, :text => 'x no results'
-      #speed_graph.stats
-        %h3 Performance
-        .inlinesparkline
-        = haml :legend, {}, :color => :green, :type => :quick, :text => 'quick (< 0.001s)'
-        = haml :legend, {}, :color => :darkgreen, :type => :normal, :text => 'normal'
-        = haml :legend, {}, :color => :orange, :type => :slow, :text => 'slow (> 0.1s)'
-        = haml :legend, {}, :color => :red, :type => :very_slow, :text => 'very slow (> 1s)'
-      #offset_graph.stats
-        %h3 Offsets
-        .inlinesparkline
-        = haml :legend, {}, :color => :black, :type => :with_offset, :text => 'with offset'
-        = haml :legend, {}, :color => :grey, :type => :without_offset, :text => 'without offset'
+      %input{ :type => "radio", :name => "updating", :onclick => 'javascript:stopUpdatingStatistics();' } Don't update
+      %input{ :type => "radio", :name => "updating", :onclick => 'javascript:updateStatisticsPeriodically(1);' } Every second
+      %input{ :type => "radio", :name => "updating", :onclick => 'javascript:updateStatisticsPeriodically(3);', :checked => 'checked' } Every 3 seconds
+      %input{ :type => "radio", :name => "updating", :onclick => 'javascript:updateStatisticsPeriodically(10);' } Every 10 seconds
+      %input{ :type => "radio", :name => "updating", :onclick => 'javascript:updateStatisticsPeriodically(30);'} Every 30 seconds
+      %input{ :type => "radio", :name => "updating", :onclick => 'javascript:updateStatisticsPeriodically(600);'} Every 5 minutes
+    #full_live_graph.stats
+      %h3 Full/Live
+      .graph
+      .legend
+    #results_graph.stats
+      %h3 Full Results
+      .graph
+      .legend
+    #speed_graph.stats
+      %h3 Full Performance
+      .graph
+      .legend
+    #offset_graph.stats
+      %h3 Full Offsets
+      .graph
+      .legend
+    %script{ :src => 'javascripts/statistics.js', :type => 'text/javascript' }
   :javascript
     updateStatistics();
-    
+    updateStatisticsPeriodically(3);