fnordmetric 0.7.5 → 0.9.7

data/web/js/fnordmetric.timeseries_widget.js

@@ -0,0 +1,388 @@
+FnordMetric.widgets.timeseriesWidget = function(){
+
+    /*
+      options:
+        
+        height: 430
+        default_cardinal: true/false
+        default_style: line/area/stack/flow
+        series
+    */
+
+    var widget_uid = "fnord-" + parseInt(Math.random()*99990000);
+    var width, height, opts, graph, gconfig, legend, hoverDetail, shelving, highlighter, resolution;
+
+    var cardinal = true;
+    var xticks   = 30;
+
+    function render(_opts){
+      opts = _opts;
+
+      if(opts.default_style == "areaspline"){ opts.default_style = 'area'; }
+      if(!opts.default_style){ opts.default_style = 'line'; }
+      if(!opts.default_cardinal){ opts.default_cardinal = true; }
+
+      draw_layout();
+
+      gconfig = {
+        element: $('.container', opts.elem)[0],
+        interpolation: (opts.default_cardinal ? 'cardinal' : 'linear'),
+        stroke: true,
+        series: opts.series,
+        padding: { top: 0.1, bottom: 0 }
+      }
+
+      $(opts.elem)
+        .addClass('resize_listener')
+        .bind('fm_resize', renderChart);
+
+      apply_style(opts.default_style);
+
+      if(opts.async_chart){
+        updateChart();
+      } else {
+        renderChart();
+      }
+    }
+
+    function toggle_cardinal(){
+      if($(this).hasClass('active')){ return false; }
+      $(this).addClass('active').siblings().removeClass('active');
+
+      if(cardinal === true){
+        cardinal = false;
+        gconfig.interpolation = 'linear';
+      } else {
+        cardinal = true;
+        gconfig.interpolation = 'cardinal';
+      }
+
+      graph.configure(gconfig);
+      graph.render();
+    }
+
+    function change_style(){
+      $(this).addClass('active').siblings().removeClass('active');
+
+      apply_style($(this).attr('data'));
+      //graph.configure(gconfig);
+      //graph.render();
+
+      renderChart();
+    }
+
+    function apply_style(style){
+       if(style == 'line'){
+        gconfig.renderer = 'line';
+        gconfig.offset = 'zero';
+      }
+
+      if(style == 'area'){
+        gconfig.renderer = 'area';
+        gconfig.offset = 'zero';
+      }
+
+      if(style == 'flow'){
+        gconfig.renderer = 'stack';
+        gconfig.offset = 'silhouette';
+      }
+    }
+
+    function apply_resolution(){
+      if(!resolution){ 
+        var trgt_resolution = 50;
+        var best_resolution = false;
+
+        for(ind in opts.series_resolutions){
+          var _diff = Math.abs(
+            trgt_resolution - 
+            (opts.timespan /  opts.series_resolutions[ind])
+          );
+
+          if((!best_resolution) || (_diff < best_resolution)){
+            best_resolution = opts.series_resolutions[ind];  
+          }
+        }
+        
+        resolution = best_resolution; 
+      }
+
+      for(ind in gconfig.series){
+        gconfig.series[ind].data = gconfig.series[ind]["data"+resolution];
+      }
+
+      $('.button.tick', opts.elem)
+        .removeClass('active')
+        .filter('[data-tick="'+resolution+'"]')
+        .addClass('active');
+    }
+
+    function draw_layout(){
+     if(!opts.no_headbar){
+        $(opts.elem).append(
+          $('<div></div>')
+            .addClass('headbar')
+            .append($('<h2></h2>').html(opts.title))
+            .append(
+              $('<div class="btn_group mr"></div>')
+              .append(
+                $('<div></div>')
+                  .addClass('button')
+                  .append($('<span>').html('Flow'))
+                  .attr('data', 'flow')
+                  .click(change_style)
+              )
+              .append(
+                $('<div></div>')
+                  .addClass('button')
+                  .append($('<span>').html('Area'))
+                  .attr('data', 'area')
+                  .click(change_style)
+              )
+              .append(
+                $('<div></div>')
+                  .addClass('button')
+                  .append($('<span>').html('Line'))
+                  .attr('data', 'line')
+                  .click(change_style)
+              )
+            )
+            .append(
+              $('<div class="btn_group mr"></div>')
+              .append(
+                $('<div></div>')
+                  .addClass('button mr')
+                  .addClass(opts.default_cardinal ? '' : 'active')
+                  .append($('<span>').html('Off'))
+                  .attr('data', 'cardinal-off')
+                  .click(toggle_cardinal)
+              )
+              .append(
+                $('<div></div>')
+                  .addClass('button ml')
+                  .addClass(opts.default_cardinal ? 'active' : '')
+                  .append($('<span>').html('On'))
+                  .attr('data', 'cardinal-on')
+                  .click(toggle_cardinal)
+              )
+            )
+        )
+      }
+
+      $(opts.elem)
+        .append(
+          $('<div></div>')
+            .addClass('legend')
+            .css({
+              margin: '10px 30px 0 30px',
+            })
+        )
+        .append(
+          $('<div></div>')
+            .addClass('container')
+            .css({
+              height: opts.height,
+              margin: '0 23px 25px 23px',
+            })
+        );
+      
+      if(opts.async_chart){
+        $('.headbar', opts.elem).prepend(
+          $('<div></div>')
+            .addClass('button ml')
+            .append($('<span></span>').html('&larr;'))
+            .click(function(){ moveRange(-1); })
+        ).prepend(
+          $('<div></div>')
+            .addClass('datepicker')
+        ).prepend(
+          $('<div></div>')
+            .addClass('button')
+            .append($('<span></span>').html('&rarr;'))
+            .click(function(){ moveRange(1); })
+        ).prepend(
+          $('<div class="refresh_btn"></div>')
+            .addClass('button ml')
+            .append($('<span></span>').html('refresh'))
+            .click(function(){ requestValuesAsync(); })
+        );
+      }
+
+      if(opts.series_resolutions){
+        $('.headbar', opts.elem).append('<div class="tick_btns btn_group"></div>');
+        for(ind in opts.series_resolutions){
+          var _tick = opts.series_resolutions[ind];
+          $('.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(){ 
+                resolution = $(this).attr('data-tick'); 
+                renderChart();
+              })  
+          );
+        }
+      }
+
+      if((opts.autoupdate) && (opts.async_chart)){
+        var secs = parseInt(opts.autoupdate);
+        if(secs > 0){
+          var autoupdate_interval = window.setInterval(function(){          
+             updateChart(false, true);
+          }, secs*1000);
+
+          $('body').bind('fm_dashboard_close', function(){
+            window.clearInterval(autoupdate_interval);
+          });
+        }
+      }
+    }
+
+    function renderChart(){
+      width = opts.elem.width() - 50;
+      height = opts.height || 240;
+
+      gconfig.width = width;
+      gconfig.height = height;
+
+      $(gconfig.element).html("");
+      $(".rickshaw_legend", opts.elem).html("");
+
+      if(opts.series_resolutions){
+        apply_resolution();
+      }
+
+      graph = new Rickshaw.Graph(gconfig);
+
+      legend = new Rickshaw.Graph.Legend({
+        graph: graph,
+        element: $('.legend', opts.elem)[0]
+      });
+
+      hoverDetail = new Rickshaw.Graph.HoverDetail( {
+        graph: graph
+      });
+
+      shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
+        graph: graph,
+        legend: legend
+      });
+
+      highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
+        graph: graph,
+        legend: legend
+      });
+
+      new Rickshaw.Graph.Axis.Time({
+        graph: graph,
+      }).render();
+
+      new Rickshaw.Graph.Axis.Y({
+        graph: graph,
+      }).render();
+
+      if(!gconfig.renderer){
+        gconfig.renderer = "line";
+      }
+
+      graph.configure(gconfig);
+      graph.render();
+    }
+
+
+    function announce(evt){
+      if(evt.widget_key == opts.widget_key){
+        if((evt.class == "widget_response") && (evt.cmd == "values_at")){
+          running_request = false;
+          $(opts.elem).css('opacity', 1); 
+          updateSeriesData(evt.gauges);          
+        }
+      }
+    }
+
+    function requestValuesAsync(){
+      FnordMetric.publish({
+        "type": "widget_request",
+        "klass": "TimeseriesWidget",
+        "gauges": opts.gauges,
+        "cmd": "values_at",
+        "tick": opts.tick, 
+        "since": opts.start_timestamp,
+        "until": opts.end_timestamp,
+        "widget_key": opts.widget_key
+      })
+    }
+
+    function updateSeriesData(dgauges){
+      gconfig.series = [];
+
+      for(var ind = 0; ind < dgauges.length; ind++){
+       
+        gconfig.series.push({
+          name: dgauges[ind].key,
+          color: opts.series[ind].color,
+          data: []
+        });
+        
+        for(_time in dgauges[ind].vals){
+          gconfig.series[ind].data.push(
+            { x: parseInt(_time), y: parseInt(dgauges[ind].vals[_time] || 0) }
+          );
+        }
+
+      }
+
+      renderChart();
+    }
+
+    function updateChart(first_time, silent){
+      if(!silent){ $(opts.elem).css('opacity', 0.5); }    
+      updateRange();
+      redrawDatepicker();
+      requestValuesAsync();
+    }
+
+    function redrawDatepicker(){
+      $('.datepicker', opts.elem).html(
+        FnordMetric.util.dateFormat(opts.start_timestamp) +
+        '&nbsp;&dash;&nbsp;' +
+        FnordMetric.util.dateFormat(opts.end_timestamp)
+      );
+    }
+
+    function updateRange(force){
+      if(!opts.tick){
+        opts.tick = opts.ticks[0];
+      }
+
+      var _now = parseInt(new Date().getTime() / 1000);
+
+      if((opts.autoupdate) && 
+        ((_now - opts.end_timestamp) < ((opts.tick*(opts.autoupdate+1)) + 5))){
+        force = true;
+      }
+
+      if(!opts.start_timestamp || !opts.end_timestamp || !!force){
+        opts.end_timestamp = _now + opts.tick;
+        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;  
+      }
+
+      redrawDatepicker();
+      requestValuesAsync();
+    }
+
+    return {
+      render: render,
+      announce: announce
+    }
+
+};

data/web/js/fnordmetric.toplist_widget.js

@@ -0,0 +1,112 @@
+FnordMetric.widgets.toplistWidget = function(){
+
+  var opts;
+  var current_gauge = false;
+
+  function render(_opts){
+    opts = _opts;
+
+    var headbar = $('<div class="headbar"></div>').append(
+      $('<h2></h2>').html(opts.title)
+    );
+
+    opts.elem.append(headbar).css({
+      'marginBottom': 20,
+      'overflow': 'hidden'
+    }).append(
+      $('<div class="toplist_inner ui_toplist"></div>')
+    );
+
+    if(!opts.ticks){
+      var first = true;
+      for(k in opts.gauges){
+        headbar.append(
+          $('<div></div>')
+            .attr('class', 'button mr')
+            .attr('rel', k)
+            .append(
+              $('<span></span>').html(opts.gauges[k].title)
+            ).click(function(){
+              loadGauge($(this).attr('rel'));
+            }
+          )
+        );
+        if(first){
+          first = false;
+          loadGauge(k);
+        }
+      }
+    } else {
+      loadGauge(opts.gauges[0], true);
+    }
+
+    if(opts.autoupdate){
+      var secs = parseInt(opts.autoupdate);
+      if(secs > 0){
+
+        var autoupdate_interval = window.setInterval(function(){
+          loadGauge(false, true);
+        }, secs*1000);
+
+        $('body').bind('fm_dashboard_close', function(){
+          window.clearInterval(autoupdate_interval);
+        });
+      }
+    };
+
+  }
+
+  function loadGauge(gkey, silent){
+    if(!gkey)
+      gkey = current_gauge;
+
+    current_gauge = gkey;
+
+    if(!silent)
+        $('.toplist_inner', opts.elem).addClass('loading');
+
+    FnordMetric.publish({
+      "type": "widget_request",
+      "klass": "ToplistWidget",
+      "gauge": current_gauge,
+      "cmd": "values_for",
+      "tick": opts.tick,
+      "widget_key": opts.widget_key
+    });
+  }
+
+  function renderGauge(gkey, gdata){
+    var _elem = $('.toplist_inner', opts.elem).removeClass('loading').html('');
+    $(gdata.values).each(function(n, _gd){
+      var _perc  = (parseInt(gdata.values[n][1]) / parseFloat(gdata.count))*100;
+      var _item = $('<div class="toplist_item"><div class="title"></div><div class="value"></div><div class="percent"></div></div>');
+
+      if(opts.click_callback){
+        var lelem = $('<a href="#" class="link">').html(gdata.values[n][0]);
+        var lclbck; eval("lclbck="+opts.click_callback)
+        lelem.attr('data-key', gdata.values[n][0]);
+        lelem.click(function(){ lclbck($(this).attr('data-key')); return false; });
+        $('.title', _item).html(lelem)
+      } else {
+        $('.title', _item).html(gdata.values[n][0]);  
+      }
+
+      $('.value', _item).html(FnordMetric.util.formatGaugeValue(gkey, parseInt(gdata.values[n][1])));
+      $('.percent', _item).html(_perc.toFixed(1) + '%');
+      _elem.append(_item);
+    });
+  }
+
+  function announce(evt){
+
+    if((evt.widget_key == opts.widget_key) && ((evt.class == "widget_response") && (evt.cmd == "values_for")))
+        renderGauge(evt.gauge, evt);
+
+  }
+
+  return {
+    render: render,
+    announce: announce
+  };
+
+};

data/web/js/fnordmetric.ui.js

@@ -0,0 +1,91 @@
+FnordMetric.ui.navbar = function(elem, opts){
+
+  elem.css('width', $('#viewport').width());
+
+  var back = $('<a>')
+    .addClass('button back')
+    .html('&laquo;');
+
+  elem.prepend(back);
+
+  var head = $('<h1></h1>');
+  for(ind in opts.breadcrumb){
+    var cur = $('<a>').html(opts.breadcrumb[ind][0]);
+    if (ind == (opts.breadcrumb.length - 1)){ 
+    cur.addClass('current'); 
+    } else {
+      cur.append(' / ');
+    }
+    head.append(cur);
+  };
+
+  for(ind in opts.buttons){
+    var btn = $('<a>')
+      .addClass('button navbutton')
+      .click(opts.buttons[ind][1])
+      .html(opts.buttons[ind][0]);
+    elem.prepend(btn);
+  }
+
+  if(opts.datepicker){
+    elem.append(
+      $('<a class="button datepicker">')
+        .html('<div class="date">&nbsp;</div><i class="icon-calendar"></i>'));  
+  }
+
+  elem.append(head);
+}
+
+FnordMetric.ui.modal = function(opts){
+  FnordMetric.ui.close_modal('body');
+  width = $("#viewport").width() * 0.8;
+
+  if (opts.max_width)
+    width = Math.min(opts.max_width, width);
+
+  var dialog_elem = $('<div class="modal">')
+    .append($('<div class="modal_inner">'))
+    .css({
+      "width": width,
+      "height": opts.height,
+      "marginLeft": (($("#viewport").width() - width) / 2),
+      "display": "none"
+    });
+
+
+  if (opts.max_width)
+    dialog_elem.css('maxWidth', opts.max_width);
+
+  if (opts.content)
+    dialog_elem.html(opts.content);
+
+  $("#viewport").append(dialog_elem);
+  dialog_elem.show().addClass('visible');
+  $('.modal_backdrop').show().addClass('visible');
+}
+
+FnordMetric.ui.close_modal = function(elem){
+  var m = $('.modal', $(elem));
+  m.push($(elem).closest('.modal'));
+
+  m.removeClass('visible');
+
+  window.setTimeout(function(){
+    m.remove();
+  }, 500);
+
+  $('.modal_backdrop').removeClass('visible').fadeOut();
+}
+
+FnordMetric.ui.resizable = function(elem){
+  $('.resizable', $(elem)).each(function(){
+    var wwperc = parseInt($(this).attr('data-width'));
+    if (!wwperc || (wwperc < 1)){ wwperc = 100; }
+    var wwidth = $('.viewport_inner').width() * (wwperc/100.0);
+    if(wwperc==100){ $(this).addClass('full_width'); } 
+    else if($(this).hasClass('right')) { $(this).css('float', 'right'); }
+    else { wwidth -= 1; $(this).css('float', 'left'); }
+    $(this).css('overflow', 'hidden');
+    $(this).width(wwidth);
+  });
+}