realtime gauge: moving avg

  def initialize(opts)

    super(opts)

    @started = Time.now.to_i

    validate_ticks!

    @values = {}

    @max_tick = @opts[:ticks].sort.last

    @resolution = 10

    realtime_value_widget(

      :tab => "Overview",

      :title => "Realtime #{key_nouns.last}"

      :title => "Realtime #{key_nouns.last}",

      :ticks => @opts[:ticks]

    )

    numbers_widget(

      :tab => "Overview",

      :title => "Realtime #{key_nouns.last}",

      :series => [key_nouns.last],

      :autoupdate => 1,

      :width => 30

    ).on(:values_for) do |_series|

      Hash[@opts[:ticks].map do |_tick|

        [_tick, { :desc => "#{_tick}sec avg.", :value => moving_avg(_tick)}]

      end]

    end

  end

  def initialized

    super

    timer1 = EventMachine::PeriodicTimer.new(0.01) do

      respond(:_class => "widget_push", :cmd => "value", :value => running_since)

    timer1 = EventMachine::PeriodicTimer.new(0.1) do

      respond(

        :_class => "widget_push", 

        :cmd => "value", 

        :values => Hash[@opts[:ticks].map{ |t| [t, moving_avg(t)] }]

      )

    end

  end

  def react(event)

    now = now_ts

    if event["_class"] == "observe"

      @values[now] ||= 0

      @values[now] += 1

    end

    @values.keys.each do |_time|

      @values.delete(_time) if (now - _time) > (@max_tick*@resolution)

    end

  end

private

  def moving_avg(delta, now = now_ts)

    ((0..(delta*@resolution)).inject(0){ |s, d|

      s + @values[now-d].to_i

    } / (delta*@resolution).to_f) * @resolution

  end

  def running_since

    Time.now.to_i - @started

  def now_ts

    (Time.now.to_f*@resolution).to_i

  end

end

 No newline at end of file

class FnordMetric::RealtimeValueWidget < FnordMetric::Widget

  def react(ev)

    puts ev.inspect

  end  

end

 No newline at end of file

-> timeline-widget: render with add. offset / cmp. w/yesterday

-> timeline-widget: synchronize ticks

-> show notification when connection lost

-> reconnect on disconnect

-> only push selected events on websocket

-> channel-subscription layer

-> realtime gauge (medium, fast, insane) (5,10,15min avg)

-> punchcard gauge

FnordMetric.widgets.realtimeValueWidget = function(){

    var widget_uid = FnordMetric.util.getNextWidgetUID();

    var width, height, canvas,  opts;

    var width, height, canvas,  opts, max;

    var xpadding = 20;

    var ypadding = 20;

    var bcolor  = '#06C';

    var bars = [];

    var max = 1;

    var tick = false;

    var next_values = [];

    var next_value_interval = false;

      drawLayout();

      width = opts.elem.width() - (xpadding * 2) - 15;

      width = opts.elem.width() - (xpadding * 2) - 15 - 250;

      height = opts.height || 240;

      //xtick = width / (xticks - 1);

      for(var n=parseInt(width / bmargin); n > 0; n--){

        drawValue(false, n-1);

      }

      changeTick(opts.ticks[0]);

    }

    function changeTick(_tick){

      tick = _tick;

      canvas.selectAll('.valuebar').remove();

      next_values = [];

      max = 1;

    }

    function nextValue(value){

    function announce(evt){

      if((evt._class == "widget_push") && (evt.cmd == "value")){

        nextValueAsync(parseInt(evt.value));

        if(evt.values[tick]){

          nextValueAsync(parseFloat(evt.values[tick]));  

        }        

      }

      if(evt.widget_key == opts.widget_key){

      );

      if(opts.ticks){

        $('.headbar', opts.elem).append('<div class="tick_btns btn_group"></div>');

        $('.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(changeTick)  

              .click(function(){ 

                changeTick($(this).attr('data-tick')); 

              })  

          );

        }

      }