fnordmetric 0.3.2

data/pub/fnordmetric/fnordmetric.css

@@ -0,0 +1,53 @@
+body, html{ height:100%; padding:0px;}
+body{ background:#fff; color:#333; margin:0; padding:0; overflow-y:scroll; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
+
+#wrap{ margin:0 40px; }
+
+#tabs{ width:200px; position:fixed; height:100%; margin-top:70px; }
+#tabs ul{ list-style-type:none; padding:0; margin:0; }
+#tabs ul li{ height:34px; line-height:35px; border-bottom:1px dotted #ececec; cursor:pointer; color:#666; font-size:13px; }
+#tabs ul li:after{ content:'›'; display:block; float:right; margin-right:15px; color:#ccc; font-size:16px; line-height:35px; }
+#tabs ul li .picto{ margin-top:10px; margin-right:7px; }
+#tabs ul li:hover, #tabs ul li:hover:after{ color:#000; }
+#tabs ul li:hover .picto{ opacity:1; }
+
+.picto{ display:block; height:14px; width:14px; float:left; background:url('/fnordmetric/sprite.png') no-repeat 14px 14px; opacity:0.7; }
+.picto.piechart{ background-position:-42px -173px; width:9px; margin-right:5px; }
+
+#viewport{ min-height:800px; float:left; margin-left:220px; padding-top:20px; border-right:1px solid #e0e0e0; border-left:1px solid #e0e0e0; }
+
+.headbar{ height:36px; background:#f2f2f2; border-bottom:1px solid #e2e2e2; }
+.headbar h2{ margin:8px; line-height:21px; float:left; height:20px; font-size:14px; }
+.headbar .datepicker{ background:#fff; border:1px solid #999; height:20px; padding:0 7px; float:right; margin:8px -1px; min-width:100px; font-size:11px; font-style:italic; }
+.headbar .button.mr{ margin-right:16px;  }
+
+
+.headbar .button{
+  margin:8px 0px; height:16px; float:right; display:block;
+  margin-right:-1px;
+  background:url('/fnordmetric/sprite.png') no-repeat 0 -49px #eee; 
+  border:1px solid #999;
+  border-bottom-color:#888;
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1); 
+  cursor:pointer;
+  
+  font-size: 11px;
+  font-weight:bold;
+  line-height:16px;
+  padding:2px 6px;
+  text-align:center;
+  text-decoration:none;
+  vertical-align:top;
+  white-space:nowrap;
+}
+
+.headbar .button:hover, .headbar.button.active{background:#ddd;border-bottom-color:#999;-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, .05)}
+
+.numbers_container, .number{ float:left; border-right:1px solid #ececec;}
+.number{ margin-left:12px; padding-right:20px; margin-right:10px; }
+.number .value{ color:#333; font-size:30px; display:block; margin-bottom:5px; }
+.number .desc{ color:#999; font-size:12px; }
+.number:last-child{ border-right:none; }
+.numbers_container{ padding-right:0px; width:33.2%; }
+
+.numbers_container .title{ padding:4px 10px 1px 10px; color:#333; font-size:13px; display:block; background:#f2f2f2; border-bottom:1px solid #e2e2e2; margin-bottom:15px; }

data/pub/fnordmetric/fnordmetric.js

@@ -0,0 +1,44 @@
+FnordMetric = {
+  d: document,
+  p: '/fnordmetric/',
+  id: function(id){return FnordMetric.d.getElementById(id)},
+  tag: function(element){return FnordMetric.d.getElementsByTagName(element)},
+  ce: function(element){return FnordMetric.d.createElement(element)},
+
+  init: function(){
+    if(widget_config.path_prefix){ FnordMetric.p = widget_config.path_prefix; } 
+  },
+
+  js: function(url, callback){
+    var s = FnordMetric.ce('script');
+    s.type = "text/javascript";
+    s.onload = callback;
+    FnordMetric.init();
+    s.src = FnordMetric.p+url;
+    FnordMetric.tag('head')[0].appendChild(s);  
+  },
+
+  css: function(url, callback){
+    var s = FnordMetric.ce('link');
+    s.type = "text/css";
+    s.rel = 'stylesheet';
+    s.href = FnordMetric.p+url;
+    s.onload = callback;         
+    FnordMetric.tag('head')[0].appendChild(s); 
+  },
+
+  render: function(elem, widget_config){
+    var f = FnordMetric.ce('iframe');    
+    f.style.width = '100%'; f.style.height = widget_config.widget_height+'px';
+    f.frameBorder = 'none'; f.scrolling = 'no';
+    FnordMetric.id(elem).appendChild(f);
+    var s = f.contentDocument.createElement('script')
+    s.type = "text/javascript";
+    s.src = FnordMetric.p+'/fnordmetric/fnordmetric.js';    
+    widget_config.path_prefix = FnordMetric.p;
+    s.onload = function(){ f.contentWindow.FnordMetric.js(widget_config.widget_url); }
+    f.contentWindow.widget_config = widget_config;        
+    f.contentDocument.getElementsByTagName('head')[0].appendChild(s);   	
+  }
+
+};

data/pub/fnordmetric/widget_numbers.js

@@ -0,0 +1,71 @@
+FnordMetric.css('/fnordmetric/fnordmetric.css', function(){});
+FnordMetric.js('/jquery-1.6.1.min.js', function(){  
+
+  drawLayout();
+  updateDataAndValues();
+
+  window.setInterval(updateDataAndValues, 5000);
+
+  function drawLayout(){
+    for(n in widget_config.metrics){
+      $('body').append(container=$('<div></div>').attr('class', 'numbers_container').attr('rel', widget_config.metrics[n]));
+      container.append($('<div></div>').addClass('title').html(widget_config.metrics[n]));
+      for(var k in widget_config.intervals){
+        container.append($('<div></div>').addClass('number').attr('rel', k).attr('data',0).append(
+          $('<span></span>').addClass('value').html(0)
+        ).append(
+          $('<span></span>').addClass('desc').html(k)
+        ));
+      } 
+    }
+  }
+
+  function updateDataAndValues(){
+    for(n in widget_config.metrics){
+      for(k in widget_config.intervals){
+        var _url = FnordMetric.p+'/metric/'+widget_config.metrics[n]+'?'+widget_config.intervals[k];
+        $.get(_url, updateSingleNumber(widget_config.metrics[n], k));
+      }
+    }
+  }
+
+  function updateSingleNumber(metric_name, interval_name){
+    return function(json){
+      var _elem = $('.number[rel="'+interval_name+'"]', $('.numbers_container[rel="'+metric_name+'"]'));
+      _elem.attr('data', json.value);
+      updateValues(4);
+    };
+  }
+
+  function formatValue(value){
+    if(value < 10){ return value.toFixed(2); }
+    if(value > 1000){ return (value/1000.0).toFixed(1) + "k"; }
+    return value.toFixed(0); 
+  }
+
+  function updateValues(diff_factor){
+    var still_running = false;
+    $('.number').each(function(){
+      var target_val = parseFloat($(this).attr('data'));
+      var current_val = parseFloat($(this).attr('data-current'));
+      if(!current_val){ current_val=0; }
+      var diff = (target_val-current_val)/diff_factor; 
+      if(diff < 1){ diff=1; }
+      if(target_val > current_val){ 
+        still_running = true;
+        var new_val = current_val+diff;
+        if(new_val > target_val){ new_val = target_val; }
+        $(this).attr('data-current', new_val);
+        $('.value', this).html(formatValue(new_val));
+      }
+    });
+    if(still_running){ 
+      (function(df){
+        window.setTimeout(function(){ updateValues(df); }, 30);
+      })(diff_factor);
+    }
+  }
+
+
+
+});

data/pub/fnordmetric/widget_timeline.js

@@ -0,0 +1,110 @@
+FnordMetric.js('/jquery-1.6.1.min.js', function(){  
+FnordMetric.js('/highcharts/highcharts.js', function(){  
+FnordMetric.css('/fnordmetric/fnordmetric.css', function(){});
+FnordMetric.css('/fnordmetric/widget_timeline.css', function(){});
+
+
+  drawLayout();
+  chart = new Highcharts.Chart({     
+    chart: { renderTo: 'container', defaultSeriesType: widget_config.chart_type, height: 270 },
+    series: [],
+    title: { text: '' },
+    xAxis: {       
+      type: 'datetime',
+      tickInterval: widget_config.tick * 1000, 
+      title: (widget_config.x_title||''), 
+      labels: { step: 2 } 
+    },
+    yAxis: { 
+      title: (widget_config.y_title||''), 
+      maxPadding: 0 
+    },
+    legend: {
+      layout: 'horizontal',
+      align: 'top',
+      verticalAlign: 'top',
+      x: -5,
+      y: -3,
+      margin: 25,
+      borderWidth: 0
+    },
+  });
+  redrawWithRange(true);
+
+  if(widget_config.autoupdate){
+    window.setInterval(function(){
+      redrawWithRange(false, true);
+    }, 3000);
+  }
+
+  function redrawWithRange(first_time, silent){
+    if(!silent){ $("#container").css('opacity', 0.5); }
+    redrawDatepicker();    
+    var _query = '?at='+widget_config.start_timestamp+'-'+widget_config.end_timestamp+
+                 '&tick='+widget_config.tick+(widget_config.delta ? '&delta=1' : '');    
+    chart.series = [];
+    metrics_completed = 0;
+    for(n in widget_config.metrics){
+      $.ajax({
+        url: FnordMetric.p+'/metric/'+widget_config.metrics[n]+_query, 
+        success: redrawMetric(first_time, n)
+      });         
+    }  
+  }
+
+  function redrawMetric(first_time, n){
+    return (function(json){                   
+      for(i in json.values){ json.values[i][0] = json.values[i][0]*1000; }
+      if(!first_time){ 
+        chart.get('series-'+n).setData(json.values);
+      } else {
+        chart.addSeries({name: widget_config.metrics[n], data: json.values, id: 'series-'+n });     
+      }       
+      if((metrics_completed += 1) == widget_config.metrics.length){ 
+        $("#container").css('opacity', 1);
+      }
+    });
+  }
+
+  function redrawDatepicker(){
+    $('.datepicker').html(
+      Highcharts.dateFormat('%d.%m.%y %H:%M', parseInt(widget_config.start_timestamp)*1000) + 
+      ' ‐ ' +
+      Highcharts.dateFormat('%d.%m.%y %H:%M', parseInt(widget_config.end_timestamp)*1000) 
+    );
+  }
+
+  function moveRange(direction){
+    v = widget_config.tick*direction*8;
+    widget_config.start_timestamp += v;
+    widget_config.end_timestamp += v;
+    redrawWithRange();
+  }
+  
+  function drawLayout(){
+    $('body').append( $('<div></div>').attr('class', 'headbar').append(
+      $('<div></div>').attr('class', 'button mr').append($('<span></span>').html('refresh')).click(
+        function(){ redrawWithRange(); }
+      )
+    ).append(
+    //  $('<div></div>').attr('class', 'button').append($('<span></span>').html('1h'))
+    //).append(
+    //  $('<div></div>').attr('class', 'button').append($('<span></span>').html('1d'))
+    //).append(
+      $('<div></div>').attr('class', 'button mr').append($('<span></span>').html('&rarr;')).click(
+        function(){ moveRange(1); }
+      )
+    ).append(
+      $('<div></div>').attr('class', 'datepicker')
+    ).append(
+      $('<div></div>').attr('class', 'button').append($('<span></span>').html('&larr;')).click(
+        function(){ moveRange(-1); }
+      )
+    ).append(
+      $('<h2></h2>').html(widget_config.title)
+    ) );
+    $('body').append( $('<div></div>').attr('id', 'container') );
+  }
+
+});  
+});

data/pub/highcharts/adapters/mootools-adapter.js

@@ -0,0 +1,12 @@
+/*
+ Highcharts JS v2.1.6 (2011-07-08)
+ MooTools adapter
+
+ (c) 2010-2011 Torstein H?nsi
+
+ License: www.highcharts.com/license
+*/
+(function(){var g=window,j=!!g.$merge,h=g.$extend||function(){return Object.append.apply(Object,arguments)};g.HighchartsAdapter={init:function(){var a=Fx.prototype,b=a.start,c=Fx.Morph.prototype,d=c.compute;a.start=function(f){var e=this.element;if(f.d)this.paths=Highcharts.pathAnim.init(e,e.d,this.toD);b.apply(this,arguments);return this};c.compute=function(f,e,k){var i=this.paths;if(i)this.element.attr("d",Highcharts.pathAnim.step(i[0],i[1],k,this.toD));else return d.apply(this,arguments)}},animate:function(a,
+b,c){var d=a.attr,f=c&&c.complete;if(d&&!a.setStyle){a.getStyle=a.attr;a.setStyle=function(){var e=arguments;a.attr.call(a,e[0],e[1][0])};a.$family=a.uid=true}HighchartsAdapter.stop(a);c=new Fx.Morph(d?a:$(a),h({transition:Fx.Transitions.Quad.easeInOut},c));if(b.d)c.toD=b.d;f&&c.addEvent("complete",f);c.start(b);a.fx=c},each:function(a,b){return j?$each(a,b):a.each(b)},map:function(a,b){return a.map(b)},grep:function(a,b){return a.filter(b)},merge:function(){var a=arguments,b=[{}],c=a.length;if(j)a=
+$merge.apply(null,a);else{for(;c--;)b[c+1]=a[c];a=Object.merge.apply(Object,b)}return a},addEvent:function(a,b,c){if(typeof b=="string"){if(b=="unload")b="beforeunload";if(!a.addEvent)if(a.nodeName)a=$(a);else h(a,new Events);a.addEvent(b,c)}},removeEvent:function(a,b,c){if(b){if(b=="unload")b="beforeunload";defined(c)?a.removeEvent(b,c):a.removeEvents(b)}else a.removeEvents()},fireEvent:function(a,b,c,d){b=new Event({type:b,target:a});b=h(b,c);b.preventDefault=function(){d=null};a.fireEvent&&a.fireEvent(b.type,
+b);d&&d(b)},stop:function(a){a.fx&&a.fx.cancel()}}})();

data/pub/highcharts/adapters/mootools-adapter.src.js

@@ -0,0 +1,243 @@
+/** 
+ * @license Highcharts JS v2.1.6 (2011-07-08)
+ * MooTools adapter
+ * 
+ * (c) 2010-2011 Torstein Hønsi
+ * 
+ * License: www.highcharts.com/license
+ */
+
+// JSLint options:
+/*global Highcharts, Fx, $, $extend, $each, $merge, Events, Event */
+
+(function() {
+	
+var win = window,
+	legacy = !!win.$merge,
+	$extend = win.$extend || function() {
+		return Object.append.apply(Object, arguments)
+	};
+
+win.HighchartsAdapter = {
+	/**
+	 * Initialize the adapter. This is run once as Highcharts is first run.
+	 */
+	init: function() {
+		var fxProto = Fx.prototype,
+			fxStart = fxProto.start,
+			morphProto = Fx.Morph.prototype,
+			morphCompute = morphProto.compute;
+			
+		// override Fx.start to allow animation of SVG element wrappers
+		fxProto.start = function(from, to) {
+			var fx = this,
+				elem = fx.element;
+			
+			// special for animating paths
+			if (from.d) {
+				//this.fromD = this.element.d.split(' ');
+				fx.paths = Highcharts.pathAnim.init(
+					elem, 
+					elem.d, 
+					fx.toD
+				);
+			}
+			fxStart.apply(fx, arguments);
+			
+			return this; // chainable
+		};
+		
+		// override Fx.step to allow animation of SVG element wrappers
+		morphProto.compute = function(from, to, delta) {
+			var fx = this,
+				paths = fx.paths;
+			
+			if (paths) {
+				fx.element.attr(
+					'd', 
+					Highcharts.pathAnim.step(paths[0], paths[1], delta, fx.toD)
+				);
+			} else {
+				return morphCompute.apply(fx, arguments);
+			}
+		};
+		
+	},	
+	
+	/**
+	 * Animate a HTML element or SVG element wrapper
+	 * @param {Object} el
+	 * @param {Object} params
+	 * @param {Object} options jQuery-like animation options: duration, easing, callback
+	 */
+	animate: function (el, params, options) {
+		var isSVGElement = el.attr,
+			effect,
+			complete = options && options.complete;
+		
+		if (isSVGElement && !el.setStyle) {
+			// add setStyle and getStyle methods for internal use in Moo
+			el.getStyle = el.attr;
+			el.setStyle = function() { // property value is given as array in Moo - break it down
+				var args = arguments;
+				el.attr.call(el, args[0], args[1][0]);
+			}
+			// dirty hack to trick Moo into handling el as an element wrapper
+			el.$family = el.uid = true;
+		}
+		
+		// stop running animations
+		HighchartsAdapter.stop(el);
+		
+		// define and run the effect
+		effect = new Fx.Morph(
+			isSVGElement ? el : $(el), 
+			$extend({
+				transition: Fx.Transitions.Quad.easeInOut
+			}, options)
+		);
+		
+		// special treatment for paths
+		if (params.d) {
+			effect.toD = params.d;
+		}
+		
+		// jQuery-like events
+		if (complete) {
+			effect.addEvent('complete', complete);
+		}
+		
+		// run
+		effect.start(params);
+		
+		// record for use in stop method
+		el.fx = effect;
+	},
+	
+	/**
+	 * MooTool's each function
+	 * 
+	 */
+	each: function(arr, fn) {
+		return legacy ? 
+			$each(arr, fn) :
+			arr.each(fn);
+	},
+	
+	/**
+	 * Map an array
+	 * @param {Array} arr
+	 * @param {Function} fn
+	 */
+	map: function (arr, fn){
+		return arr.map(fn);
+	},
+	
+	/**
+	 * Grep or filter an array
+	 * @param {Array} arr
+	 * @param {Function} fn
+	 */
+	grep: function(arr, fn) {
+		return arr.filter(fn);
+	},
+	
+	/**
+	 * Deep merge two objects and return a third
+	 */
+	merge: function() {
+		var args = arguments,
+			args13 = [{}], // MooTools 1.3+
+			i = args.length,
+			ret;
+		
+		if (legacy) {
+			ret = $merge.apply(null, args);
+		} else {
+			while (i--) {
+				args13[i + 1] = args[i];	
+			}
+			ret = Object.merge.apply(Object, args13);
+		}
+		
+		return ret;
+	},
+	
+	/**
+	 * Add an event listener
+	 * @param {Object} el HTML element or custom object
+	 * @param {String} type Event type
+	 * @param {Function} fn Event handler
+	 */
+	addEvent: function (el, type, fn) {
+		if (typeof type == 'string') { // chart broke due to el being string, type function
+		
+			if (type == 'unload') { // Moo self destructs before custom unload events
+				type = 'beforeunload';
+			}
+
+			// if the addEvent method is not defined, el is a custom Highcharts object
+			// like series or point
+			if (!el.addEvent) {
+				if (el.nodeName) {
+					el = $(el); // a dynamically generated node
+				} else {
+					$extend(el, new Events()); // a custom object
+				}
+			}
+			
+			el.addEvent(type, fn);
+		}
+	},
+	
+	removeEvent: function(el, type, fn) {
+		if (type) {
+			if (type == 'unload') { // Moo self destructs before custom unload events
+				type = 'beforeunload';
+			}
+
+			if (defined(fn)) {
+				el.removeEvent(type, fn);
+			} else {
+				el.removeEvents(type);
+			}
+		} else {
+			el.removeEvents();
+		}
+	},
+	
+	fireEvent: function(el, event, eventArguments, defaultFunction) {
+		// create an event object that keeps all functions		
+		event = new Event({ 
+			type: event,
+			target: el
+		});
+		event = $extend(event, eventArguments);
+		// override the preventDefault function to be able to use
+		// this for custom events
+		event.preventDefault = function() {
+			defaultFunction = null;
+		};
+		// if fireEvent is not available on the object, there hasn't been added
+		// any events to it above
+		if (el.fireEvent) {
+			el.fireEvent(event.type, event);
+		}
+		
+		// fire the default if it is passed and it is not prevented above
+		if (defaultFunction) {
+			defaultFunction(event);
+		}		
+	},
+	
+	/**
+	 * Stop running animations on the object
+	 */
+	stop: function (el) {
+		if (el.fx) {
+			el.fx.cancel();
+		}
+	}
+}
+
+})();