fnordmetric 0.7.5 → 0.9.7

data/web/js/fnordmetric.numbers_widget.js

@@ -0,0 +1,121 @@
+FnordMetric.widgets.numbersWidget = function(){
+
+  var max_per_row = 8;
+  var opts;
+
+  function render(_opts){
+
+    opts = _opts;
+
+    opts.elem.append(
+      $('<div class="headbar small"></div>').html(opts.title)
+    ).css({
+      'marginBottom': 20,
+      'overflow': 'hidden'
+    });
+
+    if(!opts.series_titles){
+      opts.series_titles = {};
+    }
+
+    for(k in opts.series){
+
+      if (!opts.series_titles[opts.series[k]]){
+        opts.series_titles[opts.series[k]] = opts.series[k];
+      }
+
+      var container = $('<div></div>')
+        .addClass('numbers_container')
+        .attr('rel', opts.series[k])
+        .append($('<div class="title">').html(opts.series_titles[opts.series[k]]));
+
+      opts.elem.append(container);
+    }
+
+    if(opts.autoupdate){
+      var secs = parseInt(opts.autoupdate);
+      if(secs > 0){
+
+        var autoupdate_interval = window.setInterval(function(){
+          requestValues();
+        }, secs*1000);
+
+        $('body').bind('fm_dashboard_close', function(){
+          window.clearInterval(autoupdate_interval);
+        });
+      }
+    }
+
+    requestValues();
+  }
+
+  function resize(){
+    $('.numbers_container', opts.elem).each(function(i, e){
+      var num_numbers = $('.number', e).length;
+      if(num_numbers > max_per_row){ num_numbers = max_per_row; }
+      $(e).css('width', (num_numbers * 95)+'px');
+    });
+  }
+
+  function requestValues(){
+    for(k in opts.series){
+      FnordMetric.publish({
+        "namespace": FnordMetric.currentNamespace,
+        "type": "widget_request",
+        "klass": "NumbersWidget",
+        "channel": opts.channel,
+        "cmd": "values_for",
+        "gauge": opts.series[k],
+        "offsets": opts.offsets,
+        "widget_key": opts.widget_key
+      })
+    }
+  }
+
+  function renderValues(series, values){
+    for(vkey in values){
+      if(!values[vkey].desc){ values[vkey].desc = vkey; }
+
+      var celem = $('.numbers_container[rel="'+series+'"]', opts.elem)
+      var velem = $('.number[rel="'+vkey+'"]', celem);
+      var vdesc = FnordMetric.util.evilFormat(values[vkey].desc);
+
+      if (velem.length == 0){
+        velem = $('<div></div>')
+          .addClass('number')
+          .attr('rel', vkey)
+          .append($('<span class="desc">').html(vdesc))
+          .append($('<span class="value">').html(0))
+        celem.append(velem);
+      }
+
+      if(!!opts.dont_animate){
+        velem.attr('data', values[vkey].value) 
+        $('.value', velem).html(FnordMetric.util.formatGaugeValue(vkey, values[vkey].value));
+      } else {
+        velem.attr('data', values[vkey].value)      
+      }
+    }
+    
+    resize();
+
+    if(!opts.dont_animate){
+      FnordMetric.util.updateNumbers($(opts.elem), 4);
+    }
+  }
+
+  function announce(ev){
+    if(ev.widget_key == opts.widget_key){
+      if((ev.class == "widget_response") && (ev.cmd == "values_for")){
+        renderValues(ev.series, ev.values)
+      }
+    }
+  }
+
+
+  return {
+    render: render,
+    announce: announce
+  };
+
+};

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
+    }
+
+};