toplist gauge trending tab view

- distgauge: render std. deviation

- distgauge: render max/min/avg over time

- distgauge: display trends

- toplgauge: display rank

- caching

- gauge garbage-collection

- fix html widget

    (@toplist[item].to_f / total.to_f) * 100.0

  end

  def value(item)

    @toplist[item].to_f

  end

  def trend(item)

    times = @timelines[item].keys.sort

.ui_toplist .toplist_item .title{ float:left; line-height:42px; margin-left:20px; font-size:13px; color:#333; }

.ui_toplist .toplist_item .value{ float:right; line-height:42px; margin-right:20px; font-size:13px; font-weight:bold; color:#333; width:70px; color:#666; }

.ui_toplist .toplist_item .percent{ float:right; line-height:42px; margin-right:30px; font-size:18px; font-weight:bold; color:#333; width:110px; white-space:nowrap; }

.ui_toplist .toplist_item .trend{ float:right; line-height:42px; margin-right:30px; font-size:18px; font-weight:bold; color:#333; width:70px; white-space:nowrap; }

.ui_toplist .toplist_item .ui_trend{ margin-top:10px; }

.ui_toplist .toplist_item .trend .ui_trend{ font-size:18px; padding:4px 5px 5px 5px; margin-top:6px; }

.ui_toplist .searchbar{ background:#efefef; border-bottom: 1px solid #DDD; padding:10px 17px; }

.ui_toplist.clickable .toplist_item:hover{ background:#efefef; cursor:pointer; }

  padding:0 5px;

  border-radius:3px;

}

.ui_item_trending{

  width: 250px;

  margin: 10px 20px;

  float: left;  

  border-bottom:1px solid #ddd;

  padding:10px;

}

.ui_item_trending .ui_trend{

  font-size:18px;

}

.ui_item_trending .title{

  font-size:14px;

}

.ui_item_trending .value{

  float:right;

  line-height: 24px;

  margin-right: 10px;

  color: #999;

}

 No newline at end of file

  %h1= @opts[:title]

  %h3 Toplist Gauge

  %ul.ui_tabs.tabs

    %li.active{"data-tab" => "Overview"}

  %ul.ui_tabs.toplgauge_tabs

    %li.active{"data-tab" => "Overview", :onclick=>"toplgaugeTabClick.apply(this);"}

      %a{:href => "#"} Overview

    / %li{"data-tab" => "Compate"}

    /   %a{:href => "#"} Compare

    %li{"data-tab" => "Trending"}

    %li{"data-tab" => "Trending", :onclick=>"toplgaugeTabClick.apply(this);"}

      %a{:href => "#"} Trending

    / %li{"data-tab" => "Export"}

    /   %a{:href => "#"} Export

  .widget_toplist.ui_sidebar_toplist.resizable.resize_min_full_height(data-width="55")

    .toplgauge_tab.overview

      .headbar

        %h2 Top #{key_nouns.last}

      .ui_toplist.clickable

              %span.ui_trend{ :"data-trend" => @toplist.trend(item).round(1) }

    .toplgauge_tab.trending(style="display:none;")

      .headbar

        %h2 Trending #{key_nouns.last}

      .ui_toplist.clickable

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

          .title stoff

          .value= @toplist.value("stoff").to_s + " / " + @toplist.percentage("stoff").round(1).to_s + "%"

          .trend

            %span.ui_trend(data-trend="2.3")

  .widget_keystats.resize_full_height.resizable(data-width="45")

    .empty_state.resize_full_height

      .headbar

      .siblings().removeClass('active');

  }

  function toplgaugeTabClick(){

    if($(this).attr('data-tab') == "Overview"){

      $('.toplgauge_tab').hide().filter('.overview').show();

    } else if($(this).attr('data-tab') == "Trending"){

      $('.toplgauge_tab').hide().filter('.trending').show();

    }

    $('.toplgauge_tabs li').removeClass('active');

    $(this).addClass('active');

  }

    });

  }

  $('.toplgauge_tabs').bind('open_tab.per-key', function(o, a){

    toplgaugeDisplayPerKey(a);

  });

 No newline at end of file

    $(this).append(

      $('<i class="icon icon-arrow-right">').css({

        'marginLeft': '3px',

        'marginLeft': '0.5em',

        'display': 'block',

        'font-size': '10px',

        'font-size': '90%',

        'float': 'right',

        '-webkit-transform': 'rotate('+deg+'deg)',

        '-moz-transform': 'rotate('+deg+'deg)'