fnordmetric 0.7.5 → 0.9.7

data/web/js/fnordmetric.session_view.js

@@ -0,0 +1,343 @@
+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(){
+    console.log("fixpaul: sort and splice to 100");
+  }
+
+  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
+  };
+
+});

data/web/js/fnordmetric.timeline_widget.js

@@ -0,0 +1,333 @@
+FnordMetric.widgets.timelineWidget = function(){
+
+    var widget_uid = FnordMetric.util.getNextWidgetUID();
+    var width, height, canvas, series, opts, xtick;
+    var xticks = 100;
+    var running_request = false;
+  
+    var series_paths = {};
+    var series_values = {};
+
+    var xpadding = 30;
+
+    function render(_opts){
+      opts = _opts;
+      //if(!silent){ $(opts.elem).css('opacity', 0.5); }
+
+      if(opts.xticks){ xticks = opts.xticks; }
+      if(!opts.draw_points){ opts.draw_points = true; }
+      if(!opts.draw_path){ opts.draw_path = true; }
+      if(!opts.draw_ygrid){ opts.draw_ygrid = true; }
+      if(!opts.draw_xgrid){ opts.draw_xgrid = true; }
+
+      drawLayout(opts);
+
+      width = opts.elem.width() - (xpadding * 2) - 15;
+      height = opts.height || 240;
+      xtick = width / (xticks - 1);
+
+      canvas = d3.select('#container-'+widget_uid)
+        .append("svg:svg")
+        .attr("width", width+(2*xpadding))
+        .attr("height", height+30);
+
+      canvas.selectAll("*").remove();
+
+      for (ind in opts.series){
+        series_values[opts.series[ind]] = {};
+      }
+
+      updateRange();
+      updateChart();
+
+      if(opts.autoupdate){
+        var secs = parseInt(opts.autoupdate);
+        if(secs > 0){
+          var autoupdate_interval = window.setInterval(function(){
+            updateRange(true); updateChart(); // FIXPAUL: only update if not scrolled
+          }, secs*1000);
+
+          $('body').bind('fm_dashboard_close', function(){
+            window.clearInterval(autoupdate_interval);
+          });
+        }
+      }
+      
+      //canvas.drawGrid(0, 0, width+(2*xpadding), height, 1, 6, "#ececec");
+    }
+
+    function announce(evt){
+      if(evt.widget_key == opts.widget_key){
+        if((evt._class == "widget_response") && (evt.cmd == "values_at")){
+          running_request = false;
+          updateSeriesData(evt.tick, evt.values);
+          updateChart();
+        }
+      }
+    }
+
+    function requestValues(_tick, times){
+      if(times.length > 0){
+        if(!running_request){
+          running_request = (new Date).getTime();
+          requestValuesAsync(_tick, times);
+        }
+      }
+    }
+
+    function requestValuesAsync(_tick, times){
+      FnordMetric.publish({
+        "_class": "widget_request",
+        "_channel": opts.channel,
+        "cmd": "values_at",
+        "tick": _tick, 
+        "ticks": times,
+        "widget_key": opts.widget_key
+      })
+    }
+
+
+    function changeTick(){
+      opts.tick = parseInt($(this).attr('data-tick'));
+      opts.start_timestamp = null;
+      opts.end_timestamp = null;
+      updateRange();
+      redrawDatepicker();
+      updateChart();
+    }
+
+    function updateSeriesData(_tick, values){
+      for(_series in values){
+        for(_t in values[_series]){
+          series_values[_series][_tick+"+"+_t] = values[_series][_t];
+        }
+      }
+    }
+
+    function updateChart(){
+      var _ticks = [];
+      var _miss = [];
+      var _max = [];
+      var _rndr = [];
+      
+      for(sind in opts.series){
+        var _last = opts.start_timestamp + opts.tick;
+        var _delta = (opts.end_timestamp - _last) / xticks;
+        var _sdata = [];
+
+        for(var n=0; n < xticks; n++){
+          var _t = (parseInt(_last / opts.tick) * opts.tick);
+          var _v = series_values[opts.series[sind]][opts.tick+"+"+_t];
+          if((_v === undefined) && (_miss.indexOf(_t) == -1)){ _miss.push(_t); }
+          _sdata.push(_v || 0);
+          _last += _delta;
+        }
+
+        _max.push(Math.max.apply(Math, _sdata));       
+        _rndr.push([opts.series[sind], _sdata]);
+      }
+
+      _max = Math.max.apply(Math, _max)*1.1;
+      if(_max == 0){ _max = 1; }
+
+      for(rind in _rndr){
+        drawSeries(_rndr[rind][0], _rndr[rind][1], _max);
+      }
+
+      if(_miss.length > 0)
+        requestValues(opts.tick, _miss);
+
+      redrawDatepicker();
+    }
+
+    function refreshChart(){
+      for(_series in series_values){
+        series_values[_series] = {};
+      }
+
+      updateRange();
+      updateChart();
+    }
+
+    function drawSeries(series, series_data, _max){
+      
+        //var path_string = "M0,"+height;
+        var path_string = "";
+        var _color = '0066CC';
+        
+        if (series_paths[series]){
+          for(ind in series_paths[series]){ 
+            series_paths[series][ind].remove();
+          }
+        }
+
+        series_paths[series] = [];
+
+        if(!_max){ _max = Math.max.apply(Math, series_data)*1.1; }
+        if(_max < 1){ _max = 1; }
+
+        $(series_data).each(function(i,v){    
+
+          var p_x = xpadding+(i*xtick);
+          var p_y = (height-((v/_max)*height));
+            
+          path_string += ( ( i == 0 ? "M" : "L" ) + p_x + ',' + p_y );
+
+          // if(i%label_mod==0){
+          //   canvas.text(p_x, height+10, labels[i]).attr({
+          //     font: '10px Helvetica, Arial', 
+          //     fill: "#777"
+          //   });
+          // }
+
+          if(opts.draw_points){
+            series_paths[series].push(canvas
+              .append("svg:circle")
+              .attr("cx", p_x)
+              .attr("cy", p_y)
+              .attr("stroke-width", "1px")
+              .attr("stroke", "#fff")
+              .attr("fill", _color)
+              .attr("fill-opacity", 1)
+              .attr("r", 4)
+            );
+          }
+
+          // var htrgt = canvas.rect(p_x - 20, p_y - 20, 40, 40).attr({
+          //   stroke: "none", 
+          //   fill: "#fff", 
+          //   opacity: 0
+          // }).toFront();
+
+          //series_paths[series].push(htrgt);
+
+          // (function(htrgt, series_paths){
+
+          //   var t_y = p_y + 9;
+          //   var ttt = canvas.text(p_x, t_y+10, v).attr({
+          //     font: '12px Helvetica, Arial',
+          //     fill: "#fff",
+          //     opacity: 0
+          //   });
+            
+          //   var tttb = ttt.getBBox();
+          //   var ttw = tttb.width+20;
+          //   var tt = canvas.rect(p_x-(ttw/2), t_y, ttw, 22, 5).attr({
+          //     stroke: "none",
+          //     fill: "#000",
+          //     opacity: 0
+          //   }).toBack();
+
+          //   series_paths[series].push(tt);
+          //   series_paths[series].push(ttt);
+
+          //   $(htrgt[0]).hover(function(){
+          //     tt.animate({ opacity: 0.8 }, 300);
+          //     ttt.animate({ opacity: 0.8 }, 300);
+          //   }, function(){
+          //     tt.animate({ opacity: 0 }, 300);
+          //     ttt.animate({ opacity: 0 }, 300);
+          //   });
+
+          // })(htrgt, series_paths);
+
+        });
+
+        if(opts.draw_path){
+          series_paths[series].push(canvas.append("svg:path")
+            .attr("fill", "none")
+            .attr("stroke", "steelblue")
+            .attr("stroke-width", 3)
+            .attr("d", path_string)
+          );
+        }
+
+        if(opts.draw_area){
+          // path_string += "L"+(width+xpadding)+","+height+" L"+xpadding+","+height+" Z";
+
+          // series_paths[series].push(
+          //   canvas.path(path_string).attr({
+          //     stroke: "none", 
+          //     fill: _color, 
+          //     opacity: 0.1
+          //   }).toBack()
+          // );
+        }
+    }
+
+    function drawLayout(opts){
+      $(opts.elem).append( $('<div></div>').attr('class', 'headbar').append(
+        $('<div></div>').attr('class', 'button mr').append($('<span></span>').html('refresh')).click(
+          function(){ refreshChart(); }
+        )
+      ).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 ml').append($('<span></span>').html('&larr;')).click(
+          function(){ moveRange(-1); }
+        )
+      ).append(
+        $('<h2></h2>').html(opts.title)
+      ) ).append(
+        $('<div></div>').attr('id', 'container-'+widget_uid).css({
+          height: opts.height + 6,
+          marginBottom: 20,
+          overflow: 'hidden'
+        })
+      );
+
+      if(opts.ticks){
+        $('.headbar', opts.elem).append('<div class="tick_btns btn_group"></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(changeTick)  
+          );
+        }
+      }
+    }
+
+    function redrawDatepicker(){
+      $('.datepicker', opts.elem).html(
+        Highcharts.dateFormat('%d.%m.%y %H:%M', parseInt(opts.start_timestamp)*1000) +
+        '&nbsp;&dash;&nbsp;' +
+        Highcharts.dateFormat('%d.%m.%y %H:%M', parseInt(opts.end_timestamp)*1000)
+      );
+    }
+
+    function updateRange(force){
+      if(!opts.tick){
+        opts.tick = opts.ticks[0];
+      }
+
+      if(!opts.start_timestamp || !opts.end_timestamp || !!force){
+        opts.end_timestamp = parseInt(new Date().getTime() / 1000);
+        opts.start_timestamp = opts.end_timestamp - (opts.tick * xticks);
+      }
+    }
+
+    function moveRange(direction){
+      v = opts.tick*direction*8;
+
+      if(((opts.end_timestamp + v)*1000) < new Date().getTime()){
+        opts.start_timestamp += v;
+        opts.end_timestamp += v;  
+      }
+
+      updateChart();
+    }
+
+
+    return {
+      render: render,
+      announce: announce
+    }
+
+};