toplist gauge: better timeseries rendering

  def render(namespace, event)

    interval = parse_interval(event["interval"])

    @toplist = FnordMetric::Toplist.new

    @all_ticks = ticks_in(interval)

    ticks_in(interval).each do |_tick|

    @all_ticks.each do |_tick|

      field_values_at(_tick, :limit => top_k, :append => :toplist).each do |item, count|

        @toplist.incr_item(_tick, item, count)

      end

        %h2 Top #{key_nouns.last}

      .ui_toplist.clickable

        .searchbar

          %input(type="search" placeholder="Search..." style="width:95%; margin-top:1px; height:36px; line-height:36px;")

        - @toplist.toplist.each do |item, score|

          .toplist_item(onclick="toplgaugeSelectItem.apply(this); return false;" data-item="#{item}")

          %input(type="search" placeholder="Search..." style="width:95%; margin-top:1px; height:36px; line-height:36px;" onchange="toplgaugeSeach($(this).val());" onkeyup="toplgaugeSeach($(this).val());")

        - @toplist.toplist(top_k).each_with_index do |(item, score), ind|

          .toplist_item(onclick="toplgaugeSelectItem.apply(this); return false;" data-item="#{item}" style="#{ind > 99 ? 'display:none;' : nil}")

            .title= item

            .value= score

            .percent

:javascript

  var toplist_gauge_timeseries = #{@toplist.timelines.to_json};

  var toplist_gauge_ticks = #{@all_ticks.sort.to_json};

  function toplgaugeSelectItem(){

    var item_key = $(this).attr('data-item');

    var series_data = [];

    for(_time in toplist_gauge_timeseries[item_key]){

      series_data.push({x: parseInt(_time), y: parseFloat(toplist_gauge_timeseries[item_key][_time])});

    for(ind in toplist_gauge_ticks){

      var _time = toplist_gauge_ticks[ind];

      var _val  = toplist_gauge_timeseries[item_key][_time];

      if(!_val){ _val = 0; }

      series_data.push({x: parseInt(_time), y: parseFloat(_val)});

    }

    FnordMetric.widgets.timeseriesWidget().render({

  }

  function toplgaugeSeach(item){

    console.log("fu: " + item);

  }