views/stats.erb

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <%= erb :header_mini %>
</head>

<body id="stats">
  <div id="wrapper">

    <script type="text/javascript">
        $(document).ready(function(){
          $.getJSON("stats_data", function( json ) {
            setupStats(json);
          });
        });
    </script>

    <h1><%= I18n.t('stats.title') %></h1>
    <p id="stray"><span class="label"></span> <%= I18n.t('stats.stray') %></p>
    <p id="idle"><span class="label"></span> <%= I18n.t('stats.idle') %></p>
    <h2><%= I18n.t('stats.current') %></h2>
    <div id="viewers"><%= I18n.t('stats.nodata') %></div>
    <h2><%= I18n.t('stats.elapsed') %></h2>
    <div id="elapsed"><%= I18n.t('stats.nodata') %></div>
  </div>

  <div id="all">
    <h3>All slides</h3>
    <% max = @all.sort_by {|slide, time| -time}[0][1].to_f rescue 0 %>
    <% @all.sort.map do |slide, time| %>
        <% next if slide.empty? %>
        <% timestr = (time < 60) ? ':%S' : (time < 3599) ?  '%M:%S' : '%H:%M:%S' %>
        <div class="row top">
        <span class="label"><%= slide %></span>
        <div class="bar" style="width: <%= (time/max)*100 %>%;"> </div>
        <div class="time"><%= Time.at(time).gmtime.strftime(timestr) %></div>
        <% if @counter %>
          <div class="detail">
            <% @counter[slide].each do |host, views| %>
              <% count = views.inject(0) { |sum, view| sum += view['elapsed'] } %>
              <% timestr = (count < 60) ? ':%S' : (count < 3599) ?  '%M:%S' : '%H:%M:%S' %>
              <div class="row">
                <% if host == 'presenter' %>
                  <% bgcolor = '' %>
                  <span class="label"><%= host %>:</span>
                <% else %>
                  <% bgcolor = "background-color: ##{host[0...6]}" %>
                <% end %>
                <div class="bar" style="width: <%= (count/max)*100 %>%; <%= bgcolor %>"> </div>
                <div class="time"><%= Time.at(count).gmtime.strftime(timestr) %></div>
              </div>
            <% end %>
          </div>
        <% end %>
      </div>
    <% end %>
  </div>

</body>
</html>