Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

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

volpe28v
Web系のお仕事をさせていただいております。 ruby, rails, node, vue, knockout
https://volpe.hatenablog.com/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした