docbrown/app/views/dashboards/pro.html.erb

<div class="dashboard-container pro-container" id="user-dashboard">
  <a href="/dashboard" class="back-nav">Back to Dashboard</a>
  <section class="header-card card">
    <h1 class="pro-header">Pro Dashboard</h1>
    <p>Welcome to the pro dashboard which shows in-depth user metrics so that authors can make data-driven decisions about the developer ecosystem.</p>
    <p>This dashboard will highlight deep insights especially relevant to developer relations authors and serious bloggers.</p>
  </section>
  <div class="summary-stats">
    <div class="card">
      <h4>Reactions this week</h4>
      <div class="featured-stat">
        <%= @this_week_reactions_count %>
      </div>
      <% week_reaction_rate = @this_week_reactions_count.to_f / @last_week_reactions_count.to_f %>
      <div class="stat-percentage" style="color: <%= week_reaction_rate > 1 ? "green" : "red" %>">
        <%= week_reaction_rate >= 1 ? "\u25b2" : "\u25BC" %> <%= @last_week_reactions_count.positive? ? (week_reaction_rate * 100).round(2) : "infinity " %>%
      </div>
    </div>
    <div class="card">
      <h4>Reactions this month</h4>
      <div class="featured-stat">
        <%= @this_month_reactions_count %>
      </div>
      <% month_reaction_rate = @this_month_reactions_count.to_f / @last_month_reactions_count.to_f %>
      <div class="stat-percentage" style="color: <%= month_reaction_rate > 1 ? "green" : "red" %>">
        <%= month_reaction_rate >= 1 ? "\u25b2" : "\u25BC" %> <%= @last_month_reactions_count.positive? ? (month_reaction_rate * 100).round(2) : "infinity " %>%
      </div>
    </div>
    <div class="card">
      <h4>New followers this week</h4>
      <div class="featured-stat">
        <%= @this_week_followers_count %>
      </div>
      <% week_followers_rate = @this_week_followers_count.to_f / @last_week_followers_count.to_f %>
      <div class="stat-percentage" style="color: <%= week_followers_rate > 1 ? "green" : "red" %>">
        <%= week_followers_rate >= 1 ? "\u25b2" : "\u25BC" %> <%= @last_week_followers_count.positive? ? (week_followers_rate * 100).round(2) : "infinity " %>%
      </div>
    </div>
    <div class="card">
      <h4>New followers this month</h4>
      <div class="featured-stat">
        <%= @this_month_followers_count %>
      </div>
      <% month_followers_rate = @this_month_followers_count.to_f / @last_month_followers_count.to_f %>
      <div class="stat-percentage" style="color: <%= month_followers_rate > 1 ? "green" : "red" %>">
        <%= month_followers_rate >= 1 ? "\u25b2" : "\u25BC" %> <%= @last_month_followers_count.positive? ? (month_followers_rate * 100).round(2) : "infinity " %>%
      </div>
    </div>
    <div class="card">
      <h4>New comments this week</h4>
      <div class="featured-stat">
        <%= @this_week_comments_count %>
      </div>
      <% week_comments_rate = @this_week_comments_count.to_f / @last_week_comments_count.to_f %>
      <div class="stat-percentage" style="color: <%= week_comments_rate > 1 ? "green" : "red" %>">
        <%= week_comments_rate >= 1 ? "\u25b2" : "\u25BC" %> <%= @last_week_followers_count.positive? ? (week_comments_rate * 100).round(2) : "infinity " %>%
      </div>
    </div>
    <div class="card">
      <h4>New comments this month</h4>
      <div class="featured-stat">
        <%= @this_month_comments_count %>
      </div>
      <% month_comments_rate = @this_month_comments_count.to_f / @last_month_comments_count.to_f %>
      <div class="stat-percentage" style="color: <%= month_comments_rate > 1 ? "green" : "red" %>">
        <%= month_comments_rate >= 1 ? "\u25b2" : "\u25BC" %> <%= @last_month_comments_count.positive? ? (month_comments_rate * 100).round(2) : "infinity " %>%
      </div>
    </div>
  </div>
  <div class="graphs">
    <div class="card">
      <h2>Reactions Summary ❤🦄🔖</h2>
      <div class="charts-container">
        <canvas
          id="reactionsChart"
          data-labels="<%= @this_week_reactions.formatted_dates %>"
          data-total-count="<%= @this_week_reactions.total_per_day %>"
          data-total-likes="<%= @this_week_reactions.total_by_type_per_day(type: "Reaction", category: "like") %>"
          data-total-unicorns="<%= @this_week_reactions.total_by_type_per_day(type: "Reaction", category: "unicorn") %>"
          data-total-readinglist="<%= @this_week_reactions.total_by_type_per_day(type: "Reaction", category: "readinglist") %>">
        </canvas>
      </div>
    <%= javascript_pack_tag "proCharts", defer: true %>
  </div>
  <div class="card">
    <h2>Comments Summary 💬</h2>
    <div class="charts-container">
      <canvas
        id="commentsChart"
        data-labels="<%= @this_week_comments.formatted_dates %>"
        data-total-count="<%= @this_week_comments.total_per_day %>">
      </canvas>
    </div>
  </div>
  </div>
  <h2>Activity</h2>
  <h3>People who recently reacted ❤🦄🔖 to your content:</h3>
  <div class="recent-reactors-container">
    <% @reactors.each do |user| %>
      <div class="single-article">
        <a href="<%= user.path %>" class="block-link">
          <h2>
            <img alt="<%= user.username %> profile image" src="<%= ProfileImage.new(user).get(60) %>" />
            <%= user.name %>
            <span class="dashboard-username">@<%= user.username %></span>
          </h2>
        </a>
      </div>
    <% end %>
  </div>
</div>