indentlabs/notebook

<%
  # todo page superlatives (most-edited page, oldest page, etc)
%>

<h4>
  <%= link_to data_vault_path, class: 'grey-text tooltipped', style: 'position: relative; top: 4px;', data: {
        position: 'bottom',
        enterDelay: '500',
        tooltip: "Back to your Data Vault"
      } do %>
    <i class="material-icons">arrow_back</i>
  <% end %>
  Your Notebook.ai usage
</h4>

<div class="row">
  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <div class="card-title">
          Your page updates
        </div>
        <p>
          You can use the charts below to see how often you update your worldbuilding pages in Notebook.ai.
        </p>
      </div>
      <div class="card-tabs">
        <ul class="tabs tabs-fixed-width">
          <li class="tab"><a href="#edits-this-week">This week</a></li>
          <li class="tab"><a href="#edits-this-month">This month</a></li>
          <li class="tab"><a href="#edits-this-year">This year</a></li>
          <li class="tab"><a href="#edits-all-time">All time</a></li>
        </ul>
      </div>
      <div class="card-content grey lighten-4">
        <div id="edits-this-week">
          <%= area_chart current_user.content_change_events.where('updated_at > ?', DateTime.now - 7.days).group_by_day(:created_at).map { |date, count| [date.split(' ').first, count] }, download: true %>
        </div>
        <div id="edits-this-month" style="display: none">
          <%= area_chart current_user.content_change_events.where('updated_at > ?', DateTime.now - 1.month).group_by_week(:created_at).map { |date, count| [date.split(' ').first, count] }, download: true %>
        </div>
        <div id="edits-this-year" style="display: none">
          <%= area_chart current_user.content_change_events.where('updated_at > ?', DateTime.now - 1.year).group_by_month(:created_at).map { |date, count| [date.split(' ').first, count] }, download: true %>
        </div>
        <div id="edits-all-time" style="display: none">
          <%= area_chart current_user.content_change_events.group_by_month(:created_at).map { |date, count| [date.split(' ').first, count] }, download: true %>        
        </div>
      </div>
      <div class="card-content">
        <p class="grey-text">
          Every field you edit on a page counts as one update. For example, editing a character's age and birthday counts as two updates, even if done at the same time.
        </p>
      </div>
    </div>
  </div>

  <div class="col s12">
    <div class="card">
      <div class="card-content">
        <div class="card-title">
          Page breakdown
        </div>
        <p>
          This graph represents the number of pages you've created of each type.
        </p>
      </div>
      <div class="card-tabs">
        <ul class="tabs tabs-fixed-width">
          <li class="tab"><a href="#page-types-pie">Pie graph</a></li>
          <li class="tab"><a href="#page-types-bar">Bar graph</a></li>
        </ul>
      </div>
      <div class="card-content grey lighten-4">
        <div id="page-types-pie">
          <%= pie_chart current_user.content.map { |n, l| [n.pluralize(l.count), l = l.count] }, download: true, legend: "left" %>
          <span class="grey-text">You can click a page type in the key to toggle it on/off in the pie chart.</span>
        </div>
        <div id="page-types-bar" style="display: none">
          <%= bar_chart current_user.content.map { |n, l| [n.pluralize(l.count), l = l.count] }.sort { |a, b| a[1] <=> b[1] }.reverse, download: true %>
        </div>
      </div>
    </div>
  </div>
</div>