Rails 애플리케이션으로 Cal-Heatmap 표시

Cal-Heatmap GiitHub의 초록색이 편해 보이기 때문에 연타에서 필기를 사용해 보았습니다.

지난 반년 동안의 연습 기록에 착색을 했어요.

>에 heatmap 태그 추가

표시하려는]erb에 다음 탭을 추가합니다.id는 임의
index.heml.erb

<div id="heatmap"></div>

하트맵의 초기화, 응용된javascript 쓰기

html.erb 또는 js 파일에서CalHeatMap의 생성 및 초기화에 대해 설명합니다.
각 옵션의 상세한 상황은 공식 문서를 참조하세요.
요점.

itemSelector와div의 id가 일치

데이터에서 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를 추가로 되돌려줍니다.
하트맵이 받아들인 데이터 형식은timepoint와 값의 해시이기 때문에DateTime의 변수를 입력하십시오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

총결산

하트맵의 데이터 형식에 따라 json을 되돌려주면 GiitHub 스타일의 달력을 간단하게 표시할 수 있습니다.
다만, 달 표시를 하면 달 사이에 틈이 생겨서 item이 없는 칸의 색을 바꾸려면 기존 옵션(legendColors)은 상상할 수 없기 때문에 css를 직접 다시 정의했습니다.(향후 개선 기대)
응용하면 곳곳에서 축적된 데이터를 볼 수 있다.