merge 了用户状态图 from rubychina https://ruby-china.org/topics/29704

app/assets/javascripts/app.coffee

@@ -30,6 +30,8 @@
 #= require i18n
 #= require i18n.js
 #= require i18n/translations
+#= require cal-heatmap.min
+#= require d3.min
 #= require_self
 
 AppView = Backbone.View.extend

app/assets/stylesheets/cal-heatmap.scss

@@ -0,0 +1,143 @@
+.cal-heatmap-container {
+  display: block;
+}
+
+.cal-heatmap-container .graph
+{
+  font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
+}
+
+.cal-heatmap-container .graph-label
+{
+  fill: #999;
+  font-size: 10px
+}
+
+.cal-heatmap-container .graph, .cal-heatmap-container .graph-legend rect {
+  shape-rendering: crispedges
+}
+
+.cal-heatmap-container .graph-rect
+{
+  fill: #ededed
+}
+
+.cal-heatmap-container .graph-subdomain-group rect:hover
+{
+  stroke: #000;
+  stroke-width: 1px
+}
+
+.cal-heatmap-container .subdomain-text {
+  font-size: 8px;
+  fill: #999;
+  pointer-events: none
+}
+
+.cal-heatmap-container .hover_cursor:hover {
+  cursor: pointer
+}
+
+.cal-heatmap-container .qi {
+  background-color: #999;
+  fill: #999
+}
+
+/*
+Remove comment to apply this style to date with value equal to 0
+.q0
+{
+  background-color: #fff;
+  fill: #fff;
+  stroke: #ededed
+}
+*/
+
+.cal-heatmap-container .q1
+{
+  background-color: #dae289;
+  fill: #dae289
+}
+
+.cal-heatmap-container .q2
+{
+  background-color: #cedb9c;
+  fill: #9cc069
+}
+
+.cal-heatmap-container .q3
+{
+  background-color: #b5cf6b;
+  fill: #669d45
+}
+
+.cal-heatmap-container .q4
+{
+  background-color: #637939;
+  fill: #637939
+}
+
+.cal-heatmap-container .q5
+{
+  background-color: #3b6427;
+  fill: #3b6427
+}
+
+.cal-heatmap-container rect.highlight
+{
+  stroke: #aaa;
+  stroke-width: 1;
+}
+
+.cal-heatmap-container text.highlight
+{
+  fill: #aaa;
+}
+
+.cal-heatmap-container rect.now
+{
+  stroke: #D3DACF
+}
+
+.cal-heatmap-container text.now
+{
+  fill: red;
+  font-weight: 800
+}
+
+.cal-heatmap-container .domain-background {
+  fill: none;
+  shape-rendering: crispedges
+}
+
+.ch-tooltip {
+  padding: 10px;
+  background: #222;
+  color: #bbb;
+  font-size: 12px;
+  line-height: 1.4;
+  width: 140px;
+  position: absolute;
+  z-index: 99999;
+  text-align: center;
+  border-radius: 2px;
+  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+  display: none;
+  box-sizing: border-box;
+}
+
+.ch-tooltip::after{
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  content: "";
+  padding: 0;
+  display: block;
+  bottom: -6px;
+  left: 50%;
+  margin-left: -6px;
+    border-width: 6px 6px 0;
+    border-top-color: #222;
+}

app/assets/stylesheets/front.scss

@@ -5,6 +5,7 @@
  *= require pages
  *= require notes
  *= require search
+ *= require cal-heatmap
  *= require polls
  *= require_self
  */

app/assets/stylesheets/users.scss

@@ -222,3 +222,10 @@ table.node-topics {
     .desc { font-size:12px; color:#888; }
   }
 }
+
+.user-activity-graph {
+  //overflow-x: scroll;
+  text-align: center;
+  svg { margin: 0 auto;
+  }
+}

app/controllers/users_controller.rb

@@ -3,7 +3,7 @@
 class UsersController < ApplicationController
   before_action :require_user, only: [:block, :unblock, :auth_unbind, :follow, :unfollow]
   before_action :find_user, only: [:show, :topics, :replies, :favorites, :notes,
-                                   :block, :unblock, :blocked,
+                                   :block, :unblock, :blocked, :calendar,
                                    :follow, :unfollow, :followers, :following]
 
   def index
@@ -30,6 +30,11 @@ def replies
     set_seo_meta("#{@user.login} 的回复")
   end
 
+  def calendar
+    render json: @user.calendar_data
+  end
+
+
   def favorites
     @topic_ids = @user.favorite_topic_ids.reverse.paginate(page: params[:page], per_page: 40)
     @topics = Topic.where(:_id.in => @topic_ids).fields_for_list

app/models/user.rb

@@ -572,4 +572,24 @@ def type_order
   def to_param
     login
   end
+
+  def calendar_data
+    user = self
+    Rails.cache.fetch(["user", self.id, 'calendar_data', Date.today, 'by-months']) do
+      date_from = 12.months.ago.beginning_of_month.to_date
+      dates = (date_from..Date.today).to_a
+
+
+
+      replies = user.replies.where(:created_at.gte => date_from).group_by { |d| d.created_at.strftime("%Y-%m-%d")}
+      first_date = Date.parse(replies.keys.min)
+      date_replies_mapping = {}
+      (first_date..Date.today).map do |n_date|
+        day = n_date.strftime("%Y-%m-%d")
+        date_replies_mapping[day.to_time.to_i.to_s] = replies[day] ? replies[day].size : 0
+      end
+      date_replies_mapping
+    end
+  end
+
 end

app/views/users/_info.html.erb

@@ -1,75 +1,106 @@
+<script src="//ruby-china-files.b0.upaiyun.com/assets/d3.min.js" type="text/javascript"></script>
+<script src="//ruby-china-files.b0.upaiyun.com/assets/cal-heatmap.min.js" type="text/javascript"></script>
+
 <div class="panel panel-default userinfo">
-    <div class="panel-body vcard clearfix">
-        <ul class="list-group">
+  <ul class="list-group vcard">
 
-            <% if !@user.company.blank? %>
-                <li class="adr list-group-item">
-                    <label><%= t("users.company")%>:</label>
-                    <span class="org"><%= @user.company %></span>
-                </li>
-            <% end %>
+    <% if !@user.company.blank? %>
+        <li class="adr list-group-item">
+          <label><%= t("users.company") %>:</label>
+          <span class="org"><%= @user.company %></span>
+        </li>
+    <% end %>
 
-            <% if !@user.email.blank? && @user.email_public %>
-                <li class="list-group-item">
-                    <label>Email:</label>
-                    <span><%= auto_link @user.email %></span>
-                </li>
-            <% end %>
+    <% if !@user.email.blank? && @user.email_public %>
+        <li class="list-group-item">
+          <label>Email:</label>
+          <span><%= auto_link @user.email %></span>
+        </li>
+    <% end %>
 
-            <% if !@user.twitter.blank? %>
-                <li class="list-group-item">
-                    <label><%= t("users.twitter")%>:</label>
-                    <span><%= link_to "@#{@user.twitter}", @user.twitter_url, class: "twitter", rel: "nofollow" %></span>
-                </li>
-            <% end %>
+    <% if !@user.twitter.blank? %>
+        <li class="list-group-item">
+          <label><%= t("users.twitter") %>:</label>
+          <span><%= link_to "@#{@user.twitter}", @user.twitter_url, class: "twitter", rel: "nofollow" %></span>
+        </li>
+    <% end %>
 
-            <% if !@user.website.blank? %>
-                <li class="list-group-item">
-                    <label><%= t("users.personal_website")%>:</label>
-                    <span><%= render_user_personal_website(@user)%></span>
-                </li>
-            <% end %>
+    <% if !@user.website.blank? %>
+        <li class="list-group-item">
+          <label><%= t("users.personal_website") %>:</label>
+          <span><%= render_user_personal_website(@user) %></span>
+        </li>
+    <% end %>
 
-            <% if !@user.tagline.blank? %>
-                <li class="list-group-item">
-                    <label><%= t("users.signature")%>:</label>
-                    <span><%= render_user_tagline(@user) %></span>
-                </li>
-            <% end %>
+    <% if !@user.tagline.blank? %>
+        <li class="list-group-item">
+          <label><%= t("users.signature") %>:</label>
+          <span><%= render_user_tagline(@user) %></span>
+        </li>
+    <% end %>
 
-            <li class="list-group-item">
-                <label><%= t("users.score")%>:</label>
-                <span><%= @user.score %></span>
-            </li>
+    <li class="list-group-item">
+      <label><%= t("users.score") %>:</label>
+      <span><%= @user.score %></span>
+    </li>
 
-        </ul>
-    </div>
+  </ul>
+  <div class="panel-body">
+    <div id="cal-heatmap" class="user-activity-graph"></div>
+    <%
+      start_date = 12.months.ago.beginning_of_month
+    %>
+    <script type="text/javascript">
+      var cal = new CalHeatMap();
+      cal.init({
+        itemSelector: "#cal-heatmap",
+        animationDuration: 200,
+        domain: "month",
+        subDomain: 'day',
+        rowLimit: 7,
+        domainGutter: 0,
+        data: '<%= calendar_user_path(@user, format: 'json') %>',
+        start: new Date(<%= start_date.year %>, <%= start_date.month %>, <%= start_date.day %>),
+        legendHorizontalPosition: 'right',
+        legendColors: ["#E2FBAE", "#01840E"],
+        // subDomainTextFormat: "%d",
+        domainLabelFormat: "%b",
+        legend: [1, 5, 10, 15],
+        itemName: ['event', 'events'],
+        highlight: 'now',
+        label: {
+          position: 'top'
+        },
+        displayLegend: true
+      });
+    </script>
+  </div>
 </div>
 
 
 <% cache([@user, "user-skill"]) do %>
-<% if !@user.skills.blank? %>
+    <% if !@user.skills.blank? %>
 
-<div class="panel panel-default user-skills">
-    <div class="panel-heading">个人技能</div>
-    <div class="panel-body">
-        <ul class="nav nav-pills" role="tablist">
-            <% @user.skills.each do |skill,count| %>
-            <li><span class="label label-info label-skill"><%=skill%></span></li>
-            <% end %>
-        </ul>
-    </div>
-</div>
+        <div class="panel panel-default user-skills">
+          <div class="panel-heading">个人技能</div>
+          <div class="panel-body">
+            <ul class="nav nav-pills" role="tablist">
+              <% @user.skills.each do |skill, count| %>
+                  <li><span class="label label-info label-skill"><%= skill %></span></li>
+              <% end %>
+            </ul>
+          </div>
+        </div>
+    <% end %>
 <% end %>
-<%end%>
 
 <% cache([@user, "bio-markdown"]) do %>
     <% if !@user.bio.blank? %>
         <div class="panel panel-default bio">
-            <div class="panel-heading">个人介绍</div>
-            <div class="panel-body markdown">
-                <%= markdown(@user.bio) %>
-            </div>
+          <div class="panel-heading">个人介绍</div>
+          <div class="panel-body markdown">
+            <%= markdown(@user.bio) %>
+          </div>
         </div>
     <% end %>
 <% end %>

config/routes.rb

@@ -151,6 +151,7 @@
       post :unfollow
       get :followers
       get :following
+      get :calendar
     end
   end