Commit a89dde15 authored by Paul Asmuth's avatar Paul Asmuth
Browse files

improved timeline widget

parent 64ea33ef

lib/fnordmetric/gauges/numeric_gauge.rb

+1 −0
Original line number Diff line number Diff line
@@ -12,6 +12,7 @@ class FnordMetric::NumericGauge < FnordMetric::MultiGauge 
      :ticks => @opts[:ticks],

      :series => @opts[:series],

      :series_titles => Hash[@opts[:series].map{|s| [s, s]}],

      :autoupdate => 1,

      :height => 350

    ).on(:values_at) do |_series, _ticks, _tick|

      series_count_metrics[_series][_tick].values_at(_ticks)

web/fnordmetric.timeline_widget.js

+25 −227
Original line number Diff line number Diff line
@@ -39,6 +39,19 @@ FnordMetric.widgets._timelineWidget = function(){ 
      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");

    }
@@ -117,6 +130,15 @@ FnordMetric.widgets._timelineWidget = function(){ 
      redrawDatepicker();

    }



    function refreshChart(){

      for(_series in series_values){

        series_values[_series] = {};

      }



      updateRange(true);

      updateChart();

    }



    function drawSeries(series, series_data){

      

        //var path_string = "M0,"+height;
@@ -162,8 +184,6 @@ FnordMetric.widgets._timelineWidget = function(){ 
            );

          }







          // var htrgt = canvas.rect(p_x - 20, p_y - 20, 40, 40).attr({

          //   stroke: "none", 

          //   fill: "#fff",
@@ -229,7 +249,7 @@ FnordMetric.widgets._timelineWidget = function(){ 
    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(){ updateChart(); }

          function(){ refreshChart(); }

        )

      ).append(

        $('<div></div>').attr('class', 'button mr').append($('<span></span>').html('&rarr;')).click(
@@ -273,24 +293,15 @@ FnordMetric.widgets._timelineWidget = function(){ 
      );

    }



    function updateRange(){

    function updateRange(force){

      if(!opts.tick){

        opts.tick = opts.ticks[0];

      }



      if(!opts.start_timestamp || !opts.end_timestamp){

      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);

      }





      if(

        (parseInt(new Date().getTime()/1000) - opts.end_timestamp) >

        (opts.include_current ? 0 : opts.tick)

      ){

        opts.end_timestamp += opts.tick;

        opts.start_timestamp += opts.tick;

      }

    }



    function moveRange(direction){
@@ -307,216 +318,3 @@ FnordMetric.widgets._timelineWidget = function(){ 
    }



};
 




























FnordMetric.widgets.timelineWidget = function(){



  function render(opts){



    var widget_uid = FnordMetric.util.getNextWidgetUID();

    var chart=false;

    var max_y=0;



    if (!opts.height){ opts.height = 250; }



    function redrawWithRange(first_time, silent){

      if(!silent){ $(opts.elem).css('opacity', 0.5); }



      if(!opts.start_timestamp || !opts.end_timestamp){

        opts.end_timestamp = parseInt(new Date().getTime() / 1000);

        opts.start_timestamp = opts.end_timestamp - (opts.tick * 30);

      }



      redrawDatepicker();



      var _query = '?at='+opts.start_timestamp+'-'+opts.end_timestamp + '&tick=' + opts.tick;

      //chart.series = [];

      max_y=0;

      //metrics_completed = 0;

      $(opts.gauges).each(function(i,gauge){

        $.ajax({

          url: FnordMetric.p + '/' + FnordMetric.currentNamespace +'/gauge/'+gauge+_query,

          success: redrawGauge(first_time, gauge)

        });

      });

    }



    function redrawGauge(first_time, gauge){

      return (function(json){

        var raw_data = JSON.parse(json);

        var series_data = [];



        for(p in raw_data){

          series_data.push([parseInt(p)*1000, raw_data[p]||0]);

          max_y = Math.max(max_y, raw_data[p]);

        }



        if(!first_time){

          chart.get('series-'+gauge).setData(series_data);

        } else {

          chart.addSeries({

            name: opts.gauge_titles[gauge],

            data: series_data,

            id: 'series-'+gauge

          });

        }



        chart.yAxis[0].setExtremes(0,max_y);

        chart.redraw();



        // shown on the *first* gauge load

        $(opts.elem).css('opacity', 1);

      });

    }



    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(){

      if(

        (parseInt(new Date().getTime()/1000) - opts.end_timestamp) >

        (opts.include_current ? 0 : opts.tick)

      ){

        opts.end_timestamp += opts.tick;

        opts.start_timestamp += opts.tick;

      }

    }



    function moveRange(direction){

      v = opts.tick*direction*8;

      opts.start_timestamp += v;

      opts.end_timestamp += v;

      redrawWithRange();

    }



    function changeTick(new_tick){

      opts.tick = parseInt($(this).attr('data-tick'));

      opts.start_timestamp = null;

      opts.end_timestamp = null;

      drawChart();

      redrawWithRange(true);

    }



    function drawLayout(){

      $(opts.elem).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 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 drawChart(){

      chart = new Highcharts.Chart({

        chart: {

          renderTo: 'container-'+widget_uid,

          defaultSeriesType: opts.plot_style,

          height: opts.height + 20

        },

        series: [],

        title: { text: '' },

        xAxis: {

          type: 'datetime',

          tickInterval: opts.tick * 1000,

          title: (opts.x_title||''),

          labels: { step: 2 }

        },

        yAxis: {

          title: (opts.y_title||''),

          min: 0,

          max: 1000

        },

        legend: {

          layout: 'horizontal',

          align: 'top',

          verticalAlign: 'top',

          x: -5,

          y: -3,

          margin: 25,

          borderWidth: 0

        },

        plotOptions: {

          line: {

            shadow: false,

            lineWidth: 3

          }

        }

      });

    }



    updateRange();

    drawLayout();

    drawChart();



    redrawWithRange(true);



    if(opts.autoupdate){

      var secs = parseInt(opts.autoupdate);

      if(secs > 0){



        var autoupdate_interval = window.setInterval(function(){

          updateRange();

          redrawWithRange(false, true);

        }, secs*1000);



        $('body').bind('fm_dashboard_close', function(){

          window.clearInterval(autoupdate_interval);

        });



      }

    };



  }



  return {

    render: render

  };



};
 
 No newline at end of file

CRA Git | Maintained and supported by SUSTech CRA and CCSE