bp-fnordmetric 1.2.7

data/web/js/fnordmetric.overview_view.js

@@ -0,0 +1,35 @@
+FnordMetric.views.overviewView = function(){
+  var widgets = [];
+  var viewport = null;
+
+  function load(_viewport){
+    viewport = _viewport.html('');
+
+    viewport.append('<div class="navbar"></div>');
+    viewport.append('<h1>Application Overview</h1>');
+    viewport.append('<h3>Welcome to FnordMetric :)</h3>');
+
+    // $.ajax({
+    //   url: FnordMetric.p + '/' + FnordMetric.currentNamespace+'/dashboard/'+dashboard_name,
+    //   success: function(resp, status){
+    //     var conf = JSON.parse(resp);
+    //     renderWidgets(conf.widgets);
+    //   }
+    // });
+  };
+
+  function resize(){
+    // here be dragons
+  }
+
+  function close(){
+    // here be dragons
+  }
+
+  return {
+    load: load,
+    resize: resize,
+    close: close
+  };
+
+};

data/web/js/fnordmetric.pie_widget.js

@@ -0,0 +1,118 @@
+FnordMetric.widgets.pieWidget = function(){
+
+  function render(opts){
+
+    return drawLayout();
+
+    var widget_uid = FnordMetric.util.getNextWidgetUID();
+    var chart=false;
+
+    function redraw(first_time, silent){
+      if(!silent){ $(opts.elem).css('opacity', 0.5); }
+      var gauge_values = {};
+      var gauges_left = opts.gauges.length;
+      var at = parseInt(new Date().getTime()/1000);
+      $(opts.gauges).each(function(i,gauge){
+        $.ajax({
+          url: FnordMetric.p + '/' + FnordMetric.currentNamespace+'/gauge/'+gauge+'?at='+at,
+          success: function(_resp){
+            var resp = JSON.parse(_resp);
+            gauges_left -= 1;
+            for(_tk in resp){
+              gauge_values[gauge] = parseInt(resp[_tk]||0);
+            }
+            if(gauges_left==0){
+              redrawChart(first_time, gauge_values);
+            }
+          }
+        });
+      });
+    }
+
+    function redrawChart(first_time, gauge_values){
+
+      var series_data = [];
+
+      for(_gkey in gauge_values){
+        series_data.push([
+          opts.gauge_titles[_gkey],
+          gauge_values[_gkey]
+        ]);
+      }
+
+      /*chart = new Highcharts.Chart({
+        chart: {
+          renderTo: 'container-'+widget_uid,
+          defaultSeriesType: 'pie',
+          height: 270,
+          spacingTop: 5,
+          spacingBottom: 30
+        },
+        credits: {
+          enabled: false
+        },
+        title: { text: '' },
+        legend: {
+          layout: 'horizontal',
+          align: 'top',
+          verticalAlign: 'top',
+          margin: 25,
+          borderWidth: 0
+        },
+        tooltip: {
+          formatter: function() {
+            return '<b>'+ this.point.name +'</b>: '+ this.y + ' (' + this.percentage.toFixed(1) + '%)';
+          }
+        },
+        plotOptions: {
+          pie: {
+            animation: first_time,
+            dataLabels: {
+              formatter: function() {
+                return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(1) +' %';
+              }
+            }
+          }
+        },
+        series: [
+          {
+            name: opts.title,
+            data: series_data
+          }
+        ]
+      });*/
+
+      //chart.redraw();
+      $(opts.elem).css('opacity', 1);
+    }
+
+    function drawLayout(){
+      $(opts.elem).append( $('<div></div>').attr('class', 'headbar small').append(
+        $('<span></span>').html(opts.title)
+      ) ).append(
+        $('<div></div>').attr('id', 'container-'+widget_uid).css({
+          height: 270
+        })
+      );
+    }
+
+    drawLayout();
+    redraw(true);
+
+    if(opts.autoupdate){
+      var autoupdate_interval = window.setInterval(function(){
+        redraw(false, true);
+      }, opts.autoupdate*1000);
+
+      $('body').bind('fm_dashboard_close', function(){
+        window.clearInterval(autoupdate_interval);
+      });
+    }
+
+  }
+
+  return {
+    render: render
+  };
+
+};  

data/web/js/fnordmetric.realtime_timeline_widget.js

@@ -0,0 +1,175 @@
+FnordMetric.widgets.realtimeValueWidget = function(){
+
+    var xpadding = 20;
+    var ypadding = 10;
+    var bmargin = 6;
+    var bwidth  = 5;
+    var bcolor  = '#06C';
+    var zero_height = 5;
+
+
+    var widget_uid = FnordMetric.util.getNextWidgetUID();
+    var width, height, canvas,  opts, max;
+    var bars = [];
+    var tick = false;
+    var next_values = [];
+    var next_value_interval = false;
+
+
+    function render(_opts){
+      opts = _opts;
+
+      drawLayout();
+
+      width = opts.elem.width() - (xpadding * 2) - 15 - 250;
+      height = opts.height || 210;
+      //xtick = width / (xticks - 1);
+
+      canvas = d3.select('#container-'+widget_uid)
+        .append("svg:svg")
+        .attr("width", width+(2*xpadding))
+        .attr("height", height);
+
+      canvas.selectAll("*").remove();
+
+      changeTick(opts.ticks[0]);
+    }
+
+    function changeTick(_tick){
+      tick = _tick;
+      canvas.selectAll('.valuebar').remove();
+      next_values = [];
+      max = 1;
+
+      for(var n=parseInt(width / bmargin); n > 0; n--){
+        drawValue(0, n-1);
+      }
+    }
+
+    function nextValue(value){
+      if (value > max){
+        var old_max = max;
+        max = value * 1.2;
+        canvas.selectAll('.valuebar').each(function(){
+          var theight = parseInt($(this).attr('height'))*(old_max/max);
+          if(theight < zero_height){ theight = zero_height; }
+          $(this).attr("y", height-(ypadding*2)-theight)
+          $(this).attr("height", theight);
+        });
+      }
+
+      drawValue(value);
+
+      canvas.selectAll('.valuebar').each(function(){
+        var new_x = parseInt($(this).attr('x'))-bmargin;
+        if(new_x < 5){ new_x = 5; }
+        $(this).attr("x",  new_x);
+      });
+
+      pruneValues();
+      next_value_interval = false;
+      nextValueAsync();
+    }
+
+    function nextValueAsync(value){
+      if(value != undefined){ 
+        next_values.unshift(value); 
+        $('.big_number .value', opts.elem).html(FnordMetric.util.formatValue(value));
+      }
+      if(next_values.length > 0){
+        if(!next_value_interval){
+          next_value_interval = window.setInterval(function(){
+            var _v = next_values.pop();
+            if(_v != undefined){ nextValue(_v); }
+          }, 20);  
+        }
+      }   
+    }
+
+    function pruneValues(){
+      while(bars.length > (width / bmargin)){
+        bars.pop().remove();
+      }
+    }
+
+    function drawValue(value, offset){
+      if(!offset){ offset = 0; }
+      if(!value){ value = 0; }
+
+      if(value > 0){ 
+        var theight = (height-(ypadding*4)) * (value/max);
+        var fillc = bcolor;
+      } else {
+        var theight = zero_height;
+        var fillc = '#ddd';
+      }  
+
+      if(theight < zero_height){
+        theight = zero_height;
+      }
+      
+      bars.unshift(canvas
+        .append("svg:rect")
+        .attr("class", "valuebar")
+        .attr("x", width+xpadding-(offset*bmargin))
+        .attr("y", height-(ypadding*2)-theight)
+        .attr("fill", fillc)
+        .attr("width", bwidth)
+        .attr("height", theight));
+
+    }
+
+    function announce(evt){
+      if((evt._class == "widget_push") && (evt.cmd == "value")){
+        if(evt.values[tick]){
+          nextValueAsync(parseFloat(evt.values[tick]));  
+        } else {
+          nextValueAsync(0);
+        }        
+      }
+    }
+
+    function drawLayout(){
+      if(!opts.no_headbar){
+        $(opts.elem).append( $('<div></div>').attr('class', 'headbar').append(
+          $('<h2></h2>').html(opts.title)
+        ));
+      }
+ 
+      $(opts.elem).append(
+        $('<div></div>').attr('id', 'container-'+widget_uid).css({
+          height: opts.height + 6,
+          marginBottom: 20,
+          overflow: 'hidden'
+        }).append(
+          $('<div></div>')
+            .addClass('big_number number')
+            .attr('data-current', 0)
+            .attr('data', 0)
+            .append($('<span class="desc">').html(opts.desc))
+            .append($('<span class="value">'))
+        )
+      );
+
+      if(opts.ticks){
+        $('.headbar', opts.elem).append('<div class="tick_btns btn_group" style="margin-right:17px;"></div>');
+        for(__tick in opts.ticks){
+          var _tick = opts.ticks[__tick];
+          $('.tick_btns', opts.elem).append(
+            $('<div></div>').attr('class', 'button tick').append($('<span></span>')
+              .html(FnordMetric.util.formatTimeRange(_tick)))
+              .attr('data-tick', _tick)
+              .click(function(){ 
+                changeTick($(this).attr('data-tick')); 
+              })  
+          );
+        }
+      }
+    }
+
+    return {
+      render: render,
+      announce: announce
+    }
+
+};

data/web/js/fnordmetric.session_view.js

@@ -0,0 +1,342 @@
+FnordMetric.views.sessionView = (function(){
+
+  var listElem = $('<ul class="session_list"></ul>');
+  var feedInnerElem = $('<ul class="feed_inner"></ul>');
+  var typeListElem  = $('<ul class="event_type_list"></ul>');
+
+  var filterElem = $('<div class="events_sidebar"></div>')
+    .append("<div class='headbar small'>Event Types</div>")
+    .append(typeListElem);
+
+  var feedElem = $('<div class="sessions_feed"></div>').append(feedInnerElem);
+  var sideElem = $('<div class="sessions_sidebar"></div>').append(listElem);
+
+  var eventsPolledUntil = false;
+  var eventsFilter = {uncheckedTypes: [], checkedSessions: []};
+  var sessionData = {};
+  var pollRunning = true;
+  var first_poll  = true;
+
+  function load(elem){
+    eventsPolledUntil = parseInt(new Date().getTime()/10000);
+
+    elem.html('')
+      .append('<div class="navbar"></div>');
+
+    FnordMetric.ui.navbar($('.navbar', viewport), {
+      breadcrumb: [
+        ["Fnord", "/group/fnord"],
+        ["Active Users", "/active_users"]
+      ],
+      buttons: [
+        ["<i class='icon-refresh'></i>Refresh", function(){  }]
+      ]
+    });
+
+    elem
+      .append(filterElem.css('marginTop', '47px'))
+      .append(feedElem)
+      .append(sideElem);
+
+    startPoll();
+    loadEventTypes();
+  };
+
+  function resize(_width, _height){
+    $('.sessions_feed').width(_width-452);
+  };
+
+  function startPoll(){
+    (doSessionPoll())();
+    (doEventsPoll())();
+    FnordMetric.views.sessionView.session_poll = window.setInterval(doSessionPoll(), 1000);
+  };
+
+  function stopPoll(){
+    pollRunning = false;
+    window.clearInterval(FnordMetric.views.sessionView.session_poll);
+  }
+
+  function doSessionPoll(){
+    return (function(){
+      /*$.ajax({
+        url: FnordMetric.p + '/' + FnordMetric.currentNamespace+'/sessions',
+        success: callbackSessionPoll()
+      });*/
+      sortSessions();
+    });
+  };
+
+  function loadEventHistory(params){
+    feedInnerElem.html('');
+    /*$.ajax({
+      url: FnordMetric.p + '/' + FnordMetric.currentNamespace+'/events',
+      data: params,
+      success: function(_data, _status){
+        var data = JSON.parse(_data).events;
+        for(var n=data.length; n >= 0; n--){
+          if(data[n]){ renderEvent(data[n]); }
+        }
+      }
+    });*/
+  }
+
+  function callbackSessionPoll(){
+    return (function(_data, _status){
+      $.each(JSON.parse(_data).sessions, function(i,v){
+        updateSession(v);
+      });
+      sortSessions();
+    });
+  };
+
+  function loadEventTypes(data){
+    typeListElem.html('');
+    $(data).each(function(i,v){
+      if((v.length > 0) && (v.slice(0,5)!='_set_')){
+        addEventType(v,v);
+      }
+    });
+  };
+
+  function setCheckboxesCheckedState(types_state, sessions_state) {
+    $('.event_type_list .event_type input').attr('checked', types_state);
+    $('.session_list .session input').attr('checked', sessions_state);
+  }
+
+  function addEventType(type, display){
+    typeListElem.append(
+      $('<li class="event_type"></li>').append(
+        $('<span class="history"></span>').html('history')
+        .click(function(){
+          setCheckboxesCheckedState(true, true);
+          $('input', $(this).parent()).attr('checked', true);
+          updateEventFilter(); loadEventHistory({type: type});
+        })
+      ).append(
+        $('<input type="checkbox" />').attr('checked', true)
+        .click(function(){ updateEventFilter(); })
+      ).append(
+        $('<span></span>').html(display)
+      ).attr('rel', type)
+    );
+  }
+
+  function updateEventFilter(){
+    var _unchecked_types = [];
+    $('ul.event_type_list li.event_type').each(function(i,v){
+      if(!$('input', v).attr('checked')){
+        _unchecked_types.push($(v).attr('rel'));
+      }
+    });
+    eventsFilter.uncheckedTypes = _unchecked_types;
+
+    var _checked_sessions = [];
+    $('ul.session_list li.session').each(function(i,v){
+      if($('input', v).attr('checked')){
+        _checked_sessions.push($(v).data().session);
+      }
+    });
+    eventsFilter.checkedSessions = _checked_sessions;
+  }
+
+  function doEventsPoll(){
+    return (function(){
+
+      /*$.ajax({
+        url: FnordMetric.p + '/' + FnordMetric.currentNamespace+'/events?since='+eventsPolledUntil,
+        success: callbackEventsPoll()
+      });*/
+
+      FnordMetric.publish({
+        "type": "active_users_request",
+        "first_poll": first_poll,
+        "since": eventsPolledUntil
+      });
+
+      first_poll = false;
+
+    });
+  };
+
+  function announce(evt){
+    if (evt.type == "active_users_response"){
+      callbackEventsPoll(evt);
+      $(evt.sessions).each(function(){ updateSession(this); });
+      if(evt.types.length > 0){ loadEventTypes(evt.types); }
+    }
+  }
+
+  function callbackEventsPoll(data){
+    var events = data.events;
+    var timeout = 1000;
+    var maxevents = 200;
+    var passesFiltering = function(event_data) {
+      var passes_type_filtering = false;
+      var passes_session_filtering = false;
+      if(eventsFilter.uncheckedTypes.indexOf(event_data._type) == -1) {
+        if(parseInt(v._time)<=eventsPolledUntil) {
+          passes_type_filtering = true;
+        }
+      }
+      if(!passes_type_filtering) return false;
+
+      if(eventsFilter.checkedSessions.length == 0){
+        return true; // No filter set - show all events
+      } else {
+        if(event_data._session_key){
+          if(eventsFilter.checkedSessions.indexOf(event_data._session_key) >= 0){
+            return true; // Filter set and match
+          } else {
+            return false; // Filter set but no match
+          }
+        } else {
+          return false; // Filter set but event is not associated with session
+        }
+      }
+    }
+
+    if(events.length > 0){
+      eventsPolledUntil = parseInt(events[0]._time)-1;
+    }
+    for(var n=events.length-1; n >= 0; n--){
+      var v = events[n];
+      if(passesFiltering(v)) {
+        renderEvent(v);
+      }
+    };
+    var elems = $("p", feedInnerElem);
+    for(var n=maxevents; n < elems.length; n++){
+      $(elems[n]).remove();
+    }
+    if(pollRunning){
+      window.setTimeout(doEventsPoll(), timeout);
+    }
+  };
+
+  function updateSession(session_data){
+    var session_key = session_data.session_key;
+    if(!sessionData[session_key]){
+      updateEventFilter()
+    }
+    sessionData[session_key] = session_data;
+    renderSession(session_data);
+  }
+
+  function sortSessions(){
+  }
+
+  function renderSession(session_data){
+
+    var session_name = session_data["_name"];
+    var session_time = FnordMetric.util.formatTimeSince(session_data["_updated_at"]);
+    var session_elem = $('li[data-session='+session_data["session_key"]+']:first');
+
+    if(session_elem.length>0){
+
+      if(session_data["_picture"] && (session_data["_picture"].length > 1)){
+        $('.picture img', session_elem).attr('src', session_data["_picture"])
+      }
+
+      if(session_name){
+        $('.name', session_elem).html(session_name);
+      }
+
+      $('.time', session_elem).html(session_time);
+
+    } else {
+
+      var session_picture = $('<img width="25" />');
+
+      if(!session_name){
+        session_name = session_data["session_key"].substr(0,15)
+      };
+
+      if(session_data["_picture"]){
+        session_picture.attr('src', session_data["_picture"]);
+      };
+
+      listElem.append(
+        $('<li class="session"></li>').append(
+          $('<div class="picture"></div>').html(session_picture)
+        ).append(
+          $('<span class="name"></span>').html(session_name)
+        ).append(
+          $('<span class="time"></span>').html(session_time)
+        ).append(
+          $('<span class="history"></span>').html('history')
+          .click(function(){
+            setCheckboxesCheckedState(true, false);              
+            updateEventFilter(); 
+            loadEventHistory({session_key: session_data["session_key"]});
+          })
+        ).attr('data-session', session_data["session_key"])
+      );
+
+    }
+  };
+
+  function renderEvent(event_data){
+    var event_time = $('<span class="time"></span>');
+    var event_message = $('<span class="message"></span>');
+    var event_props = $('<span class="properties"></span>');
+    var event_picture = $('<div class="picture"></picture>');
+
+    var event_type = event_data._type;
+
+    if(!event_type){ return true; }
+
+    if(event_data._message){
+      event_message.html(event_data._message);
+    } else if(event_type=="_pageview"){
+      event_message.html("Pageview: " + event_data.url);
+    } else if(event_type.substr(0,5) == '_set_'){
+      return true; /* dont render */
+    } else {
+      event_message.html(event_type);
+    }
+
+    event_time.html(FnordMetric.util.formatTimeOfDay(event_data._time));
+
+    if(event_data._session_key && event_data._session_key.length > 0){
+      var __session_key = event_data._session_key;
+      var load_usersession = (function(){
+        loadEventHistory({session_key: __session_key});
+      });
+      if(session_data=sessionData[event_data._session_key]){
+        if(session_data._name){
+          event_props.append(
+            $('<strong></strong>').html(session_data._name).css({
+              'cursor': 'pointer'
+            }).click(load_usersession)
+          );
+        }
+        if(session_data._picture){
+          event_picture.append(
+            $('<img width="40" />').attr('src', session_data._picture)
+          ).click(load_usersession);
+        }
+      }
+    }
+
+    feedInnerElem.prepend(
+      $('<li class="feed_event"></li>')
+      .append(event_time)
+      .append(event_picture)
+      .append(event_message)
+      .append(event_props)
+    );
+  }
+
+  function close(){
+    stopPoll();
+  };
+
+  return {
+    load: load,
+    resize: resize,
+    announce: announce,
+    close: close
+  };
+
+});