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

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

過去半年分の練習記録した日に色がつく

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 を再定義したりした。(今後の改善に期待)

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