Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@volpe28v

Railsアプリで Cal-Heatmap を表示してみる

Cal-Heatmap が GitHub の緑のっぽくて便利そうだったのでコタれんで使ってみたメモ。

コタれんでheatmap.png
過去半年分の練習記録した日に色がつく

html に heatmap のタグを追加する

表示したい html.erb に以下のタグを追加する。 id は任意

index.heml.erb
<div id="heatmap"></div>

heatmap の初期化、適用の javascript を書く

html.erb または js ファイルに CalHeatMap の生成と初期化を記述。
各オプションの詳細は公式ドキュメント参照する。

以下はポイント

  • itemSelector は div の id と合わせる
  • data に Rails で定義する API を記述する
  • rails から json で返したデータをパースするメソッドを定義して afterLoadData に設定する(eval しないと json として読み込めなかったので)
index.heml.erb
  var startDate = new Date();
  startDate.setMonth(startDate.getMonth() - 5);

  var parser = function(data) {
    return eval("(" + data + ")");
  };

  var cal = new CalHeatMap();
  cal.init({
    itemSelector: "#heatmap",
    data: "/api/comments?user_id=<%= @user.id %>&start={{d:start}}&stop={{d:end}}",
    afterLoadData: parser,
    cellSize: 7,
    domain: "month",
    subDomain: "day",
    range: 6,
    tooltip: true,
    start: startDate,
    legendColors: ["white","green"],
    domainLabelFormat: %b",
    legend: [1,2,3,4]
   });

Railsに json を返すAPIを追加する

grape を利用して rails に json を返すAPIを追加する。
heatmap が受け付けるデータフォーマットは timepoint と値のハッシュなので、DateTimeの変数を to_i した値をハッシュキーにする。

tunes_api.rb
module Api
  class TunesApi < Grape::API
    resource :comments do
      get do
        user = User.find_by_id(params[:user_id])
        from = params[:start]
        to = params[:stop]

        comments = user.comments.where(created_at: from..to)
        comments.map{|c| c.created_at.to_i}.inject(Hash.new(0)){|h, tm| h[tm] += 1; h}.to_json
      end
    end
  end
end

まとめ

heatmap のデータフォーマットに合うように json を返してしまえば簡単に GitHub風のカレンダーを表示できた。
ただ、月表示をすると月同士の隙間ができてしまうのと、item が無いセルの色を変えようとすると既存のオプション(legendColors)では思うようにいかなかったので、直接 css を再定義したりした。(今後の改善に期待)

応用すればいろんなところで蓄積データの見える化に使えそう。

17
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
17
Help us understand the problem. What is going on with this article?