Fix charts and add nav buttons (#2044)

* Add navigation links for pro dashboard

* Move styles to stylesheet

* Use the correct dates for charts

app/assets/stylesheets/dashboard.scss

@@ -14,6 +14,10 @@
     @media screen and ( min-width: 600px ){
       text-align: left;
     }
+    &.pro-header{
+      text-align: center;
+      font-size: 3em;
+    }
     a{
       padding: 4px 20px;
       border-radius: 100px;
@@ -28,6 +32,10 @@
         background: $dark-gray;
         color:white;
       }
+      &.back-nav{
+        position: absolute;
+        left: 2vw;
+      }
     }
   }
   .actions{
@@ -324,3 +332,12 @@
     }
   }
 }
+.charts-container {
+  width: 500px;
+  height: 250px;
+  margin: 0 auto;
+}
+.recent-reactors-container {
+  height: 400px;
+  overflow: scroll;
+}

app/decorators/chart_decorator.rb

@@ -2,21 +2,22 @@ class ChartDecorator < Draper::CollectionDecorator
   def total_by_type_per_day(options)
     case options[:type]
     when "Comment"
-      object.group_by(&:created_at).transform_values do |v|
+      object.group_by { |e| e.created_at.beginning_of_day }.transform_values do |v|
         v.select { |comment| comment.commentable_id == options[:article_id] }.length
       end.values # will be an array of integers: [1,2,3,4]
     when "Reaction"
-      object.group_by(&:created_at).transform_values do |v|
+      object.group_by { |e| e.created_at.beginning_of_day }.transform_values do |v|
         v.select { |reaction| reaction.category == options[:category] }.length
       end.values # will be an array of integers: [1,2,3,4]
     end
   end
 
   def total_per_day
-    object.group_by(&:created_at).transform_values(&:length).values
+    object.group_by { |e| e.created_at.beginning_of_day }.transform_values(&:length).values
   end
 
   def formatted_dates
-    object.sort_by(&:created_at).group_by(&:created_at).transform_keys { |k| k.strftime("%a, %m/%d") }.keys
+    object.sort_by(&:created_at).group_by { |e| e.created_at.beginning_of_day }.
+      transform_keys { |k| k.strftime("%a, %m/%d") }.keys
   end
 end

app/views/dashboards/pro.html.erb

@@ -1,5 +1,6 @@
 <div class="dashboard-container" id="user-dashboard">
-  <h1 style="text-align: center;font-size:3em">DevRel Pro 💪</h1>
+  <h1><a href="/dashboard" class="back-nav">Back to Dashboard</a></h1>
+  <h1 class="pro-header">DevRel Pro 💪</h1>
   <p>Welcome to the DevRel pro dashboard. Where DevRel professionals can make data-driven decisions about the developer ecosystem.</p>
   <p>This dashboard will highlight deep insights especially relevant to dev rel.</p>
   <hr />
@@ -11,7 +12,7 @@
       <li>
         <%= @this_month_reactions_count %> reactions this month (<%= @last_month_reactions_count.positive? ? ((@this_month_reactions_count.to_f / @last_month_reactions_count.to_f) * 100).round(2) : "infinity " %>% of previous month)
       </li>
-        <div style="width: 500px; height: 250px; margin: 0 auto;">
+        <div class="charts-container">
           <canvas
             id="reactionsChart"
             data-labels="<%= @this_week_reactions.formatted_dates %>"
@@ -40,7 +41,7 @@
       <li>
         <%= @this_month_comments_count %> new comments this month (<%= @last_month_comments_count.positive? ? ((@this_month_comments_count.to_f / @last_month_comments_count.to_f) * 100).round(2) : "infinity " %>% of previous month)
       </li>
-        <div style="width: 500px; height: 250px; margin: 0 auto;">
+        <div class="charts-container">
           <canvas
             id="commentsChart"
             data-labels="<%= @this_week_comments.formatted_dates %>"
@@ -50,7 +51,7 @@
     </ul>
   <h2>Activity</h2>
   <h3>People who recently reacted (❤🦄🔖) to your content:</h3>
-  <div style="height: 400px; overflow: scroll;">
+  <div class="recent-reactors-container">
     <% @reactors.each do |user| %>
       <div class="single-article">
         <a href="<%= user.path %>" class="block-link">

app/views/dashboards/show.html.erb

@@ -19,11 +19,17 @@
     <h1>
       <a href="/dashboard" class="<%= "active" if params[:which].blank? %>">Personal</a>
       <a href="/dashboard/organization" class="<%= "active" if params[:which] == "organization" %>"><%= @user.organization.name %> (<%= @user.organization.articles.size %>)</a>
+      <% if @user.has_role? :pro %>
+        <a href="/dashboard/pro">Pro Analytics</a>
+      <% end %>
     </h1>
   <% elsif @user.org_admin && @user.organization && (params[:which] == "organization_user_followers" || params[:which] == "user_followers") %>
     <h1>
       <a href="/dashboard/user_followers" class="<%= "active" if params[:which] == "user_followers" %>">Personal</a>
       <a href="/dashboard/organization_user_followers" class="<%= "active" if params[:which] == "organization_user_followers" %>"><%= @user.organization.name %> (<%= @user.organization.followers_count %>)</a>
+      <% if @user.has_role? :pro %>
+        <a href="/pro">Pro Analytics</a>
+      <% end %>
     </h1>
   <% end %>
   <% if @user.org_admin && @user.organization && params[:which] == "organization" %>