toplist gauge: display item timeseries

- fix specs

- incr_fraction: implement progressive

- timeseries-widget: cardinal on/off should be skeuomorph

- timeseries-widget: select sane default tick + tickbtn active states

- fix session view

- new readme

- new full_example.rb

      %div(style="font-weight:bold; font-size:16px; color:#aaa; text-align:center; margin-top:50%;")

        %i.icon.icon-arrow-left

          Please select something

          Please select an item

    .keystats(style="display:none;")

      .widget_item_timeseries

      .headbar.small

      .headbar.small Totals

      %div

      .numbers_container

          .title= "Fnord"

          .number{:data => 23, :"data-current" => 0}

            %span.desc Total

            %span.value 0

        .title

        / .number{:data => 23, :"data-current" => 0}

        /   %span.desc Total

        /   %span.value 0

  FnordMetric.ui.trends('.report_view');

  FnordMetric.ui.resizable('#viewport');

:javascript

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

  function toplgaugeSelectItem(){

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

    $(this).addClass('active')

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

    $('.widget_keystats .widget_item_timeseries').html('');

    $('.widget_keystats .keystats').show();

    $('.widget_keystats .empty_state').hide();

    $('.widget_keystats .numbers_container .title')

      .html(item_key);

    $('.widget_keystats .headbar.small')

      .html("#{key_nouns.first}: " + item_key);

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

    }

    FnordMetric.widgets.timeseriesWidget().render({

    title: "",

      title: "#{key_nouns.first}: " + item_key,

      elem: $('.widget_item_timeseries'),

      height: 320,

      default_style: 'line',

      series: [{

      name: "Fnord",

        name: item_key,

        color: "#{FnordMetric::COLORS.last}",

      data: [{x:0, y:0},{x:1, y:0}]

        data: series_data

      }]

    });

:javascript

  function toplgaugeSelectItem(){

    $(this).addClass('active')

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

  }

  function toplgaugeTabClick(){

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

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